From 27416d319d396dd7d5a360061dd0869740ae5d0b Mon Sep 17 00:00:00 2001 From: Carlos Date: Thu, 4 Jun 2026 01:20:26 +0000 Subject: [PATCH] feat: increase max players to 16, add dept leaderboard and scoring constants Co-Authored-By: Claude Sonnet 4.6 --- README.md | 109 ++-- docker-compose.yml | 19 +- main.py | 513 ++++++++++--------- templates/host.html | 246 ++++++--- templates/player.html | 1104 ++++++++++++++++++++++++++++------------- templates/scores.html | 327 +++++++++--- 6 files changed, 1540 insertions(+), 778 deletions(-) diff --git a/README.md b/README.md index 96547af..3a5127c 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ # Route Rush -Multiplayer network routing game built for team events. Players race to find the most efficient path through a 4×4 network grid before time runs out. Built with FastAPI, WebSockets, and vanilla JS — no dependencies on the client side. +Multiplayer network routing game built for team events. Players race to find the most efficient path through a 4×4 network grid before time runs out. Built with FastAPI, WebSockets, and vanilla JS — no client-side dependencies. --- ## Overview -Each round, all players receive the same grid with a start node and a destination. Links between nodes carry modifiers (normal, slow, high-latency, 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. +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 2–4 players. Runs as a Docker container proxied through the Pathfinder nginx stack. +Designed for 2–4 players. Runs as a Docker container on `labmini-01`, proxied through Caddy with automatic SSL. --- @@ -16,9 +16,9 @@ Designed for 2–4 players. Runs as a Docker container proxied through the Pathf | Purpose | URL | |---|---| -| Players (mobile) | `https://pathfinder.libertypr.com/route-rush/` | -| Host / Projector | `https://pathfinder.libertypr.com/route-rush/host` | -| Score History | `https://pathfinder.libertypr.com/route-rush/scores` | +| Players (mobile) | `https://route-rush.carloselugo.com` | +| Host / Projector | `https://route-rush.carloselugo.com/host` | +| Score History | `https://route-rush.carloselugo.com/scores` | --- @@ -30,8 +30,8 @@ Designed for 2–4 players. Runs as a Docker container proxied through the Pathf | Realtime | WebSockets (native FastAPI) | | Persistence | SQLite via Docker volume | | Frontend | Vanilla JS, HTML5 Canvas | -| Proxy | Pathfinder nginx (`pathfinder-nginx`) | -| Container | Docker Compose, `ipfix-stack_ipfix-net` | +| Proxy | Caddy (automatic SSL, `web_web-net`) | +| Container | Docker Compose | --- @@ -43,6 +43,7 @@ Designed for 2–4 players. Runs as a Docker container proxied through the Pathf ├── requirements.txt ├── Dockerfile ├── docker-compose.yml +├── static/ # Empty — all CSS/JS is inline in templates └── templates/ ├── player.html # Mobile game interface (HTML5 Canvas grid) ├── host.html # Host/projector control panel with QR code @@ -58,69 +59,53 @@ services: route-rush: build: . container_name: route-rush - ports: - - "8001:8001" - volumes: - - rr-data:/data + restart: unless-stopped environment: - DB_PATH=/data/rr.db - restart: unless-stopped + volumes: + - route_rush_data:/data networks: - - ipfix-net + - web-net volumes: - rr-data: + route_rush_data: networks: - ipfix-net: - name: ipfix-stack_ipfix-net + web-net: external: true + name: web_web-net ``` +> No ports exposed to host — Caddy reaches the container directly over `web_web-net`. + --- -## Nginx Proxy (Pathfinder default.conf) +## Caddyfile Block -Add to both the HTTP (port 80) and HTTPS (port 443) server blocks: - -```nginx -location = /route-rush { - return 301 /route-rush/; -} - -location /route-rush/ws/ { - proxy_pass http://route-rush:8001/ws/; - proxy_http_version 1.1; - proxy_set_header Upgrade $http_upgrade; - proxy_set_header Connection "upgrade"; - proxy_set_header Host $host; - proxy_read_timeout 3600s; -} - -location /route-rush/ { - proxy_pass http://route-rush:8001/; - proxy_http_version 1.1; - proxy_set_header Host $host; - proxy_set_header X-Real-IP $remote_addr; - proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; - proxy_set_header X-Forwarded-Proto $scheme; - proxy_buffering off; - proxy_read_timeout 300s; - proxy_send_timeout 300s; +```caddy +route-rush.carloselugo.com { + import security_headers + reverse_proxy route-rush:8001 { + header_up Host {host} + header_up X-Real-IP {remote_host} + } + log { + output file /var/log/caddy/route-rush.log + format json + } } ``` -After editing, reload nginx without downtime: +> No `encode gzip` — gzip breaks WebSocket upgrades. +> No `internal_only` — players need public access from their mobile devices. + +After editing the Caddyfile, force-recreate Caddy (reload is not enough due to bind mount caching): ```bash -docker exec pathfinder-nginx nginx -t && docker exec pathfinder-nginx nginx -s reload +cd /opt/web +docker compose up -d --force-recreate caddy ``` -> If nginx ignores the changes, force a full recreate: -> ```bash -> cd /opt/pathfinder && docker compose up -d --force-recreate pathfinder-nginx -> ``` - --- ## Deploy @@ -148,12 +133,14 @@ Host configures rounds (3/5/7) and time per round (30/45/60s) Host clicks START GAME ↓ [Each round] - Grid is generated → broadcast to all players + Grid generated → broadcast to all players Players trace route by tapping nodes → submit before timer expires Timer expires or all players submit → Host clicks END ROUND Results screen: all paths revealed on grid, leaderboard updated ↓ After final round → Podium screen with confetti + ↓ +Host clicks PLAY AGAIN → all players kicked back to join screen ``` --- @@ -222,6 +209,7 @@ Formula: `points = 1000 + 500 × (time_remaining / time_limit) − max(0, hop_co | `round_start` | `{round, total_rounds, grid, time_limit}` | New round begins | | `path_result` | `{points, total, reason, elapsed}` | Score for submitted path | | `round_results` | `{grid, submissions, leaderboard, is_final}` | Round ended | +| `kicked` | — | Host reset — return to join screen | | `error` | `{msg}` | Error (game full, invalid name) | ### Host → Server @@ -230,7 +218,7 @@ Formula: `points = 1000 + 500 × (time_remaining / time_limit) − max(0, hop_co |---|---|---| | `start_round` | `{total_rounds?, time_limit?}` | Start next round | | `end_round` | — | End current round and reveal results | -| `reset` | — | Reset game to lobby | +| `reset` | — | Kick all players and reset to lobby | --- @@ -255,21 +243,20 @@ CREATE TABLE scores ( ); ``` -Scores persist in Docker volume `rr-data` and survive container rebuilds. +Scores persist in Docker volume `route_rush_data` and survive container rebuilds. --- ## Known Issues / Lessons Learned -- **`crypto.randomUUID()` not available over HTTP** — the player ID uses `Math.random().toString(36)` as a fallback since the game runs over HTTP internally. `crypto.randomUUID()` requires HTTPS or localhost. -- **No gzip on WebSocket proxies** — Caddy/nginx `encode gzip` or `gzip on` breaks WebSocket upgrades. The route-rush proxy block intentionally omits compression. -- **nginx bind mount is read-only** — after editing `default.conf`, nginx must be force-recreated (`--force-recreate`), not just reloaded, for changes to take effect from disk. -- **Player limit is 4** — enforced server-side. A 5th connection attempt returns an error message. +- **`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 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 4 players. To scale to larger groups (e.g. 16 for a full team event), the recommended approach is manual brackets: 4 groups of 4 play simultaneously, winners advance to a final round. The host manages bracket progression manually between sessions. - -To raise the hard limit, change `game.players >= 4` in `main.py` and update the lobby display in `host.html`. \ No newline at end of file +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. diff --git a/docker-compose.yml b/docker-compose.yml index 7465e43..80e9b55 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -1,14 +1,21 @@ services: route-rush: - build: . + build: + context: . + dockerfile: Dockerfile container_name: route-rush - ports: - - "8001:8001" restart: unless-stopped + environment: + - DB_PATH=/data/rr.db + volumes: + - route_rush_data:/data networks: - - ipfix-net + - web-net + +volumes: + route_rush_data: networks: - ipfix-net: - name: ipfix-stack_ipfix-net + web-net: external: true + name: web_web-net diff --git a/main.py b/main.py index 42a3555..16a9803 100644 --- a/main.py +++ b/main.py @@ -1,11 +1,17 @@ from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Request -from fastapi.staticfiles import StaticFiles from fastapi.templating import Jinja2Templates from fastapi.responses import HTMLResponse, JSONResponse import json, time, random, sqlite3, os from datetime import datetime -DB_PATH = os.environ.get("DB_PATH", "/data/quiz.db") +DB_PATH = os.environ.get("DB_PATH", "/data/rr.db") +app = FastAPI() +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 # ── DATABASE ────────────────────────────────────────────────────────────────── def get_db(): @@ -18,109 +24,112 @@ def init_db(): with get_db() as conn: conn.executescript(""" CREATE TABLE IF NOT EXISTS sessions ( - id INTEGER PRIMARY KEY AUTOINCREMENT, - started_at TEXT NOT NULL, - ended_at TEXT, - total_players INTEGER DEFAULT 0 + id INTEGER PRIMARY KEY AUTOINCREMENT, + started_at TEXT NOT NULL, + ended_at TEXT, + rounds INTEGER DEFAULT 0 ); CREATE TABLE IF NOT EXISTS scores ( - id INTEGER PRIMARY KEY AUTOINCREMENT, - session_id INTEGER NOT NULL REFERENCES sessions(id), - player TEXT NOT NULL, - score INTEGER NOT NULL DEFAULT 0, - rank INTEGER, - dept TEXT NOT NULL DEFAULT '', - finished_at TEXT NOT NULL + id INTEGER PRIMARY KEY AUTOINCREMENT, + session_id INTEGER REFERENCES sessions(id), + player TEXT NOT NULL, + score INTEGER DEFAULT 0, + rank INTEGER, + dept TEXT NOT NULL DEFAULT '', + finished_at TEXT NOT NULL ); """) - # Safe migration: add dept column if it doesn't exist yet + # safe migration if dept column missing from older DB try: conn.execute("ALTER TABLE scores ADD COLUMN dept TEXT NOT NULL DEFAULT ''") except Exception: - pass # column already exists + pass init_db() -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 +# ── GRID ────────────────────────────────────────────────────────────────────── +GRID_SIZE = 4 -# ── APP ─────────────────────────────────────────────────────────────────────── -app = FastAPI() -app.mount("/static", StaticFiles(directory="static"), name="static") -templates = Jinja2Templates(directory="templates") - -# ── 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." - } +MODIFIER_TYPES = [ + "normal", "normal", "normal", "normal", "normal", "normal", + "slow", "slow", "boost", "blocked" ] +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, + } + # ── GAME STATE ──────────────────────────────────────────────────────────────── class GameState: def __init__(self): @@ -128,56 +137,59 @@ class GameState: def reset(self): self.phase = "lobby" - 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) + 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 game = GameState() # ── CONNECTION MANAGER ──────────────────────────────────────────────────────── -class ConnectionManager: +class ConnMgr: def __init__(self): - self.players: dict = {} - self.hosts: list = [] + self.players = {} + self.hosts = [] - async def connect_player(self, ws_id: str, ws: WebSocket): + async def connect_player(self, pid, ws): await ws.accept() - self.players[ws_id] = ws + self.players[pid] = ws - async def connect_host(self, ws: WebSocket): + async def connect_host(self, ws): await ws.accept() self.hosts.append(ws) - def disconnect(self, ws_id: str): - self.players.pop(ws_id, None) - game.players.pop(ws_id, None) + def disconnect(self, pid): + self.players.pop(pid, None) + game.players.pop(pid, None) - def disconnect_host(self, ws: WebSocket): + def disconnect_host(self, ws): if ws in self.hosts: self.hosts.remove(ws) - async def send_to(self, ws_id: str, data: dict): - ws = self.players.get(ws_id) + async def send(self, pid, data): + ws = self.players.get(pid) if ws: try: await ws.send_json(data) except Exception: pass - async def broadcast_players(self, data: dict): + async def broadcast_players(self, data): dead = [] - for ws_id, ws in list(self.players.items()): + for pid, ws in list(self.players.items()): try: await ws.send_json(data) except Exception: - dead.append(ws_id) + dead.append(pid) for d in dead: self.disconnect(d) - async def broadcast_hosts(self, data: dict): + async def broadcast_hosts(self, data): dead = [] for ws in list(self.hosts): try: @@ -187,21 +199,84 @@ class ConnectionManager: for d in dead: self.disconnect_host(d) - async def broadcast_all(self, data: dict): + async def broadcast_all(self, data): await self.broadcast_players(data) await self.broadcast_hosts(data) -mgr = ConnectionManager() +mgr = ConnMgr() -def get_leaderboard(): +def 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] + 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}) @@ -210,18 +285,11 @@ 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 50" + "SELECT * FROM sessions ORDER BY started_at DESC LIMIT 20" ).fetchall() result = [] for s in sessions: @@ -232,84 +300,94 @@ async def api_scores(): result.append({ "id": s["id"], "started_at": s["started_at"], - "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] + "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 + ], }) 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/{ws_id}") -async def player_ws(ws: WebSocket, ws_id: str): - await mgr.connect_player(ws_id, ws) +@app.websocket("/ws/player/{pid}") +async def player_ws(ws: WebSocket, pid: str): + await mgr.connect_player(pid, ws) try: - await mgr.send_to(ws_id, {"type": "phase", "phase": game.phase}) + await mgr.send(pid, {"type": "phase", "phase": game.phase}) async for raw in ws.iter_text(): msg = json.loads(raw) if msg["type"] == "join": - name = msg["name"].strip()[:40] + name = msg["name"].strip()[:30] dept = msg.get("dept", "").strip()[:40] - display = msg.get("display", name).strip()[:40] - if not name: + 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"}) continue - 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}) + 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}) await mgr.broadcast_hosts({ "type": "lobby_update", - "players": [{"name": p["name"], "display": p.get("display", p["name"]), "dept": p.get("dept","")} for p in game.players.values()], - "count": len(game.players) + "players": [p.get("display", p["name"]) for p in game.players.values()], + "count": len(game.players), }) - elif msg["type"] == "answer": - if game.phase != "question": + elif msg["type"] == "submit_path": + if game.phase != "playing": continue - player = game.players.get(ws_id) - if not player or player["answered"]: + player = game.players.get(pid) + if not player or player["submitted"]: continue - 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, + 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"], - "correct_idx": correct + "reason": result["reason"], + "elapsed": round(elapsed, 2), }) - - answered = sum(1 for p in game.players.values() if p["answered"]) await mgr.broadcast_hosts({ - "type": "answer_update", - "answered": answered, + "type": "submission_update", + "submitted": sum(1 for p in game.players.values() if p["submitted"]), "total": len(game.players), - "details": game.answers_this_round + "submissions": list(game.submissions.values()), }) except WebSocketDisconnect: - mgr.disconnect(ws_id) + mgr.disconnect(pid) await mgr.broadcast_hosts({ "type": "lobby_update", - "players": [{"name": p["name"], "display": p.get("display", p["name"]), "dept": p.get("dept","")} for p in game.players.values()], - "count": len(game.players) + "players": [p.get("display", p["name"]) for p in game.players.values()], + "count": len(game.players), }) # ── HOST WEBSOCKET ──────────────────────────────────────────────────────────── @@ -319,63 +397,56 @@ async def host_ws(ws: WebSocket): try: await ws.send_json({ "type": "lobby_update", - "players": [{"name": p["name"], "display": p.get("display", p["name"]), "dept": p.get("dept","")} for p in game.players.values()], - "count": len(game.players) + "players": [p.get("display", p["name"]) 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_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 + 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 = {} for p in game.players.values(): - 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] + p["submitted"] = False await mgr.broadcast_all({ - "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 + "type": "round_start", + "round": game.current_round, + "total_rounds": game.total_rounds, + "grid": game.grid, + "time_limit": game.time_limit, }) - elif msg["type"] == "show_results": + elif msg["type"] == "end_round": game.phase = "results" - q_idx = game.question_order[game.current_q] - q = QUESTIONS[q_idx] + lb = leaderboard() + dept_lb = dept_leaderboard() + save_session() await mgr.broadcast_all({ - "type": "results", - "correct_idx": q["correct"], - "fun_fact": q["fun_fact"], - "leaderboard": get_leaderboard() + "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, }) 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}) diff --git a/templates/host.html b/templates/host.html index 008f8c2..7fdd0fe 100644 --- a/templates/host.html +++ b/templates/host.html @@ -10,17 +10,17 @@ *{margin:0;padding:0;box-sizing:border-box;} :root{ - --bg:#070b14; - --surface:#0d1220; - --surface2:#131928; - --accent:#00ffe0; - --accent2:#ff3e6c; - --warn:#ffb800; - --slow:#ff6b00; - --boost:#00ff88; + --bg:#ffffff; + --surface:#f0f4f8; + --surface2:#e2e8f0; + --accent:#0077cc; + --accent2:#cc0033; + --warn:#b35c00; + --slow:#cc4400; + --boost:#00994d; --blocked:#ff1744; - --text:#ddeeff; - --muted:#3a4a66; + --text:#0a0f1e; + --muted:#4a5568; --mono:'Share Tech Mono',monospace; --sans:'Exo 2',sans-serif; } @@ -31,11 +31,52 @@ 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,255,224,0.025) 1px,transparent 1px), - linear-gradient(90deg,rgba(0,255,224,0.025) 1px,transparent 1px); + linear-gradient(rgba(0,119,204,0.08) 1px,transparent 1px), + linear-gradient(90deg,rgba(0,119,204,0.08) 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;} @@ -43,14 +84,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,255,224,.4);margin-bottom:.25rem;} + color:var(--accent);text-shadow:0 0 40px rgba(0,119,204,0.6);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,255,224,.1);border-radius:4px; +.qr-box{background:var(--surface);border:1px solid rgba(0,119,204,0.25);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;} @@ -58,21 +99,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,255,224,.1); +.players-box{flex:1;background:var(--surface);border:1px solid rgba(0,119,204,0.25); 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,255,224,.25); + background:var(--surface2);border:1px solid rgba(0,119,204,0.4); 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,255,224,.25); + background:var(--surface2);border:1px solid rgba(0,119,204,0.4); color:var(--accent);font-family:var(--mono);font-size:.8rem; padding:.4rem .7rem;border-radius:2px;outline:none;cursor:pointer; } @@ -93,7 +134,7 @@ body::before{ .game-left{ flex:1;display:flex;flex-direction:column; - padding:1.25rem;border-right:1px solid rgba(0,255,224,.08); + padding:1.25rem;border-right:1px solid rgba(0,119,204,0.15); overflow:hidden; } @@ -107,19 +148,17 @@ body::before{ .objective-bar{ display:flex;align-items:center;gap:.75rem; padding:.75rem 1.25rem; - background:var(--surface);border:1px solid rgba(0,255,224,.2);border-radius:3px; + background:var(--surface);border:1px solid rgba(0,119,204,0.35);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,255,224,.15);border:2px solid var(--accent);color:var(--accent);} +.obj-start{background:rgba(0,119,204,0.3);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);} @@ -130,8 +169,7 @@ body::before{ padding:1.25rem;gap:1rem;overflow-y:auto; } -/* submission panel */ -.panel{background:var(--surface);border:1px solid rgba(0,255,224,.15); +.panel{background:var(--surface);border:1px solid rgba(0,119,204,0.3); border-radius:4px;padding:1rem;} .panel-title{font-family:var(--mono);font-size:.7rem;color:var(--text); letter-spacing:.12em;margin-bottom:.75rem;} @@ -141,21 +179,19 @@ 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,255,224,.1); + background:var(--surface2);border:1px solid rgba(0,119,204,0.25); 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,255,224,.1);} + background:var(--surface2);border:1px solid rgba(0,119,204,0.25);} .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);} @@ -167,7 +203,7 @@ body::before{ .results-top{ display:flex;justify-content:space-between;align-items:center; - padding:1rem 1.5rem;border-bottom:1px solid rgba(0,255,224,.08); + padding:1rem 1.5rem;border-bottom:1px solid rgba(0,119,204,0.15); } .results-title{font-family:var(--sans);font-weight:900;font-size:2rem; letter-spacing:-0.02em;color:var(--accent);} @@ -175,19 +211,17 @@ 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,255,224,.08);} + padding:1.25rem;border-right:1px solid rgba(0,119,204,0.15);} .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,255,224,.08); + background:var(--surface);border:1px solid rgba(0,119,204,0.15); } .path-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem;} .path-player{font-weight:700;font-size:1rem;} @@ -199,7 +233,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,255,224,.15); + background:var(--surface2);border:1px solid rgba(0,119,204,0.3); font-family:var(--mono);font-size:.5rem;color:var(--accent); } .path-arrow{font-size:.5rem;color:var(--muted);align-self:center;} @@ -229,7 +263,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,255,224,.12);font-size:1rem;} + background:var(--surface);border:1px solid rgba(0,119,204,0.25);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);} @@ -247,8 +281,20 @@ body::before{ + +
+ +
// HOST ACCESS REQUIRED
+
+ + +
INCORRECT PASSWORD
+
+
+ -
+
// HOST CONTROL PANEL
@@ -260,7 +306,7 @@ body::before{
PLAYERS CONNECTED
0
-
/ 4 MAX
+
/ 16 MAX
ROUNDS: @@ -275,11 +321,18 @@ body::before{ + PRIZE AVG: + + = 25 PTS
+
@@ -382,24 +435,50 @@ body::before{
\ No newline at end of file diff --git a/templates/player.html b/templates/player.html index 42a3555..2882da0 100644 --- a/templates/player.html +++ b/templates/player.html @@ -1,384 +1,804 @@ -from fastapi import FastAPI, WebSocket, WebSocketDisconnect, Request -from fastapi.staticfiles import StaticFiles -from fastapi.templating import Jinja2Templates -from fastapi.responses import HTMLResponse, JSONResponse -import json, time, random, sqlite3, os -from datetime import datetime + + + + + +Route Rush + + + + + +
+ +
// NETWORK ROUTING GAME
+
+ + +
+
+ + +
+
+ + +
+ + + ⚡ PRACTICE / PRÁCTICA +
+ + +
+
CONNECTED AS
+
+
+
+ +
+
AWAITING HOST...
+
+
+ + +
+
+ RND 1/3 + 30 + 0 PTS +
+
+ ROUTE FROM +
?
+ ——▶ +
?
+
+
+ +
+ +
+
NORMAL
+
SLOW ×2
+
BOOST ×0.5
+
DOWN
+
+
+ + +
+
+
+
+
+
+
WAITING FOR HOST...
+
+ + +
+

GAME OVER

+
// FINAL STANDINGS
+
+ +
+ + - game.phase = "question" - game.q_start_time = time.time() - game.answers_this_round = [] - for p in game.players.values(): - p["answered"] = False +
// SCAN TO PRACTICE BEFORE THE GAME
+
+ QR Code +
+
route-rush.carloselugo.com/practice
+ +
+ - q_idx = game.question_order[game.current_q] - q = QUESTIONS[q_idx] - await mgr.broadcast_all({ - "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"] == "show_results": - game.phase = "results" - q_idx = game.question_order[game.current_q] - q = QUESTIONS[q_idx] - await mgr.broadcast_all({ - "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}) - - except WebSocketDisconnect: - mgr.disconnect_host(ws) \ No newline at end of file + + \ No newline at end of file diff --git a/templates/scores.html b/templates/scores.html index 14885e0..6c096ce 100644 --- a/templates/scores.html +++ b/templates/scores.html @@ -9,15 +9,15 @@ *{margin:0;padding:0;box-sizing:border-box;} :root{ - --bg:#070b14; - --surface:#0d1220; - --surface2:#131928; - --accent:#00ffe0; - --accent2:#ff3e6c; + --bg:#ffffff; + --surface:#f0f4f8; + --surface2:#e2e8f0; + --accent:#0077cc; + --accent2:#cc0033; --warn:#ffb800; --boost:#00ff88; - --text:#ddeeff; - --muted:#3a4a66; + --text:#0a0f1e; + --muted:#4a5568; --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,255,224,0.025) 1px,transparent 1px), - linear-gradient(90deg,rgba(0,255,224,0.025) 1px,transparent 1px); + linear-gradient(rgba(0,119,204,0.06) 1px,transparent 1px), + linear-gradient(90deg,rgba(0,119,204,0.06) 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,255,224,0.08); + border-bottom:1px solid rgba(0,119,204,0.12); 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,255,224,.3);line-height:1; + color:var(--accent);text-shadow:0 0 20px rgba(0,119,204,0.4);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,60 +48,108 @@ 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,255,224,.1);border-radius:2px; + border:1px solid rgba(0,119,204,0.15);border-radius:2px; transition:all .15s;letter-spacing:.08em; } -.nav-links a:hover{color:var(--accent);border-color:rgba(0,255,224,.3);} +.nav-links a:hover{color:var(--accent);border-color:rgba(0,119,204,0.4);} main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem;} -/* loading / empty */ -#loading{text-align:center;color:var(--muted);padding:4rem;font-family:var(--mono);font-size:.75rem; - letter-spacing:.1em;} +#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,255,224,.06);border:1px solid rgba(0,255,224,.15);color:var(--accent); + background:rgba(0,119,204,0.1);border:1px solid rgba(0,119,204,0.3);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,255,224,.08);border-radius:4px; + background:var(--surface);border:1px solid rgba(0,119,204,0.15);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,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-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-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;} -/* sessions */ +.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;} + .session-card{ - background:var(--surface);border:1px solid rgba(0,255,224,.08);border-radius:4px; + background:var(--surface);border:1px solid rgba(0,119,204,0.15);border-radius:4px; margin-bottom:.75rem;overflow:hidden; } .session-header{ @@ -115,33 +163,14 @@ main{position:relative;z-index:1;max-width:960px;margin:0 auto;padding:2rem;} .session-badge{ font-family:var(--mono);font-size:.5rem; padding:.2rem .55rem;border-radius:2px; - background:rgba(0,255,224,.06);border:1px solid rgba(0,255,224,.15);color:var(--accent); + background:rgba(0,119,204,0.1);border:1px solid rgba(0,119,204,0.3);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,255,224,.06);} +.session-body{display:none;border-top:1px solid rgba(0,119,204,0.1);} .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;} @@ -166,7 +195,7 @@ tbody tr:last-child td{border:none;}
-
+

🏆 All-Time Top Players

BEST SCORE @@ -174,18 +203,26 @@ tbody tr:last-child td{border:none;}
- -
+ +
+ + + +
+ + +

📊 Global Ranking

- ALL SESSIONS + ALL SESSIONS · BEST SCORE
-
+
+ @@ -196,10 +233,52 @@ tbody tr:last-child td{border:none;} - -
+ +
+ + +
+
+

🎯 Group Prize Score

+ AVG · MAX 25 PTS +
+
+ Prize points are based on each group's average individual score across all rounds.
+ 3,000 avg = 25 pts  ·  Score scales linearly downward  ·  Max score per player: 4,500 pts +
+
+
PLAYERDEPARTMENT BEST SCORE SESSIONS AVG SCORE
+ + + + + + + + + + + + +
DEPARTMENTPLAYERSAVG SCORE% OF MAXPRIZE PTS
+
+
+ + +
+
+

🏢 Player Breakdown by Department

+ BEST SCORE PER PLAYER +
+
+
+ +
+ + +
-

📋 Sessions

+

📋 Session History

0 GAMES
@@ -211,6 +290,30 @@ tbody tr:last-child td{border:none;}