add basic timer + logo. still restore bug

diff --git a/css/index.css b/css/index.css
index 9604004..530cb4f 100644 (file)
--- 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 (file)
index 0000000..1b89806
--- /dev/null
+++ b/img/cross.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>\r
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100"\r
+        viewBox="0 0 100 100" overflow="visible" enable-background="new 0 0 100 100" xml:space="preserve">\r
+       <line fill="none" stroke="#000080" stroke-width="12" stroke-linecap="square" x1="10" y1="10" x2="90" y2="90"/>\r
+       <line fill="none" stroke="#000080" stroke-width="12" stroke-linecap="square" x1="90" y1="10" x2="10" y2="90"/>\r
+</svg>\r

diff --git a/img/logo_Westcastle.png b/img/logo_Westcastle.png
new file mode 100644 (file)
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 (file)
--- 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 (file)
--- 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 (file)
index 0000000..98457a8
Binary files /dev/null and b/sounds/gong.mp3 differ