add score control capability

gary-kim · Mar 28, 2019 · a37e190 · a37e190
1 parent 3c103f7
commit a37e190
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 37 deletions.
diff --git a/css/control.css b/css/control.css
@@ -39,10 +39,13 @@ html {
     border: 5px solid white;
     color: white;
     background: black;
+
+    display: flex;
+    flex-direction: column;
 }
 #clock-controls {
     grid-row: 1 / 3;
-    grid-column: 5 / 6;
+    grid-column: 2 / 5;
     border-radius: 10px 10px 10px 10px;
     border: 5px solid white;
     color: white;
@@ -55,4 +58,7 @@ html {
     border: 5px solid white;
     color: white;
     background: black;
+
+    display: flex;
+    flex-direction: column;
 }
diff --git a/css/scoreboard.css b/css/scoreboard.css
@@ -1,5 +1,5 @@
 html {
-    background: rgb(0, 59, 0);
+    background: #c7c6c1;
 }
 .main {
     height: 100%;

diff --git a/js/control.js b/js/control.js
@@ -27,6 +27,12 @@ let data = [{
         current: 0,
         display: document.createElement('div'),
         displaystate: document.createElement('div')
+    },
+    home: {
+        current: 0
+    },
+    guest: {
+        current: 0
     }
 }]
 
@@ -42,6 +48,10 @@ function main() {
 
 // Create new scoreboard
 // Returns object with {tab: Node, controls: Node}
+/**
+ * 
+ * @param {*} name 
+ */
 function newscoreboardtab(name)  {
     let tr = {};
     let tmp;
@@ -71,10 +81,52 @@ function newscoreboardtab(name)  {
         e.preventDefault();
         let minutes = parseFloat(tr.controls.querySelector('#clock-set-minutes').value);
         let seconds = parseFloat(tr.controls.querySelector('#clock-set-seconds').value);
-        data[name].clock.current = ((minutes * 60) + seconds) * 1000;
+        clockset(((minutes * 60) + seconds) * 1000);
+    });
+    // Also allow easy incrementing of clock
+    tr.controls.querySelector('#increase-clock').addEventListener('click', () => {
+        clockset(Math.max(data[name].clock.current + 1000, 0));
+    });
+
+    tr.controls.querySelector('#decrease-clock').addEventListener('click', () => {
+        clockset(Math.max(data[name].clock.current - 1000, 0));
+    });
+    /**
+     * 
+     * @param {integer} miliseconds 
+     */
+    function clockset(miliseconds) {
+        data[name].clock.current = miliseconds;
         data[name].clock.display.innerText = `${Math.floor(data[name].clock.current / 1000 / 60).toString().padStart(2,'0')}:${Math.floor(data[name].clock.current / 1000 % 60).toString().padStart(2,'0')}`;
         ipc.send('relay', {relayTo: name.toString(), channel: 'update-clock', content: (data[name].clock.current / 1000)});
-    });
+    }
+
+
+    // team score controls
+    teamscorecontrols(data[name].home, tr.controls.querySelector('#home-controls'), true);
+    teamscorecontrols(data[name].guest, tr.controls.querySelector('#guest-controls'), false);
+    /**
+     * 
+     * @param {Object} setOn data object for specific team
+     * @param {Node} attachTo Node with div of team controls
+     * @param {boolean} home setting for home?
+     * 
+     */
+    function teamscorecontrols(setOn, attachTo, home) {
+        let display = attachTo.querySelector('.team-score');
+        attachTo.querySelector('.increase-score').addEventListener('click', increase);
+        attachTo.querySelector('.decrease-score').addEventListener('click', decrease);
+        function increase() {
+            setOn.current = Math.max(setOn.current + 1, 0);
+            display.innerText = setOn.current.toString().padStart(2, '0');
+            ipc.send('relay', {relayTo: name, channel: 'set-score', content: {score: setOn.current, home: home}});
+        }
+        function decrease() {
+            setOn.current = Math.max(setOn.current - 1, 0);
+            display.innerText = setOn.current.toString().padStart(2, '0');
+            ipc.send('relay', {relayTo: name, channel: 'set-score', content: {score: setOn.current, home: home}});
+        }
+    }
 
     // team image controls
 

diff --git a/js/scoreboard.js b/js/scoreboard.js
@@ -66,14 +66,30 @@ function changeclock(seconds)  {
     changedigit(clock.digits[1], Math.floor(minuteDisplay % 10));
     changedigit(clock.digits[0], Math.floor(minuteDisplay / 10));
 
-    function changedigit(digit,val)   {
-        digit.src = digitLocation(val);
-    }
+
+}
+/**
+ * 
+ * @param {integer} score Score to set
+ * @param {boolean} home Setting home team's score?
+ */
+function changescore(score, home)   {
+    let display = home? scoreDisplays.home : scoreDisplays.guest;
+
+    changedigit(display.digits[0], Math.floor(score / 10));
+    changedigit(display.digits[1], Math.floor(score % 10));
+}
+
+function changedigit(digit,val)   {
+    digit.src = digitLocation(val);
 }
 
 ipc.on('update-clock', (e, val) => {
     changeclock(val);
 });
+ipc.on('set-score', (e, msg) => {
+    changescore(msg.score, msg.home);
+});
 ipc.on('title-set', (e, input) => {
     document.title = input;
 });

diff --git a/ui/control.html b/ui/control.html
@@ -1,35 +1,51 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-        <title>Scoreboard Control</title>
-        <link rel="stylesheet" href="../css/control.css">
-    </head>
-    <body>
-        <div class="main">
-            <div class="tabs">
-
-            </div>
-            <div class="content">
-                <template id="newcontrols">
-                    <div class="controls" scoreboard-id="1">
-                        <div id="clock-controls">
-                            <h4><div id="clock-state">Stopped</div></h4>
-                            <h4><div id="clock-current">00:00</div></h4>
-                            <button id="clock-toggle">Toggle Clock</button>
-                            <br>
-                            <form id="clock-set">
-                                <input type="number" name="Minutes" id="clock-set-minutes" placeholder="10" min="0" max="99" value="0"> :
-                                <input type="number" name="Seconds" id="clock-set-seconds" placeholder="35" min="0" max="59" value="0">
-                                <input type="submit" name="Set" value="submit" id="clock-set-submit">
-                            </form>
-                        </div>
+<head>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <title>Scoreboard Control</title>
+    <link rel="stylesheet" href="../css/control.css">
+</head>
+<body>
+    <div class="main">
+        <div class="tabs">
+
+        </div>
+        <div class="content">
+            <template id="newcontrols">
+                <div class="controls" scoreboard-id="1">
+                    <div id="home-controls">
+                        <h2>Home</h2>
+                        <h3><div class="team-score">00</div></h3>
+                        <br>
+                        <button class="increase-score">Increase (up)</button>
+                        <button class="decrease-score">Decrease (down)</button>
+                    </div>
+                    <div id="clock-controls">
+                        <h3><div id="clock-state">Stopped</div></h3>
+                        <h3><div id="clock-current">00:00</div></h3>
+                        <button id="clock-toggle">Toggle Clock</button>
+                        <br>
+                        <form id="clock-set">
+                            <input type="number" name="Minutes" id="clock-set-minutes" placeholder="10" min="0" max="99" value="0"> :
+                            <input type="number" name="Seconds" id="clock-set-seconds" placeholder="35" min="0" max="59" value="0">
+                            <input type="submit" name="Set" value="submit" id="clock-set-submit">
+                        </form>
+                        <button id="increase-clock">Increase</button>
+                        <button id="decrease-clock">Decrease</button>
+                    </div>
+                    <div id="guest-controls">
+                        <h2>Guest</h2>
+                        <h3><div class="team-score">00</div></h3>
+                        <br>
+                        <button class="increase-score">Increase (up)</button>
+                        <button class="decrease-score">Decrease (down)</button>
                     </div>
-                </template>
-            </div>
+                </div>
+            </template>
         </div>
-        <script src="../js/control.js"></script>
-    </body>
+    </div>
+    <script src="../js/control.js"></script>
+</body>
 </html>