dkforest

commit a046617663df0a5663276eec67971bbc13d1e963
parent 53181b99482ec7015bcb01eb186985fd95625c87
Author: n0tr1v <n0tr1v@protonmail.com>
Date:   Tue,  5 Dec 2023 06:35:33 -0500

fancy timer

Diffstat:
M
pkg/web/handlers/poker.go
 | 
68
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------

1 file changed, 62 insertions(+), 6 deletions(-)
diff --git a/pkg/web/handlers/poker.go b/pkg/web/handlers/poker.go
@@ -714,22 +714,73 @@ body {
 #foldBtn { width: 50px; height: 30px; }
 #callBtn { width: 50px; height: 30px; }
 #betBtn { width: 145px; height: 30px; }
-#countdown { position: absolute; display: none; z-index: 100; }
+#countdown1 { position: absolute; display: none; z-index: 100; }
+#countdown2 { position: absolute; display: none; z-index: 100; }
+#countdown3 { position: absolute; display: none; z-index: 100; }
+#countdown4 { position: absolute; display: none; z-index: 100; }
+#countdown5 { position: absolute; display: none; z-index: 100; }
+#countdown6 { position: absolute; display: none; z-index: 100; }
 #mainPot { position: absolute; top: 240px; left: 250px; }
 #yourCard1 { font-size: 22px; display: inline-block; margin-right: 15px; }
 #yourCard2 { font-size: 22px; display: inline-block; }
+
+
+.timer {
+    background: -webkit-linear-gradient(left, black 50%, #eee 50%);
+    border-radius: 100%;
+    height: calc(var(--size) * 1px);
+    width: calc(var(--size) * 1px);
+    position: relative;
+    animation: time calc(var(--duration) * 1s) steps(1000, start) forwards;
+	-webkit-mask: radial-gradient(transparent 50%,#000 50%);
+	mask: radial-gradient(transparent 50%,#000 50%);
+}
+.mask {
+    border-radius: 100% 0 0 100% / 50% 0 0 50%;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 50%;
+    animation: mask calc(var(--duration) * 1s) steps(500, start) forwards;
+    -webkit-transform-origin: 100% 50%;
+}
+@-webkit-keyframes time {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
+}
+@-webkit-keyframes mask {
+    0% {
+        background: #eee;
+        -webkit-transform: rotate(0deg);
+    }
+    50% {
+        background: #eee;
+        -webkit-transform: rotate(-180deg);
+    }
+    50.01% {
+        background: black;
+        -webkit-transform: rotate(0deg);
+    }
+    100% {
+        background: black;
+        -webkit-transform: rotate(-180deg);
+    }
+}
+
 </style>`)
 
 	drawCountDownStyle := func(evt PokerWaitTurnEvent) {
+		send(`<style>#countdown1, #countdown2, #countdown3, #countdown4, #countdown5, #countdown6 { display: none; }</style>`)
 		if evt.Idx == -1 {
-			send(`<style>#countdown { display: none; }</style>`)
 			send(`<style>#mainPot:before { content: "Pot: ` + strconv.Itoa(evt.MainPot) + `"; }</style>`)
 		} else if evt.Idx == 0 {
-			send(`<style>#countdown { top: 50px; left: 600px; display: block; }</style>`)
+			send(`<style>#countdown1 { top: 50px; left: 600px; display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }</style>`)
 		} else if evt.Idx == 1 {
-			send(`<style>#countdown { top: 150px; left: 574px; display: block; }</style>`)
+			send(`<style>#countdown2 { top: 150px; left: 574px; display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }</style>`)
 		} else if evt.Idx == 2 {
-			send(`<style>#countdown { top: 250px; left: 530px; display: block; }</style>`)
+			send(`<style>#countdown3 { top: 250px; left: 530px; display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }</style>`)
 		}
 	}
 
@@ -798,7 +849,12 @@ body {
 	deckHash := deckMd5
 	send(`<div id="seat1Pot">BET: 0</div>`)
 	send(buildMainPotHtml(g))
-	send(`<div id="countdown">CD</div>`)
+	send(`<div id="countdown1" class="timer" style="--duration: ` + strconv.Itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`)
+	send(`<div id="countdown2" class="timer" style="--duration: ` + strconv.Itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`)
+	send(`<div id="countdown3" class="timer" style="--duration: ` + strconv.Itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`)
+	send(`<div id="countdown4" class="timer" style="--duration: ` + strconv.Itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`)
+	send(`<div id="countdown5" class="timer" style="--duration: ` + strconv.Itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`)
+	send(`<div id="countdown6" class="timer" style="--duration: ` + strconv.Itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`)
 	if g.Ongoing != nil {
 		drawCountDownStyle(g.Ongoing.WaitTurnEvent)
 	}