Files
games/features/common/components/shared.templ
ryan 67a768ea22
All checks were successful
CI / Deploy / test (push) Successful in 14s
CI / Deploy / lint (push) Successful in 25s
CI / Deploy / deploy (push) Successful in 1m32s
Fix SSE architecture for reliable connections (#13)
2026-03-03 23:33:13 +00:00

74 lines
2.2 KiB
Plaintext

package components
import (
"time"
"github.com/starfederation/datastar-go/datastar"
)
templ BackToLobby() {
<a class="link text-sm opacity-70" href="/">&larr; Back</a>
}
templ StealthTitle(class string) {
<span class={ class }>
<span style="color:#4a2a3a">&#9679;</span>
<span style="color:#2a4545">&#9679;</span>
<span style="color:#4a2a3a">&#9679;</span>
<span style="color:#2a4545">&#9679;</span>
</span>
}
templ NicknamePrompt(returnPath string) {
<main class="max-w-sm mx-auto mt-8 text-center" data-signals="{nickname: ''}">
<h1 class="text-3xl font-bold">Join Game</h1>
<p class="mb-4">Enter your nickname to join the game.</p>
<form>
<fieldset class="fieldset">
<label class="label" for="nickname">Your Nickname</label>
<input
class="input input-bordered w-full"
id="nickname"
type="text"
placeholder="Enter your nickname"
data-bind="nickname"
data-on:keydown={ "evt.key === 'Enter' && " + datastar.PostSSE("%s", returnPath) }
required
autofocus
/>
</fieldset>
<button
class="btn btn-primary w-full"
type="button"
data-on:click={ datastar.PostSSE("%s", returnPath) }
>
Join
</button>
</form>
</main>
}
// LiveClock shows the current server time, updated every second via SSE.
// If the clock stops updating, users know the connection is stale.
templ LiveClock() {
<div class="fixed top-2 right-2 flex items-center gap-1.5 text-xs opacity-60 font-mono">
<div style="width: 6px; height: 6px; border-radius: 50%; background-color: #22c55e;"></div>
{ time.Now().Format("15:04:05") }
</div>
}
templ GameJoinPrompt(loginURL string, registerURL string, gamePath string) {
<main class="max-w-sm mx-auto mt-8 text-center">
<h1 class="text-3xl font-bold">Join Game</h1>
<p class="mb-4">Log in to track your game history, or continue as a guest.</p>
<div class="flex flex-col gap-2 my-4">
<a class="btn btn-primary w-full" href={ templ.SafeURL(loginURL) }>Login</a>
<a class="btn btn-secondary w-full" href={ templ.SafeURL(gamePath + "?guest=1") }>Continue as Guest</a>
</div>
<p class="text-sm opacity-60">
Don't have an account?
<a class="link" href={ templ.SafeURL(registerURL) }>Register</a>
</p>
</main>
}