);
}
function useReduced(settings) {
const [os, setOs] = useState(() => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches);
useEffect(() => { if (typeof matchMedia !== 'function') return undefined; const m = matchMedia('(prefers-reduced-motion: reduce)'), f = () => setOs(m.matches); m.addEventListener && m.addEventListener('change', f); return () => m.removeEventListener && m.removeEventListener('change', f); }, []);
return !!(os || (settings && (settings.reducedMotion || settings.animations === false)));
}
// Plays through the steps while the demo is on screen (looping), pauses off screen or on request, and can be stepped by hand.
function Demo({ def, title, kicker, settings }) {
const frames = useMemo(() => compile(def), [def]);
const reduced = useReduced(settings);
const [i, setI] = useState(0), [playing, setPlaying] = useState(false), [snap, setSnap] = useState(false);
const ref = useRef(null), paused = useRef(false), inView = useRef(false), started = useRef(false);
const last = frames.length - 1;
const jump = useCallback((n, instant) => {
if (instant) { setSnap(true); setI(n); requestAnimationFrame(() => requestAnimationFrame(() => setSnap(false))); } else setI(n);
}, []);
useEffect(() => {
const el = ref.current; if (!el || !('IntersectionObserver' in window)) return undefined;
const io = new IntersectionObserver((es) => {
inView.current = es[0].isIntersecting;
if (inView.current) { if (!reduced && !paused.current) { if (!started.current) { started.current = true; jump(0, true); } setPlaying(true); } }
else setPlaying(false);
}, { threshold: 0.6 });
io.observe(el); return () => io.disconnect();
}, [reduced]);
useEffect(() => {
if (!playing || reduced) return undefined;
const t = setTimeout(() => { if (i >= last) jump(0, true); else setI(i + 1); }, i >= last ? 3400 : (frames[i].ms || 2700));
return () => clearTimeout(t);
}, [playing, i, reduced]);
const f = frames[i];
const toggle = () => { if (playing) { paused.current = true; setPlaying(false); } else { paused.current = false; if (i >= last) jump(0, true); setPlaying(true); } };
const go = (n) => { paused.current = true; setPlaying(false); jump(n, n === 0); };
return (
{kicker}{title}
Step {i + 1}/{frames.length}
{f.cap}
{frames.map((_, n) =>
{frames.map((fr, n) =>
{fr.cap}
)}
);
}
// ---------------------------------------------------------------------------------------------- interactive legality explorer
const TOP_NOTES = {
EMPTY: 'The table is empty: any card may be played.',
'2': 'A 2 resets the pile: after it, almost anything goes.',
'7': 'After a 7 only 2, 3, 4, 5, 6 and 7 are allowed. A 10 cannot go on a 7.',
Q: 'After a Queen only Q, K and A can follow (a Joker may act as one of them).'
};
function Explorer() {
const tops = ['EMPTY', ...E.RANKS.filter(r => r !== '3' && r !== '10')];
const [top, setTop] = useState('6');
const suits = ['S', 'H', 'D', 'C'];
const ok = (r) => E.rankLegalOn(r, top);
const legalList = E.RANKS.filter(ok);
return (
{top === 'EMPTY' ?
Empty
: }
On the pile
Tap the top card of the pile
{tops.map(r => )}
{E.RANKS.map((r, n) => )}
{top === 'EMPTY' ? 'Anything can be played.' : `On a ${top} you can play:`} {top === 'EMPTY' ? '' : legalList.join(' · ') + ' · or a Joker as one of those.'}
{TOP_NOTES[top] &&
{TOP_NOTES[top]}
}
);
}
// ---------------------------------------------------------------------------------------------- content
const POWERS = [
['2', 'Reset', 'Goes on anything except a Queen and cancels the restriction: after a 2, anything can follow.'],
['3', 'Mirror', 'Goes on anything except a Queen. The rank underneath still governs, so a 3 on a 7 keeps the 7 limit.'],
['7', 'Low', 'After a 7 only 2 to 7 may follow. A 10 is not allowed on a 7.'],
['8', 'Skip', 'The next player misses their turn, once.'],
['10', 'Burn', 'Burns the whole pile and you play again. Not allowed on a 7 or a Queen.'],
['Q', 'Blocker', 'After a Queen only Q, K or A may follow.'],
['JOKER', 'Joker', 'Pretends to be any rank that is legal. You choose it when you play it, and everyone sees JOKER → that rank.']
];
function Chapter({ id, n, title, lead, children }) {
return (
{String(n).padStart(2, '0')}
{title}
{lead &&
{lead}
}
{children}
);
}
const Tip = ({ children, label = 'Good to know' }) => ;
function LearnBody({ settings, startSinglePlayer }) {
const s = settings;
return (
<>
SheetHead is a four-player card game. You are out when your hand, your face-up cards and your face-down cards are all gone. The first player out wins, and the match ends right then.
Cards are played onto a shared pile in the middle. What you may play depends on what is on top of it, so the game is about choosing the right card at the right time.
The deck is a standard 52 cards plus 2 Jokers (54 in all).
Each player gets 3 face-down, 3 face-up and 3 in hand. You start by playing from your hand; the other two groups wait until later.
The starting player is picked at random for every new game (it is never automatically you). After that the turn always moves clockwise.
Before the very first move, a player holding a 4 can jump in early. That special case is explained under The 4 burst in the Full rules.
Choose a card from your hand that is allowed on the top card. In the game, playable cards stay bright and lit; cards you cannot play are grayed out.
You may play several cards at once, as long as they are all the same rank.
Play by selecting cards and pressing Play, by double-clicking a card, or by dragging cards onto the pile.
You have 40 seconds per turn. If the time runs out, the game plays a legal move for you.
Pick a card for the top of the pile and see which cards you could play on it. Bright cards can be played; gray ones cannot.
The complete chart is in the Full rules tab.
After you play, if the draw pile still has cards and you hold fewer than 3, you draw until you hold exactly 3.
If you hold 3 or more, you draw nothing. (Picking up a pile can give you many more than 3; nothing is ever thrown away.)
When the draw pile is empty, your hand just shrinks as you play.
If none of your cards is allowed, you take the entire pile into your hand and your turn ends. That is a setback, but it also gives you plenty of cards to work with next time.
{POWERS.map(([r, name, text]) => (
{name}
{text}
))}
The 8: skip
The Joker
A Joker is never stuck: whatever rank you declare becomes the rank the next player has to answer. It stays a Joker, though: you play it on its own (never together with a real card, even one of the rank it imitates), it cannot be stuck onto a play, and it can never be used to make a four-of-a-kind.
Burned cards leave the game. There are two ways to burn the pile, and both give you an extra turn.
Play a 10
Four of a kind
The top four cards must be the same rank, one after another (9, 9, 3, 9 does not count).
You can complete it from your hand or your face-up cards, even out of turn, if you do it before the next player has played. Face-down cards never interrupt.
If the card you draw after playing has the same rank as the cards you just played, you may stick it onto that play, before the next player acts. Skip it and the turn simply passes.
Hand first. When your hand is empty and the draw pile is empty, you move to face-up.
Face-up: play them like hand cards (equal ranks may go together). If none fits, you take the pile plus every face-up card of one rank you choose, and you are back in the hand phase.
Face-down: when nothing else is left, flip one card blindly on your own turn. If it is legal it is played; if not, it and the pile go to your hand. Three matching cards on top plus a matching flip is a four-of-a-kind burn.
The moment a player has no hand, no face-up cards and no face-down cards, they win and the match ends. Any burn or pickup caused by your last move is settled first.
Exactly 4 players, 54 cards (52 + 2 Jokers). Each player gets 3 face-down, 3 face-up and 3 hand cards; the rest is the draw pile. The table pile starts empty.
The first player with no hand, face-up and face-down cards wins; the match ends immediately, after every consequence of that move is resolved.
The starting player is chosen at random for each new game and is part of the game state, so everyone agrees on it. Play goes clockwise.
Each turn has a 40-second clock (a large countdown shows during the last 15 seconds). On timeout the game makes a legal move for you.
You are in the hand phase whenever you hold at least one hand card. Play one or more cards of one rank that is legal on the effective top of the pile.
Refill: after a play, if the draw pile has cards and your hand is below 3, draw exactly enough to reach 3. At 3 or more, draw nothing. A hand may be bigger than 3 after picking up; cards are never discarded.
No legal card: pick up the entire pile; your turn ends and you stay in the hand phase.
Stick: if the refill gives you a card of the same rank as the cards you just played, you may add it to that play before the next player acts. It is a short window tied to that move only.
{RD.CHART.map(([r, on]) => (
{r}{Array.isArray(on) ? on.map(x => {x}) : {on}}
))}
Read a row as: this card may be played on top of these ranks. On an empty table, any card may be played. This is a fixed chart, not “same or higher”; the game shows the effective rank that governs the next play.
2 (reset): legal on anything except Q. After it, legality is checked against a 2, so a 2 on a 7 cancels the 7 limit.
3 (mirror): legal on anything except Q. The rank underneath stays the effective rank. A 3 on a 7 keeps the 7 limit; a 3 on an 8 keeps the rank 8 but does not skip again, since one-shot effects are not repeated.
7 (low): after an effective 7, only 2, 3, 4, 5, 6 and 7 are legal. A 10 is not.
8 (skip): skips exactly the next player once. Each real 8 skips once.
10 (burn): legal on everything except 7 and Q. It burns the whole pile and you play again. This holds from any phase, including a blind face-down flip.
Q (blocker): after an effective Q only Q, K and A are ordinary answers (a Joker may act as one of them). 2, 3, 4, 7, 8 and 10 are not legal.
Joker: imitates a rank that would be legal. The declared rank is recorded and is the effective rank afterwards. It stays a Joker physically: it is played alone (or with other Jokers), never together with real cards (not even ones of its declared rank), never creates or joins a stick, and never counts toward, or completes, a four-of-a-kind.
When the top four cards are the same rank, consecutively (9, 9, 9, 9), the pile burns and the player who made it plays again. 9, 9, 3, 9 and 9, 3, 9, 9 do not count.
From your hand or face-up cards you may complete it in any legal way (3 + 1, 2 + 2, 1 + 3, or 4 together), on your own turn or out of turn before the next player acts. An out-of-turn burner takes the turn and the extra turn; play then continues clockwise after them.
Face-down cards never interrupt. On your own face-down turn, if the top three are one rank and your flipped card matches, it burns.
A 4 is legal on 2, 4, 7 or an empty table, and has a special out-of-turn use when the table is empty.
Before the first move of the game: if another player bursts a 4, the designated starter is skipped and the player immediately clockwise after the burster becomes the starter.
Later in the game: an out-of-turn burst does not change whose turn it is (the burster refills if in the hand phase).
A 4 played from your hand on an empty table on your own turn is a burst too: you play again. From face-up cards on your own turn it is a normal play. Face-down cards cannot burst.
Only when the draw pile is empty. Every remaining hand card must be the same rank X, you must hold a face-up X, and X must be legal.
You then play all your hand cards plus one or more face-up Xs in one move, leaving your hand empty and moving you to the face-up phase. Keeping one X in hand is not allowed.
Requires an empty hand, an empty draw pile and at least one face-up card. Equal legal ranks may be played together.
No legal face-up card: take the pile plus all remaining face-up cards of one rank you choose (one, two or three cards). You return to the hand phase and your other face-up cards wait until your hand is empty again. The turn ends.
With no face-up cards left (and no hand), you enter the face-down phase.
On your own turn, choose one hidden card, reveal it, and resolve it.
Legal (even if three matching cards lie on top): it is played with its normal effect. Matching the top three: four-of-a-kind burn and an extra turn. A 10 (legal): burns and gives an extra turn. A flipped Joker is declared automatically.
Illegal: the revealed card and the whole pile go into your hand, you return to the hand phase, and the turn ends.
Turns go clockwise. An 8 skips the next player. A 10 or a four-of-a-kind gives the player an extra turn. An out-of-turn four-of-a-kind takes the turn; a later out-of-turn 4 burst does not.
An out-of-turn action must happen before the next player's action is committed. If two players act at once, the game resolves it in a fixed, deterministic order rather than by timing.
A tournament is a series of normal games. Choose a target of 3, 5, 7 or 10; every game win is 1 point and the first player to reach the target wins the tournament. Standings show for 5 seconds between games, then the next game starts by itself.
Game 1 is exactly a normal game (random starter). From game 2 the previous game's winner is the starting player.
That winner is dealt 3 face-down cards and 6 private cards, and chooses 3 of the 6 as FACE UP; the other 3 become the hand. Nobody else sees the six cards, and the deck is the same shuffled deck as in a normal game.
The 40-second turn clock is already running while they choose (with the usual 15-second warning). If it runs out, the choice is made automatically and the normal timeout move follows.
The table is still empty, so the pre-first-move 4 burst still works. If another player bursts while the winner is choosing, the winner's cards are chosen automatically, the winner is skipped as starter, and the player after the burster starts.
);
}
const LEARN_TOC = [['goal', 'The goal'], ['setup', 'Setup'], ['start', 'Who starts'], ['turn', 'Your turn'], ['which', 'Which cards go on which'], ['draw', 'Drawing back up'], ['stuck', 'When you cannot play'], ['special', 'Special cards'], ['burn', 'Burning the pile'], ['stick', 'Stick'], ['phases', 'Face-up and face-down'], ['win', 'Winning']];
const FULL_TOC = [['f-match', 'Match and setup'], ['f-hand', 'Hand phase'], ['f-chart', 'What goes on what'], ['f-special', 'Special cards'], ['f-quad', 'Four of a kind'], ['f-burst', 'The 4 burst'], ['f-combo', 'Hand + face-up combo'], ['f-faceup', 'Face-up phase'], ['f-facedown', 'Face-down phase'], ['f-turns', 'Turn order'], ['f-tourney', 'Tournament mode']];
function RulesScreen({ back, settings, startSinglePlayer }) {
const [tab, setTab] = useState('learn');
const toc = tab === 'learn' ? LEARN_TOC : FULL_TOC;
const [active, setActive] = useState(toc[0][0]);
const bodyRef = useRef(null);
useEffect(() => { setActive(toc[0][0]); if (bodyRef.current) bodyRef.current.scrollTop = 0; }, [tab]);
useEffect(() => {
const root = bodyRef.current; if (!root || !('IntersectionObserver' in window)) return undefined;
const io = new IntersectionObserver((es) => { es.forEach(e => { if (e.isIntersecting) setActive(e.target.dataset.ch); }); }, { root, rootMargin: '-8% 0px -80% 0px' });
root.querySelectorAll('[data-ch]').forEach(el => io.observe(el));
return () => io.disconnect();
}, [tab]);
const go = (id) => { const el = bodyRef.current && bodyRef.current.querySelector('[data-ch="' + id + '"]'); if (el) { el.scrollIntoView({ behavior: 'smooth', block: 'start' }); setActive(id); } };
return (
{tab === 'learn' ? 'A short walkthrough in the order a game unfolds, with animated examples.' : 'Exact rules and edge cases, for reference.'}