Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c8b2bae5d1 |
@@ -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 2–16 players. Runs as a Docker container on `labmini-01`, proxied through Caddy with automatic SSL.
|
||||
Designed for 2–4 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
-13
@@ -1,21 +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
|
||||
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
|
||||
|
||||
@@ -1,17 +1,11 @@
|
||||
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/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
|
||||
DB_PATH = os.environ.get("DB_PATH", "/data/quiz.db")
|
||||
|
||||
# ── DATABASE ──────────────────────────────────────────────────────────────────
|
||||
def get_db():
|
||||
@@ -27,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:
|
||||
@@ -137,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:
|
||||
@@ -199,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)
|
||||
)
|
||||
return [{"name": p.get("display", p["name"]), "score": p["score"], "dept": p.get("dept","")} for p in ranked]
|
||||
|
||||
# ── 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})
|
||||
@@ -285,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:
|
||||
@@ -300,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 ────────────────────────────────────────────────────────────
|
||||
@@ -397,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})
|
||||
|
||||
+71
-169
@@ -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
|
||||
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'), {
|
||||
// ── 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();
|
||||
ctx.fillStyle = color;
|
||||
ctx.textAlign='center'; ctx.textBaseline='middle';
|
||||
ctx.fillText(label, mx, my);
|
||||
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>
|
||||
+354
-774
File diff suppressed because it is too large
Load Diff
+73
-252
@@ -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> · Score scales linearly downward · 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('')}
|
||||
|
||||
Reference in New Issue
Block a user