Sail Scenario Workshop

An unofficial, fan-made web tool for designing custom scenarios for Sail (Akiyama Koryo & Kozu Yusei, Allplay 2023). Players place tokens on the ocean board, get an instant check of whether the scenario is playable, print it as a scenario-book card, and publish it to a shared gallery.

Built with Next.js 16 (App Router), React 19 and TypeScript. Ready to deploy on Vercel.

Features

• Board editor with the real board geometry: rows A–G, columns 1–25, tapering to D1 and D25 (79 spaces).
• Token limits from the box. You can't place more than the game contains (see below).
• Course check: a best-case plan that respects the round structure (4–7 tricks, helm moves towards the trick winner, one fish-tail move a round) for both storm deadlines and the End, plus a difficulty estimate from 400 simulated games with the real cards, compared with the printed scenarios. The best route, round markers and dead ends are drawn on the map.
• Scenario card in the scenario book's format (START / ISLAND / KRAKEN / END / STORM), plus a print layout that fits board and card on one A4 landscape page.
• Start from any of the six printed scenarios. Publishing an unchanged copy is blocked.
• Share links that encode the layout in readable coordinates: /?s=D1&e=D17&i=D3.G6&k=G4.A6&w=5.12&t=Name.
• Undo/redo, drag-to-paint with a mouse, autosaved drafts (browser storage), keyboard shortcuts.
• Responsive. On phones the board turns upright (start at the top) so spaces stay tappable, and the token palette becomes a bottom bar.
• Accessible. The board is a keyboard grid (arrow keys move, Enter places, Delete removes), with visible focus and reduced-motion support.
• Publishing with a Cloudflare Turnstile captcha, a multilingual profanity filter on the scenario name, author name and notes, rule validation on the server, and per-IP rate limiting.
• Private edit links: authors can enter an email address when publishing and get a secret link for editing or deleting the scenario later (Delete is in the edit toolbar). The address is used once and never stored.
• Share previews: every scenario gets its own 1200×630 card (title, author, token counts and the map, no spoilers) for WhatsApp, Discord, Slack, X and co.
• Gallery and a shareable page per scenario with "Remix in the editor". Spoilers (best route, dead ends, move counts) stay hidden until a player taps Show tips.
• Optional Seafarers expansion tokens (whirlpool, ally ship, crow's nest).

Token inventory

Token	In the box	Notes
Start	1	single space
End	1	chevron covering 3 spaces, e.g. C10, E10, D11
Island	12	ship can't enter
Kraken	9	entering it damages the ship
Storm	4	used in pairs (cloud above + below a column), so max 2 storms
Whirlpool, Ally ship, Crow's nest	2 each	Seafarers expansion only

Sources: the Allplay base-game rulebook component list ("26 Tokens: 1 Start, 1 End, 12 Island, 9 Kraken, 4 Storm") and the Seafarers expansion contents ("2 Whirlpool, 2 Ally Ship, 2 Crow's Nest Tokens"). The editor places expansion tokens but doesn't model their effects in the course check, because their rules aren't public; the expansion's rulesheet applies at the table.

Run it locally

npm install
npm run dev          # http://localhost:3000
npm test             # unit tests (board model, analysis, profanity, submission flow)
npm run typecheck

With no environment variables set, the app uses Cloudflare's always-pass test captcha keys and stores scenarios in memory. Everything works locally, but published scenarios disappear on restart.

Deploy to Vercel

1. Push this folder to a Git repository (GitHub, GitLab or Bitbucket) and import it at vercel.com/new. Vercel detects Next.js; no build settings need changing. (Or run npx vercel in the folder.)

2. Add storage: in the project's Storage tab, add Upstash for Redis from the Marketplace and connect it to the project. It injects KV_REST_API_URL and KV_REST_API_TOKEN. (UPSTASH_REDIS_REST_URL / UPSTASH_REDIS_REST_TOKEN work too.) Without it, the gallery and dialog show a "no database connected" notice.

3. Add the captcha keys: in the Cloudflare dashboard, open Turnstile → Add widget, add your Vercel domain (and any custom domain) as hostnames, and choose "Managed" mode. Then set in Vercel → Settings → Environment Variables:

   • NEXT_PUBLIC_TURNSTILE_SITE_KEY = the site key
   • TURNSTILE_SECRET_KEY = the secret key

   Set both or neither. With neither, the site runs on test keys and the publish dialog says so. With only one, publishing is refused with an explanation.

4. Email edit links (optional): with a domain verified in Resend (here sail.mopamo.dev), set resend_secret to the Resend API key (RESEND_SECRET and RESEND_API_KEY work too). The sender defaults to Sail Scenario Workshop <[email protected]> (override with EMAIL_FROM) and links point to SITE_URL, else the Vercel production domain, else https://sail.mopamo.dev. Without a key, the email field simply doesn't appear.

5. Optional: set ADMIN_TOKEN (16+ random characters) to enable moderation deletes.

6. Redeploy so the new variables take effect. NEXT_PUBLIC_* values are baked in at build time.

See .env.example for the full list.

Edit links and privacy

When an author enters an email address while publishing:

This is the beginning of the README. Read the rest at the original. Read the full README ↗