Fit Fete games · build doc

Retrofit Blueprint: the 14 live formats onto the 6-beat loop

Every format in assets/games/formats/ read line by line. Each card below states what the game does today, which beats of the loop it already owns, and the exact upgrades that finish it. Nine formats are a shared-kit drop. Four need medium work. One needs a real rebuild.

1Concept card 2Manipulate 3Check 4Run / Reveal 5Why? 6Complete
in place partial missing not part of this design
Mechanic rule, locked 2026-08-04

Never auto-adjust the member's other inputs. If a move breaks a budget or limit, show the over state honestly: the meter goes over, turns amber, and a plain line names what is over. The member does the fixing. One live format breaks this rule today (Build the Diet blocks wrong picks instead of letting them land), and its card below carries the fix.

The shared kit first: ff-sim-kit

Six primitives give all 14 formats the loop at once. Build these before touching any single game.

ffConcept()

Beat 1 · all 14 formats

The opener every game skips today. Eyebrow, headline, two or three plain sentences, a warm persona card with a filler photo, a filler video block, one primary button that starts the game. One renderer, one content shape in each format's JSON.

ffCheckBar()

Beat 3 · the manipulate formats

The check state machine. Primary button stays disabled until the member has acted. On a wrong answer it flips to the ladder: Try again as primary, See a good answer as ghost, Why? alongside. No penalty, ever. Each format supplies two callbacks: mark what failed in place, and show a good answer.

ffWhy()

Beat 5 · all 14 formats

One disclosure panel, same look everywhere, open after right and wrong outcomes. Two or three plain sentences pulled from the content JSON.

ffComplete()

Beat 6 · all 14 formats

The finish beat. Small celebrate, +20 · Done, then the done state. Sits above each format's own recap and wraps the existing once-only api.complete() guard, so no format hand-rolls its own banner.

ffMeter()

Beat 2 · budget-style formats

The honest budget meter. Ok, warn, and over states with a plain line naming exactly what is over. It never adjusts the member's other inputs. Built for Build the Diet, ready for every future budget sim.

ffRun()

Beat 4 · reveal formats

Count-up tickers and bar fills that play the member's answer forward, and snap straight to the final state under prefers-reduced-motion.

Recommended build order

  1. ffConcept + ffComplete into all 14. Additive only, no game logic touched. The nine S formats are finished after this single pass.
  2. ffCheckBar + ffWhy, proven on Sequence. It already owns a real Check button. Then Cloze and Matching, to retire their answer giveaways.
  3. Estimate and Reveal. Gate the Reveal button until the slider moves, add the ffRun ticker.
  4. Crossword and Wordsearch. Per-clue why fields in the content JSON, plus See a good answer per clue.
  5. Build the Diet on ffMeter. The full mechanic-rule retrofit, and the showcase for how the loop feels in a budget game.

The 14 formats

Myth or Factmythfact.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowOne statement at a time, tap Myth or Fact, the card flips to a targeted verdict and its why, recap counts what you learned.

Upgrades
  • Kit concept card up front.
  • Kit complete banner above the recap.
  • Nothing else. Why already shows after right and wrong, the flip respects reduced motion, and no answer is ever punished.

Pure kit drop. Reveal-style format: the tap is the check, so no retry ladder by design.

Two Truths and a Lietwotruths.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowThree statements, tap the lie, every statement badges True or The lie in place with its own why, summary fires complete. Data self-checks at load.

Upgrades
  • Kit concept card and complete banner.

Pure kit drop. Its per-statement in-place marking is already the loop's standard.

This or Thatthisorthat.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowPick which option wins, both cards reveal their real numbers in place, winner badged, why panel below, end screen tallies gut vs data.

Upgrades
  • Kit concept card and complete banner.
  • Optional: ffRun count-up on the revealed numbers.

Kit drop plus one optional ffRun call.

Odd One Outoddoneout.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowFour tiles, tap the one that does not belong, every tile badges Belongs or Odd in place, verdict names the odd item, recap explains every set.

Upgrades
  • Kit concept card and complete banner.

Pure kit drop. Round data integrity already asserted at load.

Sort to Bucketsorttobucket.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowSwipe or tap each card into one of two buckets, feedback marks the right bucket in place with the why, a miss stays gentle and names the correct bucket, recap fires complete.

Upgrades
  • Kit concept card and complete banner.

Pure kit drop. Its wrong-state copy is the tone standard for every other retrofit.

Flashcardflashcard.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowFlip each card, self-mark Got it or Review again, review-marked cards come back on replay, tally fires complete.

Upgrades
  • Kit concept card and complete banner.

Pure kit drop. Self-assessment by design: no wrong state, so no ladder. The card back is the why, and the flip already respects reduced motion.

Label Detectivelabeldetective.js

S
1 Concept2 Manipulate3 Check4 Reveal5 Why6 Complete

NowThree lesson cards teach the label, then rounds of tap the row, high or low, and multiple choice. Every answer marks in place with a targeted miss note, recap fires complete.

Upgrades
  • Swap lesson card one for the kit concept card with persona and video. Keep cards two and three as the Why deep dive.
  • Kit complete banner.

Kit drop plus one intro swap. Closest format to the full loop today: its in-place row marking is the pattern ffCheckBar copies.

Clozecloze.js

S
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowTap a word chip into each blank. The right chip locks with its why. A wrong chip shakes, then a toast gives the answer away on the first miss.

Upgrades
  • Replace the giveaway toast with a targeted line that names the miss without solving it, then the ladder: Try again, See a good answer, Why?.
  • Kit concept card and complete banner.

Mostly kit. The only per-format work is swapping the wrong-path toast for the ffCheckBar ladder.

Matchingmatching.js

S
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowTap a term, then a meaning. A match locks with its why. A miss shakes both, then immediately prints the tapped term's real meaning.

Upgrades
  • Keep the shake, drop the giveaway: a miss says these two do not pair, then offers the ladder.
  • Kit concept card and complete banner. Why recap stays available on the done card.

Mostly kit. Tiny per-format wiring on the miss path.

Sequencesequence.js

M
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowReorder steps with arrows, then a real Check button. Correct rows lock green from the top with their whys, and the first wrong slot prints the right answer straight away.

Upgrades
  • Gate Check until the member has moved something.
  • Replace the answer giveaway on the first wrong slot with a line that names the slot, then the ladder.
  • Kit concept card and complete banner.

Build ffCheckBar here first. The only format with a true Check beat today, so it proves the ladder before Cloze and Matching inherit it.

Estimate and Revealestimatereveal.js

M
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowDrag a slider to guess, tap Reveal, the real number appears with a friendly closeness band and its why, recap lists guess vs real. Bands never fail anyone.

Upgrades
  • Reveal is live before the slider is touched, so the untouched middle counts as a guess. Gate it until the slider moves.
  • The real number pops in flat. Give it the ffRun ticker, instant under reduced motion.
  • Kit concept card and complete banner.

Kit does the heavy lifting: gating from ffCheckBar, ticker from ffRun, small wiring here.

Crosswordcrossword.js

M
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowTap a cell, type letters, words lock green on their own, the clue list keeps score, solved banner fires complete. Clues have no whys, and a stuck member has nothing but a Hint link that routes away.

Upgrades
  • Kit concept card before the grid.
  • Per-clue why line when a word locks, plus a Why panel at the solved beat. New why field per clue in the content JSON.
  • See a good answer as a ghost per stuck clue: fills that word, marked shown rather than solved.
  • A Check my letters ghost that marks only the wrong cells in place and names the clue they sit in.

Kit covers 1, 5 shell and 6. Per-clue whys and the letter check are per-format work plus content fields.

Wordsearchwordsearch.js

M
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowDrag a line or tap first and last letter. Real answers lock green and tick their clue. Decoy words get named honestly in a toast. Done beat fires complete.

Upgrades
  • Kit concept card.
  • Per-clue why revealed in the clue row when it solves, not just the word. Content field.
  • See a good answer ghost per clue that flashes the word's line in the grid.
  • Kit complete banner. Keep the decoy toast: it already names exactly what the member found.

Kit for 1 and 6. Clue whys and the reveal flash are per-format. Selection code stays untouched.

Build the Dietbuildthediet.js

L
1 Concept2 Manipulate3 Check4 Run5 Why6 Complete

NowTap fitting ingredients onto the plate until the target count. A wrong pick bounces off with a teaching toast and never lands on the plate.

Upgrades
  • The mechanic-rule fix: every pick plates. The ffMeter shows the honest state, fit count toward target, and goes amber with a plain line naming the off-pattern item when one lands. Nothing auto-removes.
  • Check gated until the plate holds the target count.
  • On check, mark off-pattern tiles in place, then the ladder. The member removes and replaces picks themselves.
  • Run beat: the finished plate fills into the unlocked recipe card.
  • Kit concept card and complete banner.

The showcase retrofit. ffMeter is built here and stays reusable. The pick-and-fix rework is real per-format effort, which is what makes this the one L.

Totals: 9 small, 4 medium, 1 large. Source of truth for current behavior: /Users/spencershilstone/MaxWell/fitfete/assets/games/formats/. All copy above is teaching-plan language, not member-facing copy.