commit 7042d73144fc72407fc3d2229aed0a3876814f5d
parent 84d6c1e195d3257f63d80505805908d0a23aa905
Author: n0tr1v <n0tr1v@protonmail.com>
Date: Sat, 9 Dec 2023 00:19:04 -0500
UI
Diffstat:
1 file changed, 111 insertions(+), 51 deletions(-)
diff --git a/pkg/web/handlers/poker/poker.go b/pkg/web/handlers/poker/poker.go
@@ -624,12 +624,12 @@ func dealerThread(db *database.DkfDB, g *PokerGame, roomID string) {
g.incrDealerIdx()
seats := []Seat{
- {Top: 50, Left: 600, Top2: 50 + 5, Left2: 600 + 5, Angle: "-90deg"},
- {Top: 150, Left: 574, Top2: 150 + 5, Left2: 574 + 3, Angle: "-80deg"},
- {Top: 250, Left: 530, Top2: 250 + 5, Left2: 530 + 1, Angle: "-70deg"},
- {Top: 300, Left: 380, Top2: 300 + 5, Left2: 380 + 1, Angle: "0deg"},
- {Top: 300, Left: 210, Top2: 300 + 5, Left2: 210 + 1, Angle: "0deg"},
- {Top: 300, Left: 40, Top2: 300 + 5, Left2: 40 + 1, Angle: "0deg"},
+ {Top: 55, Left: 610, Top2: 55 + 5, Left2: 610 + 5, Angle: "-95deg"},
+ {Top: 175, Left: 620, Top2: 175 + 5, Left2: 620 + 3, Angle: "-80deg"},
+ {Top: 290, Left: 580, Top2: 290 + 5, Left2: 580 + 1, Angle: "-50deg"},
+ {Top: 310, Left: 430, Top2: 310 + 5, Left2: 430 + 1, Angle: "0deg"},
+ {Top: 315, Left: 240, Top2: 315 + 5, Left2: 240 + 1, Angle: "0deg"},
+ {Top: 270, Left: 70, Top2: 270 + 5, Left2: 70 + 1, Angle: "10deg"},
}
var card string
@@ -659,7 +659,7 @@ func dealerThread(db *database.DkfDB, g *PokerGame, roomID string) {
ID: "card" + itoa(idx),
Name: card,
Idx: idx,
- Top: 150,
+ Top: 130,
Left: 155 + (dealCardIdx * 55),
Reveal: true,
}
@@ -1098,7 +1098,7 @@ func PokerUnSitHandler(c echo.Context) error {
}
func PokerSitHandler(c echo.Context) error {
- html := cssReset + `<form method="post"><button>SIT</button></form>`
+ html := cssReset + `<form method="post"><button>Sit</button></form>`
authUser := c.Get("authUser").(*database.User)
pos, _ := strconv.Atoi(c.Param("pos"))
if pos < 1 || pos > NbPlayers {
@@ -1145,7 +1145,11 @@ func colorForCard1(name string) string {
}
func buildYourCardsHtml(authUser *database.User, g *PokerGame) string {
- html := `<div style="position: absolute; top: 530px; left: 200px;"><div id="yourCard1"></div><div id="yourCard2"></div></div>`
+ html := `
+<div style="position: absolute; top: 550px; left: 300px;">
+ <div id="yourCard1"></div>
+ <div id="yourCard2"></div>
+</div>`
if g.Ongoing != nil {
cards := make([]PlayerCard, 0)
if p := g.Ongoing.GetPlayer(authUser.Username.String()); p != nil {
@@ -1165,6 +1169,21 @@ func buildYourCardsHtml(authUser *database.User, g *PokerGame) string {
return html
}
+func buildDevHtml() (html string) {
+ return `<div class="dev_seat1_card1"></div>
+<div class="dev_seat2_card1"></div>
+<div class="dev_seat3_card1"></div>
+<div class="dev_seat4_card1"></div>
+<div class="dev_seat5_card1"></div>
+<div class="dev_seat6_card1"></div>
+<div class="dev_community_card1"></div>
+<div class="dev_community_card2"></div>
+<div class="dev_community_card3"></div>
+<div class="dev_community_card4"></div>
+<div class="dev_community_card5"></div>
+`
+}
+
func buildCardsHtml() (html string) {
for i := 52; i >= 1; i-- {
html += `<div class="card-holder" id="card` + itoa(i) + `"><div class="back"></div><div class="card"><div class=inner></div></div></div>`
@@ -1176,7 +1195,7 @@ func buildTakeSeatHtml(authUser *database.User, g *PokerGame, roomID string) str
takeSeatBtns := ""
seated, _ := g.IsSeated(authUser.Username.String())
for i, p := range g.Players {
- takeSeatBtns += `<iframe src="/poker/` + roomID + `/sit/` + itoa(i+1) + `" class="takeSeat takeSeat` + itoa(i+1) + `"></iframe>`
+ takeSeatBtns += ``
if p != nil || seated {
takeSeatBtns += `<style>.takeSeat` + itoa(i+1) + ` { display: none; }</style>`
}
@@ -1219,18 +1238,26 @@ func buildActionsDiv(roomID string) (html string) {
return
}
-func buildSeatsHtml(g *PokerGame) string {
+func buildSeatsHtml(g *PokerGame, roomID string) (seats string) {
g.PlayersMtx.RLock()
defer g.PlayersMtx.RUnlock()
- seats := `
-<div>`
- for i, p := range g.Players {
- seats += `<div id="seat` + itoa(i+1) + `"></div>`
- seats += `<div id="seat` + itoa(i+1) + `_cash"></div>`
+ for i := range g.Players {
seats += `<div id="seat` + itoa(i+1) + `Pot"></div>`
+ }
+ seats += `<div>`
+ for i := range g.Players {
+ seats += `<div class="seat" id="seat` + itoa(i+1) + `">
+<iframe src="/poker/` + roomID + `/sit/` + itoa(i+1) + `" class="takeSeat takeSeat` + itoa(i+1) + `"></iframe>`
+ seats += ` <div class="inner"></div>`
+ seats += ` <div id="seat` + itoa(i+1) + `_cash" class="cash"></div>`
+ seats += `</div>`
+ }
+ seats += `</div>`
+
+ for i, p := range g.Players {
if p != nil {
seats += `<style>`
- seats += `#seat` + itoa(i+1) + `:before { content: "` + p.Username + `"; }`
+ seats += `#seat` + itoa(i+1) + ` .inner:before { content: "` + p.Username + `"; }`
seats += `#seat` + itoa(i+1) + `_cash:before { content: "` + itoa(p.getDisplayCash(g)) + `"; }`
if g.Ongoing != nil {
if op := g.Ongoing.GetPlayer(p.Username); op != nil && op.Bet > 0 {
@@ -1240,8 +1267,6 @@ func buildSeatsHtml(g *PokerGame) string {
seats += `</style>`
}
}
- seats += `
-</div>`
return seats
}
@@ -1313,10 +1338,10 @@ func drawSeatsHtml(authUser *database.User, g *PokerGame) string {
html += `.takeSeat` + itoa(i+1) + ` { display: block; }`
}
if p != nil {
- html += `#seat` + itoa(i+1) + `:before { content: "` + p.Username + `"; }`
+ html += `#seat` + itoa(i+1) + ` .inner:before { content: "` + p.Username + `"; }`
html += `#seat` + itoa(i+1) + `_cash:before { content: "` + itoa(p.getDisplayCash(g)) + `"; }`
} else {
- html += `#seat` + itoa(i+1) + `:before { content: ""; }`
+ html += `#seat` + itoa(i+1) + ` .inner:before { content: ""; }`
html += `#seat` + itoa(i+1) + `_cash:before { content: ""; }`
}
}
@@ -1480,34 +1505,68 @@ body {
border:1px solid black;
}
.takeSeat {
- width: 40px;
- height: 30px;
-}
-#seat1 { position: absolute; top: 80px; left: 700px; }
-#seat2 { position: absolute; top: 200px; left: 670px; }
-#seat3 { position: absolute; top: 300px; left: 610px; }
-#seat4 { position: absolute; top: 380px; left: 380px; }
-#seat5 { position: absolute; top: 380px; left: 210px; }
-#seat6 { position: absolute; top: 380px; left: 40px; }
-#seat1_cash { position: absolute; top: 100px; left: 700px; }
-#seat2_cash { position: absolute; top: 220px; left: 670px; }
-#seat3_cash { position: absolute; top: 320px; left: 610px; }
-#seat4_cash { position: absolute; top: 400px; left: 380px; }
-#seat5_cash { position: absolute; top: 400px; left: 210px; }
-#seat6_cash { position: absolute; top: 400px; left: 40px; }
-#seat1Pot { position: absolute; top: 80px; left: 530px; }
-#seat2Pot { position: absolute; top: 170px; left: 530px; }
-#seat3Pot { position: absolute; top: 230px; left: 530px; }
-#seat4Pot { position: absolute; top: 280px; left: 380px; }
-#seat5Pot { position: absolute; top: 280px; left: 210px; }
-#seat6Pot { position: absolute; top: 280px; left: 40px; }
-.takeSeat1 { position: absolute; top: 80px; left: 650px; }
-.takeSeat2 { position: absolute; top: 240px; left: 720px; }
-.takeSeat3 { position: absolute; top: 333px; left: 650px; }
-.takeSeat4 { position: absolute; top: 383px; left: 380px; }
-.takeSeat5 { position: absolute; top: 383px; left: 210px; }
-.takeSeat6 { position: absolute; top: 333px; left: 80px; }
-#actionsDiv { position: absolute; top: 450px; left: 30px; display: flex; }
+ width: 33px;
+ height: 25px;
+ display: flex;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 7px;
+}
+.seat {
+ border: 1px solid #333;
+ border-radius: 4px;
+ background-color: rgba(45, 45, 45, 0.4);
+ padding: 1px 2px;
+ min-width: 80px;
+ min-height: 35px;
+ color: #ddd;
+}
+.seat .inner { display: flex; justify-content: center; }
+.seat .cash { display: flex; justify-content: center; }
+
+.dev_seat1_card1 { top: 55px; left: 610px; transform: rotateZ(-95deg); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_seat1_card2 {}
+.dev_seat2_card1 { top: 175px; left: 620px; transform: rotateZ(-80deg); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_seat2_card2 {}
+.dev_seat3_card1 { top: 290px; left: 580px; transform: rotateZ(-50deg); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_seat3_card2 {}
+.dev_seat4_card1 { top: 310px; left: 430px; transform: rotateZ(0deg); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_seat4_card2 {}
+.dev_seat5_card1 { top: 315px; left: 240px; transform: rotateZ(0deg); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_seat5_card2 {}
+.dev_seat6_card1 { top: 270px; left: 70px; transform: rotateZ(10deg); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_seat6_card2 {}
+.dev_community_card1 {top: 130px; left: calc(155px + 1 * 55px); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_community_card2 {top: 130px; left: calc(155px + 2 * 55px); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_community_card3 {top: 130px; left: calc(155px + 3 * 55px); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_community_card4 {top: 130px; left: calc(155px + 4 * 55px); width:50px; height:70px; background-color: white; position: absolute; }
+.dev_community_card5 {top: 130px; left: calc(155px + 5 * 55px); width:50px; height:70px; background-color: white; position: absolute; }
+
+#seat1 { position: absolute; top: 80px; left: 690px; }
+#seat2 { position: absolute; top: 200px; left: 700px; }
+#seat3 { position: absolute; top: 360px; left: 640px; }
+#seat4 { position: absolute; top: 400px; left: 410px; }
+#seat5 { position: absolute; top: 400px; left: 220px; }
+#seat6 { position: absolute; top: 360px; left: 30px; }
+#seat1_cash { }
+#seat2_cash { }
+#seat3_cash { }
+#seat4_cash { }
+#seat5_cash { }
+#seat6_cash { }
+#seat1Pot { position: absolute; top: 88px; left: 562px; text-align: right; }
+#seat2Pot { position: absolute; top: 190px; left: 570px; text-align: right; }
+#seat3Pot { position: absolute; top: 280px; left: 540px; text-align: right; }
+#seat4Pot { position: absolute; top: 290px; left: 430px; }
+#seat5Pot { position: absolute; top: 290px; left: 240px; }
+#seat6Pot { position: absolute; top: 245px; left: 86px; }
+.takeSeat1 { }
+.takeSeat2 { }
+.takeSeat3 { }
+.takeSeat4 { }
+.takeSeat5 { }
+.takeSeat6 { }
+#actionsDiv { position: absolute; top: 470px; left: 130px; display: flex; }
#dealBtn { width: 80px; height: 30px; }
#unSitBtn { width: 80px; height: 30px; }
#checkBtn { width: 60px; height: 30px; }
@@ -1524,7 +1583,7 @@ body {
#winner { position: absolute; top: 265px; left: 250px; }
#yourCard1 { font-size: 22px; display: inline-block; margin-right: 15px; }
#yourCard2 { font-size: 22px; display: inline-block; }
-#errorMsg { position: absolute; top: 580px; left: 150px; color: darkred; }
+#errorMsg { position: absolute; top: 600px; left: 250px; color: darkred; }
#eventLogs { position: absolute; bottom: 5px; right: 5px; width: 300px; height: 200px; border: 1px solid black; background-color: #ccc; padding: 3px; }
#table {
position: absolute; top: 20px; left: 20px; width: 750px; height: 400px; border-radius: 300px;
@@ -1657,9 +1716,10 @@ func PokerHandler(c echo.Context) error {
//send(`<script>document.onclick = function(e) { console.log(e.x, e.y); };</script>`) // TODO: dev only
send(`<div id="table"></div>`)
+ //send(buildDevHtml())
send(buildCardsHtml())
send(buildTakeSeatHtml(authUser, g, roomID))
- send(buildSeatsHtml(g))
+ send(buildSeatsHtml(g, roomID))
send(buildActionsDiv(roomID))
send(buildYourCardsHtml(authUser, g))
send(`<iframe src="/poker/` + roomID + `/logs" id="eventLogs"></iframe>`)
