dkforest

commit 02211fe2643f2a60f0bbc5f0b44500f72927d856
parent 1740a3ed7d3429c5860eb7c44bca5087debf3b39
Author: n0tr1v <n0tr1v@protonmail.com>
Date:   Fri, 15 Dec 2023 16:43:21 -0500

fix countdown on page refresh

Diffstat:
M
pkg/web/handlers/poker/events.go
 | 
8
++++++--
M
pkg/web/handlers/poker/poker.go
 | 
38
++++++++++++--------------------------

2 files changed, 18 insertions(+), 28 deletions(-)
diff --git a/pkg/web/handlers/poker/events.go b/pkg/web/handlers/poker/events.go
@@ -1,6 +1,9 @@
 package poker
 
-import "dkforest/pkg/database"
+import (
+	"dkforest/pkg/database"
+	"time"
+)
 
 type PokerEvent struct {
 	ID     string
@@ -50,7 +53,8 @@ type PokerMainPotUpdatedEvent struct {
 }
 
 type PokerWaitTurnEvent struct {
-	Idx int
+	Idx       int
+	CreatedAt time.Time
 }
 
 type PokerSeatTakenEvent struct {
diff --git a/pkg/web/handlers/poker/poker.go b/pkg/web/handlers/poker/poker.go
@@ -478,7 +478,7 @@ func showCards(g *PokerGame, roomTopic string, seats []Seat) {
 }
 
 func setWaitTurn(g *PokerGame, roomTopic string, seatIdx int) {
-	evt := PokerWaitTurnEvent{Idx: seatIdx}
+	evt := PokerWaitTurnEvent{Idx: seatIdx, CreatedAt: time.Now()}
 	PokerPubSub.Pub(roomTopic, evt)
 
 	g.Ongoing.WaitTurnEventMtx.Lock()
@@ -1567,7 +1567,7 @@ func buildWinnerHtml() string {
 
 func buildCountdownsHtml() (html string) {
 	for i := 1; i <= NbPlayers; i++ {
-		html += `<div id="countdown` + itoa(i) + `" class="timer" style="--duration: ` + itoa(MaxUserCountdown) + `;--size: 30;"><div class="mask"></div></div>`
+		html += `<div id="countdown` + itoa(i) + `" class="timer countdown"><div class="mask"></div></div>`
 	}
 	return
 }
@@ -1702,25 +1702,10 @@ func drawCountDownStyle(evt PokerWaitTurnEvent) string {
 	html := "<style>"
 	html += `#countdown1, #countdown2, #countdown3, #countdown4, #countdown5, #countdown6 { display: none; }`
 	html += `#seat1, #seat2, #seat3, #seat4, #seat5, #seat6 { background-color: rgba(45, 45, 45, 0.4); }`
-	if evt.Idx == -1 {
-	} else if evt.Idx == 0 {
+	tmp := int((MaxUserCountdown*time.Second - time.Since(evt.CreatedAt)).Seconds())
+	if evt.Idx >= 0 && evt.Idx <= 5 {
 		html += `#seat` + itoa(evt.Idx+1) + ` { background-color: rgba(200, 45, 45, 0.7); }`
-		html += `#countdown1 { display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
-	} else if evt.Idx == 1 {
-		html += `#seat` + itoa(evt.Idx+1) + ` { background-color: rgba(200, 45, 45, 0.7); }`
-		html += `#countdown2 { display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
-	} else if evt.Idx == 2 {
-		html += `#seat` + itoa(evt.Idx+1) + ` { background-color: rgba(200, 45, 45, 0.7); }`
-		html += `#countdown3 { display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
-	} else if evt.Idx == 3 {
-		html += `#seat` + itoa(evt.Idx+1) + ` { background-color: rgba(200, 45, 45, 0.7); }`
-		html += `#countdown4 { display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
-	} else if evt.Idx == 4 {
-		html += `#seat` + itoa(evt.Idx+1) + ` { background-color: rgba(200, 45, 45, 0.7); }`
-		html += `#countdown5 { display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
-	} else if evt.Idx == 5 {
-		html += `#seat` + itoa(evt.Idx+1) + ` { background-color: rgba(200, 45, 45, 0.7); }`
-		html += `#countdown6 { display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
+		html += `#countdown` + itoa(evt.Idx+1) + ` { --duration: ` + itoa(tmp) + `; display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`
 	}
 	html += "</style>"
 	return html
@@ -1912,12 +1897,13 @@ body {
 #foldBtn { width: 50px; height: 30px; }
 #callBtn { width: 50px; height: 30px; }
 #betBtn { width: 145px; height: 70px; }
-#countdown1 { top: 46px; left: 717px;  position: absolute; display: none; z-index: 100;  }
-#countdown2 { top: 167px; left: 729px; position: absolute; display: none; z-index: 100;  }
-#countdown3 { top: 405px; left: 668px; position: absolute; display: none; z-index: 100;  }
-#countdown4 { top: 404px; left: 375px; position: absolute; display: none; z-index: 100;  }
-#countdown5 { top: 404px; left: 185px; position: absolute; display: none; z-index: 100;  }
-#countdown6 { top: 404px; left: 59px; position: absolute; display: none; z-index: 100;  }
+.countdown { --duration: ` + itoa(MaxUserCountdown) + `; --size: 30; }
+#countdown1 { top: 46px; left: 717px;  position: absolute; display: none; z-index: 100; }
+#countdown2 { top: 167px; left: 729px; position: absolute; display: none; z-index: 100; }
+#countdown3 { top: 405px; left: 668px; position: absolute; display: none; z-index: 100; }
+#countdown4 { top: 404px; left: 375px; position: absolute; display: none; z-index: 100; }
+#countdown5 { top: 404px; left: 185px; position: absolute; display: none; z-index: 100; }
+#countdown6 { top: 404px; left: 59px; position: absolute; display: none; z-index: 100; }
 #mainPot { position: absolute; top: 220px; left: 250px; font-size: 20px; font-family: Arial,Helvetica,sans-serif; }
 #winner { position: absolute; top: 265px; left: 250px; }
 #errorMsg { position: absolute; top: 550px; left: 250px; color: darkred; }