Karteireiter

// 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();
	});
}

// Screen-Lock (Verhindern, dass Viewport bei Drehen des Geräts auch gedreht wird
function nichtDrehen() {
	screen.lockOrientationUniversal = sreen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
	screen.lockOrientationUniversal("portrait");

}

// Geräte-Orientierung ermitteln und wenn nötig Document wieder auf Portrait (um 90deg) drehen
function immerHochformat() {
	var winkel = 0-window.orientation;
	
	$("#spiel").css( {"-webkit-transform":"rotate(90deg)", 
					"-moz-transform":"rotate(90deg)", 
					"-ms-transform":"rotate(90deg)", 
					"transform":"rotate(90deg)" });
	
}

/*$( window ).on("orientationchange", function(e) {
	nichtDrehen();
});*/

<!DOCTYPE html>
<html>
<head>
<title>Schach-Timer</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="schach.css" type="text/css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script type="text/javascript" src="appfunc.js"></script>
	<script type="text/javascript" src="schach.js"></script>
</script>
</head>
<body>

<section id="start">
	<div id="logo">Schach Timer</div>
	<p><input type="number" value="15" id="anzMinuten"> <label for="anzMinuten">Minuten</label></p>
    <img src="start.png" id="startBtn" />
</section>

html, body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 30px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: black;
	color: white; 
	background-image: url(schachbrett.jpg);
	background-attachment: fixed;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
}

#start {
	display: block;
	width: 100%;
	text-align: center;
	padding-top: 5%;
}

#logo {
	font-size: 1.2em;	
	font-weight: bold;
	font-variant: small-caps;
}

#anzMinuten {
	background-color: #006699;
	border: 0.1em solid white;
	height: 1em;
	width: 1.7em;
	color: white;
	font-size: 1em;
	text-align:center;
}

#spiel {
	display: none;
	width: 100%;
	height: 100%;
	text-align: center;
	background-image: url(schachbrett.jpg);
	background-attachment: fixed;
	background-position: top left;
	background-repeat: no-repeat;
	background-size: cover;
}

#zentriert {
	position: absolute;
	width: 100%;
	text-align: center;
	top: 50%;
	margin-top:-50px;		
}

#rechts {
	position: absolute;
	top: 50%;
	right: 1%;
	margin-top:-35px;
	right: 5px;	
}

#wechselBtn:hover, #pauseBtn:hover, #startBtn:hover {
	cursor: pointer;	
}

#zeitOben, #zeitUnten {
	font-weight: bold;
	font-size: 1.7em;	
	background-color: black;
}

#zeitOben {
	position: absolute;
	width: 100%;
	top: 0px;
	transform: rotateZ(180deg);	
}

#zeitUnten {
	position: absolute;
	width: 100%;
	bottom: 0px;
}

/**** Info-Anzeige ****/
#transparent {
	display: none;
   	position: fixed;
   	top: 0px;
   	left: 0px;
   	width: 100%;
   	height: 100%;
   	background-color: #000000;	
	opacity: 0.8;
	filter: alpha(opacity=80);
}

#info {
	display: none;
   	position: fixed;
	top: 35%;
	left: 5%;
   	width: 90%;
   	height: 30%;
	text-align: center;
	background-color: black;
	border: 0.1em solid white;
}

.infoBtn {
	display: inline-block;
	font-size: 0.8em;
	color:#0099CC;
	border: 0.05em solid #09C;
	width: 40%;		
}

.infoBtn:hover {
	cursor: pointer;	
}

#weiterBtn {
	margin-right: 10%;
}
/**********************/

// globale Variablen
var startZeit = 0;
var zeitOben = 0;
var zeitUnten = 0;
var spieler1Aktiv = true;
var anzMinuten = 0;
var spielEnde = false;

// Funktion um die Sekunden in "Minuten : Sekunden" auszugeben
function zeitStringErstellen(sekTotal) {
	minuten = parseInt(sekTotal / 60);
	sekunden = parseInt(sekTotal % 60);
	if (sekunden < 10) {
		sekundenString = "0" + sekunden;	
	}
	else {
		sekundenString = sekunden;
	}
	
	if (minuten < 10) {
		minutenString = "0" + minuten;	
	}
	else {
		minutenString = minuten;
	}
	return minutenString + " : " + sekundenString;
}

function SpielBeenden() {
	VollbildBeenden("spiel");
	$("#transparent").hide();
	$("#info").hide();	
	$("#spiel").hide();	
	$("#start").show();	
}

$(document).ready(function(e) {

// Spiel starten
	$("#startBtn").click( function() {
		$("#start").hide();
		VollbildStarten("spiel");
		scrollDeaktivieren();
		$("#spiel").show();
		
		anzMinuten = $("#anzMinuten").val();
		startZeit = anzMinuten * 60;
		zeitOben = startZeit;
		zeitUnten = startZeit;
	
		$("#zeitOben").text(zeitStringErstellen(zeitOben));
		$("#zeitUnten").text(zeitStringErstellen(zeitUnten));
			
		
		$("#zeitUnten").css("background-color","#099");
			timer = setInterval(function () {
				zeitUnten--;
				$("#zeitUnten").text(zeitStringErstellen(zeitUnten));	
			},1000);
	});
	
	// Spieler-Wechsel
	$("#wechselBtn").click( function() {
		if (spielEnde != true) {
			clearInterval(timer);
			if (spieler1Aktiv == true){
				$("#zeitUnten").css("background-color","#000");
				$("#zeitOben").css("background-color","#099");
				timer = setInterval(function () {
					zeitOben--;
					$("#zeitOben").text(zeitStringErstellen(zeitOben));	
					if (zeitOben==0) {
						clearInterval(timer);
						$("#zeitOben").css("background-color","#F30");	
						spielEnde = true;
					}
				},1000);
				spieler1Aktiv = false;
			}
			else {
				$("#zeitUnten").css("background-color","#099");
				$("#zeitOben").css("background-color","#000");
				timer = setInterval(function () {
					zeitUnten--;
					$("#zeitUnten").text(zeitStringErstellen(zeitUnten));
					if (zeitUnten==0) {
						clearInterval(timer);
						$("#zeitUnten").css("background-color","#F30");	
						spielEnde = true;
					}	
				},1000);
				spieler1Aktiv = true;
			}
		}
	});
	
	// Pause
	$("#pauseBtn").click( function() {
		clearInterval(timer);
		$("#transparent").show();
		$("#info").html("<p><b>Pause</b></p><p><span class='infoBtn' id='weiterBtn' onclick='SpielFortsetzen();'>weiter</span><span class='infoBtn' id='beendenBtn' onclick='SpielBeenden();'>beenden</span></p>").show();
	});
	
});

// globale Variablen
var startZeit = 0;
var zeitOben = 0;
var zeitUnten = 0;
var spieler1Aktiv = true;
var anzMinuten = 0;
var spielEnde = false;

function SpielBeenden() {
	VollbildBeenden("spiel");
	$("#transparent").hide();
	$("#info").hide();	
	$("#spiel").hide();	
	$("#start").show();	
}

$(document).ready(function(e) {