60 lines
2.7 KiB
HTML
60 lines
2.7 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Go Fish - Waiting Room</title>
|
||
|
|
<style>
|
||
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
|
body { font-family: system-ui, -apple-system, sans-serif; background: #1a1a2e; color: #e0e0e0; min-height: 100vh; }
|
||
|
|
.container { max-width: 800px; margin: 0 auto; padding: 2rem; }
|
||
|
|
h1 { text-align: center; margin-bottom: 2rem; color: #f0f0f0; }
|
||
|
|
.player-list { background: #2a2a3e; border-radius: 8px; padding: 1rem; margin-bottom: 2rem; }
|
||
|
|
.player-item { padding: 0.5rem; border-bottom: 1px solid #444; cursor: pointer; margin-bottom: 0.5rem; }
|
||
|
|
.player-item:hover { background: #3a3a52; }
|
||
|
|
.player-item.eligible { background: #2ecc71; color: #fff; }
|
||
|
|
.player-item.unavailable { background: #e74c3c; color: #fff; }
|
||
|
|
.btn { padding: 0.75rem 1.5rem; background: #e94560; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; width: 100%; margin-top: 1rem; }
|
||
|
|
.btn-secondary { background: #444; width: 100%; margin-top: 1rem; }
|
||
|
|
.status { text-align: center; margin: 1rem 0; font-size: 0.9rem; color: #888; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<h1>Go Fish - Waiting Room</h1>
|
||
|
|
<div class="status" id="status">Looking for opponent...</div>
|
||
|
|
|
||
|
|
<div class="player-list" id="playerList">
|
||
|
|
{{ range .Players }}
|
||
|
|
<div class="player-item eligible" data-target-id="{{ .ID }}">
|
||
|
|
{{ .Name }}
|
||
|
|
<span style="font-size: 0.8rem; margin-left: 1rem;">(available)</span>
|
||
|
|
</div>
|
||
|
|
{{ else }}
|
||
|
|
<div class="player-item unavailable">No available players</div>
|
||
|
|
{{ end }}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="btn" onclick="window.location='/join'">Refresh List</button>
|
||
|
|
<div class="status">Players online: <span id="onlineCount">0</span></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// Poll for available players
|
||
|
|
setInterval(function() {
|
||
|
|
fetch('/waiting')
|
||
|
|
.then(r => r.text())
|
||
|
|
.then(html => {
|
||
|
|
document.getElementById('playerList').innerHTML = html;
|
||
|
|
// Re-attach click handlers
|
||
|
|
document.querySelectorAll('.player-item.eligible').forEach(el => {
|
||
|
|
el.addEventListener('click', function() {
|
||
|
|
const targetId = this.dataset.targetId;
|
||
|
|
window.location.href = '/play/' + targetId;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}, 3000);
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|