Display fastest player in clients, style GM client

src/main/kotlin/de/pheerai/buzzer/clients/gameMasterClient.kt

@@ -12,6 +12,11 @@ fun HTML.createGameMasterDocument() {
             rel = "stylesheet",
             type = "text/css"
         )
+        link(
+            href = "/assets/gamemaster.css",
+            rel = "stylesheet",
+            type = "text/css"
+        )
         script {
             src = "https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
             defer = true
@@ -36,19 +41,27 @@ fun HTML.createGameMasterDocument() {
         xEffect(
             //language=JavaScript
             """
-            if (Alpine.data.buzzerWebSocket.readyState === 1) {
             if (firstPlayer !== null) {
-                    console.log("Player")
                 Alpine.data.buzzerWebSocket.send(`PLAYER:${"$"}{firstPlayer}`);
             } else {
-                    console.log("Clear")
                 Alpine.data.buzzerWebSocket.send("CLEAR:");
             }
-            }
             """.trimIndent()
         )
         div(classes = "parent") {
-            button {
+            div(classes = "player") {
+                xShow("firstPlayer")
+                xText("firstPlayer")
+            }
+            div { xShow("!firstPlayer") }
+            div(classes = "playerlist") list@{
+                template {
+                    attributes["x-for"] = "name in receivedNames"
+                    this@list.div(classes = "listedname") { xText("name") }
+                }
+            }
+            button(classes = "submit") {
+                xData("{clicked: false}")
                 xOn(
                     "click",
                     //language=JavaScript
@@ -56,17 +69,16 @@ fun HTML.createGameMasterDocument() {
                     () => {
                         receivedNames = []
                         firstPlayer = null
+                        clicked = true
+                        setTimeout(() => {clicked = false}, 50)
                     }
                     """.trimIndent()
                 )
+                xOn("mousedown", "clicked = true")
+                xOn("touchstart", "clicked = true")
+                xBind("class", "{'active': clicked}")
                 +"Reset"
             }
-            ol {
-                template {
-                    attributes["x-for"] = "name in receivedNames"
-                    this@ol.li { xText("name") }
-                }
-            }
         }
     }
 }

src/main/kotlin/de/pheerai/buzzer/clients/playerClient.kt

@@ -29,13 +29,23 @@ fun HTML.createPlayerDocument() {
         }
     }
     body {
-        xData("{playerName: \"\", buzzerWebSocket: null}")
+        xData("{playerName: \"\", buzzerWebSocket: null, firstPlayer: null}")
         div(classes = "parent") {
+            xEffect("console.log(firstPlayer)")
             xInit(
                 //language=JavaScript
                 """
                 () => {
-                    startWebSocket('/socket/player')
+                    startWebSocket('/socket/player', (ev) => {
+                        console.log("received: " + ev.data)
+                        if (ev.data === "CLEAR:") {
+                            firstPlayer = null;
+                        } else {
+                            let newName = ev.data.split(":")[1]
+                            console.log(newName)
+                            setTimeout(() => { firstPlayer = newName }, 500)
+                        }
+                    });
                 }
                 """.trimIndent()
             )
@@ -54,7 +64,7 @@ fun HTML.createPlayerDocument() {
                 +"Enter a name first!"
             }
             button(classes = "submit") {
-                xShow("playerName")
+                xShow("playerName && !firstPlayer")
                 xData("{clicked: false}")
                 xOn(
                     "click",
@@ -78,6 +88,11 @@ fun HTML.createPlayerDocument() {
                 }
                 p { +"and I know this!" }
             }
+            div(classes = "lockindicator") {
+                xShow("firstPlayer")
+                xBind("class", "{'self': firstPlayer === playerName, 'other': firstPlayer !== playerName }")
+                xText("firstPlayer")
+            }
         }
     }
 }

src/main/resources/css/gamemaster.css

@@ -0,0 +1,58 @@
+body, html {
+    height: 100%;
+    overflow: hidden;
+    font-size: var(--font-size);
+    box-sizing: border-box;
+    padding: var(--bumper-small-size);
+    margin: 0;
+    background-color: var(--background);
+    color: var(--text);
+}
+
+div.parent {
+    display: grid;
+    grid-template-rows: 3fr auto 1fr;
+    height: 100%;
+    max-width: 100%;
+}
+
+.player {
+    background-color: var(--foreground02);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    border-radius: var(--border-radius);
+}
+
+.playerlist {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.listedname + .listedname::before {
+    content: "»";
+    padding-left: var(--bumper-small-size);
+    padding-right: var(--bumper-small-size);
+}
+
+.submit {
+    border-radius: var(--border-radius);
+    width: 100%;
+    max-width: 100%;
+    font-size: var(--font-size);
+    height: 100%;
+    border: solid 0.25vh var(--highlight-dark);
+    background-color: var(--foreground);
+    color: var(--text);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.submit.active {
+    background-color: var(--highlight01);
+}
+

src/main/resources/css/player.css

@@ -59,6 +59,26 @@ div > .submit {
     flex-direction: column;
 }
 
-div > button.active {
+div > .submit.active {
     background-color: var(--highlight01);
 }
+
+.lockindicator {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    border: solid 0.25vh var(--highlight-dark);
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.lockindicator.self {
+    background-color: darkgreen;
+}
+
+.lockindicator.other {
+    background-color: darkred;
+}