// Turnix — Hub screens (Home, Create, Join, Lobby)
// ── Game card visuals ─────────────────────────────────────────────────────
function GameCard({ game, onPlay }) {
const Visual = { impostor: ImpostorVisual, letter: LetterVisual, wrong: WrongVisual }[game.id];
return (
);
}
function ImpostorVisual({ accent }) {
return (
);
}
function LetterVisual({ accent }) {
return (
);
}
function WrongVisual({ accent }) {
return (
);
}
// ── HOME ──────────────────────────────────────────────────────────────────
function HomeScreen({ nick, setNick, onPlay, onCreate, onJoin }) {
return (
Tonight's lineup
Three games. One room.
Quick rounds, voice on Discord, no install. Pick a game or spin up a room.
{Object.values(GAMES).map(g => (
onPlay(g.id)} />
))}
How to play
Create a room → share the 4-letter code → friends join → host starts the game. Rounds last ~45s.
);
}
function NickPill({ nick, setNick }) {
const [editing, setEditing] = React.useState(false);
const ref = React.useRef(null);
React.useEffect(() => { if (editing) ref.current?.focus(); }, [editing]);
return (
{initials(nick || "?")}
{editing ? (
setNick(e.target.value.slice(0, 14))}
onBlur={() => setEditing(false)}
onKeyDown={e => { if (e.key === "Enter") setEditing(false); }}
style={{ background: "transparent", border: 0, outline: 0, color: "inherit", font: "inherit", fontWeight: 500, width: 90 }} />
) : (
)}
);
}
function ShortcutRow({ keys, label }) {
return (
{label}
{keys.map(k => (
{k}
))}
);
}
// ── CREATE ROOM ───────────────────────────────────────────────────────────
function CreateScreen({ onBack, onCreate }) {
const [game, setGame] = React.useState("impostor");
const [maxPlayers, setMaxPlayers] = React.useState(8);
const [rounds, setRounds] = React.useState(5);
return (
Step 1 · Pick a game
Create a room
{Object.values(GAMES).map(g => (
setGame(g.id)} />
))}
Step 2 · Settings
Preview
{GAMES[game].name}
{GAMES[game].name}
{GAMES[game].short}
You'll get a 4-letter code to share with friends.
);
}
function GamePickRow({ game, selected, onClick }) {
return (
);
}
function SettingRow({ label, hint, children }) {
return (
);
}
function SegSlider({ value, setValue, min, max }) {
return (
{Array.from({ length: max - min + 1 }, (_, i) => min + i).map(n => (
))}
);
}
function PreviewMeta({ label, value }) {
return (
{label}
{value}
);
}
// ── JOIN ROOM ─────────────────────────────────────────────────────────────
function JoinScreen({ onBack, onJoin }) {
const [code, setCode] = React.useState(["", "", "", ""]);
const refs = [React.useRef(), React.useRef(), React.useRef(), React.useRef()];
React.useEffect(() => { refs[0].current?.focus(); }, []);
const setChar = (i, v) => {
const ch = (v || "").toUpperCase().slice(-1).replace(/[^A-Z0-9]/g, "");
setCode(prev => { const next = prev.slice(); next[i] = ch; return next; });
if (ch && i < 3) refs[i + 1].current?.focus();
};
const onKey = (i, e) => {
if (e.key === "Backspace" && !code[i] && i > 0) refs[i - 1].current?.focus();
if (e.key === "Enter" && code.every(Boolean)) onJoin(code.join(""));
};
const onPaste = (e) => {
const text = (e.clipboardData.getData("text") || "").toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 4);
if (!text) return;
e.preventDefault();
const next = ["", "", "", ""];
for (let i = 0; i < text.length; i++) next[i] = text[i];
setCode(next);
refs[Math.min(text.length, 3)].current?.focus();
};
const ready = code.every(Boolean);
return (
Join a room
Enter the code
Four characters. Ask the host, or paste it in.
{code.map((c, i) => (
setChar(i, e.target.value)}
onKeyDown={e => onKey(i, e)}
maxLength={1} inputMode="text"
style={{
width: 76, height: 92, fontSize: 44, fontWeight: 700, textAlign: "center",
fontFamily: "var(--font-mono)",
background: "rgba(255,255,255,0.03)",
border: `1.5px solid ${c ? "var(--fg-0)" : "var(--line-2)"}`,
borderRadius: 16, color: "var(--fg-0)", outline: 0,
transition: "border-color 140ms", caretColor: "var(--fg-0)",
}} />
))}
);
}
// ── LOBBY ─────────────────────────────────────────────────────────────────
// Receives roomState from app.jsx — no local simulation
function LobbyScreen({ roomState, isHost, myId, onAction, onLeave }) {
const { players, game: gameId, code, maxPlayers } = roomState;
const room = { code: roomState.code || "????", game: gameId, maxPlayers, rounds: roomState.rounds };
const g = GAMES[gameId];
const [copied, setCopied] = React.useState(false);
const readyCount = players.filter(p => p.ready).length;
const youReady = players.find(p => p.id === myId)?.ready;
const allReady = readyCount === players.length && players.length >= 2;
const copy = () => {
navigator.clipboard?.writeText(room.code).catch(() => {});
setCopied(true);
setTimeout(() => setCopied(false), 1500);
};
return (
{!isHost && (
Waiting for host
)}
Room code — share this!
{room.code}
Friends open Turnix → Join with Code → type this code
Players · {readyCount}/{players.length} ready
Up to {maxPlayers}
{players.map(p =>
)}
{Array.from({ length: Math.max(0, maxPlayers - players.length) }).map((_, i) => (
＋
Open slot
))}
{isHost && (
)}
{!isHost && (
Waiting for host…
)}
);
}
function PlayerRow({ player }) {
return (
{player.name}
{player.you && · you}
{player.host && Host}
{player.ready ? "Ready" : "Waiting"}
);
}
Object.assign(window, {
HomeScreen, CreateScreen, JoinScreen, LobbyScreen,
GameCard, NickPill, PlayerRow,
});