Compare commits

..
1 Commits
Author SHA1 Message Date
carlitosbond c8b2bae5d1 Update README.md 2026-05-13 16:27:18 +00:00
6 changed files with 717 additions and 1515 deletions
+3 -3
View File
@@ -8,7 +8,7 @@ Multiplayer network routing game built for team events. Players race to find the
Each round, all players receive the same grid with a start node and a destination. Links between nodes carry modifiers (normal, slow, boost, or down). Players trace a route by tapping nodes on their mobile device and submit before the timer expires. Points are awarded based on whether the route is valid, how fast it was submitted, and how efficient the path was.
Designed for 216 players. Runs as a Docker container on `labmini-01`, proxied through Caddy with automatic SSL.
Designed for 24 players. Runs as a Docker container on `labmini-01`, proxied through Caddy with automatic SSL.
---
@@ -252,11 +252,11 @@ Scores persist in Docker volume `route_rush_data` and survive container rebuilds
- **`static/` directory must exist** — FastAPI's `StaticFiles` mount throws `RuntimeError` if the directory is missing, even if it's empty. Always create it: `mkdir -p /opt/route-rush/static`.
- **No gzip on WebSocket proxies** — Caddy `encode gzip` breaks WebSocket upgrades. Omit it for any service with WS connections.
- **Caddy stale bind mount** — after editing the Caddyfile, always use `--force-recreate caddy`, not just reload.
- **Player limit is 16** — enforced server-side. A 17th connection attempt returns an error. To change the limit, update `len(game.players) >= 16` in `main.py` and the lobby display in `host.html`.
- **Player limit is 4** — enforced server-side. A 5th connection attempt returns an error. To raise the limit, change `len(game.players) >= 4` in `main.py` and update the lobby display in `host.html`.
- **PLAY AGAIN kicks all players** — by design. Host reset sends `kicked` to all connected players, clearing their session and returning them to the join screen. Players must re-enter their info for the next game.
---
## Scaling Notes
Current limit is 16 players. For very large groups, the recommended approach is manual brackets: groups play simultaneously, winners advance to a final round. The host manages bracket progression manually between sessions.
Current limit is 4 players. For larger groups (e.g. a full team event), the recommended approach is manual brackets: groups of 4 play simultaneously, winners advance to a final round. The host manages bracket progression manually between sessions.
+6 -14
View File
@@ -1,22 +1,14 @@
services:
route-rush:
build:
context: .
dockerfile: Dockerfile
build: .
container_name: route-rush
ports:
- "8001:8001"
restart: unless-stopped
environment:
- DB_PATH=/data/rr.db
volumes:
- route_rush_data:/data
- ./static:/app/static
networks:
- web-net
volumes:
route_rush_data:
- ipfix-net
networks:
web-net:
ipfix-net:
name: ipfix-stack_ipfix-net
external: true
name: web_web-net
+211 -284
View File
@@ -5,15 +5,7 @@ from fastapi.responses import HTMLResponse, JSONResponse
import json, time, random, sqlite3, os
from datetime import datetime
DB_PATH = os.environ.get("DB_PATH", "/data/rr.db")
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
# ── SCORING CONSTANTS ─────────────────────────────────────────────────────────
MAX_SCORE_PER_PLAYER = 4500 # 3 rounds × 1500 pts theoretical max
PRIZE_THRESHOLD = 3000 # avg score that earns full 25 prize points
MAX_PRIZE_POINTS = 25
DB_PATH = os.environ.get("DB_PATH", "/data/quiz.db")
# ── DATABASE ──────────────────────────────────────────────────────────────────
def get_db():
@@ -29,108 +21,105 @@ def init_db():
id INTEGER PRIMARY KEY AUTOINCREMENT,
started_at TEXT NOT NULL,
ended_at TEXT,
rounds INTEGER DEFAULT 0
total_players INTEGER DEFAULT 0
);
CREATE TABLE IF NOT EXISTS scores (
id INTEGER PRIMARY KEY AUTOINCREMENT,
session_id INTEGER REFERENCES sessions(id),
session_id INTEGER NOT NULL REFERENCES sessions(id),
player TEXT NOT NULL,
score INTEGER DEFAULT 0,
score INTEGER NOT NULL DEFAULT 0,
rank INTEGER,
dept TEXT NOT NULL DEFAULT '',
finished_at TEXT NOT NULL
);
""")
# safe migration if dept column missing from older DB
# Safe migration: add dept column if it doesn't exist yet
try:
conn.execute("ALTER TABLE scores ADD COLUMN dept TEXT NOT NULL DEFAULT ''")
except Exception:
pass
pass # column already exists
init_db()
# ── GRID ──────────────────────────────────────────────────────────────────────
GRID_SIZE = 4
def save_session(players: list) -> int:
now = datetime.utcnow().isoformat()
with get_db() as conn:
cur = conn.execute(
"INSERT INTO sessions (started_at, ended_at, total_players) VALUES (?,?,?)",
(now, now, len(players))
)
session_id = cur.lastrowid
ranked = sorted(players, key=lambda p: p["score"], reverse=True)
for rank, p in enumerate(ranked, 1):
conn.execute(
"INSERT INTO scores (session_id, player, score, rank, dept, finished_at) VALUES (?,?,?,?,?,?)",
(session_id, p.get("display", p["name"]), p["score"], rank, p.get("dept", ""), now)
)
return session_id
MODIFIER_TYPES = [
"normal", "normal", "normal", "normal", "normal", "normal",
"slow", "slow", "boost", "blocked"
]
# ── APP ───────────────────────────────────────────────────────────────────────
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
def generate_grid():
nodes = []
for row in range(GRID_SIZE):
for col in range(GRID_SIZE):
nodes.append({"id": row * GRID_SIZE + col, "row": row, "col": col})
corners = [0, 3, 12, 15]
start = random.choice(corners)
opposite = {0: 15, 3: 12, 12: 3, 15: 0}
end = opposite[start]
for attempt in range(20):
edges = []
for row in range(GRID_SIZE):
for col in range(GRID_SIZE):
nid = row * GRID_SIZE + col
if col + 1 < GRID_SIZE:
edges.append({"a": nid, "b": nid + 1, "modifier": random.choice(MODIFIER_TYPES)})
if row + 1 < GRID_SIZE:
edges.append({"a": nid, "b": nid + GRID_SIZE, "modifier": random.choice(MODIFIER_TYPES)})
# Validate: start node must have at least one non-blocked neighbor
start_edges = [e for e in edges if e["a"] == start or e["b"] == start]
if any(e["modifier"] != "blocked" for e in start_edges):
break
# If all attempts failed (extremely unlikely), force one start edge open
else:
for e in edges:
if e["a"] == start or e["b"] == start:
e["modifier"] = "normal"
break
return {"nodes": nodes, "edges": edges, "start": start, "end": end}
def score_path(path: list, edges: list, elapsed: float, time_limit: float, end_node: int) -> dict:
if not path or path[-1] != end_node:
return {"points": 0, "reason": "no_path"}
edge_map = {}
for e in edges:
edge_map[(e["a"], e["b"])] = e["modifier"]
edge_map[(e["b"], e["a"])] = e["modifier"]
hop_cost = 0
valid = True
for i in range(len(path) - 1):
a, b = path[i], path[i + 1]
mod = edge_map.get((a, b))
if mod is None or mod == "blocked":
valid = False
break
elif mod == "slow":
hop_cost += 2
elif mod == "boost":
hop_cost += 0.5
else:
hop_cost += 1
if not valid:
return {"points": 0, "reason": "invalid_path", "hops": len(path) - 1}
base = 1000
speed_bonus = int(500 * max(0, (time_limit - elapsed) / time_limit))
efficiency_penalty = int(max(0, hop_cost - (GRID_SIZE - 1)) * 50)
points = max(0, base + speed_bonus - efficiency_penalty)
return {
"points": points,
"reason": "ok",
"hops": len(path) - 1,
"hop_cost": hop_cost,
"speed_bonus": speed_bonus,
"efficiency_penalty": efficiency_penalty,
# ── QUESTIONS ─────────────────────────────────────────────────────────────────
QUESTIONS = [
{
"q": "¿Cuál es el enfoque principal del equipo de Network Intelligence?",
"options": [
"Vender licencias de software a otras empresas",
"Construir herramientas propias que empoderan a los equipos operacionales",
"Administrar el presupuesto de TI de LCPR",
"Instalar equipos físicos en planta externa"
],
"correct": 1,
"fun_fact": "¡Exacto! Construimos para quienes operan la red día a día — no solo dashboards bonitos."
},
{
"q": "¿Qué problema resolvió el equipo al reemplazar Power BI con frontend propio?",
"options": [
"La pantalla se veía más bonita",
"Eliminamos la dependencia de licencias costosas y ganamos control total",
"Fue más fácil de instalar en los servidores",
"Los colores del dashboard coincidían con los de Liberty"
],
"correct": 1,
"fun_fact": "$0 en licencias de visualización. El código es nuestro y lo extendemos como queremos."
},
{
"q": "¿Qué es Pathfinder?",
"options": [
"Una aplicación para rastrear camiones de campo",
"Un sistema de GPS para la red de fibra",
"Una plataforma web que centraliza herramientas operacionales de red en un solo lugar",
"Un reporte mensual de disponibilidad de red"
],
"correct": 2,
"fun_fact": "Pathfinder es el 'panel de control' propio de LCPR — construido exactamente para nuestros flujos de trabajo."
},
{
"q": "¿Qué logró el proyecto de Firmware Upgrade Automation?",
"options": [
"Actualizar manualmente 10 modems por semana",
"Contratar más técnicos para visitas a domicilio",
"Automatizar la actualización masiva de modems sin intervención humana",
"Comprar equipos nuevos para reemplazar los modems viejos"
],
"correct": 2,
"fun_fact": "400+ modems actualizados en batches automáticos. Antes era trabajo manual uno por uno."
},
{
"q": "¿Hacia dónde se dirige el equipo en su visión AIOps?",
"options": [
"Depender más de herramientas comerciales como ServiceNow",
"Detectar y predecir fallas antes de que el cliente las reporte",
"Reducir el equipo de ingeniería a la mitad",
"Migrar toda la red a la nube pública"
],
"correct": 1,
"fun_fact": "La meta: que el técnico salga a campo con el diagnóstico ya hecho — no a diagnosticar."
}
]
# ── GAME STATE ────────────────────────────────────────────────────────────────
class GameState:
@@ -139,59 +128,56 @@ class GameState:
def reset(self):
self.phase = "lobby"
self.players = {}
self.current_round = 0
self.total_rounds = 3
self.grid = None
self.round_start = 0
self.time_limit = 30
self.prize_threshold = PRIZE_THRESHOLD # can be overridden by host
self.submissions = {}
self.session_id = None
self.players: dict = {}
self.current_q = -1
self.q_start_time = 0
self.answers_this_round = []
self.question_order = list(range(len(QUESTIONS)))
random.shuffle(self.question_order)
game = GameState()
# ── CONNECTION MANAGER ────────────────────────────────────────────────────────
class ConnMgr:
class ConnectionManager:
def __init__(self):
self.players = {}
self.hosts = []
self.players: dict = {}
self.hosts: list = []
async def connect_player(self, pid, ws):
async def connect_player(self, ws_id: str, ws: WebSocket):
await ws.accept()
self.players[pid] = ws
self.players[ws_id] = ws
async def connect_host(self, ws):
async def connect_host(self, ws: WebSocket):
await ws.accept()
self.hosts.append(ws)
def disconnect(self, pid):
self.players.pop(pid, None)
game.players.pop(pid, None)
def disconnect(self, ws_id: str):
self.players.pop(ws_id, None)
game.players.pop(ws_id, None)
def disconnect_host(self, ws):
def disconnect_host(self, ws: WebSocket):
if ws in self.hosts:
self.hosts.remove(ws)
async def send(self, pid, data):
ws = self.players.get(pid)
async def send_to(self, ws_id: str, data: dict):
ws = self.players.get(ws_id)
if ws:
try:
await ws.send_json(data)
except Exception:
pass
async def broadcast_players(self, data):
async def broadcast_players(self, data: dict):
dead = []
for pid, ws in list(self.players.items()):
for ws_id, ws in list(self.players.items()):
try:
await ws.send_json(data)
except Exception:
dead.append(pid)
dead.append(ws_id)
for d in dead:
self.disconnect(d)
async def broadcast_hosts(self, data):
async def broadcast_hosts(self, data: dict):
dead = []
for ws in list(self.hosts):
try:
@@ -201,84 +187,21 @@ class ConnMgr:
for d in dead:
self.disconnect_host(d)
async def broadcast_all(self, data):
async def broadcast_all(self, data: dict):
await self.broadcast_players(data)
await self.broadcast_hosts(data)
mgr = ConnMgr()
mgr = ConnectionManager()
def leaderboard():
def get_leaderboard():
ranked = sorted(game.players.values(), key=lambda p: p["score"], reverse=True)
return [{"name": p.get("display", p["name"]), "score": p["score"], "dept": p.get("dept","")} for p in ranked]
def dept_leaderboard():
"""
Group players by dept and compute:
- avg_score : mean individual score across all players in the group
- pct : avg_score as % of MAX_SCORE_PER_PLAYER (4500 pts)
- prize_pts : prize points earned (max 25, anchored at PRIZE_THRESHOLD=3000)
- player_count: number of players in the group
Sorted by avg_score descending.
"""
groups = {}
for p in game.players.values():
dept = p.get("dept", "") or ""
if dept not in groups:
groups[dept] = []
groups[dept].append(p["score"])
result = []
for dept, scores in groups.items():
n = len(scores)
avg = round(sum(scores) / n) if n else 0
pct = round((avg / MAX_SCORE_PER_PLAYER) * 100, 1)
prize = min(MAX_PRIZE_POINTS, round((avg / game.prize_threshold) * MAX_PRIZE_POINTS))
result.append({
"dept": dept,
"avg_score": avg,
"pct": pct,
"prize_pts": prize,
"player_count": n,
"total_score": sum(scores),
})
result.sort(key=lambda x: x["avg_score"], reverse=True)
# Add rank
for i, r in enumerate(result, 1):
r["rank"] = i
return result
def save_session():
now = datetime.utcnow().isoformat()
with get_db() as conn:
if not game.session_id:
cur = conn.execute(
"INSERT INTO sessions (started_at, ended_at, rounds) VALUES (?,?,?)",
(now, now, game.current_round)
)
game.session_id = cur.lastrowid
else:
conn.execute(
"UPDATE sessions SET ended_at=?, rounds=? WHERE id=?",
(now, game.current_round, game.session_id)
)
ranked = sorted(game.players.values(), key=lambda p: p["score"], reverse=True)
conn.execute("DELETE FROM scores WHERE session_id=?", (game.session_id,))
for rank, p in enumerate(ranked, 1):
conn.execute(
"INSERT INTO scores (session_id, player, score, rank, dept, finished_at) VALUES (?,?,?,?,?,?)",
(game.session_id, p.get("display", p["name"]), p["score"], rank, p.get("dept", ""), now)
)
# ── ROUTES ────────────────────────────────────────────────────────────────────
@app.get("/", response_class=HTMLResponse)
async def player_page(request: Request):
return templates.TemplateResponse("player.html", {"request": request})
@app.get("/practice", response_class=HTMLResponse)
async def practice_page(request: Request):
return templates.TemplateResponse("practice.html", {"request": request})
@app.get("/host", response_class=HTMLResponse)
async def host_page(request: Request):
return templates.TemplateResponse("host.html", {"request": request})
@@ -287,11 +210,18 @@ async def host_page(request: Request):
async def scores_page(request: Request):
return templates.TemplateResponse("scores.html", {"request": request})
@app.delete("/api/scores/clear")
async def clear_scores():
with get_db() as conn:
conn.execute("DELETE FROM scores")
conn.execute("DELETE FROM sessions")
return {"ok": True}
@app.get("/api/scores")
async def api_scores():
with get_db() as conn:
sessions = conn.execute(
"SELECT * FROM sessions ORDER BY started_at DESC LIMIT 20"
"SELECT * FROM sessions ORDER BY started_at DESC LIMIT 50"
).fetchall()
result = []
for s in sessions:
@@ -302,94 +232,84 @@ async def api_scores():
result.append({
"id": s["id"],
"started_at": s["started_at"],
"rounds": s["rounds"],
"players": [
{
"player": p["player"],
"score": p["score"],
"rank": p["rank"],
"dept": p["dept"] if "dept" in p.keys() else "",
}
for p in players
],
"ended_at": s["ended_at"],
"total_players": s["total_players"],
"players": [{"player": p["player"], "score": p["score"], "rank": p["rank"], "dept": p["dept"] if "dept" in p.keys() else ""} for p in players]
})
return JSONResponse(result)
@app.delete("/api/scores/clear")
async def clear_scores():
with get_db() as conn:
conn.execute("DELETE FROM scores")
conn.execute("DELETE FROM sessions")
return {"ok": True}
# ── PLAYER WEBSOCKET ──────────────────────────────────────────────────────────
@app.websocket("/ws/player/{pid}")
async def player_ws(ws: WebSocket, pid: str):
await mgr.connect_player(pid, ws)
@app.websocket("/ws/player/{ws_id}")
async def player_ws(ws: WebSocket, ws_id: str):
await mgr.connect_player(ws_id, ws)
try:
await mgr.send(pid, {"type": "phase", "phase": game.phase})
await mgr.send_to(ws_id, {"type": "phase", "phase": game.phase})
async for raw in ws.iter_text():
msg = json.loads(raw)
if msg["type"] == "join":
name = msg["name"].strip()[:30]
name = msg["name"].strip()[:40]
dept = msg.get("dept", "").strip()[:40]
display = msg.get("display", name).strip()[:30]
if not name or len(game.players) >= 4:
await mgr.send(pid, {"type": "error", "msg": "Game full or invalid name"})
display = msg.get("display", name).strip()[:40]
if not name:
continue
game.players[pid] = {
"name": name,
"display": display,
"dept": dept,
"score": 0,
"submitted": False,
}
await mgr.send(pid, {"type": "joined", "name": name, "display": display, "dept": dept})
game.players[ws_id] = {"name": name, "score": 0, "answered": False, "dept": dept, "display": display}
await mgr.send_to(ws_id, {"type": "joined", "name": name, "display": display, "dept": dept})
await mgr.broadcast_hosts({
"type": "lobby_update",
"players": [p.get("display", p["name"]) for p in game.players.values()],
"count": len(game.players),
"players": [{"name": p["name"], "display": p.get("display", p["name"]), "dept": p.get("dept","")} for p in game.players.values()],
"count": len(game.players)
})
elif msg["type"] == "submit_path":
if game.phase != "playing":
elif msg["type"] == "answer":
if game.phase != "question":
continue
player = game.players.get(pid)
if not player or player["submitted"]:
player = game.players.get(ws_id)
if not player or player["answered"]:
continue
elapsed = time.time() - game.round_start
path = msg.get("path", [])
result = score_path(path, game.grid["edges"], elapsed, game.time_limit, game.grid["end"])
player["score"] += result["points"]
player["submitted"] = True
game.submissions[pid] = {
"name": player.get("display", player["name"]),
"path": path,
"points": result["points"],
"elapsed": round(elapsed, 2),
"reason": result["reason"],
}
await mgr.send(pid, {
"type": "path_result",
"points": result["points"],
"total": player["score"],
"reason": result["reason"],
"elapsed": round(elapsed, 2),
elapsed = time.time() - game.q_start_time
TIME_LIMIT = 15
if elapsed > TIME_LIMIT:
continue
player["answered"] = True
chosen = msg["choice"]
q_idx = game.question_order[game.current_q]
correct = QUESTIONS[q_idx]["correct"]
is_correct = chosen == correct
points = 0
if is_correct:
speed_bonus = max(0, (TIME_LIMIT - elapsed) / TIME_LIMIT)
points = int(200 + 800 * speed_bonus)
player["score"] += points
game.answers_this_round.append({
"name": player["name"], "correct": is_correct, "elapsed": round(elapsed, 2)
})
await mgr.send_to(ws_id, {
"type": "answer_result",
"correct": is_correct,
"points": points,
"total": player["score"],
"correct_idx": correct
})
answered = sum(1 for p in game.players.values() if p["answered"])
await mgr.broadcast_hosts({
"type": "submission_update",
"submitted": sum(1 for p in game.players.values() if p["submitted"]),
"type": "answer_update",
"answered": answered,
"total": len(game.players),
"submissions": list(game.submissions.values()),
"details": game.answers_this_round
})
except WebSocketDisconnect:
mgr.disconnect(pid)
mgr.disconnect(ws_id)
await mgr.broadcast_hosts({
"type": "lobby_update",
"players": [p.get("display", p["name"]) for p in game.players.values()],
"count": len(game.players),
"players": [{"name": p["name"], "display": p.get("display", p["name"]), "dept": p.get("dept","")} for p in game.players.values()],
"count": len(game.players)
})
# ── HOST WEBSOCKET ────────────────────────────────────────────────────────────
@@ -399,56 +319,63 @@ async def host_ws(ws: WebSocket):
try:
await ws.send_json({
"type": "lobby_update",
"players": [p.get("display", p["name"]) for p in game.players.values()],
"count": len(game.players),
"players": [{"name": p["name"], "display": p.get("display", p["name"]), "dept": p.get("dept","")} for p in game.players.values()],
"count": len(game.players)
})
async for raw in ws.iter_text():
msg = json.loads(raw)
if msg["type"] == "start_round":
# accept config params from host on first round
if "total_rounds" in msg:
game.total_rounds = int(msg["total_rounds"])
if "time_limit" in msg:
game.time_limit = int(msg["time_limit"])
if "prize_threshold" in msg:
pt = int(msg["prize_threshold"])
game.prize_threshold = max(500, min(4500, pt)) # clamp to valid range
game.grid = generate_grid()
game.phase = "playing"
game.round_start = time.time()
game.current_round += 1
game.submissions = {}
if msg["type"] == "start_game":
existing_players = dict(game.players) # preserve joined players
game.reset()
game.players = existing_players # restore them
# Reset scores and state for a fresh game
for p in game.players.values():
p["submitted"] = False
p["score"] = 0
p["answered"] = False
await mgr.broadcast_all({"type": "phase", "phase": "lobby"})
elif msg["type"] == "next_question":
game.current_q += 1
if game.current_q >= len(QUESTIONS):
lb = get_leaderboard()
save_session(list(game.players.values())) # ← persist to SQLite
game.phase = "podium"
await mgr.broadcast_all({"type": "podium", "leaderboard": lb})
continue
game.phase = "question"
game.q_start_time = time.time()
game.answers_this_round = []
for p in game.players.values():
p["answered"] = False
q_idx = game.question_order[game.current_q]
q = QUESTIONS[q_idx]
await mgr.broadcast_all({
"type": "round_start",
"round": game.current_round,
"total_rounds": game.total_rounds,
"grid": game.grid,
"time_limit": game.time_limit,
"type": "question",
"number": game.current_q + 1,
"total": len(QUESTIONS),
"q": q["q"],
"options": q["options"],
"time_limit": 15,
"correct_idx_hint": -1 # not revealed until show_results
})
elif msg["type"] == "end_round":
elif msg["type"] == "show_results":
game.phase = "results"
lb = leaderboard()
dept_lb = dept_leaderboard()
save_session()
q_idx = game.question_order[game.current_q]
q = QUESTIONS[q_idx]
await mgr.broadcast_all({
"type": "round_results",
"round": game.current_round,
"grid": game.grid,
"submissions": list(game.submissions.values()),
"leaderboard": lb,
"dept_leaderboard": dept_lb,
"is_final": game.current_round >= game.total_rounds,
"max_score": MAX_SCORE_PER_PLAYER,
"prize_threshold": PRIZE_THRESHOLD,
"max_prize_pts": MAX_PRIZE_POINTS,
"type": "results",
"correct_idx": q["correct"],
"fun_fact": q["fun_fact"],
"leaderboard": get_leaderboard()
})
elif msg["type"] == "reset":
# Kick all players back to join screen, then wipe state
await mgr.broadcast_players({"type": "kicked"})
game.reset()
await mgr.broadcast_hosts({"type": "lobby_update", "players": [], "count": 0})
+64 -162
View File
@@ -10,17 +10,17 @@
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg:#ffffff;
--surface:#f0f4f8;
--surface2:#e2e8f0;
--accent:#0077cc;
--accent2:#cc0033;
--warn:#b35c00;
--slow:#cc4400;
--boost:#00994d;
--bg:#070b14;
--surface:#0d1220;
--surface2:#131928;
--accent:#00ffe0;
--accent2:#ff3e6c;
--warn:#ffb800;
--slow:#ff6b00;
--boost:#00ff88;
--blocked:#ff1744;
--text:#0a0f1e;
--muted:#4a5568;
--text:#ddeeff;
--muted:#3a4a66;
--mono:'Share Tech Mono',monospace;
--sans:'Exo 2',sans-serif;
}
@@ -31,52 +31,11 @@ html,body{width:100%;height:100vh;background:var(--bg);color:var(--text);
body::before{
content:'';position:fixed;inset:0;
background-image:
linear-gradient(rgba(0,119,204,0.08) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,119,204,0.08) 1px,transparent 1px);
linear-gradient(rgba(0,255,224,0.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,255,224,0.025) 1px,transparent 1px);
background-size:40px 40px;pointer-events:none;
}
/* ── PASSWORD GATE ── */
#auth-gate{
position:fixed;inset:0;z-index:9999;
background:var(--bg);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:1.5rem;
}
#auth-gate .logo{
font-family:var(--sans);font-weight:900;font-size:3rem;letter-spacing:-0.02em;
color:var(--accent);text-shadow:0 0 30px rgba(0,119,204,0.4);line-height:1;
}
#auth-gate .logo span{color:var(--accent2);}
#auth-gate .gate-label{
font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;color:var(--muted);
}
#auth-gate .gate-field{
display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;max-width:300px;
}
#auth-pass{
width:100%;padding:.9rem 1rem;text-align:center;
background:var(--surface);border:1px solid rgba(0,119,204,0.4);border-radius:3px;
color:var(--text);font-family:var(--mono);font-size:1.1rem;letter-spacing:.15em;
outline:none;transition:border-color .2s;
}
#auth-pass:focus{border-color:var(--accent);}
#auth-pass.shake{animation:shake .3s ease both;}
#auth-btn{
width:100%;padding:.85rem;
background:var(--accent);border:none;border-radius:3px;
color:#fff;font-family:var(--mono);font-size:.75rem;letter-spacing:.15em;
cursor:pointer;transition:opacity .2s;
}
#auth-btn:hover{opacity:.9;}
#auth-btn:active{transform:scale(.97);}
#auth-err{
font-family:var(--mono);font-size:.65rem;color:var(--accent2);
letter-spacing:.1em;opacity:0;transition:opacity .2s;
}
#auth-err.visible{opacity:1;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.screen{display:none;height:100vh;}
.screen.active{display:flex;}
@@ -84,14 +43,14 @@ body::before{
#lobby-screen{flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;}
.logo{font-family:var(--sans);font-weight:900;font-size:4rem;letter-spacing:-0.02em;line-height:1;
color:var(--accent);text-shadow:0 0 40px rgba(0,119,204,0.6);margin-bottom:.25rem;}
color:var(--accent);text-shadow:0 0 40px rgba(0,255,224,.4);margin-bottom:.25rem;}
.logo span{color:var(--accent2);}
.tagline{font-family:var(--mono);font-size:.85rem;color:var(--text);letter-spacing:.15em;margin-bottom:2.5rem;}
.lobby-row{display:flex;gap:2rem;align-items:flex-start;justify-content:center;width:100%;max-width:800px;margin-bottom:2rem;}
/* QR */
.qr-box{background:var(--surface);border:1px solid rgba(0,119,204,0.25);border-radius:4px;
.qr-box{background:var(--surface);border:1px solid rgba(0,255,224,.1);border-radius:4px;
padding:1.25rem;text-align:center;min-width:200px;}
.box-label{font-family:var(--mono);font-size:.75rem;color:var(--text);letter-spacing:.15em;margin-bottom:.75rem;}
#qrcode{display:flex;justify-content:center;margin-bottom:.75rem;}
@@ -99,21 +58,21 @@ body::before{
.qr-url{font-family:var(--mono);font-size:.85rem;color:var(--accent);}
/* Players box */
.players-box{flex:1;background:var(--surface);border:1px solid rgba(0,119,204,0.25);
.players-box{flex:1;background:var(--surface);border:1px solid rgba(0,255,224,.1);
border-radius:4px;padding:1.25rem;}
.player-count{font-family:var(--sans);font-weight:900;font-size:4.5rem;
letter-spacing:-0.04em;color:var(--accent);line-height:1;margin-bottom:.15rem;}
.player-count-sub{font-family:var(--mono);font-size:.8rem;color:var(--text);margin-bottom:1rem;}
.p-chips{display:flex;flex-wrap:wrap;gap:.4rem;max-height:100px;overflow-y:auto;}
.p-chip{padding:.4rem .9rem;border-radius:2px;
background:var(--surface2);border:1px solid rgba(0,119,204,0.4);
background:var(--surface2);border:1px solid rgba(0,255,224,.25);
font-family:var(--mono);font-size:.85rem;color:var(--accent);}
/* rounds config */
.rounds-cfg{display:flex;align-items:center;gap:.75rem;margin-top:1.5rem;
font-family:var(--mono);font-size:.8rem;color:var(--text);}
.rounds-cfg select{
background:var(--surface2);border:1px solid rgba(0,119,204,0.4);
background:var(--surface2);border:1px solid rgba(0,255,224,.25);
color:var(--accent);font-family:var(--mono);font-size:.8rem;
padding:.4rem .7rem;border-radius:2px;outline:none;cursor:pointer;
}
@@ -134,7 +93,7 @@ body::before{
.game-left{
flex:1;display:flex;flex-direction:column;
padding:1.25rem;border-right:1px solid rgba(0,119,204,0.15);
padding:1.25rem;border-right:1px solid rgba(0,255,224,.08);
overflow:hidden;
}
@@ -148,17 +107,19 @@ body::before{
.objective-bar{
display:flex;align-items:center;gap:.75rem;
padding:.75rem 1.25rem;
background:var(--surface);border:1px solid rgba(0,119,204,0.35);border-radius:3px;
background:var(--surface);border:1px solid rgba(0,255,224,.2);border-radius:3px;
margin-bottom:1rem;font-family:var(--mono);font-size:.85rem;color:var(--text);
}
.obj-node{display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;border-radius:50%;font-weight:800;font-size:1.1rem;}
.obj-start{background:rgba(0,119,204,0.3);border:2px solid var(--accent);color:var(--accent);}
.obj-start{background:rgba(0,255,224,.15);border:2px solid var(--accent);color:var(--accent);}
.obj-end{background:rgba(255,62,108,.15);border:2px solid var(--accent2);color:var(--accent2);}
/* host grid */
.grid-wrap{flex:1;display:flex;align-items:center;justify-content:center;}
#host-canvas{display:block;border-radius:4px;}
/* legend */
.legend{display:flex;gap:1.25rem;margin-top:.75rem;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:.4rem;
font-family:var(--mono);font-size:.75rem;color:var(--text);}
@@ -169,7 +130,8 @@ body::before{
padding:1.25rem;gap:1rem;overflow-y:auto;
}
.panel{background:var(--surface);border:1px solid rgba(0,119,204,0.3);
/* submission panel */
.panel{background:var(--surface);border:1px solid rgba(0,255,224,.15);
border-radius:4px;padding:1rem;}
.panel-title{font-family:var(--mono);font-size:.7rem;color:var(--text);
letter-spacing:.12em;margin-bottom:.75rem;}
@@ -179,19 +141,21 @@ body::before{
.ans-bar-wrap{height:4px;background:var(--surface2);border-radius:2px;}
.ans-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .3s;}
/* submission list */
.sub-list{display:flex;flex-direction:column;gap:.4rem;margin-top:.75rem;}
.sub-item{display:flex;align-items:center;gap:.5rem;
padding:.6rem .75rem;border-radius:2px;
background:var(--surface2);border:1px solid rgba(0,119,204,0.25);
background:var(--surface2);border:1px solid rgba(0,255,224,.1);
font-family:var(--mono);font-size:.8rem;}
.sub-name{flex:1;color:var(--text);}
.sub-pts{color:var(--accent);font-size:.8rem;}
.sub-pts.fail{color:var(--accent2);}
.sub-time{color:var(--muted);font-size:.7rem;}
/* leaderboard */
.lb-item{display:flex;align-items:center;gap:.5rem;
padding:.55rem .75rem;margin-bottom:.35rem;border-radius:2px;
background:var(--surface2);border:1px solid rgba(0,119,204,0.25);}
background:var(--surface2);border:1px solid rgba(0,255,224,.1);}
.lb-rank{font-family:var(--mono);font-size:.7rem;color:var(--text);min-width:22px;}
.lb-name{flex:1;font-size:1rem;font-weight:700;}
.lb-score{font-family:var(--mono);font-size:.7rem;color:var(--accent);}
@@ -203,7 +167,7 @@ body::before{
.results-top{
display:flex;justify-content:space-between;align-items:center;
padding:1rem 1.5rem;border-bottom:1px solid rgba(0,119,204,0.15);
padding:1rem 1.5rem;border-bottom:1px solid rgba(0,255,224,.08);
}
.results-title{font-family:var(--sans);font-weight:900;font-size:2rem;
letter-spacing:-0.02em;color:var(--accent);}
@@ -211,17 +175,19 @@ body::before{
.results-body{display:flex;flex:1;gap:0;overflow:hidden;}
/* results grid */
.results-left{flex:1;display:flex;flex-direction:column;
padding:1.25rem;border-right:1px solid rgba(0,119,204,0.15);}
padding:1.25rem;border-right:1px solid rgba(0,255,224,.08);}
.results-grid-wrap{flex:1;display:flex;align-items:center;justify-content:center;}
#results-canvas{display:block;border-radius:4px;}
/* results right */
.results-right{width:300px;padding:1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;}
.path-cards{display:flex;flex-direction:column;gap:.5rem;}
.path-card{
padding:.7rem .9rem;border-radius:3px;
background:var(--surface);border:1px solid rgba(0,119,204,0.15);
background:var(--surface);border:1px solid rgba(0,255,224,.08);
}
.path-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem;}
.path-player{font-weight:700;font-size:1rem;}
@@ -233,7 +199,7 @@ body::before{
.path-node{
display:inline-flex;align-items:center;justify-content:center;
width:20px;height:20px;border-radius:50%;
background:var(--surface2);border:1px solid rgba(0,119,204,0.3);
background:var(--surface2);border:1px solid rgba(0,255,224,.15);
font-family:var(--mono);font-size:.5rem;color:var(--accent);
}
.path-arrow{font-size:.5rem;color:var(--muted);align-self:center;}
@@ -263,7 +229,7 @@ body::before{
.rest-list{display:flex;flex-direction:column;gap:.4rem;max-width:420px;width:100%;}
.rest-item{display:flex;align-items:center;gap:.75rem;
padding:.65rem 1rem;border-radius:3px;
background:var(--surface);border:1px solid rgba(0,119,204,0.25);font-size:1rem;}
background:var(--surface);border:1px solid rgba(0,255,224,.12);font-size:1rem;}
.rest-rank{font-family:var(--mono);font-size:.7rem;color:var(--text);min-width:24px;}
.rest-name{flex:1;font-weight:700;}
.rest-score{font-family:var(--mono);font-size:.7rem;color:var(--accent);}
@@ -281,20 +247,8 @@ body::before{
</head>
<body>
<!-- ── AUTH GATE ── -->
<div id="auth-gate">
<div class="logo">ROUTE<span>RUSH</span></div>
<div class="gate-label">// HOST ACCESS REQUIRED</div>
<div class="gate-field">
<input type="password" id="auth-pass" placeholder="PASSWORD" autocomplete="off" autocorrect="off"
onkeydown="if(event.key==='Enter')checkAuth()">
<button id="auth-btn" onclick="checkAuth()">▶ ENTER HOST PANEL</button>
<div id="auth-err">INCORRECT PASSWORD</div>
</div>
</div>
<!-- LOBBY -->
<div class="screen" id="lobby-screen">
<div class="screen active" id="lobby-screen">
<div class="logo">ROUTE<span>RUSH</span></div>
<div class="tagline">// HOST CONTROL PANEL</div>
<div class="lobby-row">
@@ -306,7 +260,7 @@ body::before{
<div class="players-box">
<div class="box-label">PLAYERS CONNECTED</div>
<div class="player-count" id="player-count">0</div>
<div class="player-count-sub">/ 16 MAX</div>
<div class="player-count-sub">/ 4 MAX</div>
<div class="p-chips" id="p-chips"></div>
<div class="rounds-cfg">
<span>ROUNDS:</span>
@@ -321,18 +275,11 @@ body::before{
<option value="45">45s</option>
<option value="60">60s</option>
</select>
<span>PRIZE AVG:</span>
<input id="prize-threshold" type="number" value="3000" min="500" max="4500" step="100"
style="width:72px;background:var(--surface2);border:1px solid rgba(0,119,204,0.4);
color:var(--accent);font-family:var(--mono);font-size:.8rem;
padding:.4rem .5rem;border-radius:2px;outline:none;text-align:center;">
<span style="font-size:.65rem;color:var(--muted)">= 25 PTS</span>
</div>
</div>
</div>
<div class="btn-row">
<button class="hbtn hbtn-primary" id="start-btn" disabled onclick="startRound()">▶ START GAME</button>
<button class="hbtn hbtn-danger" onclick="clearLobby()">✕ CLEAR LOBBY</button>
<button class="hbtn hbtn-danger" onclick="clearScores()">🗑 CLEAR SCORES</button>
<button class="hbtn hbtn-secondary" onclick="location.href='scores'">📊 HISTORY</button>
</div>
@@ -435,50 +382,24 @@ body::before{
</div>
<script>
// ── AUTH GATE ─────────────────────────────────────────────────────────────────
const HOST_PASS = 'ni2026';
function checkAuth() {
const val = document.getElementById('auth-pass').value;
if (val === HOST_PASS) {
document.getElementById('auth-gate').style.display = 'none';
initHost();
} else {
const inp = document.getElementById('auth-pass');
const err = document.getElementById('auth-err');
inp.classList.remove('shake');
void inp.offsetWidth; // reflow to restart animation
inp.classList.add('shake');
err.classList.add('visible');
inp.value = '';
inp.focus();
setTimeout(() => err.classList.remove('visible'), 2000);
}
}
// ── STATE ────────────────────────────────────────────────────────────────────
let ws, timerInterval;
let currentGrid = null, currentRound = 0, currentTotal = 0, totalPlayers = 0;
let lastSubmissions = [], lastLeaderboard = [];
// ── INIT (called after auth) ──────────────────────────────────────────────────
function initHost() {
// QR Code
// ── QR ────────────────────────────────────────────────────────────────────────
const baseUrl = `${location.protocol}//${location.hostname}${location.port?':'+location.port:''}${location.pathname.replace(/\/host\/?$/,'')}`;
document.getElementById('join-url').textContent = baseUrl;
new QRCode(document.getElementById('qrcode'), {
text: baseUrl,
width: 200, height: 200,
colorDark: '#0077cc', colorLight: '#ffffff',
colorDark: '#00ffe0', colorLight: '#0d1220',
correctLevel: QRCode.CorrectLevel.M
});
connectWS();
show('lobby-screen');
}
// ── CANVAS ────────────────────────────────────────────────────────────────────
const GRID = 4;
const MOD_COLOR = {normal:'#0077cc', slow:'#ff6b00', boost:'#00ff88', blocked:'#ff1744'};
const MOD_COLOR = {normal:'#00ffe0', slow:'#ff6b00', boost:'#00ff88', blocked:'#ff1744'};
function setupCanvas(canvasEl, wrapEl) {
const size = Math.min(wrapEl.clientWidth, wrapEl.clientHeight, 480);
@@ -492,7 +413,7 @@ function drawGridOnCanvas(canvasEl, grid, highlightPaths=[]) {
const size = canvasEl.width;
const ctx = canvasEl.getContext('2d');
const CELL = size / GRID;
const NODE_R = CELL * 0.14;
const NODE_R = CELL * 0.2;
const OX = CELL / 2, OY = CELL / 2;
function nodePos(id) {
@@ -501,61 +422,41 @@ function drawGridOnCanvas(canvasEl, grid, highlightPaths=[]) {
ctx.clearRect(0, 0, size, size);
// edges
grid.edges.forEach(e => {
const a = nodePos(e.a), b = nodePos(e.b);
const color = MOD_COLOR[e.modifier] || '#0077cc';
const color = MOD_COLOR[e.modifier] || '#00ffe0';
ctx.beginPath();
ctx.moveTo(a.x, a.y);
ctx.lineTo(b.x, b.y);
if (e.modifier === 'blocked') {
ctx.setLineDash([6,5]);
ctx.strokeStyle = 'rgba(255,23,68,0.55)';
ctx.lineWidth = 2.5;
} else if (e.modifier !== 'normal') {
ctx.setLineDash([]);
ctx.strokeStyle = `${color}bb`;
ctx.lineWidth = 3;
ctx.setLineDash([4,4]);
ctx.strokeStyle = 'rgba(255,23,68,0.25)';
ctx.lineWidth = 1.5;
} else {
ctx.setLineDash([]);
ctx.strokeStyle = `${color}66`;
ctx.lineWidth = 2;
ctx.strokeStyle = `${color}2a`;
ctx.lineWidth = 1.5;
}
ctx.stroke();
ctx.setLineDash([]);
// modifier label
if (e.modifier !== 'normal') {
const mx = (a.x+b.x)/2, my = (a.y+b.y)/2;
const label = e.modifier==='slow'?'x2':e.modifier==='boost'?'x½':'✕';
const fontSize = Math.max(14, CELL * 0.22);
ctx.font = `bold ${fontSize}px 'Share Tech Mono',monospace`;
const tw = ctx.measureText(label).width;
const padX = 8, padY = 5;
const bw = tw + padX*2, bh = fontSize + padY*2;
const bx = mx - bw/2, by = my - bh/2;
const r = 4;
ctx.beginPath();
ctx.moveTo(bx+r,by); ctx.lineTo(bx+bw-r,by);
ctx.quadraticCurveTo(bx+bw,by,bx+bw,by+r);
ctx.lineTo(bx+bw,by+bh-r);
ctx.quadraticCurveTo(bx+bw,by+bh,bx+bw-r,by+bh);
ctx.lineTo(bx+r,by+bh);
ctx.quadraticCurveTo(bx,by+bh,bx,by+bh-r);
ctx.lineTo(bx,by+r);
ctx.quadraticCurveTo(bx,by,bx+r,by);
ctx.closePath();
ctx.fillStyle = '#ffffff';
ctx.fill();
ctx.strokeStyle = color;
ctx.lineWidth = 2;
ctx.stroke();
const label = e.modifier==='slow'?'2×':e.modifier==='boost'?×':'✕';
ctx.fillStyle='rgba(7,11,20,0.9)';
ctx.fillRect(mx-12,my-9,24,18);
ctx.fillStyle=color;
ctx.font=`bold ${Math.max(12,CELL*.16)}px 'Share Tech Mono',monospace`;
ctx.textAlign='center';ctx.textBaseline='middle';
ctx.fillText(label,mx,my);
}
});
const pathColors = ['#0077cc','#cc0033','#ffb800','#cc44ff'];
// highlighted paths (player routes)
const pathColors = ['#00ffe0','#ff3e6c','#ffb800','#cc44ff'];
highlightPaths.forEach((p, pi) => {
if (!p || p.length < 2) return;
const color = pathColors[pi % pathColors.length];
@@ -577,6 +478,7 @@ function drawGridOnCanvas(canvasEl, grid, highlightPaths=[]) {
ctx.lineJoin = 'miter';
});
// nodes
grid.nodes.forEach(n => {
const {x,y} = nodePos(n.id);
const isStart = n.id === grid.start;
@@ -695,8 +597,7 @@ function startTimer(secs) {
function startRound() {
const rounds = parseInt(document.getElementById('rounds-select').value);
const timeLimit = parseInt(document.getElementById('time-select').value);
const prizeThreshold = parseInt(document.getElementById('prize-threshold').value) || 3000;
ws.send(JSON.stringify({type: 'start_round', total_rounds: rounds, time_limit: timeLimit, prize_threshold: prizeThreshold}));
ws.send(JSON.stringify({type: 'start_round', total_rounds: rounds, time_limit: timeLimit}));
}
function endRound() {
@@ -712,10 +613,6 @@ function nextRound() {
}
}
function clearLobby() {
ws.send(JSON.stringify({type: "reset"}));
}
function resetGame() {
clearInterval(timerInterval);
ws.send(JSON.stringify({type: 'reset'}));
@@ -734,13 +631,15 @@ function showResults(msg) {
document.getElementById('res-round-label').textContent = `ROUND ${msg.round} / ${currentTotal}`;
document.getElementById('next-btn').textContent = msg.is_final ? 'PODIUM →' : 'NEXT ROUND →';
// Draw grid with all paths
const rc = document.getElementById('results-canvas');
const wrap = document.querySelector('.results-grid-wrap');
setupCanvas(rc, wrap);
const paths = msg.submissions.map(s => s.path);
drawGridOnCanvas(rc, msg.grid, paths);
const pathColors = ['#0077cc','#cc0033','#ffb800','#cc44ff'];
// Path cards
const pathColors = ['#00ffe0','#ff3e6c','#ffb800','#cc44ff'];
document.getElementById('path-cards').innerHTML = msg.submissions.map((s, i) => {
const color = pathColors[i % pathColors.length];
const nodes = (s.path||[]).map(n =>
@@ -756,6 +655,7 @@ function showResults(msg) {
</div>`;
}).join('');
// Leaderboard
const medals = ['🥇','🥈','🥉'];
document.getElementById('res-lb').innerHTML = msg.leaderboard.map((p,i) =>
`<div class="lb-item">
@@ -793,7 +693,7 @@ function showPodium(lb) {
}
function confetti() {
const colors = ['#0077cc','#cc0033','#ffb800','#00ff88','#cc44ff'];
const colors = ['#00ffe0','#ff3e6c','#ffb800','#00ff88','#cc44ff'];
for (let i = 0; i < 70; i++) {
setTimeout(() => {
const el = document.createElement('div');
@@ -804,6 +704,8 @@ function confetti() {
}, i * 45);
}
}
connectWS();
</script>
</body>
</html>
+352 -792
View File
File diff suppressed because it is too large Load Diff
+73 -252
View File
@@ -9,15 +9,15 @@
*{margin:0;padding:0;box-sizing:border-box;}
:root{
--bg:#ffffff;
--surface:#f0f4f8;
--surface2:#e2e8f0;
--accent:#0077cc;
--accent2:#cc0033;
--bg:#070b14;
--surface:#0d1220;
--surface2:#131928;
--accent:#00ffe0;
--accent2:#ff3e6c;
--warn:#ffb800;
--boost:#00ff88;
--text:#0a0f1e;
--muted:#4a5568;
--text:#ddeeff;
--muted:#3a4a66;
--mono:'Share Tech Mono',monospace;
--sans:'Exo 2',sans-serif;
}
@@ -27,20 +27,20 @@ html,body{min-height:100vh;background:var(--bg);color:var(--text);font-family:va
body::before{
content:'';position:fixed;inset:0;
background-image:
linear-gradient(rgba(0,119,204,0.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,119,204,0.06) 1px,transparent 1px);
linear-gradient(rgba(0,255,224,0.025) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,255,224,0.025) 1px,transparent 1px);
background-size:40px 40px;pointer-events:none;z-index:0;
}
header{
position:relative;z-index:1;
padding:1.75rem 2rem 1.25rem;
border-bottom:1px solid rgba(0,119,204,0.12);
border-bottom:1px solid rgba(0,255,224,0.08);
display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:1rem;
}
.header-left h1{
font-family:var(--sans);font-weight:900;font-size:2rem;letter-spacing:-0.03em;
color:var(--accent);text-shadow:0 0 20px rgba(0,119,204,0.4);line-height:1;
color:var(--accent);text-shadow:0 0 20px rgba(0,255,224,.3);line-height:1;
}
.header-left h1 span{color:var(--accent2);}
.header-left p{font-family:var(--mono);font-size:.55rem;color:var(--muted);letter-spacing:.12em;margin-top:.3rem;}
@@ -48,108 +48,60 @@ header{
.nav-links a{
font-family:var(--mono);font-size:.6rem;color:var(--muted);
text-decoration:none;padding:.35rem .8rem;
border:1px solid rgba(0,119,204,0.15);border-radius:2px;
border:1px solid rgba(0,255,224,.1);border-radius:2px;
transition:all .15s;letter-spacing:.08em;
}
.nav-links a:hover{color:var(--accent);border-color:rgba(0,119,204,0.4);}
.nav-links a:hover{color:var(--accent);border-color:rgba(0,255,224,.3);}
main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem;}
#loading{text-align:center;color:var(--muted);padding:4rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;}
/* loading / empty */
#loading{text-align:center;color:var(--muted);padding:4rem;font-family:var(--mono);font-size:.75rem;
letter-spacing:.1em;}
#loading::after{content:'...';animation:dots 1.2s step-end infinite;}
@keyframes dots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}
#empty{display:none;text-align:center;padding:4rem;font-family:var(--mono);font-size:.7rem;color:var(--muted);}
#empty .icon{font-size:3rem;margin-bottom:1rem;display:block;}
#content{display:none;}
/* section */
.section{margin-bottom:2.5rem;}
.section-title{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;}
.section-title h2{font-family:var(--sans);font-weight:900;font-size:1.1rem;letter-spacing:-0.01em;}
.section-title{
display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem;
}
.section-title h2{
font-family:var(--sans);font-weight:900;font-size:1.1rem;letter-spacing:-0.01em;
}
.section-title .pill{
font-family:var(--mono);font-size:.45rem;letter-spacing:.15em;
padding:.2rem .5rem;border-radius:2px;
background:rgba(0,119,204,0.1);border:1px solid rgba(0,119,204,0.3);color:var(--accent);
background:rgba(0,255,224,.06);border:1px solid rgba(0,255,224,.15);color:var(--accent);
}
/* top cards */
.top-row{display:flex;gap:.75rem;flex-wrap:wrap;}
.top-card{
flex:1;min-width:140px;
background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px;
background:var(--surface);border:1px solid rgba(0,255,224,.08);border-radius:4px;
padding:.9rem 1.1rem;display:flex;align-items:center;gap:.75rem;
transition:border-color .2s;
}
.top-card:hover{border-color:rgba(0,119,204,0.35);}
.top-card.gold{border-color:rgba(255,184,0,.35);background:rgba(255,184,0,.04);}
.top-card.silver{border-color:rgba(180,180,180,.25);}
.top-card.bronze{border-color:rgba(160,90,30,.25);}
.top-card:hover{border-color:rgba(0,255,224,.2);}
.top-card.gold{border-color:rgba(255,184,0,.3);background:rgba(255,184,0,.04);}
.top-card.silver{border-color:rgba(180,180,180,.2);}
.top-card.bronze{border-color:rgba(160,90,30,.2);}
.top-medal{font-size:1.6rem;}
.top-info .top-name{font-weight:700;font-size:.9rem;margin-bottom:.15rem;}
.top-info .top-score{font-family:var(--sans);font-weight:900;font-size:1.2rem;letter-spacing:-0.02em;color:var(--accent);line-height:1;}
.top-info .top-score{
font-family:var(--sans);font-weight:900;font-size:1.2rem;
letter-spacing:-0.02em;color:var(--accent);line-height:1;
}
.top-info .top-meta{font-family:var(--mono);font-size:.45rem;color:var(--muted);margin-top:.15rem;}
.tabs{display:flex;gap:.5rem;margin-bottom:1.75rem;flex-wrap:wrap;border-bottom:1px solid rgba(0,119,204,0.12);padding-bottom:1rem;}
.tab-btn{
padding:.45rem 1.1rem;border-radius:2px;font-family:var(--mono);font-size:.62rem;
letter-spacing:.1em;border:1px solid rgba(0,119,204,0.2);
background:transparent;color:var(--muted);cursor:pointer;transition:all .15s;
}
.tab-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.tab-btn:hover:not(.active){border-color:var(--accent);color:var(--accent);}
.tab-panel{display:none;}
.tab-panel.active{display:block;}
.table-wrap{background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
thead th{
text-align:left;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
color:var(--muted);padding:.65rem 1.1rem;
border-bottom:1px solid rgba(0,119,204,0.1);
}
tbody td{padding:.6rem 1.1rem;font-size:.85rem;border-bottom:1px solid rgba(0,0,0,0.04);}
tbody tr:last-child td{border:none;}
tbody tr:hover{background:var(--surface2);}
.td-rank{font-family:var(--mono);font-weight:700;color:var(--muted);font-size:.8rem;}
.td-score{font-family:var(--sans);font-weight:800;color:var(--accent);font-size:.95rem;}
.td-medal{font-size:1rem;min-width:28px;}
.td-dept{font-family:var(--mono);font-size:.7rem;color:var(--muted);}
/* ── GROUP SCORE TABLE ── */
.group-score-intro{
font-family:var(--mono);font-size:.6rem;color:var(--muted);
margin-bottom:1.25rem;line-height:1.6;letter-spacing:.03em;
padding:.75rem 1rem;
background:rgba(0,119,204,0.04);border:1px solid rgba(0,119,204,0.12);border-radius:4px;
}
.group-score-intro strong{color:var(--accent);}
.prize-bar-wrap{display:flex;align-items:center;gap:.6rem;min-width:120px;}
.prize-bar{height:6px;border-radius:3px;background:rgba(0,119,204,0.12);flex:1;overflow:hidden;}
.prize-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.prize-pts{
font-family:var(--mono);font-weight:700;font-size:.8rem;
min-width:36px;text-align:right;
}
.td-pct{font-family:var(--mono);font-size:.72rem;color:var(--muted);}
.td-prize{font-family:var(--sans);font-weight:800;font-size:1rem;}
/* row highlight for top group */
tbody tr.group-winner td{background:rgba(255,184,0,.06);}
tbody tr.group-winner .td-prize{color:var(--warn);}
/* ── DEPT BLOCKS (individual breakdown) ── */
.dept-block{margin-bottom:1.25rem;border-radius:4px;overflow:hidden;border:1px solid rgba(0,119,204,0.15);}
.dept-header{
display:flex;align-items:center;gap:.7rem;
padding:.7rem 1.1rem;background:var(--surface);
border-bottom:1px solid rgba(0,119,204,0.1);
}
.dept-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.dept-name{font-family:var(--sans);font-weight:800;font-size:.95rem;}
.dept-count{font-family:var(--mono);font-size:.5rem;color:var(--muted);margin-left:auto;}
/* sessions */
.session-card{
background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px;
background:var(--surface);border:1px solid rgba(0,255,224,.08);border-radius:4px;
margin-bottom:.75rem;overflow:hidden;
}
.session-header{
@@ -163,14 +115,33 @@ tbody tr.group-winner .td-prize{color:var(--warn);}
.session-badge{
font-family:var(--mono);font-size:.5rem;
padding:.2rem .55rem;border-radius:2px;
background:rgba(0,119,204,0.1);border:1px solid rgba(0,119,204,0.3);color:var(--accent);
background:rgba(0,255,224,.06);border:1px solid rgba(0,255,224,.15);color:var(--accent);
}
.session-right{display:flex;align-items:center;gap:.75rem;}
.session-rounds{font-family:var(--mono);font-size:.5rem;color:var(--muted);}
.chevron{color:var(--muted);transition:transform .2s;font-size:.9rem;}
.session-body{display:none;border-top:1px solid rgba(0,119,204,0.1);}
.session-body{display:none;border-top:1px solid rgba(0,255,224,.06);}
.session-body.open{display:block;}
table{width:100%;border-collapse:collapse;}
thead th{
text-align:left;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;
color:var(--muted);padding:.65rem 1.1rem;
border-bottom:1px solid rgba(0,255,224,.06);
}
tbody td{padding:.6rem 1.1rem;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.02);}
tbody tr:last-child td{border:none;}
.td-rank{font-family:var(--mono);font-weight:700;color:var(--muted);font-size:.8rem;}
.td-score{font-family:var(--sans);font-weight:800;color:var(--accent);font-size:.95rem;}
.td-medal{font-size:1rem;}
/* global leaderboard table */
.global-table-wrap{
background:var(--surface);border:1px solid rgba(0,255,224,.08);border-radius:4px;overflow:hidden;
}
/* fade-up */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .4s ease both;}
</style>
@@ -195,7 +166,7 @@ tbody tr.group-winner .td-prize{color:var(--warn);}
<div id="content">
<!-- TOP PLAYERS -->
<div class="section">
<div class="section" id="section-top">
<div class="section-title">
<h2>🏆 All-Time Top Players</h2>
<span class="pill">BEST SCORE</span>
@@ -203,26 +174,18 @@ tbody tr.group-winner .td-prize{color:var(--warn);}
<div class="top-row" id="top-row"></div>
</div>
<!-- TABS -->
<div class="tabs">
<button class="tab-btn active" onclick="switchTab('global')">📊 GLOBAL RANKING</button>
<button class="tab-btn" onclick="switchTab('dept')">🏢 BY DEPARTMENT</button>
<button class="tab-btn" onclick="switchTab('sessions')">📋 SESSIONS</button>
</div>
<!-- GLOBAL TAB -->
<div class="tab-panel active" id="tab-global">
<!-- GLOBAL RANKING -->
<div class="section">
<div class="section-title">
<h2>📊 Global Ranking</h2>
<span class="pill">ALL SESSIONS · BEST SCORE</span>
<span class="pill">ALL SESSIONS</span>
</div>
<div class="table-wrap">
<div class="global-table-wrap">
<table>
<thead>
<tr>
<th></th>
<th>PLAYER</th>
<th>DEPARTMENT</th>
<th>BEST SCORE</th>
<th>SESSIONS</th>
<th>AVG SCORE</th>
@@ -233,52 +196,10 @@ tbody tr.group-winner .td-prize{color:var(--warn);}
</div>
</div>
<!-- DEPT TAB -->
<div class="tab-panel" id="tab-dept">
<!-- GROUP PRIZE SCORE -->
<!-- SESSIONS -->
<div class="section">
<div class="section-title">
<h2>🎯 Group Prize Score</h2>
<span class="pill">AVG · MAX 25 PTS</span>
</div>
<div class="group-score-intro">
Prize points are based on each group's <strong>average individual score</strong> across all rounds.<br>
<strong>3,000 avg = 25 pts</strong> &nbsp;·&nbsp; Score scales linearly downward &nbsp;·&nbsp; Max score per player: <strong>4,500 pts</strong>
</div>
<div class="table-wrap">
<table>
<thead>
<tr>
<th></th>
<th>DEPARTMENT</th>
<th>PLAYERS</th>
<th>AVG SCORE</th>
<th>% OF MAX</th>
<th>PRIZE PTS</th>
<th style="min-width:140px"></th>
</tr>
</thead>
<tbody id="group-score-tbody"></tbody>
</table>
</div>
</div>
<!-- INDIVIDUAL BREAKDOWN BY DEPT -->
<div class="section">
<div class="section-title">
<h2>🏢 Player Breakdown by Department</h2>
<span class="pill">BEST SCORE PER PLAYER</span>
</div>
<div id="dept-list"></div>
</div>
</div>
<!-- SESSIONS TAB -->
<div class="tab-panel" id="tab-sessions">
<div class="section-title">
<h2>📋 Session History</h2>
<h2>📋 Sessions</h2>
<span class="pill" id="session-count-pill">0 GAMES</span>
</div>
<div id="sessions-list"></div>
@@ -290,30 +211,6 @@ tbody tr.group-winner .td-prize{color:var(--warn);}
<script>
const medals = ['🥇','🥈','🥉'];
const rankClass = ['gold','silver','bronze'];
const DEPT_COLORS = [
'#0077cc','#cc0033','#ffb800','#cc44ff','#00994d','#ff6b00','#5b9cf6','#f472b6'
];
// Scoring constants (must match main.py)
const MAX_SCORE = 4500;
const PRIZE_THRESHOLD = 3000;
const MAX_PRIZE = 25;
function switchTab(name) {
const names = ['global','dept','sessions'];
document.querySelectorAll('.tab-btn').forEach((b,i) => {
b.classList.toggle('active', names[i] === name);
});
document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
document.getElementById('tab-' + name).classList.add('active');
}
function prizeColor(pts) {
if (pts >= 23) return '#ffb800'; // gold zone
if (pts >= 18) return '#0077cc'; // blue
if (pts >= 12) return '#00994d'; // green
return '#cc0033'; // red / low
}
async function load() {
const res = await fetch('api/scores');
@@ -333,21 +230,19 @@ async function load() {
const playerMap = {};
data.forEach(s => {
s.players.forEach(p => {
const key = p.player;
if (!playerMap[key]) {
playerMap[key] = { best: p.score, total: p.score, sessions: 1, dept: p.dept || '—' };
if (!playerMap[p.player]) {
playerMap[p.player] = { best: p.score, total: p.score, sessions: 1 };
} else {
if (p.score > playerMap[key].best) playerMap[key].best = p.score;
playerMap[key].total += p.score;
playerMap[key].sessions++;
if (p.dept) playerMap[key].dept = p.dept;
if (p.score > playerMap[p.player].best) playerMap[p.player].best = p.score;
playerMap[p.player].total += p.score;
playerMap[p.player].sessions++;
}
});
});
const sorted = Object.entries(playerMap).sort((a,b) => b[1].best - a[1].best);
// ── TOP 5 CARDS ───────────────────────────────────────────────────────────
// ── TOP CARDS ─────────────────────────────────────────────────────────────
const topRow = document.getElementById('top-row');
sorted.slice(0, 5).forEach(([name, info], i) => {
const card = document.createElement('div');
@@ -358,7 +253,7 @@ async function load() {
<div class="top-info">
<div class="top-name">${name}</div>
<div class="top-score">${info.best.toLocaleString()}</div>
<div class="top-meta">${info.dept} · ${info.sessions} SESSION${info.sessions>1?'S':''}</div>
<div class="top-meta">${info.sessions} SESSION${info.sessions>1?'S':''}</div>
</div>`;
topRow.appendChild(card);
});
@@ -371,85 +266,12 @@ async function load() {
tr.innerHTML = `
<td class="td-medal">${i<3?medals[i]:''}<span class="td-rank" style="${i>=3?'':'display:none'}">#${i+1}</span></td>
<td style="font-weight:600">${name}</td>
<td class="td-dept">${info.dept}</td>
<td class="td-score">${info.best.toLocaleString()}</td>
<td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${info.sessions}</td>
<td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${avg.toLocaleString()}</td>`;
tbody.appendChild(tr);
});
// ── BUILD DEPT MAP ────────────────────────────────────────────────────────
const depts = {};
sorted.forEach(([name, info]) => {
const d = info.dept || '—';
if (!depts[d]) depts[d] = [];
depts[d].push({ name, best: info.best, total: info.total, sessions: info.sessions });
});
// ── GROUP PRIZE SCORE TABLE ───────────────────────────────────────────────
// Compute avg score per dept using best scores (fairest cross-session metric)
const groupRows = Object.entries(depts).map(([dept, players]) => {
const avgScore = Math.round(players.reduce((s, p) => s + p.best, 0) / players.length);
const pct = ((avgScore / MAX_SCORE) * 100).toFixed(1);
const prize = Math.min(MAX_PRIZE, Math.round((avgScore / PRIZE_THRESHOLD) * MAX_PRIZE));
return { dept, players: players.length, avgScore, pct, prize };
}).sort((a, b) => b.avgScore - a.avgScore);
const groupTbody = document.getElementById('group-score-tbody');
groupRows.forEach((row, i) => {
const color = prizeColor(row.prize);
const barPct = Math.min(100, (row.prize / MAX_PRIZE) * 100);
const tr = document.createElement('tr');
if (i === 0) tr.className = 'group-winner';
tr.innerHTML = `
<td class="td-medal">${i<3 ? medals[i] : ''}<span class="td-rank" style="${i>=3?'':'display:none'}">#${i+1}</span></td>
<td style="font-weight:700">${row.dept}</td>
<td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${row.players}</td>
<td class="td-score">${row.avgScore.toLocaleString()}</td>
<td class="td-pct">${row.pct}%</td>
<td class="td-prize" style="color:${color}">${row.prize}</td>
<td>
<div class="prize-bar-wrap">
<div class="prize-bar">
<div class="prize-bar-fill" style="width:${barPct}%;background:${color}"></div>
</div>
<span class="prize-pts" style="color:${color}">${row.prize}/${MAX_PRIZE}</span>
</div>
</td>`;
groupTbody.appendChild(tr);
});
// ── DEPT INDIVIDUAL BREAKDOWN ─────────────────────────────────────────────
const deptsSorted = Object.entries(depts).sort((a,b) => b[1][0].best - a[1][0].best);
const deptList = document.getElementById('dept-list');
deptsSorted.forEach(([dept, players], di) => {
const color = DEPT_COLORS[di % DEPT_COLORS.length];
const block = document.createElement('div');
block.className = 'dept-block fade-up';
block.style.animationDelay = `${di*.05}s`;
block.innerHTML = `
<div class="dept-header">
<div class="dept-dot" style="background:${color}"></div>
<div class="dept-name">${dept}</div>
<div class="dept-count">${players.length} PLAYER${players.length>1?'S':''}</div>
</div>
<div class="table-wrap" style="border:none;border-radius:0;">
<table>
<thead><tr><th></th><th>PLAYER</th><th>BEST SCORE</th><th>SESSIONS</th></tr></thead>
<tbody>
${players.map((p, i) => `
<tr>
<td class="td-medal">${i<3?medals[i]:''}<span class="td-rank" style="${i>=3?'':'display:none'}">#${i+1}</span></td>
<td style="font-weight:600">${p.name}</td>
<td class="td-score">${p.best.toLocaleString()}</td>
<td style="font-family:var(--mono);font-size:.75rem;color:var(--muted)">${p.sessions}</td>
</tr>`).join('')}
</tbody>
</table>
</div>`;
deptList.appendChild(block);
});
// ── SESSIONS ──────────────────────────────────────────────────────────────
const list = document.getElementById('sessions-list');
data.forEach(session => {
@@ -473,13 +295,12 @@ async function load() {
</div>
<div class="session-body">
<table>
<thead><tr><th></th><th>PLAYER</th><th>DEPARTMENT</th><th>SCORE</th><th>RANK</th></tr></thead>
<thead><tr><th></th><th>PLAYER</th><th>SCORE</th><th>RANK</th></tr></thead>
<tbody>
${session.players.map((p,i) => `
<tr>
<td class="td-medal">${i<3?medals[i]:''}</td>
<td style="font-weight:600">${p.player}</td>
<td class="td-dept">${p.dept || '—'}</td>
<td class="td-score">${p.score.toLocaleString()}</td>
<td style="font-family:var(--mono);font-size:.7rem;color:var(--muted)">#${p.rank}</td>
</tr>`).join('')}