Fantasy Feud Site

The on-air board display. A static HTML/CSS/JS page — there's no server or build step here, it just connects to FantasyFeudServer's Socket.IO endpoint and renders whatever board state it broadcasts: team names, scores, members, strikes, the current question, and the answer cards (flipping to reveal as answers come in, via GSAP animations).

This page never mutates game state itself — it's read-only. To run a game, use FantasyFeudServer's host UI (or POST /question directly) instead.

Running it

This is not a Node app — don't run node js/app.js, it'll fail (js/app.js depends on jQuery, GSAP, and socket.io-client, which are only available as globals once index.html loads them via <script> tags in a browser).

Open index.html directly in a browser, or serve the folder with any static file server. .vscode/launch.json has ready-made "Launch Edge"/"Launch Chrome" debug configs pointed at index.html if you're using VS Code.

Pointing it at a server

js/app.js connects to whichever server window.SOCKET_SERVER names, falling back to http://localhost:3000 if it isn't set:

socket: io(window.SOCKET_SERVER || 'http://localhost:3000'),

window.SOCKET_SERVER is set by js/env.js, which is gitignored so each deployment can point at its own FantasyFeudServer without editing app.js. To configure it:

cp js/env.example.js js/env.js

then edit js/env.js to set SOCKET_SERVER to wherever FantasyFeudServer is running. If env.js doesn't exist (or doesn't set SOCKET_SERVER), the http://localhost:3000 fallback is used — handy for local development without any setup.

Files

• index.html — the page shell
• js/app.js — connects to the socket and renders board state
• js/env.js — per-deployment SOCKET_SERVER config (gitignored; copy js/env.example.js to create it)
• js/card.js — small helper class for an answer card
• css/ffboard.css — board styling
• media/*.mp3 — buzzer/sound-effect clips played on reveal, wrong answer, etc.

References

• Family Feud by Brett Williams