From: will <greenwoodw50@gmail.com>
Date: Tue, 27 Aug 2024 01:53:53 +0000 (+0100)
Subject: Added clock support for GFX
X-Git-Url: https://git.ozva.co.uk/?a=commitdiff_plain;h=4bdc403f4b20b0f16a70e39617e25146c7e86595;p=shopping-channel

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 9d6b1ee..8acb257 100644
--- 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 2ea8df4..d108174 100644
--- 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 cee5f6d..3c56d26 100755
--- 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 29d6d50..812dfe8 100755
--- 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 1d2ff3e..cd82600 100644
--- 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>