From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 28 Dec 2017 13:57:32 +0000 (+0100)
Subject: add basic timer + logo. still restore bug
X-Git-Url: https://git.auder.net/variants/img/pieces/css/doc/html/index.html?a=commitdiff_plain;h=2caa3889307c969ae089b6c261ab8096ae49107a;p=westcastle.git

add basic timer + logo. still restore bug
---

diff --git a/css/index.css b/css/index.css
index 9604004..530cb4f 100644
--- a/css/index.css
+++ b/css/index.css
@@ -2,11 +2,14 @@
 
 @import '../vendor/Ubuntu_googlefont.css';
 
+html, body {
+	height: 100%;
+}
+
 body {
 	font-family: Ubuntu, Verdana, sans-serif;
-	margin: 0;
-	width: 800px;
 	margin: 0 auto;
+	width: 800px;
 	font-size: 1.1rem;
 }
 
@@ -39,6 +42,18 @@ body {
     color: #f1f1f1;
 }
 
+img.logo {
+	width: 200px;
+	position: fixed;
+	display: block;
+	left: 0;
+	overflow-x: hidden;
+	padding: 20px 0 0 0;
+	margin: 0;
+	top: 350px;
+	z-index: 10;
+}
+
 .main {
 	margin-left: 200px; /* Same as the width of the sidenav */
 	padding: 0px 10px;
@@ -258,3 +273,31 @@ td.score {
 #scoreInput table th {
 	padding-bottom: 10px;
 }
+
+/* Timer */
+
+#timer {
+	position: absolute;
+	z-index: 100;
+	left: 0;
+	top: 0;
+	min-height: 100%;
+	width: 100%;
+	font-size: 500px;
+	background-color: white;
+	cursor: pointer;
+	line-height: 100%;
+	font-family: monospace;
+}
+
+.timeout {
+	color: red;
+}
+
+img.close-cross {
+	display: block;
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 30px;
+}
diff --git a/img/cross.svg b/img/cross.svg
new file mode 100644
index 0000000..1b89806
--- /dev/null
+++ b/img/cross.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"
+	 viewBox="0 0 100 100" overflow="visible" enable-background="new 0 0 100 100" xml:space="preserve">
+	<line fill="none" stroke="#000080" stroke-width="12" stroke-linecap="square" x1="10" y1="10" x2="90" y2="90"/>
+	<line fill="none" stroke="#000080" stroke-width="12" stroke-linecap="square" x1="90" y1="10" x2="10" y2="90"/>
+</svg>
diff --git a/img/logo_Westcastle.png b/img/logo_Westcastle.png
new file mode 100644
index 0000000..e78a53d
Binary files /dev/null and b/img/logo_Westcastle.png differ
diff --git a/index.html b/index.html
index cfbee36..5fc231b 100644
--- a/index.html
+++ b/index.html
@@ -15,12 +15,15 @@
 					<li @click="display='players'">Joueurs</li>
 					<li @click="display='ranking'">Classement</li>
 					<li @click="display='pairings'">Appariements</li>
+					<li @click="display='timer'">Chronomètre</li>
 				</ul>
+				<img class="logo" src="img/logo_Westcastle.png"/>
 			</header>
 			<main>
 				<my-players v-show="display=='players'" :players="players"></my-players>
 				<my-ranking v-show="display=='ranking'" :players="players" :sort-by-score="sortByScore" :write-score-to-db="writeScoreToDb"></my-ranking>
 				<my-pairings v-show="display=='pairings'" :players="players" :write-score-to-db="writeScoreToDb"></my-pairings>
+				<my-timer v-show="display=='timer'" @clockover="display='pairings'"></my-timer>
 			</main>
 		</div>
 	</body>
diff --git a/js/index.js b/js/index.js
index a4a0dc7..659a0dd 100644
--- a/js/index.js
+++ b/js/index.js
@@ -264,6 +264,63 @@ new Vue({
 				},
 			},
 		},
+		'my-timer': {
+			data: function() {
+				return {
+					time: 0, //remaining time, in seconds
+					running: false,
+				};
+			},
+			template: `
+				<div id="timer">
+					<div @click.left="pauseResume()" @click.right.prevent="reset()" :class="{timeout:time==0}">
+						{{ formattedTime }}
+					</div>
+					<img class="close-cross" src="img/cross.svg" @click="$emit('clockover')"/>
+				</div>
+			`,
+			computed: {
+				formattedTime: function() {
+					let seconds = this.time % 60;
+					let minutes = Math.floor(this.time / 60);
+					return this.padToZero(minutes) + ":" + this.padToZero(seconds);
+				},
+			},
+			methods: {
+				padToZero: function(a) {
+					if (a < 10)
+						return "0" + a;
+					return a;
+				},
+				pauseResume: function() {
+					this.running = !this.running;
+					if (this.running)
+						this.start();
+				},
+				reset: function(e) {
+					this.running = false;
+					this.time = 10; //1:30
+				},
+				start: function() {
+					if (!this.running)
+						return;
+					if (this.time == 0)
+					{
+						new Audio("sounds/gong.mp3").play();
+						this.running = false;
+						return;
+					}
+					setTimeout(() => {
+						if (this.running)
+							this.time--;
+						this.start();
+					}, 1000);
+				},
+			},
+			created: function() {
+				this.reset();
+			},
+		},
 	},
 	created: function() {
 		let xhr = new XMLHttpRequest();
diff --git a/sounds/gong.mp3 b/sounds/gong.mp3
new file mode 100644
index 0000000..98457a8
Binary files /dev/null and b/sounds/gong.mp3 differ