Review · Scythe › Teach

9:41

Pick a game to play

Upload any rulebook. Get a step-by-step teaching script, a one-page rules summary, and answers mid-game.

Upload a rulebook

We'll read it and make it easier to learn. No account needed. The AI reads every page, pictures included.

Drag and drop your rulebook here or choose a rulebook file

Accepted file types: PDF, JPG, PNG · up to 100 pages. Your games are saved in this browser only.

{{ error.title }} {{ error.body }}

Reading your rulebook

{{ upName }}

{{ upLabel }}

{{ game.title }}

{{ game.title }}

{{ game.pagesLabel }} {{ game.players }}

Example

Are you familiar with this game?

{{ o.label }}

How much do you remember?

{{ o.label }}

{{ createLabelProgress }}

{{ error.title }} {{ error.body }}

Rule sets

Teaching the table? Go through these one at a time, out loud.

{{ teachKicker }}

{{ teachTitle }}

{{ it.group }}

{{ it.term }}:

{{ sg.text }}

p. {{ it.page }}

{{ it.num }}

{{ sg.text }}

p. {{ it.page }}

{{ it.text }} p. {{ it.page }}

{{ c.label }}

{{ sg.text }}

{{ it.picCaption }}

{{ tNrTitle }}

{{ tNrBody }}

Before you start

Set the table first, then teach. First Turn tells you what to say, one idea at a time.

Has the table played before?

{{ o.label }}{{ o.desc }}

{{ tMinutesLabel }}

{{ c.label }}

{{ tStep.kicker }}

{{ tStep.title }}

{{ tStep.checkIntro }}

{{ c.text }} p. {{ c.page }}

{{ p.label }}

{{ tStep.foot }}

Say this

{{ tStep.say }}

Say this

{{ tStep.say }}

Example{{ tStep.example }}

Point at

{{ p.label }}

{{ tStep.ruleLabel }}

{{ it.group }}

{{ it.term }}:

{{ sg.text }}

p. {{ it.page }}

{{ it.num }}

{{ sg.text }}

p. {{ it.page }}

{{ it.text }} p. {{ it.page }}

{{ c.label }}

{{ sg.text }}

Say this

{{ tStep.say }}

Wait a beat. Silence is fine. If an answer would take a while, tap Question for later and come back to it at the end.

Say this

{{ tStep.say }}

Then reset

{{ r.text }}

Say this

{{ tStep.say }}

Held questions

No questions were held. Ask the table one last time: anything before we start?

{{ q.text }}{{ q.from }}

Keep this open while you play

First game

Play gently. You’re teaching, not winning.

Watch for these

{{ it.group }}

{{ it.term }}:

{{ sg.text }}

p. {{ it.page }}

{{ it.num }}

{{ sg.text }}

p. {{ it.page }}

{{ it.text }} p. {{ it.page }}

{{ c.label }}

{{ sg.text }}

Held questions

No questions were held. Ask the table one last time: anything before we start?

{{ q.text }}{{ q.from }}

Good game

Next time

A few things to try once everyone knows the rules.

{{ tp.num }}{{ tp.text }} p. {{ tp.page }}

Stuck mid-game? Ask anything about the rules. Every answer tells you which page it came from.

{{ m.text }}

p. {{ r.page }} {{ r.text }}

Checking the rulebook…

{{ game.title }}

{{ doc.name }}

{{ game.fromLabel }} {{ doc.tuned }}

Tap any line to see its page in the rulebook.

{{ s.num }}

{{ s.title }}

{{ it.group }}

{{ it.term }}:

{{ sg.text }}

{{ it.num }}

{{ sg.text }}

{{ it.text }}

{{ c.label }}

{{ sg.text }}

{{ it.picCaption }}

{{ it.group }}

{{ it.num }}

{{ it.text }}

{{ c.label }}

{{ it.picCaption }}

{{ it.changeTag }}

Editing {{ editCount }}

{{ game.title }} rulebook Opened at page {{ viewer.page }} Official rules

Opening the rulebook…

Opening the rulebook…

Page {{ pg.num }}Referenced

{{ bk.text }}

{{ sg.text }}{{ sg.text }}

Letter preview

{{ game.title }} {{ doc.name }} First Turn
Check page refs against the official rulebook

{{ s.num }}. {{ s.title }}

{{ it.group }}

•

{{ it.term }}:

{{ sg.text }}

{{ it.printRef }}

{{ it.num }}.

{{ sg.text }}

{{ it.printRef }}

{{ it.text }} {{ it.printRef }}

{{ c.label }}

{{ sg.text }}

{{ it.picCaption }}

For engineering

First Turn: handoff

The prototype above is the visual source of truth. Styling comes from the Organic stylesheet tokens (color ramps, Caprasimo + Figtree, radius and shadow scales). Icons are Lucide at stroke 2.75. All demo content is in the DEMO object at the top of this file’s logic.

Components and states

Every component, the states it can be in, and where it appears.

ComponentStatesScreen

App headerDefault · back button hover (secondary tint) · logo returns homeEvery screen

Game tileDefault · hover/press: lifts 3px, shadow sm → md · cover image or color tileHome

Add rulebook buttonDefault · hover · pressed (accent ramp)Home

Drop zoneDefault · drag-over (accent-100 fill, accent dashed border) · error alert belowUpload (desktop)

Choose rule book buttonDefault · pressedUpload (phone)

Error alertFile too big · Not a rulebook · AI busy (with Try again)Upload, Game › Learn

Progress barUploading % · Reading the pages · Got it! / Reading · Creating · Adding page refsUploading, Game › Learn

TabsLearn / Teach / Ask · active (accent underline) · hoverGame

Settings cardCollapsed · collapsed first time (hint line) · open · creating (progress replaces body) · Create disabled until familiarity pickedGame › Learn

Option rowDefault · selected (accent-100 fill, accent-300 ring, bold) · hoverSettings

Rule set listHidden until created (empty) · row default · row hoverGame › Learn

Section cardNumbered title + blocks; one column on phone, auto-fit columns ≥320px on desktopRule set

Line blockDefault · with term (bold lead-in) · hover/tap (accent-100) · quote open · unverified (hollow dot) · editing (term input + textarea) · Edited / Added by you tagRule set, Teach, Letter

Steps blockDefault · group subhead · number badge (sage-200; neutral-200 when unverified) · numbering continues across groups · hover/tap · quote open · editing (textarea per step)Rule set, Teach, Letter

Table blockDefault · icon in first cell · hover/tap · quote open · unverified · editing (input per cell, accent ring on changed cell)Rule set, Teach, Letter

Picture blockEmpty slot (shows alt) · filled · hover/tap · quote open · editing (delete only)Rule set, Teach, Letter

Quote popoverVerified (book icon, quote) · unverified (question icon, quiet copy) · edited by you · added by you · Read page button hidden for added linesRule set

Print / share barDefault · hidden while editing, reading or previewingRule set

Edit barNo changes · N changes · Undo disabled (no history) · Reset disabled (no changes) · DoneRule set (editing)

Add line buttonShown only while editingRule set (editing)

Rulebook readerLoading · referenced page ringed + quote highlighted · quote not found (page shown, no highlight) · scroll to pages before/afterOverlay from Rule set

Teach cardLegacy walk-through for games without a teach object: Step N of M · Back disabled on first · last step shows Start over · progress dotsGame › Teach

Teach startFamiliarity option rows · Start teaching. No name entry: examples use Player 1, Player 2…Game › Teach

Teach progressOne equal segment per chapter; each fills by its own steps · current chapter label bold · re-teach is Why play / How to play / Watch forTeach

Teach cardVariants: checklist (Set up) · opener · rule · pause (sage fill) · practice · watch · tips · lastTeach

Say thisPhone 22px (opener and pause 26px) · desktop 26px (30px) · weight 600 · {P1} → Player 1Teach card

Rule underLines, steps and tables from blockIds · hover/tap highlights and opens the quote popover · Read page opens the readerTeach card, First game

Point atPicture slots, alt as caption · auto-fill ≥96px on phone, right column on desktop · same slot ids as the rule sets, so dropped images carry overTeach card

Example bubbleChat-bubble shape, flat bottom-left corner, sage tint · also used for the Fiddling is learning lineRule steps, Set up

Setup checkText + page ref + component pictures on a cream row; no checkboxSet up

Pause cardSage card, question icon, Say this line, Question for later hintAfter the turn and after combat

Teach barBack (on step 1 returns to start) · Question for later + count badge · Next / Start the game / Game over · hidden while the reader is openTeach, First game

Question for later sheetEmpty (Save disabled) · typing · N saved so far · Cancel or scrim closesOver the teach bar

Parking lotEmpty (ask the table one last time) · list of held questions with the step they came from, each with Ask First TurnLast step, First game

First game cardTake-backs on / off · Play gently note · watch list with popovers · held questions if anyAfter Start the game

Next time card2–3 numbered tips with page refs · Teach again · Back to First gameAfter Game over

Teach not readyNo rule sets yet (Go to Learn) · creating (progress bar mirrors Learn)Game › Teach, every game

AskEmpty (intro + suggestions) · question bubble · answer with page refs · no answer found · thinkingGame › Ask

Letter previewScaled Letter sheet, grows to extra pages · Close · PrintOverlay from Rule set

Breakpoints

What changes between phone and desktop.

LayoutWhenWhat changes

PhoneWindow under 500px, or Device = mobile390px frame (full-bleed on real phones) · 2-column home grid · Choose rule book button replaces the drop zone · bottom bars full width minus 24px · status bar space at top of reader

DesktopDevice = desktop, window ≥ 500pxContent max 880px, centred · home grid auto-fill, min 170px tiles · drag-and-drop zone · bottom bars 420px, centred · header padding 20px

Rule set gridBothrepeat(auto-fit, minmax(min(100%, 320px), 1fr)): one column on phone, two on desktop

TablesBothCSS grid rows, never horizontal scroll. First column width: 36px for numbers, 40% for short labels, 34% for long labels; text wraps

LetterBoth816 × 1056 sheet zoomed to fit the frame width; content flows to extra pages

TeachBothPhone: rule card stacks Say this → Point at → The rule, bar full width minus 24px. Desktop: Point at moves to a right column beside Say this and The rule, larger type, 32px card padding, bar 520px

Interactions and motion

No other animation. Respect reduced motion by dropping the tile lift and chevron rotation.

TriggerWhat happensDuration

Game tile hovertransform + shadow150ms

Settings open/closeChevron rotates 180°200ms

Option row selectFill + ring150ms

Block hover (pointer)Highlight fill on mouseenter, popover opens; closes on mouseleave120ms fill

Block tap (touch)Toggles popover. A tap within 400ms of a hover-open is ignored so touch doesn’t double-toggle—

Read page NOpens reader overlay, renders the referenced page first, highlights the quote, scrolls it to ~120px from the topInstant

Edit modeBlocks become inputs; edit bar replaces Print / share. Typing in one field = one undo step; history keeps 50 states. Reset restores the AI version—

UploadProgress ticks every 90ms, then opens the game with Settings open~2s

CreateProgress over the generation time, bar width transitionDemo: 3s · bar 250ms

AskShows “Checking the rulebook…”, then the answer800ms

TeachLegacy only: Back / Next swap content; last step loops with Start overInstant

Teach step changeContent swaps, scroll to top, open popover and sheet close; progress segment fill animatesInstant · fill 250ms

Checklist rowsStatic, nothing to tick—

Take-backs switchKnob slides150ms

Question for laterSheet over a scrim; Save adds { text, step } and closes; Cancel or scrim closesInstant

Ask First TurnSwitches to Ask with the question in the input, not sent yetInstant

End of teachLast step → First game card (Start the game) → Next time card (Game over)Instant

Copy

Every user-facing string. {braces} are filled in at runtime.

WhereText

HeaderFirst Turn

HomePick a game to play

HomeUpload any rulebook. Get a shorter version, a quick refresher, and a guide for each player. You can also ask it questions mid-game.

Home tile{players} · {pages} pages

Home (aria)Add a rulebook

UploadUpload a rulebook

UploadWe’ll read it and make it easier to learn. No account needed, and only the text goes to the AI.

Upload (desktop)Drag and drop your rulebook here · or choose a rulebook file

Upload (phone)Choose rule book

UploadAccepted file types: PDF, JPG, PNG · up to 25 MB

UploadNo rulebook handy? Try a sample (Checkers, 4 pages)

Error: too bigThat file’s a little too big — Rulebooks need to be under 25 MB. Try a smaller scan, or upload just the rules pages.

Error: not a rulebookHmm, that doesn’t look like a rulebook — We couldn’t find any players, turns or a way to win. Check it’s the right file. We can read PDF, JPG or PNG.

Error: busyThe AI is juggling a lot right now — Your settings are saved. Give it a moment and try again. · Try again

UploadingReading your rulebook

Uploading stagesUploading… {n}% → Reading the pages… → Got it!

Game{n}-page rulebook · {players}

TabsLearn · Teach · Ask

SettingsYour settings · Tell us how well you know it (first time only)

SettingsAre you familiar with this game? — I’ve never played · I played once, a while ago · I played many times, a while ago

SettingsHow much do you remember? — Nothing · About a third of the rules · Most of the rules

SettingsCreate · Create again

Create stagesReading… → Creating… → Adding page refs…

Rule setsRule sets

Rule setsShorter rule book — Every rule in plain language, easier to read

Rule setsRefresher rules — The main points on one page

Rule setsReference guide — A turn reference for every player

Rule setFrom a {n}-page rulebook · For first-timers / For a quick relearn / For a quick refresh / Plain language

Rule setTap any line to see its page in the rulebook.

Reference guideTurn outline (first section)

Picture captionFrom page {n} · {caption}

Popover: verifiedRulebook, page {n} · “{quote}” · Check this against the book.

Popover: pictureCropped from page {n} · Picture taken straight from the rulebook.

Popover: unverifiedCouldn’t verify — check the book · We couldn’t find these words on page {n}. The AI may have misread or reworded it.

Popover: editedEdited by you · from p. {n} · AI version: “{original}” · You changed cells in this table.

Popover: addedAdded by you · Not from the rulebook. · Double-check this one yourself.

Popover buttonRead page {n} in the rulebook

Bottom barPrint / share

Edit barEditing · Tap a line to change it · {n} change / {n} changes · Done

Edit (aria)Undo · Reset to AI version · Delete line / step / table / pictures · Term · Step {n}

Edit tagsEdited · Added by you · Add line

Teach (legacy)Teaching the table? Go through these one at a time, out loud.

Teach (legacy)Step {n} of {m} · Back · Next · Start over · p. {n}

Teach startBefore you start · Set the table first, then teach. First Turn tells you what to say, one idea at a time.

Teach startHas the table played before? — Never played (Full teach · about {n} minutes) · Played before (Quick re-teach · about {n} minutes)

Teach startAbout {n} minutes to teach · Start teaching

Teach cardStep {n} of {m} · Say this · Example · The rule · Point at · p. {n}

Name fallbacks{P1} Player 1 · {P2} Player 2 · {P3} Player 3 · {P4} Player 4 · {P5} Player 5

Set upSet up the table · Set it all up before you teach. · Hand out everything and let people pick things up. Fiddling is learning.

OpenerWho are we? · How do we win? · Why is this fun?

PausePause for questions · Wait a beat. Silence is fine. If an answer would take a while, tap Question for later and come back to it at the end.

PracticeTwo practice turns · Then reset

Re-teachWhat people get wrong · {N} things new players get wrong. Say them once, then keep an eye out. · Watch for · Play a little better · {N} things that make a big difference once you know the rules. · Tips

Last stepAny last questions? · That’s everything you need. The rest we’ll learn by playing, and you can ask me anything as we go. · Held questions · No questions were held. Ask the table one last time: anything before we start? · Held during {step} · Ask First Turn

Teach barBack (aria) · Question for later · Next · Start the game · Game over

Question for laterQuestion for later · Save it for the end so the teach keeps moving. · What’s the question? · {n} saved so far · Cancel · Save for later

First gameKeep this open while you play · First game · Allow take-backs this game · Anyone can undo a move that came from a misunderstanding. · Play gently. You’re teaching, not winning. · Watch for these

Next timeGood game · Next time · A few things to try once everyone knows the rules. · Teach again · Back to First game

Teach not readyTeach isn’t ready yet · Create your rule sets in Learn first. Then Teach walks you through the game, one idea at a time. · Go to Learn · Getting Teach ready · We’re still reading the rulebook. Teach opens as soon as your rule sets are done.

Popover: tipBased on page {n} · A tip for playing well, not a rule.

AskStuck mid-game? Ask anything about the rules. Every answer tells you which page it came from.

Ask suggestionsHow do I set up? · What happens on my turn? · How do you win?

AskType a question, like “Can I pass?” · Send (aria)

Ask answersHere’s what the rulebook says: · I couldn’t find that in the rulebook. Try asking about setup, turns, scoring or how the game ends.

Ask progressChecking the rulebook…

Reader{Game} rulebook · Opened at page {n} · Official rules · Back to rule set (aria)

ReaderOpening the rulebook… · Page {n} · Referenced · Page {n} · referenced · (This page is blank.) · (Illustrations only on this page.)

LetterLetter preview · Close · Print

Letter footerFirst Turn · Check page refs against the official rulebook · (p. {n})

Component names in markup

Search the file for data-component="…" to find each one. Tokens all come from the one Organic stylesheet as CSS variables.

app-headergame-tileadd-rulebook-buttondrop-zoneerror-alertprogress-stagetabssettings-cardoption-rowrule-set-rowsection-cardlineterm-linestepsstep-grouprule-tablepicture-blockteach-startteach-runteach-progressteach-cardsay-thisrule-underpoint-atexample-bubblesetup-checkpause-cardreset-listteach-barhold-thoughtpark-sheetparking-lotparked-questionfirst-game-cardtake-backsnext-time-cardteach-not-readyreview-stripinline-iconquote-popovertrust-noteprint-baredit-barteach-cardchat-bubbleask-inputrulebook-readerrulebook-pageletter-previewhandoff

Data

Each game in DEMO.games has: id, title, players, pages, rb, tone, overview, glossary, icons, reference, sections: [{ title, blocks }], and optionally teach (see below). DEMO.sample is used for the upload demo.

FieldShapeNotes

line{ type: "line", id, term?, text, page, quote, level, images?: [{ alt, aspect, width }] }With images it renders as a picture block and text is the caption

steps{ type: "steps", id, items: [{ group?, text, page, quote, level }] }Numbering continues across groups; a subhead shows when group changes

table{ type: "table", id, title, columns, rows, page, quote, level }Write icons inline in any text as {iconId}, e.g. “each worker {worker} produces 1 token”. A cell that starts with one shows it as a leading icon

level"verified" | "unverified"Unverified = the quote couldn’t be matched on that page

overview[{ text, page, quote, level }]At a glance lines. Not shown in the UI yet

glossary[{ term, text, page }]Not shown in the UI yet

icons[{ id, name }]Lucide icons, stroke 2.75, used in tables

reference{ outline: [{ text, page, quote, level }], blocks: [blockId] }Reference guide = Turn outline (as steps) + the listed blocks, grouped by section

teach{ opener, setup, path, practice, reset, watch, tips, minutes }Optional, next to sections and reference. With it, Teach uses the new flow; without it, the legacy walk-through. Only Scythe has one in this demo

teach.opener{ who, win, fun }One card each, read aloud in that order

teach.setup[{ text, page, quote, level, images: [{ alt }] }]Checklist; each image is a picture slot labelled with its alt

teach.path[{ title, say, blockIds, pointAt: [alt], example?, pause? }]In teaching order; each step only uses what came before. say = 1–2 sentences to read aloud. blockIds = rules shown underneath. pause: true makes a Pause for questions card (say only)

names{P1}, {P2}… in say and exampleRendered as Player 1, Player 2… (no name entry)

teach.practice, resettext · [text]Practice step: practice is read aloud; reset lists what to put back

teach.watch[blockId]Common-mistake blocks. Used for the First game watch list and the re-teach

teach.tips[{ text, page }]Next time card and the re-teach’s tips step

teach.minutesnumberFull teach time. Re-teach time = minutes × re-teach steps ÷ full steps, rounded

Re-teachderivedPlayed before = opener + first path step + watch + tips + last step