100 lines
3.2 KiB
Kotlin
100 lines
3.2 KiB
Kotlin
package de.pheerai.buzzer.clients
|
|
|
|
import de.pheerai.buzzer.alpine.*
|
|
import kotlinx.html.*
|
|
|
|
fun HTML.createPlayerDocument() {
|
|
head {
|
|
meta { charset = "UTF-8" }
|
|
title { +"JS Client" }
|
|
link(
|
|
href = "/assets/colors.css",
|
|
rel = "stylesheet",
|
|
type = "text/css",
|
|
)
|
|
link(
|
|
href = "/assets/player.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"
|
|
}
|
|
script {
|
|
src = "/assets/playerClient.js"
|
|
}
|
|
}
|
|
body {
|
|
xData("{playerName: \"\", buzzerWebSocket: null, firstPlayer: null}")
|
|
div(classes = "parent") {
|
|
xEffect("console.log(firstPlayer)")
|
|
xInit(
|
|
//language=JavaScript
|
|
"""
|
|
() => {
|
|
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(),
|
|
)
|
|
div(classes = "input") {
|
|
label { +"Player" }
|
|
div(classes = "bumper") {}
|
|
input {
|
|
xModel("playerName", debounce = true)
|
|
type = InputType.text
|
|
id = "username"
|
|
placeholder = "<name>"
|
|
}
|
|
}
|
|
div(classes = "submit disabled") {
|
|
xShow("!playerName")
|
|
+"Enter a name first!"
|
|
}
|
|
button(classes = "submit") {
|
|
xShow("playerName && !firstPlayer")
|
|
xData("{clicked: false}")
|
|
xOn(
|
|
"click",
|
|
//language=JavaScript
|
|
"""
|
|
() => {
|
|
sendUsername(playerName);
|
|
clicked = true
|
|
setTimeout(() => {
|
|
clicked = false
|
|
}, 50)
|
|
}
|
|
""".trimMargin(),
|
|
)
|
|
xOn("mousedown", "clicked = true")
|
|
xOn("touchstart", "clicked = true")
|
|
xBind("class", "{'active': clicked}")
|
|
p { +"I'm" }
|
|
p {
|
|
xText("playerName")
|
|
}
|
|
p { +"and I know this!" }
|
|
}
|
|
div(classes = "lockindicator") {
|
|
xShow("firstPlayer")
|
|
xBind("class", "{'self': firstPlayer === playerName, 'other': firstPlayer !== playerName }")
|
|
xText("firstPlayer")
|
|
}
|
|
}
|
|
}
|
|
}
|