Karteireiter

------------------------
Bemerkungen zur Dart-App
------------------------

In den PHP-Files "erstelleRekorde.php" und "speichereRekorde.php" wird eine Funktion "hole_datenbank" ausgeführt.
Die Funktion ist in der geschützten Datei functions.inc.php enthalten, welche ich wegen den Datenbank-Passwörtern 
natürlich nicht offenlegen kann. Diese Funktion erstellt ein einfach ein PDO-Statement, mit dem dann die SQL-Queries
ausgeführt werden können. 
Eine Anleitung wie PDO funktioniert findet ihr hier: https://php.net/manual/de/pdo.connections.php

Zwei Datenbank-Tabellen werden für die App benötigt. Nachfolgend sind sie hier aufgeführt, mit den entsprechenden Datentypen

Tabelle "DartShots501":
-----------------------
id (smallint(5))
name (varchar255)
rounds (smallint(5))
shots (smallint(6))
avg (float)
datum (timestamp)

Tabelle "DartBestShot":
-----------------------
id (smallint(6))
name (varchar(255))
rekord (smallint(6))
dart1 (smallint(5))
dart2 (smallint(5))
dart3 (smallint(5))
datum (timestamp)

// um Info-Feld in die Display-Mitte zu setzen
function zeigeInfo(inhalt) {
	$("#transparent").show();
	$("#info").html(inhalt).show();
	hoeheNeu = $("#info").height();
	displayHeight = $(window).height();
	topNeu = ($(window).height() - hoeheNeu)/2 - 30;
	$("#info").css( {"top":topNeu });
}

// Vollbild für die versch. Browser-Typen
function VollbildStarten(id) {
	var elemID = document.getElementById(id);
	var elem = document.documentElement;
	if(elem.requestFullscreen) {
		// neuste Browser (Bsp. Edge)
		// Element wird auf Vollbild vergrössert!
		elem.requestFullscreen();
	}
	else if(elemID.msRequestFullscreen) {
		// Internet Explorer
		// Element wird nicht zentriert oder vergrössert
		elemID.msRequestFullscreen();	
	}
	else if(elem.mozRequestFullScreen) {
		// Firefox
		elem.mozRequestFullScreen();
	}
	else if(elem.webkitRequestFullscreen) {
		// Webkit Browser (Google & Opera)
		// Element wird horizonal und vertikal zentriert, nicht vergrössert
		elem.webkitRequestFullscreen();
	}	
}

// Vollbild schliessen
function VollbildBeenden(id) {
	var elemID = document.getElementById(id);
	if(document.exitFullscreen) {
		document.exitFullscreen();	
	}
	else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
	else if(document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	}
	else if(document.webkitExitFullscreen) {
		document.webkitExitFullscreen();
	}
}

// Elastisches Scrollen deaktivieren
function scrollDeaktivieren() {
	$(document).bind("touchmove", function(event) {
		event.preventDefault();
	});
}

// Elastisches Scrollen wieder aktivieren
function scrollAktivieren() {
	$(document).bind("touchmove", function(event) {
		return true;
	});
}

$(document).ready( function() {
	
	$("#fullscreen").click( function() {
		if (!document.Fullscreen && !document.mozFullScreen && !document.webkitFullScreen && !document.msRequestFullscreen) {
			VollbildStarten("spiel");
			$("#fullscreen").attr( {"src":"img/fullscreen_beenden.png","alt":"Vollbild-Modus beenden"} );
		}
		else {
			VollbildBeenden("spiel");
			$("#fullscreen").attr( {"src":"img/fullscreen.png","alt":"Vollbild-Modus starten"} );
		}
	});
	
	$("#menuBtn").click(function(e) {
		$("nav").slideToggle(500);
		e.stopImmediatePropagation();
    });
	
	$("#neustart").click(function() {
		$("nav").hide();
		var code = "<p>Möchtest du das Spiel mit den aktuellen Spielern neustarten?<br>Achtung: bisheriger Spielstand geht verloren!</p> ";
		code += "<p><input type='button' value=' ja ' onclick='javascript:window.location.reload(false)'> ";
		code += "<input type='button' value='nein' onclick='javascript:$(\"#info\").hide();$(\"#transparent\").hide()'></p>";
		zeigeInfo(code);
        //window.location.reload(false);	
    });
	
	$("#back").click(function() {
		$("nav").hide();
		var code = "<p>Möchtest du das aktuelle Spiel verlassen und zurück zur User-Eingabe gehen?<br>Achtung: bisheriger Spielstand geht verloren!</p> ";
		code += "<p><input type='button' value=' ja ' onclick='javascript:window.location.href = \"index.html\"'> ";
		code += "<input type='button' value='nein' onclick='javascript:$(\"#info\").hide();$(\"#transparent\").hide()'></p>";
		zeigeInfo(code);	
    });
});

<!DOCTYPE html>
<html>
<head>
	<title>Dart-Rechner</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="styles.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="appfunc.js"></script>
	<script src="dartfunctions.js"></script>
    <script>
	function setOverrideBackButton() {
		document.addEventListener("backbutton", backButtonTap, true);
	}
	
	function backButtonTap() {
		// nichts tun bei Backbutton!
	}
	
	
	$(document).ready(function() {
		// Spielerdaten aus Querystring holen
		holeAuswahl(location.search);
		
		// wenn keine Parameter in URL vorhanden -> redirect zu index-Seite
		url = window.location.href;
        if(url.indexOf("&")==-1){
			window.location.href = "index.html";	
		}
		
		// Back-Button abfangen (nur Windows Phone)
		document.addEventListener("deviceready", setOverrideBackButton, false);
		
		// wenn Iphone wird Fullscreen-Icon ausgeblendet (da kein Fullscreen Modus möglich bei Apple)
		if (navigator.userAgent.match(/iPhone|iPod|iPad/i)) {
			$("#fullscreen").hide();
		}
		
		// Padding-bottom anpassen gemäss Höhe von Übersichts-Balken
			uebersichtHeight=$("#uebersicht").height();	
			$("#eingabe").css("padding-bottom",uebersichtHeight);
		
    });
	
	// Back-Button abfangen
	/*window.onbeforeunload = function() {
		return "Achtung! Daten gehen verloren, wenn Sie die Seite verlassen!";
	};*/
	
	// Info wegklicken
	$(document).mouseup(function (e){
    	var container = $("#info");
		var transparent = $("#transparent");

if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    	{
        	container.hide();
			transparent.hide();
    	}
	});
	</script>
</head>
<body>
<div id="spiel">
	<header>
		<h1>Dart-Rechner</h1>
        <img src="img/fullscreen.png" id="fullscreen" alt="Vollbild" title="Vollbild-Modus starten">
        <img src="img/menu_button.png" id="menuBtn" alt="Menu">
    </header>
    <section id="eingabe">
      <nav>
        <ul>
            <li id="neustart">Neustart</li>
            <li id="back">zurück</li>
            <li id="logo">
            	<a href="https://www.fischer-programmierung.ch" target="_blank"><img src="img/logo.png" alt="Fischer Programmierung - WebDesign, Onlineshop, Intranet, VBA-Entwicklung"></a>
            </li>
        </ul>
      </nav>
      <div id="zahlen">
		<input type="button" value="1" class="einfach" onclick="rechne(1)" />
		<input type="button" value="2 x 1" class="doppelt" onclick="rechne(2)" />
		<input type="button" value="3 x 1" class="dreifach" onclick="rechne(3)" />
        <br />
        <input type="button" value="2" class="einfach" onclick="rechne(2)" />
		<input type="button" value="2 x 2" class="doppelt" onclick="rechne(4)" />
		<input type="button" value="3 x 2" class="dreifach" onclick="rechne(6)" />
        <br />
        <input type="button" value="3" class="einfach" onclick="rechne(3)" />
		<input type="button" value="2 x 3" class="doppelt" onclick="rechne(6)" />
		<input type="button" value="3 x 3" class="dreifach" onclick="rechne(9)" />
        <br />
        <input type="button" value="4" class="einfach" onclick="rechne(4)" />
		<input type="button" value="2 x 4" class="doppelt" onclick="rechne(8)" />
		<input type="button" value="3 x 4" class="dreifach" onclick="rechne(12)" />
        <br />
        <input type="button" value="5" class="einfach" onclick="rechne(5)" />
		<input type="button" value="2 x 5" class="doppelt" onclick="rechne(10)" />
		<input type="button" value="3 x 5" class="dreifach" onclick="rechne(15)" />
        <br />
        <input type="button" value="6" class="einfach" onclick="rechne(6)" />
		<input type="button" value="2 x 6" class="doppelt" onclick="rechne(12)" />
		<input type="button" value="3 x 6" class="dreifach" onclick="rechne(18)" />
        <br />
        <input type="button" value="7" class="einfach" onclick="rechne(7)" />
		<input type="button" value="2 x 7" class="doppelt" onclick="rechne(14)" />
		<input type="button" value="3 x 7" class="dreifach" onclick="rechne(21)" />
        <br />
        <input type="button" value="8" class="einfach" onclick="rechne(8)" />
		<input type="button" value="2 x 8" class="doppelt" onclick="rechne(16)" />
		<input type="button" value="3 x 8" class="dreifach" onclick="rechne(24)" />
        <br />
        <input type="button" value="9" class="einfach" onclick="rechne(9)" />
		<input type="button" value="2 x 9" class="doppelt" onclick="rechne(18)" />
		<input type="button" value="3 x 9" class="dreifach" onclick="rechne(27)" />
        <br />
        <input type="button" value="10" class="einfach" onclick="rechne(10)" />
		<input type="button" value="2 x 10" class="doppelt" onclick="rechne(20)" />
		<input type="button" value="3 x 10" class="dreifach" onclick="rechne(30)" />
        <br />
        <input type="button" value="11" class="einfach" onclick="rechne(11)" />
		<input type="button" value="2 x 11" class="doppelt" onclick="rechne(22)" />
		<input type="button" value="3 x 11" class="dreifach" onclick="rechne(33)" />
        <br />
        <input type="button" value="12" class="einfach" onclick="rechne(12)" />
		<input type="button" value="2 x 12" class="doppelt" onclick="rechne(24)" />
		<input type="button" value="3 x 12" class="dreifach" onclick="rechne(36)" />
        <br />
        <input type="button" value="13" class="einfach" onclick="rechne(13)" />
		<input type="button" value="2 x 13" class="doppelt" onclick="rechne(26)" />
		<input type="button" value="3 x 13" class="dreifach" onclick="rechne(39)" />
        <br />
        <input type="button" value="14" class="einfach" onclick="rechne(14)" />
		<input type="button" value="2 x 14" class="doppelt" onclick="rechne(28)" />
		<input type="button" value="3 x 14" class="dreifach" onclick="rechne(42)" />
        <br />
        <input type="button" value="15" class="einfach" onclick="rechne(15)" />
		<input type="button" value="2 x 15" class="doppelt" onclick="rechne(30)" />
		<input type="button" value="3 x 15" class="dreifach" onclick="rechne(45)" />
        <br />
        <input type="button" value="16" class="einfach" onclick="rechne(16)" />
		<input type="button" value="2 x 16" class="doppelt" onclick="rechne(32)" />
		<input type="button" value="3 x 16" class="dreifach" onclick="rechne(48)" />
        <br />
        <input type="button" value="17" class="einfach" onclick="rechne(17)" />
		<input type="button" value="2 x 17" class="doppelt" onclick="rechne(34)" />
		<input type="button" value="3 x 17" class="dreifach" onclick="rechne(51)" />
        <br />
        <input type="button" value="18" class="einfach" onclick="rechne(18)" />
		<input type="button" value="2 x 18" class="doppelt" onclick="rechne(36)" />
		<input type="button" value="3 x 18" class="dreifach" onclick="rechne(54)" />
        <br />
        <input type="button" value="19" class="einfach" onclick="rechne(19)" />
		<input type="button" value="2 x 19" class="doppelt" onclick="rechne(38)" />
		<input type="button" value="3 x 19" class="dreifach" onclick="rechne(57)" />
        <br />
        <input type="button" value="20" class="einfach" onclick="rechne(20)" />
		<input type="button" value="2 x 20" class="doppelt" onclick="rechne(40)" />
		<input type="button" value="3 x 20" class="dreifach" onclick="rechne(60)" />
      </div>
      <div id="spez">
        <input type="button" class="bull" value="25" onclick="rechne(25)" />
        <input type="button" class="bullseye" value="50" onclick="rechne(50)" />
        <input type="button" class="zero" value="0" onclick="rechne(0)" />
      </div>
    </section>

anzahlDarts = 0;
wurfNr = 0;
anzSpieler = 0;
aktuellerSp = 1;
uebrige = 3;
runde = 1;
uebrigeSpieler = 0;
variante = 501; // Standart-Wert 501
platzierung = 1;
pw="";

// Wurfspeicher (pro Spieler separater Array -> mehrdimensional)
speicher = new Array();

function holeAuswahl(querystring){
	str = decodeURI(querystring.slice(1));
	paare = str.split("&");
	paarAnzahl = paare[0].split("=");
	anzSpieler = paarAnzahl[1];
	paarUser1 = paare[1].split("=");
	user1 = paarUser1[1];
	paarUser2 = paare[2].split("=");
	user2 = paarUser2[1];
	paarUser3 = paare[3].split("=");
	user3 = paarUser3[1];
	paarUser4 = paare[4].split("=");
	user4 = paarUser4[1];
	paarUser5 = paare[5].split("=");
	user5 = paarUser5[1];
	paarUser6 = paare[6].split("=");
	user6 = paarUser6[1];
	paarUser7 = paare[7].split("=");
	user7 = paarUser7[1];
	paarUser8 = paare[8].split("=");
	user8 = paarUser8[1];
	paarUser9 = paare[9].split("=");
	user9 = paarUser9[1];
	paarVariante = paare[10].split("=");
	variante = paarVariante[1];
	paarPW = paare[11].split("=");
	pw = paarPW[1];
	
	document.getElementById("anz_spieler").value = anzSpieler;
	document.getElementById("variante").value = variante;
	
	document.getElementById("gesamt_spieler1").value = variante;	
	document.getElementById("gesamt_spieler2").value = variante;	
	document.getElementById("gesamt_spieler3").value = variante;	
	document.getElementById("gesamt_spieler4").value = variante;
	document.getElementById("gesamt_spieler5").value = variante;
	document.getElementById("gesamt_spieler6").value = variante;
	document.getElementById("gesamt_spieler7").value = variante;
	document.getElementById("gesamt_spieler8").value = variante;
	document.getElementById("gesamt_spieler9").value = variante;
	
	document.getElementById("nameUser1").innerHTML = user1;
	document.getElementById("spieler1").value = user1;
	document.getElementById("nameUser2").innerHTML = user2;		
	document.getElementById("spieler2").value = user2;
	document.getElementById("nameUser3").innerHTML = user3;
	document.getElementById("spieler3").value = user3;
	document.getElementById("nameUser4").innerHTML = user4;
	document.getElementById("spieler4").value = user4;
	document.getElementById("nameUser5").innerHTML = user5;
	document.getElementById("spieler5").value = user5;
	document.getElementById("nameUser6").innerHTML = user6;	
	document.getElementById("spieler6").value = user6;
	document.getElementById("nameUser7").innerHTML = user7;	
	document.getElementById("spieler7").value = user7;
	document.getElementById("nameUser8").innerHTML = user8;	
	document.getElementById("spieler8").value = user8;
	document.getElementById("nameUser9").innerHTML = user9;	
	document.getElementById("spieler9").value = user9;
	
	/* Spieler einblenden und Speicher-Array erstellen */
	for(sp=0;sp<anzSpieler;sp++) {
		$("#uebersicht span").eq(sp).css("display","inline-block");
		speicher[sp] = new Array();
	}
	
	/* Pfeile für Spieler 1 visible */
	document.getElementById("user1pfeil1").style.visibility = "visible";
	document.getElementById("user1pfeil2").style.visibility = "visible";
	document.getElementById("user1pfeil3").style.visibility = "visible";
	
	
	// Start mit Runde 1
	document.getElementById("runde").innerHTML = "r " + runde;
	
	uebrigeSpieler = anzSpieler;
}

// Audio-Ausgabe
function soundAusgabe(zahl) {
	var audio = new Audio();
	if (zahl>=100) {
		if (zahl%5==0) {
			audio.src = "../soundfiles/" + zahl + ".m4a";
			audio.play();	
		}
		else {
			audio.src = "../soundfiles/wow.m4a";
			audio.play();	
		}
	}	
}

// Statistiken berechnen
function rechneStats(player) {
	erzieltePunkte = 0;
	average = 0;
	besterDurchgang = 0;
	anzWuerfe = speicher[player-1].length;
	anzRunden = Math.ceil(anzWuerfe/3); // Ceil runden nur auf nächste Ganzzahl auf, wenn Übergabewert nicht Integer ist
	
	// erzielte Punkte
	for(w=0;w<anzWuerfe;w++) {
		erzieltePunkte += speicher[player-1][w];
	}
	
	// Durchschnitt berechnen (nur wenn Würfe nicht gleich 0)
	if(anzWuerfe!=0){
		average = Math.round(erzieltePunkte/anzWuerfe*3*100) / 100; // Average pro Durchgang (nicht Wurf), darum mal 3
	}
	
	// Bester Durchgang berechnen (erst ab 3 Wuerfen)...
	// ... und die 3 Darts in versteckten Felder einfügen
	if(anzWuerfe>=3){
		for(i=2;i<anzWuerfe;i=i+3) {
			dart1 = i-2;
			dart2 = i-1;
			dart3 = i;
			durchgang = speicher[player-1][dart1]+speicher[player-1][dart2]+speicher[player-1][dart3];
			if(durchgang>besterDurchgang){
				besterDurchgang = durchgang;
				document.getElementById("dart1_sp"+player).value = speicher[player-1][dart1];
				document.getElementById("dart2_sp"+player).value = speicher[player-1][dart2];
				document.getElementById("dart3_sp"+player).value = speicher[player-1][dart3];
			}
		}
	}
	
	// in verstecktem Statistik-Formular ausgeben
	document.getElementById("total_sp"+player).value = variante-erzieltePunkte;
	document.getElementById("besterWurf_sp"+player).value = besterDurchgang;
	document.getElementById("wuerfe_sp" + player).value = anzWuerfe;
	document.getElementById("avg_sp" + player).value = average;
	document.getElementById("rounds_sp" + player).value = anzRunden;	
}

// Pfeile von aktuellem Spieler verstecken
		document.getElementById("user" + aktuellerSp + "pfeil1").style.visibility = "hidden";
		document.getElementById("user" + aktuellerSp + "pfeil2").style.visibility = "hidden";
		document.getElementById("user" + aktuellerSp + "pfeil3").style.visibility = "hidden";
		
		if (aktuellerSp == anzSpieler) { // wenn letzter Spieler dran war -> wieder Spieler 1
			aktuellerSp = 1;
			runde++;
			document.getElementById("runde").innerHTML = "r " + runde;
		}
		else {
			aktuellerSp++;
		}	
		
		// Pfeile von neuem Spieler sichtbar machen
		document.getElementById("user" + aktuellerSp + "pfeil1").style.visibility = "visible";
		document.getElementById("user" + aktuellerSp + "pfeil2").style.visibility = "visible";
		document.getElementById("user" + aktuellerSp + "pfeil3").style.visibility = "visible";
		uebrige = 3;
		
		
		if (document.getElementById("gesamt_spieler" + aktuellerSp).value == 0) {
			changePlayer(); // nochmals wechseln wenn aktuellerSp schon auf 0
		}
		else {
			document.getElementById("rounds_sp" + aktuellerSp).value = runde;		
		}
		
}

function korrektur() {
	if (uebrigeSpieler == 0) { return; } // wenn Spiel-Ende keine Korrektur mehr möglich
	if (aktuellerSp == 1 && document.getElementById("gesamt_spieler1").value >= variante) { return; }  // ... und wenn Gesamt von Spieler 1 gleich Variante (301 oder 501)

if (uebrige == 3) {
		// von aktuellem Spieler Pfeile wieder ausblenden
		document.getElementById("user" + aktuellerSp + "pfeil1").style.visibility = "hidden";
		document.getElementById("user" + aktuellerSp + "pfeil2").style.visibility = "hidden";
		document.getElementById("user" + aktuellerSp + "pfeil3").style.visibility = "hidden";
		
		// vorheriger Spieler wieder aktivieren, Runde anpassen und 1 Pfeil anzeigen (noch 1 übrig)
		if (aktuellerSp == 1) {
			runde--;
			document.getElementById("runde").innerHTML = "r " + runde;	
			aktuellerSp = anzSpieler;
		}
		else {
			aktuellerSp--;
		}

if(document.getElementById("gesamt_spieler" + aktuellerSp).value == 0){
			uebrige == 3;
			korrektur();
		}
		else {
			playerIndex = aktuellerSp-1;
			uebrige = 1;
			document.getElementById("user" + aktuellerSp + "pfeil1").style.visibility = "visible";
			
			speicher[playerIndex].pop(); // letzter Wurf löschen aus Speicher
			laenge = speicher[playerIndex].length;
			document.getElementById("wurf1").value = speicher[playerIndex][laenge-2]; // 2.-letzter Wurf anzeigen
			document.getElementById("wurf2").value = speicher[playerIndex][laenge-1]; // letzter Wurf anzeigen
			document.getElementById("wurf3").value = "";

// Stats neuberechnen und Total korrigieren
			rechneStats(aktuellerSp);
			document.getElementById("gesamt_spieler" + aktuellerSp).value = document.getElementById("total_sp" + aktuellerSp).value;
		}
	}
	else {
		// Total korrigieren
		wertVorKor = parseInt(document.getElementById("gesamt_spieler" + aktuellerSp).value);
		dartNr = 3 - uebrige;
		wertNachKor = wertVorKor + parseInt(document.getElementById("wurf" + dartNr).value);
		document.getElementById("gesamt_spieler" + aktuellerSp).value = wertNachKor;
		document.getElementById("wurf" + dartNr).value = "";
		
		// Pfeile anpassen (und wieder +1)
		pfeilNr = uebrige +1;
		document.getElementById("user" + aktuellerSp + "pfeil" + pfeilNr).style.visibility = "visible";
		uebrige++;
		
		speicher[aktuellerSp-1].pop();	// Speicher anpassen
		rechneStats(aktuellerSp); 		// Statistik neu berechnen
	}
		
}

function zeigeStatistik() {
	var statsCode = "<div id='statistik' onclick='zeigeStatistik()' class='statsAktiv'>Statistik</div><div id='rekorde' onclick='zeigeRekorde()' class='statsInaktiv'>Rekorde</div>";
	for(sp=1;sp<=anzSpieler;sp++) {
		rechneStats(sp);
		statsCode += "<div class='spielerStats'><p><b>" + document.getElementById("nameUser" + sp).innerHTML + "</b></p>";
		statsCode += "Avg: " + document.getElementById("avg_sp" + sp).value + "<br>";
		statsCode += "Best: " + document.getElementById("besterWurf_sp" + sp).value + "<br>";
		statsCode += "Rounds: " + document.getElementById("rounds_sp" + sp).value + "<br>";
		statsCode += "Total: " + document.getElementById("total_sp" + sp).value + "<br>";
		statsCode += "</div>";
	}
	zeigeInfo(statsCode);
}

<?php
require_once 'functions.inc.php';

// globale Variablen
$variante = 0;
$nachricht = "";
$codeBestShot = ""; // Zwischenspeicher fuer HTML-Code der besten Wuerfe
$codeRounds = "";   // Zwischenspeicher fuer HTML-Code der besten Durchgaenge
$rekord = array();
$schuesse = array();

echo $codeBestShot;
echo $codeRounds;
?>

<!DOCTYPE html>
<html>
<head>
	<title>Dart-Rechner</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="author" content="chris fischer">
    <meta name="description" content="Nützlicher Dart-Rechner mit Statistik und Speicherung der Rekorde.">
    <meta name="keywords" content="Dart-Rechner, Dart Rechner, Dart">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="apple-touch-icon" href="img/homescreen.png">
    <style type="text/css">
		body{
			max-width: 600px;
			margin: 0 auto;
			font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;	
			text-align: center;
		}
		
		h1 {
			margin-top: 0px;
			font-size: 30px;
			font-weight: bolder;
			font-variant: small-caps;
			background-color:#DDD;
			border-top: 2px solid black;
			border-bottom: 2px solid black;	
		}
		
		#presentedBy {
			margin-top: 0px;
			margin-bottom: 30px;	
		}
		
		#presentedBy img {
			width: 250px;	
		}
		
		p {
			margin-top: 5px;
			margin-bottom: 5px;	
		}
		
		label {
			display:inline-block;
			text-align: left;
			width: 180px;
			font-size: 20px;	
		}
		
		select {
			width: 65px;
			font-size: 20px;
			margin-bottom: 20px;
			text-align: right;
			padding: 0px;
		}
		
		input[type="text"]{
			width: 155px;
			height: 25px;
			font-size: 20px;	
		}

label[for*="user"] {
			width:100px;	
		}
		
		label[for="user3"], label[for="user4"], label[for="user5"], label[for="user6"], label[for="user7"], label[for="user8"], label[for="user9"] {
			display: none;
		}
		
		input[name="user3"], input[name="user4"], input[name="user5"], input[name="user6"], input[name="user7"], input[name="user8"], input[name="user9"] {
			display: none;
		}	
		
		button[type="submit"] {
			border: none; 
			background-color: transparent;	
		}
		
		button[type="submit"]:hover {
			cursor: crosshair;	
		}
		
		/* Style-Angaben für Windows Phone (Lumia 825) */
		@media screen and (max-width: 320px) and (orientation: portrait), screen and (max-width: 480px) and (orientation: landscape) {
			/*h1 {
				margin-top: 0px;
				font-size: 25px;	
			}
			
			select {
				width: 70;
				font-size: 16px;	
			}
			label {
				width: 100px;
				font-size: 16px;	
			}
			label[for*="user"] {
				width: 100px;
				font-size: 16px;	
			}
			input[type="text"]{
				width: 120px;
				height: 25px;
				font-size: 16px;	
			}*/
		}
	</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
	$(document).ready(function() {
        inputArr = $("#spielerNamen input:text");
		labelArr = $("#spielerNamen label");
		
		var querystring = window.location.search;
		var pw = querystring.split("=");
		pw = pw[1];
		$("#pw").val(pw);
		
		$("#anzSpieler").change(function(e) {
            anzahl = parseInt($("#anzSpieler :selected").text());
			// zuerst alle ausblenden (inputs und label innerhalb div "spielerNamen"
			$("#anzSpielerInput").val(anzahl);
			inputArr.hide().removeAttr("required");
			labelArr.hide();
			
			// Inputfelder und Labels gemäss Anzahl Spieler einblenden
			// und Attribut required in Inputs setzen
			for(i=1;i<=anzahl;i++){
				inputArr.eq(i-1).show().attr("required","required");
				labelArr.eq(i-1).show();
			}
        });
    });
	</script>
</head>
<body>
	<header>
		<h1>Dart-Rechner</h1>
    </header>
    <div id="presentedBy">
    	<i>proudly presented by:</i><br><br>
        <a href="https://www.fischer-programmierung.ch" target="_blank"><img src="img/logo.png" alt="Fischer Programmierung - WebDesign, Onlineshop, Intranet, VBA-Entwicklung"></a>
    </div>
    <form method="get" action="dart.html">
    	<label for="anzSpieler">Anzahl Spieler:</label>
        <select id="anzSpieler">
        	<option>1</option>
            <option selected>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
        </select>
        <input type="hidden" name="anzSpielerInput" id="anzSpielerInput" value="2">
        
        <div id="spielerNamen">
            <p><label for="user1" id="labUser1">Spieler 1: </label><input type="text" name="user1" id="textUser1" required pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user2" id="labUser2">Spieler 2: </label><input type="text" name="user2" id="textUser2" required pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user3" id="labUser3">Spieler 3: </label><input type="text" name="user3" id="textUser3" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user4" id="labUser4">Spieler 4: </label><input type="text" name="user4" id="textUser4" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user5" id="labUser5">Spieler 5: </label><input type="text" name="user5" id="textUser5" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user6" id="labUser6">Spieler 6: </label><input type="text" name="user6" id="textUser6" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user7" id="labUser7">Spieler 7: </label><input type="text" name="user7" id="textUser7" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user8" id="labUser8">Spieler 8: </label><input type="text" name="user8" id="textUser8" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
            <p><label for="user9" id="labUser9">Spieler 9: </label><input type="text" name="user9" id="textUser9" pattern=".{2,10}" title="2 bis 10 Zeichen erlaubt."></p>
        </div>
        <br>
        <p>
        	<label for="variante">Spielvariante:</label>
        	<select name="viariante">
        		<option>301</option>
            	<option selected>501</option>
       	 	</select>
        </p>
        <input type="hidden" id="pw" name="pw">
        <p><button type="submit" value="starten"><img src="img/dartstart.png" id="startDart"></button></p>
    </form>
    
</body>
</html>

<?php
require_once 'functions.inc.php';
$db = hole_datenbank();

// globale Variablen
$variante = 0;
$nachricht = "";
$rekord = array();
$schuesse = array();
$affected_rows=0;

// Die Namen aus $rekord werden in $savedNames gespeichert
    // die dazugehörigen Rekorde in $savedRecords
    foreach ($rekord as $wert) {
       $savedNames[] = $wert["name"];
       $savedRecords[] = $wert["rekord"];
    }
    
    for ($i=1;$i<=$_POST[anz_spieler];$i++) { 
        $key = array_search($_POST["spieler".$i], $savedNames);
        if (is_int($key)) {
            if ($_POST["besterWurf_sp".$i]>$savedRecords[$key]){
                $sql = 'UPDATE DartBestShot SET ';
                $sql .= 'rekord="'.$_POST["besterWurf_sp".$i].'", ';
                $sql .= 'dart1="'.$_POST["dart1_sp".$i].'", ';
                $sql .= 'dart2="'.$_POST["dart2_sp".$i].'", ';
                $sql .= 'dart3="'.$_POST["dart3_sp".$i].'" WHERE name="'.$_POST["spieler".$i].'"';
	        	$abfrage = $db -> query($sql);
				$affected_rows++;
            }
        }
        else {
            $sql = 'INSERT INTO DartBestShot (name, rekord, dart1, dart2, dart3) VALUES (';
            $sql .= '"'.$_POST["spieler".$i].'", ';
            $sql .= '"'.$_POST["besterWurf_sp".$i].'", ';
            $sql .= '"'.$_POST["dart1_sp".$i].'", ';
            $sql .= '"'.$_POST["dart2_sp".$i].'", ';
            $sql .= '"'.$_POST["dart3_sp".$i].'")';
	    	$abfrage = $db -> query($sql);
	    	$affected_rows++;
        }
    }
	
	
	// Die Namen aus $schuesse werden in $savedNamesShots gespeichert
    // die dazugehörigen Rounds in $savedRounds und Shots in $savedShots
    foreach ($schuesse as $wert) {
       $savedNamesShots[] = $wert["name"];
       $savedRounds[] = $wert["rounds"];
       $savedShots[] = $wert["shots"];
    }

$key = "";
    for ($i=1;$i<=$_POST[anz_spieler];$i++) { 
       if ($_POST["total_sp".$i] == 0) {
          $key = array_search($_POST["spieler".$i], $savedNamesShots);
		 
          if (is_int($key)) {
             if ($_POST["rounds_sp".$i]<$savedRounds[$key]){
                $sql = 'UPDATE DartShots'. $_POST["variante"] .' SET ';
                $sql .= 'rounds="'.$_POST["rounds_sp".$i].'", ';
                $sql .= 'shots="'.$_POST["wuerfe_sp".$i].'", ';
                $sql .= 'avg="'.$_POST["avg_sp".$i].'" WHERE name="'.$_POST["spieler".$i].'"';
	        	$abfrage = $db -> query($sql);
				$affected_rows++;
             }
			 // wenn Rundenzahl gleich ist, wird nur bei weniger Würfen gespeichert
			 elseif ($_POST["rounds_sp".$i]==$savedRounds[$key] && $_POST["wuerfe_sp".$i]<$savedShots[$key]){
				$sql = 'UPDATE DartShots'. $_POST["variante"] .' SET ';
                $sql .= 'rounds="'.$_POST["rounds_sp".$i].'", ';
                $sql .= 'shots="'.$_POST["wuerfe_sp".$i].'", ';
                $sql .= 'avg="'.$_POST["avg_sp".$i].'" WHERE name="'.$_POST["spieler".$i].'"';
	        	$abfrage = $db -> query($sql);
				$affected_rows++;
			 }
          }    
          else { 
             $sql = 'INSERT INTO DartShots'. $_POST["variante"] .' (name, rounds, shots, avg) VALUES (';
             $sql .= '"'.$_POST["spieler".$i].'", ';
             $sql .= '"'.$_POST["rounds_sp".$i].'", ';
             $sql .= '"'.$_POST["wuerfe_sp".$i].'", ';
             $sql .= '"'.$_POST["avg_sp".$i].'")';
             $abfrage = $db -> query($sql);
	     	 $affected_rows++;
          }
       }
    }

/*
    if ($affected_rows > 0){
		echo "<strong>Daten gespeichert!</strong>";
    }
    else{
		echo "Keine Daten gespeichert!";
    } 
 */
?>

body{
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#spiel {
	width: 100%;
	height: 100%;
	text-align: center;
	background-color: #EEE;	
	-ms-user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
	user-select: none;
}

header{
	text-align: center;
}

header h1 {
	margin-top: 0px;
	margin-bottom: 0px;
	font-size: 40px;
	font-weight: bolder;
	font-variant: small-caps;
	background-color:#CCC;
	border-top: 2px solid black;
	border-bottom: 2px solid black;	
}

header #fullscreen {
	position: absolute;
	right: 5px;
	top: 5px;	
}

header #menuBtn {
	position: absolute;
	left: 5px;
	top: 5px;	
}

#eingabe {
	position: relative;
	padding-top: 5px;
	padding-bottom: 200px;	
}

nav {
	position: absolute;
	display: none;
	top: 0px;
	left: 0px;
	background: rgba(204,204,204,0.95);
	color: white;	
	font-size: 22px;
	font-weight: bold;
	text-align: left;
	border: 1px solid black;
}

nav ul {
	margin: 0px;
	padding: 10px;	
	list-style-type: none;
}

nav ul li {
	padding: 5px 0px;	
}

#logo img {
	margin-top: 10px;
	width: 200px;	
}

#eingabe input {	
	border: 2px solid black;
	border-radius: 5px;
}

#zahlen input, #spez input {
	width: 28%;	
	height: 50px;
	font-weight: bold;
	font-size: 1.3em;
	padding: 0px;
	margin-bottom: 2%; 
}

#zahlen input:nth-of-type(3n+1) {
	background-color:#FF9;
	margin-left: 3%;
	margin-right: 3%;
}

#zahlen input:nth-of-type(3n+2) {
	background-color:#0F3;
	margin-right: 3%;
}

#zahlen input:nth-of-type(3n) {
	background-color: #0C3;
	margin-right: 3%;
}

#spez .bull {
	background-color: #0C3;
	margin-left: 3%;
	margin-right: 3%;
}

#spez .bullseye {
	background-color:#FF0000;	
	margin-right: 3%;
}

#spez .zero {
	background-color:#000000;
	color: white;	
	margin-right: 3%;
}

/****** Schiebefenster  *******/
#uebersicht{
	position: fixed;
	bottom: 0px;
	/*height: 200px;*/
	width: 100%;
	background-color: #CCC;	
	text-align: center;
	padding-bottom: 10px;
}

#grafik {
	position: absolute;
	left: 10px;
	top: 10px;	
}

#gummi {
	position: absolute;
	top: 10px;
	right: 10px;	
}

#runde {
	position: absolute;
	bottom: 5px;
	right: 5px;
	font-size: 25px;
	font-weight: bold;	
}

#wurf1, #wurf2, #wurf3 {
	width: 10%;
	margin-left: 30px;	
	height: 25px;
	font-size: 20px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
}

#uebersicht span {
	display: none;
	margin: 5px 10px 5px 0px;
}

#uebersicht label {
	height: 30px;
	font-size: 22px;
}

#gesamt_spieler1, #gesamt_spieler2, #gesamt_spieler3, #gesamt_spieler4, #gesamt_spieler5, #gesamt_spieler6, #gesamt_spieler7, #gesamt_spieler8, #gesamt_spieler9 {
	width: 60px;
	height: 25px;	
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	margin-right: 2px;
}

img[id*="pfeil"] {
	visibility: hidden;
	height: 35px;
	margin: 0px;
	padding: 0px;	
}

/* Info-Anzeige */
#transparent {
   display: none;
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .9);
}

#info {
   display: none;
   position: fixed;
   width: 90%;  
   left: 5%;
   color: white;
   background: rgba(153, 153, 153, 1);	
   text-align: center;
   font-size: 25px;
   border: 2px solid black;
   padding-bottom: 10px;
}

#info .spielerStats {
	display: inline-block;
	text-align: left;
	margin-left: 20px;
	margin-right: 20px;
	font-size: 0.8em;
}

#statistik {
	float: left;
	font-size: 30px;
	font-weight: bold;	
	width: 50%;
	cursor:pointer;
}

#rekorde {
	font-weight: bold;
	font-size: 30px;
	cursor:pointer;
}

.statsInaktiv {
	background-color:#444;
}

.statsAktiv {
	background-color:#999;	
}

/* für Rekord-Tabellen */
#RekordWurf, #RekordAnzahl {
	font-size: 0.7em;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;	
}

#RekordWurf tr:nth-of-type(odd), #RekordAnzahl tr:nth-of-type(odd) {
	background: rgba(0,51,153,1);	
}

#RekordWurf tr:nth-of-type(even), #RekordAnzahl tr:nth-of-type(even) {
	background: rgba(0,102,204,1);	
}

/* versteckte Formularfelder (für Statistik und neue Rekorde) */
#stats, #rekordeForm {
	display: hidden;	
}

/* Style-Angaben für Windows Phone (Lumia 825) */
@media screen and (max-width: 450px) and (orientation: portrait) {
	header h1 {
		font-size: 28px;
		padding: 2px 0px;
	}
	
	header #fullscreen, header #menuBtn {height: 30px;}
	
	#eingabe {
		padding-bottom: 115px;
	}
	
	#zahlen input, #spez input {	
		height: 35px;
		font-size: 1.1em; 
	}
	
	/*#uebersicht {height: 115px;}*/
	
	#grafik {
		height: 35px;
		left: 5px;
		top: 5px;	
	}

#gummi {
		height: 35px;
		top: 5px;
		right: 5px;	
	}
	
	#runde {
		top: 7px;
		right: 40px;
		font-size: 18px;	
	}
	
	#wurf1, #wurf2, #wurf3 {
		width: 12%;
		height: 20px;
		font-size: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
		margin-left: 5px;
		margin-right: 5px;
	}
	
	#uebersicht span {
		height: 20px;
		font-size: 15px;
		margin: 2px 5px 2px 0px;
	}
	
	#uebersicht label {
		height: 20px;
		font-size: 15px;
	}
	
	#gesamt_spieler1, #gesamt_spieler2, #gesamt_spieler3, #gesamt_spieler4, #gesamt_spieler5, #gesamt_spieler6, #gesamt_spieler7, #gesamt_spieler8, #gesamt_spieler9 {
		width: 32px;
		height: 16px;	
		font-size: 15px;
		margin-right: 1px;
	}
	
	img[id*="pfeil"] {height: 25px;	}
	
	#statistik, #rekorde {
		font-size: 20px;
	}
	
	#info {font-size: 15px}
	
	#info .spielerStats {font-size: 0.8em;}
}