Nora — Game Show Host

A fill-in-the-blank party game for the team. One person hosts on a shared screen, everyone else plays from their phone. Nora reads every card out loud.

Play it: https://taliatfrazier.github.io/cards-against-it/

Everything is one file. index.html holds the game, the deck, the styling and Nora's avatar — no build step, no dependencies, nothing to install.

---

Setup

Repo → Settings → Pages → Source: Deploy from a branch, Branch: main, folder / (root). Save. A minute later the game is live.

That's the whole setup. There is no database and no account: the host's browser is the room, and phones connect straight to it over a browser-to-browser channel (WebRTC — the same thing Teams calls run on). The room code doubles as the address, so the code on screen is all anyone needs.

Different networks (important)

The direct browser-to-browser connection works when everyone is on the same wifi. Across different networks — remote players, or a locked-down corporate/bank network — routers and firewalls block the direct path, and cross-network players just can't join.

The recommended fix is the Cloudflare relay in relay/ — a tiny central server everyone connects to over HTTPS, exactly how online Codenames works. It makes the game work on any network, runs on Cloudflare's free plan, and stores only trivial room state you control (not on Google). See relay/README.md for the ~10-minute deploy, then paste the Worker URL into WORKER_URL near the top of the script in index.html. Until then the game falls back to same-wifi mode.

Instead of the central server, you can keep WebRTC and add a TURN relay, which bounces the direct connection through when a firewall blocks it. Get a free TURN credential and paste it into TURN_SERVERS near the top of the script in index.html:

1. Sign up free at https://www.metered.ca/tools/openrelay/ (50 GB/month free — plenty for a party game).

2. It gives you a username, a credential, and server URLs.

3. Paste them into TURN_SERVERS (the file has commented examples):

   const TURN_SERVERS = [
     { urls: 'turn:standard.relay.metered.ca:443?transport=tcp', username: 'YOUR_KEY', credential: 'YOUR_KEY' },
     { urls: 'turns:standard.relay.metered.ca:443?transport=tcp', username: 'YOUR_KEY', credential: 'YOUR_KEY' }
   ];
   

The :443?transport=tcp / turns: lines make the relay look like ordinary HTTPS, which is what slips it through most corporate firewalls. Commit, and cross-network play works — though on the strictest networks the central relay above is the surer bet.

---

Running a game

1. Open the link on the computer you're sharing. Host on this screen → Open the room.
2. Share your screen in Teams with computer sound on, or nobody hears her.
3. The lobby shows a four-character code, a QR code, and the join link. Players scan the QR, or open the link — which drops them straight onto the name screen with the code already filled in. No sign-in, no app, no account.
4. Two players is enough to start.

Host in Microsoft Edge if you want the Ava voice. She's an Edge-only voice; elsewhere Nora falls back to the best British or Australian voice installed.

Add practice player in the host toolbar drops in a bot that submits and votes on its own, so you can test the whole loop alone first.

Players get 30 seconds to play a card and 30 to vote (a countdown shows on the stage and on every phone; Nora calls "ten seconds"). When it runs out the host moves on with whatever is in. Close submissions, Close voting and Skip to voting are always available too, so a phone that wandered off can never stall the game.

---

Editing the cards

In index.html, find const DECK_PROMPTS (host cards) or const DECK_ANSWERS (player cards). One card per line, no quotes or commas. Host cards use ___ for the blank.

CARDS.md is the current player deck, alphabetized, for easier reading.

Nora's dialogue

Search for const NORA. Every line she says is a list, picked from at random so she doesn't repeat herself. {n} is a player name, {r} the round, {s} a score.

---

How it works

The host browser is the referee. It holds the real game state and writes it to a few shared keys; phones poll those keys every couple of seconds and write only their own submission and vote.

• ngs/CODE/host — game state. Host writes, everyone reads.
• ngs/CODE/pl/<id> — one key per player. That player writes, host reads.
• ngs/CODE/hand/<id> — a player's five cards, written by the host.

Hands live in separate keys rather than inside the shared state, so nobody can open dev tools and read the room's cards. Cards stay in a hand until played; the played card is replaced straight away. A player who dislikes their five can swap the whole hand for a fresh deal twice per game, before they play a card in a round — the phone flags it, the host deals a new hand and stamps it so the phone knows the replacement has arrived.

Three interchangeable backends provide those keys, chosen automatically: window.storage when the game runs inside a Claude artifact; a direct browser-to-browser connection (WebRTC via PeerJS) everywhere else, where the host's browser holds the keys and players' reads and writes travel over the data channel; and, only if you pass ?db=your-database in the URL or set FIREBASE_URL in the script, a Firebase Realtime Database over REST. The game logic doesn't know which is in use, so the same file works in all three places.

Browser-to-browser mode uses PeerJS's free public broker once, to introduce each phone to the host; after the handshake, game traffic flows directly between the devices. If the host closes their tab, the room is gone — open a new one.

The QR code and the connection library are loaded from a CDN. If the CDN is blocked, the QR is skipped and the printed join link still works.

Comfortable up to about 35 players in one room. The host reads the whole room in one request per tick (parallel requests on an older relay), hands are dealt in parallel, and played cards recycle through a discard pile so nothing in a hand is ever dealt twice. Past a dozen players Nora drops her asides while reading cards, phones poll a little slower, and the stage shows the cards in two columns. Everyone holds five cards, which keeps the 223-card deck comfortable even with 35 hands out. Nora reads the question once when submissions close, then just the answers. Reading 35 cards aloud still takes a couple of minutes a round; the host can hit "Skip to voting" at any point.

One thing to watch with a big room: the relay runs on Cloudflare's free plan, which allows 100,000 requests a day. With 35 phones, a 15-round game is about 60,000 requests on the relay as deployed today, which is fine. A 30-round game would brush the cap unless the relay in relay/ is redeployed: it gains a /getall op that lets the host read the whole room in one request per tick instead of one per player, which roughly halves the total.