# The Fink maker prompt

**How to use it (for you, the maker):**
1. Copy everything below the line.
2. Paste it into a new chat with any LLM: Claude, ChatGPT, Gemini, or the one
   in your editor.
3. Attach your reference picture (a Pinterest pin, a screenshot, a photo), and
   replace the two lines in brackets with your idea. Have a quiz, notes or a
   study guide? Attach or paste that too, in the same chat.
4. It answers with one file. Copy its code and paste it into the box at
   https://finkinc.space/make (or save it and drop the file there).
5. That file is a first draft. Play it, then keep going in the same chat:
   ask for changes, your own levels, your own touches. Games that are
   obviously one prompt get taken down; a game you have worked on stays.

No idea yet, or not sure how to say it? https://finkinc.space/make#starters
has nine shapes to start from, one of them for a class paper; pick one, fill
two blanks or none, and it fills this prompt for you.

Working in a code editor with an agent (Claude Code, Cursor, Codex)? Start
from https://finkinc.space/kit/fink-starter.zip instead: its `AGENTS.md`
tells the agent everything below.

---

I want you to build a small game for **Fink** (finkinc.space), a place where
people get better at real things and every minute of real play goes on their
record. My game will sit behind a **door** in Fink. When people walk through
and play, the minutes they really spend count as XP on their record.

## What I'm giving you

- **A reference picture** (attached). Use it for mood, layout and the feel of
  the game. Don't copy it, trace it, or put it in the game: the game has to
  be drawn in Fink's look (below).
- **My idea:** [WHAT THE GAME IS, IN A SENTENCE OR TWO]
- **The skill it trains:** [A SKILL THAT'S REAL OUTSIDE THE GAME: e.g.
  "hearing intervals", "mental arithmetic", "spotting a weak argument",
  "reading binary"]

If my idea is vague, choose the simplest version that clearly trains that
skill. Tell me what you chose, and don't stop to ask.

## What to build

**One file, `index.html`**, with all the HTML, CSS and JavaScript inside it:
- No build step and no frameworks.
- No scripts from anywhere except fink.js (below) and, for a 3D game,
  three.js from cdn.jsdelivr.net.
- No requests to any server except fink.js, the kit's files below, and
  three.js.

It has to work in two places: pasted into Fink, which hosts it, or put on my
own website and linked from Fink. It also has to work opened straight from my
computer, for testing.

The game:
- Has a short title screen with the game's name, one sentence on what gets
  better, and a **Start** button.
- Is played in **rounds**. A round is a few questions or one challenge, and
  should take at least 20 seconds for a good player. Show the score as it
  goes and a result at the end of each round, then offer the next one.
- Gets harder as the player gets better (levels, speed, or harder
  questions), so there is always something to improve.
- The score measures the skill, not luck and not grinding. A higher score
  must mean the player did better at the skill.
- Works with a mouse, a keyboard and touch. It fits a phone (360 px wide)
  and a laptop, and plays well inside a 16:10 frame about 1000 × 625.
- Any sound uses the Web Audio API and starts only after a click or tap.
- Stays light: draw with `requestAnimationFrame`, never a loop that blocks,
  and stop drawing while the page is hidden (`visibilitychange`).

**If I ask for 3D:** use three.js, one pinned version from cdn.jsdelivr.net
loaded with an import map, and let the player walk **the Fink figure**:
`https://finkinc.space/kit/assets/figure/fink-figure.glb` (it faces -Z, about
2 m tall; swing its `HipJointL`/`HipJointR` and `ShoulderJointL`/`ShoulderJointR`
about X to walk). If it can't load, stand in a figure made of boxes. Cap the
pixel ratio at 2 (`renderer.setPixelRatio(Math.min(devicePixelRatio, 2))`),
handle resizing, and give touch screens a stick to walk with.
https://finkinc.space/kit/starters/3d/ does all of this: follow it.

## Fink's look (the kit)

Link Fink's stylesheet. It carries the colours, the fonts, and ready-made
parts:

```html
<link rel="stylesheet" href="https://finkinc.space/kit/assets/fink-kit.css">
```

- **Feel:** warm paper, white sheets with hairline borders, square corners,
  calm. Serious and friendly, like a good old book. No gradients, glow,
  neon, rounded bubbly buttons or emoji decoration.
- **Colours:** use only these CSS variables, never new colours.

  | variable | hex | use |
  |---|---|---|
  | `--paper` | `#f4e6db` | page background |
  | `--sheet` | `#ffffff` | cards, the board |
  | `--sheet-2` | `#faf5f0` | quieter areas |
  | `--ink` | `#1d2731` | text |
  | `--ink-2` | `#5b646e` | secondary text |
  | `--ink-3` | `#8b939c` | hints |
  | `--rule` | `#dccfc3` | hairlines on paper |
  | `--rule-2` | `#e7e0d9` | hairlines on a sheet |
  | `--link` | `#0b3c5d` | links, the main accent |
  | `--good` | `#2f6b46` | right answers |
  | `--bad` | `#963b2f` | wrong answers |
  | `--warn` | `#8a6314` | warnings |
  | `--gold` | `#a97a1c` | rare highlights |

  Each Fink branch also has its own colour, for when the game belongs to one:
  math `#0b3c5d`, music `#7a3c8c`, debate `#a2552b`, cs `#2f6b46`. The full
  list is https://finkinc.space/kit/assets/palette.json. In a canvas or in
  WebGL, where CSS variables don't reach, use these same hex values.
- **Fonts** (already in the stylesheet):
  - `var(--serif)` (Alegreya) for reading and big numbers;
  - `var(--sans)` (Open Sans) for small labels and buttons.
- **Ready-made parts:**
  - `f-sheet`: a white card;
  - `f-btn--primary`: the main button;
  - `f-chip`: a small tag;
  - `f-label`: a small caps label;
  - `f-empty`: a quiet note;
  - `k-stage`: the page column;
  - `k-board`: the play area;
  - `k-big`: a big number or word;
  - `k-choices`: a row of answer buttons (add `k-right` or `k-wrong` to a
    button after an answer);
  - `k-result`: the line under the board;
  - `k-meter`: a progress bar (a `<div class="k-meter"><i style="width:40%"></i></div>`).

  Plain `<button>` elements are already styled.
- **Pictures:** only these, or none. Anything else, draw with CSS, SVG,
  `<canvas>` or WebGL in the colours above. No other images from the web, no
  generated images, and nothing from my reference picture.
  - **Public-domain engravings**, at
    `https://finkinc.space/kit/assets/plates/<name>.jpg`. Always show the
    credit in small text under the picture.

    | name | what it is | credit |
    |---|---|---|
    | `bookwheel` | a wheel for reading many books | Agostino Ramelli, 1588 |
    | `platonic-solids` | geometric solids | Wenzel Jamnitzer, 1568 |
    | `arithmetic-characters` | numbers as figures | Robert Fludd, 1617 |
    | `colour-and-notes` | colours mapped onto musical notes | David Ramsay Hay, 1838 |
    | `calculating-machine` | Leibniz's calculating machine | Anonymous, 1727 |
    | `geometric-landscape` | geometric solids in a landscape | Lorenz Stoer, 1567 |
    | `steps-of-life` | life stages, infancy to old age | Anonymous, 15th century |
    | `mundus-subterraneus` | fires under the earth | Athanasius Kircher, 1678 |

    Every credit is in https://finkinc.space/kit/assets/plates/credits.json.
  - **Pictures of Fink's city**, at
    `https://finkinc.space/kit/assets/facades/<name>.jpg`: `debate-hall`,
    `math-yard`, `cs-arcade`, `music-hall`, `soapbox`, `gardens`, `foundry`,
    `underground`, `the-city`. Caption one "Fink".
  - **A door and a sign**, as SVG:
    `https://finkinc.space/kit/assets/ui/door.svg` and `.../ui/sign.svg`.
  - **The Fink figure**, for 3D, as glTF (above).

## Connecting to Fink (fink.js): do exactly this

```html
<script src="https://finkinc.space/fink.js"></script>
```

1. Include that line **once**. It is enough on its own: when the game is
   opened through its Fink door, fink.js counts the minutes of active play
   and sends them to Fink by itself.
2. At the **end of every round**, call:

   ```js
   fink.report({ score: roundScore, max: roundMax, result: "7 of 10 intervals" });
   ```

   `score` is what they got, `max` is the most possible in that round (a
   number above 0), and `result` is a few words.
3. You may also call `fink.start()` once when the player presses **Start**.
   It starts the clock at once and shows Fink's small tag in the corner.
4. The game must keep working whatever fink.js does:
   - check `window.fink` before calling it (offline, the script isn't there);
   - wrap each call in `try { … } catch { }` and add `.catch(() => {})` to
     the promise it returns (they can fail when the network does);
   - never wait on them before letting the player carry on.

Also:
- Never compute XP or time yourself, and never send a time. fink.js keeps
  the clock, and its corner tag already says what counted, so don't show XP
  in the game.
- Never ask for a name, an email or a login, and never call `fink.login()` or
  `fink.init()`. Inside a door the game must not know who is playing.
- Report once a round, never more than once every 10 seconds. Fink refuses
  more than 8 reports a minute.
- A perfect score in under 15 seconds is refused as impossible, so a round
  must take longer than that to finish perfectly.

## Where it runs

Hosted on Fink, the game gets an address of its own:
- `localStorage` works there, and is the game's alone: you may keep a level
  or a best score in it, inside `try { } catch { }` (it can be switched off),
  and never anything about who is playing. There are no cookies.
- `alert()`, `confirm()` and `prompt()` don't work. Show messages on the page.
- The game can't change the page around it or open windows that talk back
  to it.

## Fink's four rules (the game must keep all four)

1. **Your game trains a skill that's real outside the game.** The score
   reflects that skill.
2. **Put work in: games that are obviously one prompt get taken down.** So
   make this one mine: build on my idea and my picture, and give it levels,
   feedback and care. (I'll test it and change it too.)
3. **No hate.**
4. **No obvious cheating.** No fake or inflated scores, no auto-play, and
   nothing that pays for idling or clicking without thinking.

## What to give me

1. The **complete `index.html`** in one code block, finished, with nothing
   left for me to fill in. Put a few comments in it that explain the game's
   rules and scoring.
2. Then, in plain words for someone who doesn't program:
   - how to save it (as a file called `index.html`) and try it (double-click
     it; a small "Fink · practice" tag in the corner, once I press Start,
     means fink.js is connected);
   - which **subject** it is about, from Fink's list: math, science,
     history, languages, reading and writing, geography, music, computing,
     debate, arts, life skills, or anything else. Pick the closest;
   - how to put it on Fink, at https://finkinc.space/make: copy the whole
     file, paste it into the box there, give it a name and that subject, and
     it is on Fink's shelf at once, with every minute counted (or put the
     file on my own website, like GitHub Pages or Netlify, and give Fink its
     address; on itch.io the minutes may not count, because itch plays games
     inside its own frame);
   - one sentence I can use as the door's description: what gets better when
     you play;
   - three things I could change or add next to make the game better, and
     more my own.

Before you answer, check your file against this list:
- `fink-kit.css` is linked, and only the kit's colours and pictures are used.
- fink.js is included once, and `fink.report({ score, max })` runs at the
  end of each round, guarded so the game never breaks without it.
- There is no `alert`, no login, and nothing about who is playing.
- It works when opened as a plain file, on a phone and on a laptop.
- A round takes more than 15 seconds to do perfectly.
- It keeps the four rules.