86 lines
2.6 KiB
Kotlin
86 lines
2.6 KiB
Kotlin
package de.pheerai.buzzer.clients
|
|
|
|
import de.pheerai.buzzer.alpine.*
|
|
import kotlinx.html.*
|
|
|
|
fun HTML.createGameModeratorDocument() {
|
|
head {
|
|
meta { charset = "UTF-8" }
|
|
title { +"JS Client" }
|
|
link(
|
|
href = "/assets/colors.css",
|
|
rel = "stylesheet",
|
|
type = "text/css",
|
|
)
|
|
link(
|
|
href = "/assets/gamemoderator.css",
|
|
rel = "stylesheet",
|
|
type = "text/css",
|
|
)
|
|
script {
|
|
src = "https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"
|
|
defer = true
|
|
}
|
|
script { src = "https://unpkg.com/robust-websocket@1.0.0/robust-websocket.js" }
|
|
script { src = "/assets/buzzerWebSocket.js" }
|
|
}
|
|
body {
|
|
xData("{receivedNames: [], buzzerWebSocket: null, firstPlayer: null }")
|
|
xInit(
|
|
//language=JavaScript
|
|
"""
|
|
() => {
|
|
startWebSocket('/socket/moderator', (ev) => {
|
|
if (receivedNames.length === 0) {
|
|
firstPlayer = ev.data
|
|
}
|
|
receivedNames.push(ev.data)
|
|
});
|
|
}
|
|
""".trimIndent(),
|
|
)
|
|
xEffect(
|
|
//language=JavaScript
|
|
"""
|
|
if (firstPlayer !== null) {
|
|
Alpine.data.buzzerWebSocket.send(`PLAYER:${"$"}{firstPlayer}`);
|
|
} else {
|
|
Alpine.data.buzzerWebSocket.send("CLEAR:");
|
|
}
|
|
""".trimIndent(),
|
|
)
|
|
div(classes = "parent") {
|
|
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
|
|
"""
|
|
() => {
|
|
receivedNames = []
|
|
firstPlayer = null
|
|
clicked = true
|
|
setTimeout(() => {clicked = false}, 50)
|
|
}
|
|
""".trimIndent(),
|
|
)
|
|
xOn("mousedown", "clicked = true")
|
|
xOn("touchstart", "clicked = true")
|
|
xBind("class", "{'active': clicked}")
|
|
+"Reset"
|
|
}
|
|
}
|
|
}
|
|
}
|