Added clock support for GFX

+ global offset insted of offset for each timer
+ added strikethrough for autocue times when turned off
- GFX no longer caches items.json

diff --git a/auth/index.php b/auth/index.php
index 9d6b1ee389c8662cba6ac9a9c21c302dd11dffa6..8acb257b8b809eed055d900ce06643b44fe908d0 100644 (file)
--- a/auth/index.php
+++ b/auth/index.php
@@ -54,9 +54,7 @@ if (!empty($_POST['update'])) {
 
        $clock['movementSpeed'] = (int)$_POST['movementSpeed'];
        $clock['currentPosition'] = (int)$_POST["doomsday"];
-       $data['timer1Offset'] = (int)$_POST['timer1Offset'];
-       $data['timer2Offset'] = (int)$_POST['timer2Offset'];
-       $data['timer3Offset'] = (int)$_POST['timer3Offset'];
+       $data['timerOffset'] = (int)$_POST['timerOffset'];
        $data['priceChange'] = (int)$_POST['priceChange'];
        $data['discount'] = (int)$_POST['discount'];
        $data['itemId'] = (int)$_POST['item'];
@@ -353,17 +351,15 @@ $timer1Checked = "";
 if ($data['showingTimer1'] == "true") {
        $timer1Checked = " checked='checked' ";
 }
-$timer1Offset = $data["timer1Offset"];
 $timer2Checked = "";
 if ($data['showingTimer2'] == "true") {
        $timer2Checked = " checked='checked' ";
 }
-$timer2Offset = $data["timer2Offset"];
 $timer3Checked = "";
 if ($data['showingTimer3'] == "true") {
        $timer3Checked = " checked='checked' ";
 }
-$timer3Offset = $data["timer3Offset"];
+$timerOffset = $data["timerOffset"];
 ?>
                                <div class="third">
                                        <input type='radio' id='0000' value='0000' name='addTime1'>
@@ -378,9 +374,7 @@ $timer3Offset = $data["timer3Offset"];
                                        <label for='0500'> +05:00</label><br>
                                        <input type='radio' id='1000' value='1000' name='addTime1'>
                                        <label for='1000'> +10:00</label><br>
-                                       <input type='number' id='timer1Offset' name='timer1Offset' min='-5000' max='5000' step='1' value='<?php echo $timer1Offset; ?>'>
-                                       <label for='timer1Offset'> Timer 1 offset (ms)</label>
-                                       <br><input type='checkbox' id='timer1' name='timer1' value='true'<?php echo $timer1Checked; ?>>
+                                       <input type='checkbox' id='timer1' name='timer1' value='true'<?php echo $timer1Checked; ?>>
                                        <label for='timer1'> Showing timer</label>
                                </div><div class="third">
                                        <input type='radio' id='0000' value='0000' name='addTime2'>
@@ -395,9 +389,7 @@ $timer3Offset = $data["timer3Offset"];
                                        <label for='0500'> +05:00</label><br>
                                        <input type='radio' id='1000' value='1000' name='addTime2'>
                                        <label for='1000'> +10:00</label><br>
-                                       <input type='number' id='timer2Offset' name='timer2Offset' min='-5000' max='5000' step='1' value='<?php echo $timer2Offset; ?>'>
-                                       <label for='timer2Offset'> Timer 2 offset (ms)</label>
-                                       <br><input type='checkbox' id='timer2' name='timer2' value='true'<?php echo $timer2Checked; ?>>
+                                       <input type='checkbox' id='timer2' name='timer2' value='true'<?php echo $timer2Checked; ?>>
                                        <label for='timer2'> Showing timer</label>
                                </div><div class="third">
                                        <input type='radio' id='0000' value='0000' name='addTime3'>
@@ -412,11 +404,11 @@ $timer3Offset = $data["timer3Offset"];
                                        <label for='0500'> +05:00</label><br>
                                        <input type='radio' id='1000' value='1000' name='addTime3'>
                                        <label for='1000'> +10:00</label><br>
-                                       <input type='number' id='timer3Offset' name='timer3Offset' min='-5000' max='5000' step='1' value='<?php echo $timer3Offset; ?>'>
-                                       <label for='timer3Offset'> Timer 3 offset (ms)</label>
-                                       <br><input type='checkbox' id='timer3' name='timer3' value='true'<?php echo $timer3Checked; ?>>
+                                       <input type='checkbox' id='timer3' name='timer3' value='true'<?php echo $timer3Checked; ?>>
                                        <label for='timer3'> Showing timer</label>
                                </div>
+                               <input type='number' id='timerOffset' name='timerOffset' min='-5000' max='5000' step='1' value='<?php echo $timerOffset; ?>'>
+                               <label for='timerOffset'> Timer offset (ms)</label>
                        </fieldset>
                </div><div class="split">
 <?php
@@ -490,8 +482,8 @@ for ($i = 0; $i < 5; $i ++) {
                        <ul>
                                <li>Make this notes section a little better? it might actually be useful during the show. Although the arrow is quite difficult to click on</li>
                                <li>Add the controls for persentage sold and the relevant display on the GFX side of things</li>
-                               <li>Add 2 more timers on both the controls and the GFX page</li>
-                               <li>Add the timers and the % sold to the autocue so the presenter can atually see what theyre doing</li>
+                               <li><s>Add 2 more timers on both the controls and the GFX page</s></li>
+                               <li>Add the <s>timers and the</s> % sold to the autocue so the presenter can atually see what theyre doing</li>
                                <li>Add a clock display to the GFX page and the autocue (could just be a gereric time?)</li>
                                <li>Make the top banner look better</li>
                                <li>Add some kind of rating into the item file and make it display</li>

diff --git a/autocue/index.html b/autocue/index.html
index 2ea8df4950d0e2d6baa14ebe4bbb22ab30285ac6..d108174248da941b1c82ba54142dfe0c531bfed1 100644 (file)
--- a/autocue/index.html
+++ b/autocue/index.html
@@ -23,7 +23,7 @@ body {
                <script>
 var itemId = 0;
 
-function makeTime(t, o) {
+function makeTime(t, o, s) {
                        let current = Math.round((Date.now() + o) / 1000);
                        var time = t - current;
                        if (Math.sign(time) == -1) {time = 0;}
@@ -34,8 +34,11 @@ function makeTime(t, o) {
                        var secondsString = seconds.toString();
                        minutesString = minutesString.padStart(2, "0");
                        secondsString = secondsString.padStart(2, "0");
-
-                       return `${minutesString}:${secondsString}`;
+                       if (s == "true") {
+                               return `${minutesString}:${secondsString}`;
+                       } else {
+                               return `<s>${minutesString}:${secondsString}</s>`;
+                       }
 }
 
 function frame() {
@@ -53,9 +56,9 @@ function update() {
                 .then(data => {
                        itemId = data.itemId;
                        var timers = document.getElementsByClassName("time");
-                       timers[0].innerHTML = makeTime(data.timer1End, data.timer1Offset);
-                       timers[1].innerHTML = makeTime(data.timer2End, data.timer2Offset);
-                       timers[2].innerHTML = makeTime(data.timer3End, data.timer3Offset);
+                       timers[0].innerHTML = makeTime(data.timer1End, data.timerOffset, data.showingTimer1);
+                       timers[1].innerHTML = makeTime(data.timer2End, data.timerOffset, data.showingTimer2);
+                       timers[2].innerHTML = makeTime(data.timer3End, data.timerOffset, data.showingTimer3);
                })
        fetch("../items.json", {cache: "no-store"})
                 .then(data => data.json())

diff --git a/clock.json b/clock.json
index cee5f6d6366b96c104b6ba9922119a2d9643feb6..3c56d26d9b9722266916eb48803141315440de54 100755 (executable)
--- a/clock.json
+++ b/clock.json
@@ -1 +1 @@
-{"currentPosition":230,"movementSpeed":30,"function":"ease","lightingCues":["false","false","false","true","false","true","false","true","false","true"]}
\ No newline at end of file
+{"currentPosition":230,"movementSpeed":30,"function":"ease","lightingCues":["false","false","true","false","false","true","false","true","false","true"]}
\ No newline at end of file

diff --git a/data.json b/data.json
index 29d6d5047b32f811053e6b0afc13ccb38c7f3bba..812dfe86bd9dc637719c458dc3f324d4e1c82679 100755 (executable)
--- a/data.json
+++ b/data.json
@@ -1 +1 @@
-{"topText":["It's here!"],"bottomText":["It's here!"],"bannerText":"The quant we created!","itemId":1,"currency":{"prefix":"$","postfix":" hairs"},"discount":70,"prefix":"false","round":"true","priceChange":50,"showingMain":"true","showingAll":"true","showingExtra":"true","showingTimer1":"true","showingTimer2":"true","showingTimer3":"false","showingBanner":"true","showingSigil":["false","false","false","false"],"timer1End":1724720136,"timer1Offset":0,"timer2End":1724720211,"timer2Offset":0,"timer3End":1724720386,"timer3Offset":0}
\ No newline at end of file
+{"topText":["It's here!"],"bottomText":["It's here!"],"bannerText":"The quant we created!","itemId":1,"currency":{"prefix":"$","postfix":" hairs"},"discount":70,"prefix":"false","round":"true","priceChange":50,"showingMain":"true","showingAll":"true","showingExtra":"true","showingTimer1":"true","showingTimer2":"false","showingTimer3":"false","showingBanner":"true","showingSigil":["false","false","false","false"],"timer1End":1724723324,"timer2End":1724720211,"timer3End":1724720386,"timerOffset":0}
\ No newline at end of file

diff --git a/index.html b/index.html
index 1d2ff3ed97145a7189056b577d325d0b8c45a836..cd8260098c5dada8355c3a85ebc1c50c805946ec 100644 (file)
--- a/index.html
+++ b/index.html
@@ -150,7 +150,7 @@ h2.badge {
        bottom: 6vh;
        width: 100vh;
 }
-.bottom > *:not(#timer) {
+.bottom > *:not(#timer1) {
        display: inline-block;
        vertical-align: top;
 }
@@ -160,7 +160,7 @@ h2.badge {
        mask-image: linear-gradient(0.25turn, transparent, black 5%, black 95%, transparent);
        overflow: hidden;
 }
-.timer {
+.timer1 {
        position: absolute;
        left: 101vh;
        padding: 0.5vh;
@@ -170,6 +170,16 @@ h2.badge {
        border-radius: calc(1vh - 2px);
        transition: opacity 1.5s;
 }
+.timer2 {
+       position: absolute;
+       opacity: 0;
+       transition: opacity 1.5s;
+}
+.timer3 {
+       position: absolute;
+       opacity: 0;
+       transition: opacity 1.5s;
+}
 .show {
        opacity: 1;
 }
@@ -233,24 +243,27 @@ function makePrice(price) {
                return `${price}${postfixString}`;
        }
 }
+// helper function for creating time strings
+function makeTime(t, o) {
+                       let current = Math.round((Date.now() + o) / 1000);
+                       var time = t - current;
+                       if (Math.sign(time) == -1) {time = 0;}
+                       var minutes = Math.floor(time / 60);
+                       var seconds = (time - (minutes * 60));
+
+                       var minutesString = minutes.toString();
+                       var secondsString = seconds.toString();
+                       minutesString = minutesString.padStart(2, "0");
+                       secondsString = secondsString.padStart(2, "0");
+
+                       return `${minutesString}:${secondsString}`;
+}
 // handles all updates from the server data that are not required to be instantanious (2 times per second)
 function update() {
        fetch("./data.json", {cache: "no-store"})
                .then(data => data.json())
                .then(data => { 
                        itemId = data.itemId;
-                       
-                       // calculate the current time string from the difference between current and provided unix timestamp
-                       var timerTime = Math.round(timerTime / 1000);
-                       let currentTime = Math.round((Date.now() + data.timerOffset) / 1000);
-                       var timerTime = data.timerEnd - currentTime;
-                       if (Math.sign(timerTime) == -1) {timerTime = 0;}
-                       var minutes = Math.floor(timerTime / 60);
-                       var seconds = (timerTime - (minutes * 60));
-                       var minutesString = minutes.toString();
-                       var secondsString = seconds.toString();
-                       minutesString = minutesString.padStart(2, "0");
-                       secondsString = secondsString.padStart(2, "0");
 
                        //handle all optional elements showing/hiding
                        const all = document.getElementById("all");
@@ -284,14 +297,29 @@ function update() {
                                side.classList.remove("showExtra");
                        }
 
-                       const timer = document.getElementsByClassName("timer")[0];
-                       timer.innerHTML = `${minutesString}:${secondsString}`;
-                       if (data.showingTimer == "true") {
-                               timer.classList.add("show");
+                       const timer1 = document.getElementsByClassName("timer1")[0];
+                       timer1.innerHTML = makeTime(data.timer1End, data.timerOffset);
+                       if (data.showingTimer1 == "true") {
+                               timer1.classList.add("show");
+                       } else {
+                               timer1.classList.remove("show");
+                       }
+
+                       const timer2 = document.getElementsByClassName("timer2")[0];
+                       timer2.innerHTML = makeTime(data.timer2End, data.timerOffset);
+                       if (data.showingTimer2 == "true") {
+                               timer2.classList.add("show");
                        } else {
-                               timer.classList.remove("show");
+                               timer2.classList.remove("show");
                        }
 
+                       const timer3 = document.getElementsByClassName("timer3")[0];
+                       timer3.innerHTML = makeTime(data.timer3End, data.timerOffset);
+                       if (data.showingTimer3 == "true") {
+                               timer3.classList.add("show");
+                       } else {
+                               timer3.classList.remove("show");
+                       }
 
                        const badgeContainer = document.getElementsByClassName("badgeContainer")[0];
                        if (discount <= 0.99) {
@@ -337,7 +365,7 @@ function update() {
        });
 
        // get the requested item data
-       fetch("./items.json", {cache: "no-store"})
+       fetch("./items.json") // this is static so there is no need to request it every time
                .then(data => data.json())
                .then(data => {
                        document.getElementById("code").innerHTML = data[itemId].code;
@@ -476,7 +504,9 @@ setInterval(draw, 500)
                </div>
 
                <div class="container box bottom">
-                       <h3 class="feature timer box"></h3>
+                       <h3 class="feature timer1 box"></h3>
+                       <h3 class="timer2"></h3>
+                       <h3 class="timer3"></h3>
                        <h2 id="topText"></h2>
                        <div class="marquee">
                                <h1 class="marqueeText" id="bottomText"></h1>