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/current/css/doc/pieces/scripts/R.css?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