From 4147cbde0e0bd1ee023d76f2258c279d94336dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20R=C3=BCmpelein?= Date: Sun, 26 Sep 2021 19:19:02 +0200 Subject: [PATCH] Display fastest player in clients, style GM client --- .../buzzer/clients/gameMasterClient.kt | 42 +++++++++----- .../de/pheerai/buzzer/clients/playerClient.kt | 21 ++++++- src/main/resources/css/gamemaster.css | 58 +++++++++++++++++++ src/main/resources/css/player.css | 22 ++++++- 4 files changed, 124 insertions(+), 19 deletions(-) create mode 100644 src/main/resources/css/gamemaster.css diff --git a/src/main/kotlin/de/pheerai/buzzer/clients/gameMasterClient.kt b/src/main/kotlin/de/pheerai/buzzer/clients/gameMasterClient.kt index 8ff7370..fbb2dfa 100644 --- a/src/main/kotlin/de/pheerai/buzzer/clients/gameMasterClient.kt +++ b/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:"); - } + if (firstPlayer !== null) { + Alpine.data.buzzerWebSocket.send(`PLAYER:${"$"}{firstPlayer}`); + } else { + 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") } - } - } } } } diff --git a/src/main/kotlin/de/pheerai/buzzer/clients/playerClient.kt b/src/main/kotlin/de/pheerai/buzzer/clients/playerClient.kt index 0fa491d..ea3bc3c 100644 --- a/src/main/kotlin/de/pheerai/buzzer/clients/playerClient.kt +++ b/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") + } } } } diff --git a/src/main/resources/css/gamemaster.css b/src/main/resources/css/gamemaster.css new file mode 100644 index 0000000..3a5bd6b --- /dev/null +++ b/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); +} + diff --git a/src/main/resources/css/player.css b/src/main/resources/css/player.css index 52c6c0b..6f895cd 100644 --- a/src/main/resources/css/player.css +++ b/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; +}