dkforest

commit a15c40758ab2fd0d2f01cc3164f48b5a6e026630
parent c7fc5ab184c8662c64c08d75be22f6fc8a383f9a
Author: n0tr1v <n0tr1v@protonmail.com>
Date:   Sun,  3 Dec 2023 23:19:08 -0500

poker

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

1 file changed, 26 insertions(+), 10 deletions(-)
diff --git a/pkg/web/handlers/handlers.go b/pkg/web/handlers/handlers.go
@@ -757,7 +757,10 @@ func BHCHandler(c echo.Context) error {
 
 type PokerEvent struct {
 	ID   string
+	Idx  int
 	Name string
+	Top  int
+	Left int
 }
 
 var PokerPubSub = pubsub.NewPubSub[PokerEvent]()
@@ -789,15 +792,22 @@ func PokerHandler(c echo.Context) error {
 	myTopic := "room_" + authUser.ID.String()
 
 	go func() {
+		idx := 0
 		for i := 1; i <= 5; i++ {
 			select {
 			case <-time.After(2 * time.Second):
 			case <-quit:
 				return
 			}
+			idx++
 			var card string
 			card, deck = deck[0], deck[1:]
-			PokerPubSub.Pub(myTopic, PokerEvent{ID: "card" + strconv.Itoa(i), Name: card})
+			PokerPubSub.Pub(myTopic, PokerEvent{
+				ID: "card" + strconv.Itoa(i), Name: card,
+				Idx:  idx,
+				Top:  100,
+				Left: 100 + (i * 55),
+			})
 		}
 	}()
 
@@ -824,12 +834,14 @@ body {
 	}
 }
 .card-holder{
+	position: absolute;
+	top: 0;
+	left: 0;
 	transform: rotateY( 180deg );
 	transform-style: preserve-3d;
 	backface-visibility: hidden;
-	position:relative;
-	width:100px;
-	height:140px;
+	width:50px;
+	height:70px;
 	display:inline-block;
 	box-shadow:1px 2px 2px rgba(0,0,0,.8);
 	margin:2px;
@@ -870,7 +882,7 @@ body {
 }
 </style>`)
 	cardsHtml := ""
-	for i := 1; i <= 52; i++ {
+	for i := 52; i >= 1; i-- {
 		cardsHtml += `<div class="card-holder" id="card` + strconv.Itoa(i) + `"><div class="back"></div><div class="card"></div></div>`
 	}
 	deckHash := deckSha256
@@ -899,13 +911,17 @@ Loop:
 			strings.Contains(payload.Name, "♦") {
 			color = "red"
 		}
+		// animation: fly-in 500ms ease-in-out forwards;
+		//animation-name: fly-in;
+		//animation-duration: 500ms;
+		//animation-direction: alternate;
+		//animation-timing-function: ease-in-out;
+		//animation-fill-mode: forwards;
 		send(`<style>
 #` + payload.ID + ` {
-	animation-name: fly-in;
-	animation-duration: 500ms;
-	animation-direction: alternate;
-	animation-timing-function: ease-in-out;
-	animation-fill-mode: forwards;
+	z-index: ` + strconv.Itoa(payload.Idx) + `;
+ 	transition: 1s ease-in-out;
+	transform: translate(` + strconv.Itoa(payload.Left) + `px, ` + strconv.Itoa(payload.Top) + `px);
 }
 #` + payload.ID + ` .card:before { content: "` + payload.Name + `"; color: ` + color + `; }
 </style>`)