commit e857420d530c85c88505271423939e2403bab31a
parent 7356c46b1cb57b7ccee55dba43134a953b115c6e
Author: n0tr1v <n0tr1v@protonmail.com>
Date: Tue, 26 Dec 2023 16:12:09 -0500
new progress bar
Diffstat:
2 files changed, 35 insertions(+), 67 deletions(-)
diff --git a/pkg/web/handlers/poker.go b/pkg/web/handlers/poker.go
@@ -593,7 +593,7 @@ func PokerUnSitHandler(c echo.Context) error {
}
func PokerSitHandler(c echo.Context) error {
- html := hutils.HtmlCssReset + `<form method="post"><button style="height: 35px; width: 65px;" title="Take seat"><img src="/public/img/throne.png" width="30" alt="sit" /></button></form>`
+ html := hutils.HtmlCssReset + `<form method="post"><button style="height: 40px; width: 65px;" title="Take seat"><img src="/public/img/throne.png" width="30" alt="sit" /></button></form>`
authUser := c.Get("authUser").(*database.User)
pos := utils.Clamp(utils.DoParseInt(c.Param("pos")), 1, poker.NbPlayers) - 1
roomID := poker.RoomID(c.Param("roomID"))
diff --git a/pkg/web/handlers/poker/poker.go b/pkg/web/handlers/poker/poker.go
@@ -23,7 +23,7 @@ import (
)
const NbPlayers = 6
-const MaxUserCountdown = 60
+const MaxUserCountdown = 6
const MinTimeAfterGame = 10
const BackfacingDeg = "-180deg"
const BurnStackX = 400
@@ -34,7 +34,7 @@ const DealSpacing = 55
const DealerStackX = 250
const DealerStackY = 30
const NbCardsPerPlayer = 2
-const animationTime = 1000 * time.Millisecond
+const animationTime = 100 * time.Millisecond
type Poker struct {
sync.Mutex
@@ -1691,7 +1691,6 @@ func buildGameDiv(g *Game, authUser *database.User) (html string) {
html += buildMainPotHtml(g)
html += buildMinRaiseHtml(g)
html += buildWinnerHtml()
- html += buildCountdownsHtml()
html += `</div>`
return
}
@@ -1768,14 +1767,6 @@ func buildMinRaiseHtml(g *Game) string {
return html
}
-func buildCountdownsHtml() (html string) {
- for i := 1; i <= NbPlayers; i++ {
- idxStr := itoa(i)
- html += fmt.Sprintf(`<div id="countdown%s" class="timer countdown"><div class="mask"></div></div>`, idxStr)
- }
- return
-}
-
func buildActionsDiv(roomID RoomID) (html string) {
htmlTmpl := `
<table id="actionsDiv">
@@ -1823,6 +1814,7 @@ func buildSeatsHtml(g *Game, authUser *database.User) (html string) {
html += ` <div class="inner"></div>`
html += ` <div id="seat` + idxStr + `_cash" class="cash"></div>`
html += ` <div id="seat` + idxStr + `_status" class="status"></div>`
+ html += ` <div id="countdown` + idxStr + `"><div class="progress-container"><div class="progress-bar animate"></div></div></div>`
html += `</div>`
}
html += `</div>`
@@ -1986,11 +1978,12 @@ func drawCountDownStyle(evt PokerWaitTurnEvent) string {
html := "<style>"
html += hideCountdowns()
html += resetSeatsBackgroundColor()
- remainingSecs := int((MaxUserCountdown*time.Second - time.Since(evt.CreatedAt)).Seconds())
+ remainingSecs := int((MaxUserCountdown*time.Second - time.Since(evt.CreatedAt)).Milliseconds())
if evt.Idx >= 0 && evt.Idx <= 5 {
idxStr := itoa(evt.Idx + 1)
html += fmt.Sprintf(`#seat%s { background-color: rgba(200, 45, 45, 0.7); }`, idxStr)
- html += fmt.Sprintf(`#countdown%s { --duration: %s; display: block; animation: time calc(var(--duration) * 1s) steps(1000, start) forwards; }`, idxStr, itoa(remainingSecs))
+ html += fmt.Sprintf(`#countdown%s { display: block; }`, idxStr)
+ html += fmt.Sprintf(`#countdown%s .animate { --duration: %s; animation: progressBarAnimation calc(var(--duration) * 1ms) linear forwards; }`, idxStr, itoa(remainingSecs))
}
html += "</style>"
return html
@@ -2005,7 +1998,8 @@ func createCssIDList(idFmt string) (out string) {
}
func hideCountdowns() (out string) {
- return createCssIDList("#countdown%s") + ` { display: none; }`
+ out += createCssIDList("#countdown%s") + ` { display: none; }`
+ return
}
func resetSeatsBackgroundColor() (out string) {
@@ -2240,7 +2234,7 @@ body {
display: flex;
margin-left: auto;
margin-right: auto;
- margin-top: 7px;
+ margin-top: 5px;
position: absolute;
left: 10px;
}
@@ -2320,13 +2314,12 @@ body {
#foldBtn { width: 50px; height: 30px; display: inline-block; vertical-align: top; }
#callBtn { width: 50px; height: 30px; display: inline-block; vertical-align: top; }
#betBtn { width: 400px; height: 45px; display: inline-block; vertical-align: top; }
-.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: 420px; 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: 419px; left: 59px; position: absolute; display: none; z-index: 100; }
+#countdown1 { display: none; position: absolute; left: 0px; right: 2px; bottom: -9px; }
+#countdown2 { display: none; position: absolute; left: 0px; right: 2px; bottom: -9px; }
+#countdown3 { display: none; position: absolute; left: 0px; right: 2px; bottom: -9px; }
+#countdown4 { display: none; position: absolute; left: 0px; right: 2px; bottom: -9px; }
+#countdown5 { display: none; position: absolute; left: 0px; right: 2px; bottom: -9px; }
+#countdown6 { display: none; position: absolute; left: 0px; right: 2px; bottom: -9px; }
#mainPot { position: absolute; top: 220px; left: 215px; font-size: 20px; font-family: Arial,Helvetica,sans-serif; }
#minRaise { position: absolute; top: 220px; left: 365px; font-size: 18px; font-family: Arial,Helvetica,sans-serif; }
#winner { position: absolute; top: 265px; left: 250px; }
@@ -2396,50 +2389,6 @@ body {
top: 100px;
}
-.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);
- }
-}
-
@keyframes cashBonusAnimation {
0% {
opacity: 1;
@@ -2482,4 +2431,23 @@ body {
font-family: Arial,Helvetica,sans-serif;
}
+/* Styles for the progress bar container */
+.progress-container {
+ width: 100%;
+ height: 6px;
+ background-color: #f0f0f0;
+ overflow: hidden;
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+ border: 1px solid rgba(0, 0, 0, 0.9);
+}
+.progress-bar {
+ height: 100%;
+ width: 100%;
+ background-color: #4caf50;
+}
+@keyframes progressBarAnimation {
+ from { width: 100%; }
+ to { width: 0; }
+}
+
</style>`
