#!/usr/bin/env node // Klondike solitaire, drawn as a web page and rendered to the terminal. The // board is a flex row of flex columns, a card is a styled , and every // move is a click or a keystroke on it. // // node examples/solitaire.ts (opens the new-game menu) // node examples/solitaire.ts (skips the menu -- the speedrun door) // // The menu chooses one-card or three-card draw; in three-card, the flip // fans its last three and only the top is playable. // // space draw from the deck (or turn it over when empty; enter draws too // while the cursor is hidden) // f pick up the flip's top card (0 works too -- the pile left of 1) // 1-7 pick up a tableau pile, or drop what you are holding on it // arrows move the cursor anywhere on the board; enter takes the card // under it (with its stack) or places what you are holding // s/h/d/c send that suit's ready card home -- each home takes only the // suit that labels it, and the letters are the player's pick // where several cards are ready at once // a send everything that fits home // enter on the held stack's own pile puts it back u undo q quit // n new deal r retry this deal // (n and r mid-run ask first -- y or enter abandons, n stays) // // The clock starts on the first move and stops on the win; a deal's best // time survives retries, which is what makes a deal number a speedrun. // // Clicking does the same: a card picks up, a pile drops, the deck deals, and // a double-click sends a card home. The menu and the confirm dialog take // clicks too. import {pathToFileURL} from "node:url"; import type {Context} from "@b9g/crank"; import {renderer} from "@b9g/crank/dom"; import {jsx} from "@b9g/crank/standalone"; import {TermDOM} from "@b9g/termdom"; // ---- the deck ---------------------------------------------------------------- const SUITS = ["♠", "♥", "♦", "♣"]; const SUIT_NAMES = ["spade", "heart", "diamond", "club"]; const RANKS = [ "A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", ]; interface Card { /** 1 (ace) through 13 (king). */ rank: number; /** An index into SUITS; hearts and diamonds are the red ones. */ suit: number; up: boolean; } function isRed(card: Card): boolean { return card.suit === 1 || card.suit === 2; } interface Game { /** The deal this game was shuffled from. */ number: number; /** How many cards a turn of the stock flips: klondike's one or three. */ draw: number; stock: Card[]; waste: Card[]; /** One pile per suit, in SUITS order, each running up from its ace. */ foundations: Card[][]; tableau: Card[][]; moves: number; } /** mulberry32: enough randomness for a shuffle, from a number you can keep. */ function random(seed: number): () => number { let state = seed >>> 0; return () => { state = (state + 0x6d2b79f5) >>> 0; let t = Math.imul(state ^ (state >>> 15), 1 | state); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } function shuffled(seed: number): Card[] { const next = random(seed); const deck: Card[] = []; for (let suit = 0; suit < 4; suit++) { for (let rank = 1; rank <= 13; rank++) { deck.push({rank, suit, up: false}); } } for (let i = deck.length - 1; i > 0; i--) { const j = Math.floor(next() * (i + 1)); [deck[i], deck[j]] = [deck[j], deck[i]]; } return deck; } /** Every deal has a number, so a game you liked can be played again. */ function deal(number: number, draw: number): Game { const deck = shuffled(number); const tableau: Card[][] = []; for (let pile = 0; pile < 7; pile++) { const cards = deck.splice(0, pile + 1); cards[cards.length - 1].up = true; tableau.push(cards); } return { number, draw, stock: deck, waste: [], foundations: [[], [], [], []], tableau, moves: 0, }; } function someDeal(): number { return Math.floor(Math.random() * 100000) + 1; } /** A copy deep enough to hand to the undo stack. */ function clone(game: Game): Game { const pile = (cards: Card[]) => cards.map((card) => ({...card})); return { number: game.number, draw: game.draw, stock: pile(game.stock), waste: pile(game.waste), foundations: game.foundations.map(pile), tableau: game.tableau.map(pile), moves: game.moves, }; } function top(cards: Card[]): Card | undefined { return cards[cards.length - 1]; } // ---- the rules --------------------------------------------------------------- /** A foundation takes its suit's ace first, and then that suit in order. */ function fitsFoundation(card: Card, foundation: Card[]): boolean { const under = top(foundation); if (!under) { return card.rank === 1; } return under.suit === card.suit && under.rank === card.rank - 1; } /** A tableau pile takes a king on nothing, and descending alternating colours. */ function fitsTableau(card: Card, pile: Card[]): boolean { const under = top(pile); if (!under) { return card.rank === 13; } return ( under.up && isRed(under) !== isRed(card) && under.rank === card.rank + 1 ); } /** Whether the cards from `index` down form a run that moves as one. */ function isRun(pile: Card[], index: number): boolean { if (index < 0 || index >= pile.length || !pile[index].up) { return false; } for (let i = index; i < pile.length - 1; i++) { const card = pile[i]; const next = pile[i + 1]; if ( !next.up || isRed(card) === isRed(next) || card.rank !== next.rank + 1 ) { return false; } } return true; } /** The deepest card of a pile that can be picked up with everything below it. */ function runStart(pile: Card[]): number { let index = pile.length - 1; while (index > 0 && isRun(pile, index - 1)) { index--; } return index; } type Held = {kind: "waste"} | {kind: "foundation"; index: number} | {kind: "tableau"; pile: number; index: number} | null; /** The cards a hold is carrying, top of the run first in board order. */ function heldCards(game: Game, held: Held): Card[] { if (!held) { return []; } if (held.kind === "waste") { const card = top(game.waste); return card ? [card] : []; } if (held.kind === "foundation") { const card = top(game.foundations[held.index]); return card ? [card] : []; } return game.tableau[held.pile].slice(held.index); } /** Take the held cards off the board. The caller has already placed them. */ function lift(game: Game, held: Held): void { if (!held) { return; } if (held.kind === "waste") { game.waste.pop(); } else if (held.kind === "foundation") { game.foundations[held.index].pop(); } else { const pile = game.tableau[held.pile]; pile.length = held.index; // The card a moved run was sitting on turns face up. const exposed = top(pile); if (exposed && !exposed.up) { exposed.up = true; } } } type Target = {kind: "tableau"; pile: number} | {kind: "foundation"; index: number}; /** Play the held cards onto a target, or report that they do not go there. */ function play(game: Game, held: Held, target: Target): boolean { const cards = heldCards(game, held); if (cards.length === 0) { return false; } if (target.kind === "foundation") { // A foundation takes one card, and only ever the last of a run. if (cards.length !== 1) { return false; } if (target.index !== cards[0].suit) { return false; } if (!fitsFoundation(cards[0], game.foundations[target.index])) { return false; } lift(game, held); game.foundations[target.index].push(cards[0]); } else { if (held?.kind === "tableau" && held.pile === target.pile) { return false; } if (!fitsTableau(cards[0], game.tableau[target.pile])) { return false; } lift(game, held); game.tableau[target.pile].push(...cards); } game.moves++; return true; } /** The foundation a single card belongs on, if it is ready for it. */ function foundationFor(game: Game, card: Card): number | null { // Each foundation belongs to the suit that labels it, so a card has // exactly one legal home and the row always reads true. return fitsFoundation(card, game.foundations[card.suit]) ? card.suit : null; } /** Turn a card from the stock, or turn the whole waste back over. */ function draw(game: Game): boolean { if (game.stock.length > 0) { for (let i = 0; i < game.draw && game.stock.length > 0; i++) { const card = game.stock.pop()!; card.up = true; game.waste.push(card); } game.moves++; return true; } if (game.waste.length === 0) { return false; } while (game.waste.length > 0) { const card = game.waste.pop()!; card.up = false; game.stock.push(card); } game.moves++; return true; } /** Send every card that is ready to a foundation, until none is. Returns moves. */ function autoplay(game: Game): number { let played = 0; for (let progress = true; progress;) { progress = false; const sources: Held[] = [{kind: "waste"}]; for (let pile = 0; pile < 7; pile++) { const cards = game.tableau[pile]; if (cards.length > 0) { sources.push({kind: "tableau", pile, index: cards.length - 1}); } } for (const source of sources) { const card = heldCards(game, source)[0]; if (!card) { continue; } const index = foundationFor(game, card); if (index === null) { continue; } play(game, source, {kind: "foundation", index}); played++; progress = true; } } return played; } function won(game: Game): boolean { return game.foundations.every((pile) => pile.length === 13); } // ---- the page ---------------------------------------------------------------- // The game mounts onto a TermDOM it is handed, so the demo recorder can drive // it as easily as the command line does. let term: TermDOM; let document: TermDOM["document"]; let opening: number; let startInMenu: boolean; /** How big a card is: the terminal's size decides, through the tiers below. */ interface Tier { width: number; height: number; gap: number; } const TIERS = { compact: {width: 3, height: 3, gap: 1}, roomy: {width: 5, height: 3, gap: 2}, grand: {width: 7, height: 5, gap: 3}, } as const; const ROOMY_MIN_WIDTH = 64; const GRAND_MIN_WIDTH = 96; const GRAND_MIN_HEIGHT = 32; const HINT_MIN_HEIGHT = 20; function sheet(): string { // One set of numbers drives the stylesheet's @media blocks AND the matchMedia // lists the component re-renders on, so the CSS widths and the drawn card // faces can never disagree about the size of a card. const css = (tier: Tier) => ` .card, .slot { width: ${tier.width}ch; } .number, .top .gap { width: ${tier.width}ch; } .pile { width: ${tier.width}ch; } .top, .numbers, .board, .captions { gap: ${tier.gap}ch; } .play { width: ${7 * tier.width + 6 * tier.gap}ch; } `; return ` .table { padding: 0 1ch; background-color: #06421f; color: #cfe8d8; } /* The felt reaches the edges of the screen it was given. */ .table:fullscreen { padding: 0 2ch; } /* The playfield is as wide as its seven piles, and the auto margins center it in whatever the terminal turned out to be. */ .play { margin: 0 auto; } .bar { display: flex; flex-direction: row; gap: 2ch; } /* A crowded bar overflows the felt rather than shrinking its words. */ .bar span { flex-shrink: 0; } .bar .title { color: #ffd75f; font-weight: bold; } .bar .score { color: #9ec5ab; } .bar .win { color: #ffd75f; font-weight: bold; } .top { display: flex; flex-direction: row; padding-top: 1px; } /* Region names, on the deals wide enough to teach them. */ .captions { display: flex; flex-direction: row; padding-top: 1px; color: #4d8f66; } .caption { white-space: pre; } /* The keys the piles answer to, over the piles they answer for. */ .numbers { display: flex; flex-direction: row; padding-top: 1px; } .number { color: #4d8f66; } .number.drop { color: #ffd75f; font-weight: bold; } .board { display: flex; flex-direction: row; } .pile { display: flex; flex-direction: column; } /* A card's rows are drawn, not written: the blank rows are spaces, and collapsing them would shorten the card. A covered card shows only the row its index is on, which is what makes a pile a stack. */ .card, .slot { white-space: pre; } .card { background-color: #f0f0e6; color: #202020; } .card.red { color: #c02020; } .card.down { background-color: #1d4f8f; color: #4f82c8; } /* A held card keeps its suit's colour -- losing it is disorienting when the colour is what the next move is chosen by -- and changes its FIELD. */ .card.held { background-color: #ffd75f; font-weight: bold; } .card.drop { background-color: #a9d7b7; } .slot { background-color: #05381a; color: #2f7a4a; } .slot.drop { background-color: #a9d7b7; color: #205c35; } /* Where the keyboard is, and what it holds, are one effect: the gold field. A card keeps its suit's colour under it either way. */ .cursor { background-color: #ffd75f; font-weight: bold; } .card.down.cursor { color: #1d4f8f; } .slot.cursor { background-color: #ffd75f; color: #6b5b1e; } /* The confirm covers the screen and centers its dialog; the board stays visible around the box, the way a modal reads. */ .scrim { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } dialog { display: block; width: 48ch; border: 1px solid; border-color: #ffd75f; background-color: #043016; color: #cfe8d8; padding: 1px 2ch; } dialog .ask { color: #ffd75f; font-weight: bold; } dialog .answers { color: #9ec5ab; padding-top: 1px; } dialog .answers { display: flex; flex-direction: row; } /* An answer is one flex item; keeping its width is what keeps its words on one line. */ dialog .answers span { flex-shrink: 0; } .pick { color: #9ec5ab; } .pick.on { color: #ffd75f; font-weight: bold; } .pickgap { width: 3ch; } dialog .again { color: #7fae90; padding-top: 1px; } dialog .sep { white-space: pre; } dialog input { width: 12ch; } .hint { padding-top: 1px; color: #7fae90; text-align: center; } .hint b { color: #cfe8d8; font-weight: bold; } .hint kbd { color: #cfe8d8; } ${css(TIERS.compact)} @media (min-width: ${ROOMY_MIN_WIDTH}ch) { ${css(TIERS.roomy)} } @media (min-width: ${GRAND_MIN_WIDTH}ch) and (min-height: ${GRAND_MIN_HEIGHT}) { ${css(TIERS.grand)} } /* A short terminal spends its rows on the cards. */ @media (max-height: ${HINT_MIN_HEIGHT - 1}) { .hint { display: none; } } `; } // ---- the board --------------------------------------------------------------- // Every glyph reaches the markup through an interpolation. The jsx tag parses // a template's RAW spans, and a runtime that reports raw text as an escape // sequence -- Bun does, for anything outside ASCII -- puts the six characters // of `▒` on the board instead of the hatch. const TL = "▛"; const TR = "▜"; const BL = "▙"; const BR = "▟"; const T = "▀"; const B = "▄"; const L = "▌"; const R = "▐"; const MOTIF = "♦"; const TURN_GLYPH = "↻"; const DOT = " · "; const MIDDOT = "·"; const STAR = "★"; /** The key hints shrink with the cards, never past their own columns. */ function deckKey(t: Tier): string { return t.width >= 7 ? "Space" : t.width >= 5 ? "Spc" : "\u2423"; } function FlipKey({tier}: {tier: Tier}) { if (tier.width >= 7) { return jsx`0/flip`; } if (tier.width >= 5) { return jsx`0/f`; } return jsx`0`; } /** The cells FlipKey takes, which the caption row's padding needs. */ function flipKeyLength(t: Tier): number { return t.width >= 7 ? 6 : t.width >= 5 ? 3 : 1; } /** A marked key, centered the way `centered` centers text. */ function CenteredKey({cap, width}: {cap: string; width: number}) { const pad = Math.max(0, width - cap.length); const left = Math.floor(pad / 2); return jsx`${" ".repeat(left)}${cap}${" ".repeat(pad - left)}`; } const ARROWS_ALL = "↑↓←→"; function blank(width: number): string { return " ".repeat(width); } /** * A card back: a plate with solid half-block rails and a single motif at the * center, the way a printed back reads. A covered card shows the plate's top * rule, so a pile of backs is ruled lines rather than pattern noise. */ function backRows(width: number, height: number): string[] { return Array.from({length: height}, (_, row) => { if (row === 0) { return TL + T.repeat(width - 2) + TR; } if (row === height - 1) { return BL + B.repeat(width - 2) + BR; } const inner = Array.from( {length: width - 2}, (_, col) => row === Math.floor(height / 2) && col === Math.floor((width - 2) / 2) ? MOTIF : " ", ).join(""); return L + inner + R; }); } /** `text` centered in a field of `width` cells. */ function centered(text: string, width: number): string { const pad = Math.max(0, width - text.length); const left = Math.floor(pad / 2); return " ".repeat(left) + text + " ".repeat(pad - left); } /** * A card's face: its index across the top-left, its suit at the center on * any card wide enough to carry one, and the mirrored index -- suit then * rank -- reading into the bottom-right corner, the rotational symmetry of * a real card's two indices. */ function faceRows(card: Card, tier: Tier): string[] { const {width, height} = tier; if (!card.up) { return backRows(width, height); } const grid = Array.from( {length: height}, () => Array.from({length: width}, () => " "), ); const index = `${RANKS[card.rank - 1]}${SUITS[card.suit]}`; for (let i = 0; i < index.length && i < width; i++) { grid[0][i] = index[i]; } if (width > 3) { grid[Math.floor(height / 2)][Math.floor(width / 2)] = SUITS[card.suit]; } // The bottom corner mirrors the top: suit then rank, reading into the // corner -- the rotational symmetry of a real card's two indices, spelled // by unit order rather than by turned glyphs. const corner = `${SUITS[card.suit]}${RANKS[card.rank - 1]}`; for (let i = 0; i < corner.length; i++) { grid[height - 1][width - corner.length + i] = corner[i]; } return grid.map((row) => row.join("")); } interface CardProps { card: Card; tier: Tier; /** A card with another lying over it, showing its index row alone. */ covered?: boolean; held?: boolean; drop?: boolean; /** The keyboard cursor rests here. */ cursor?: boolean; onclick?: (event: MouseEvent) => unknown; ondblclick?: (event: MouseEvent) => unknown; } function CardFace({ card, tier, covered, held, drop, cursor, onclick, ondblclick, }: CardProps) { const classes = ["card"]; if (!card.up) { classes.push("down"); } else if (isRed(card)) { classes.push("red"); } if (held) { classes.push("held"); } else if (drop) { classes.push("drop"); } if (cursor) { classes.push("cursor"); } const rows = faceRows(card, tier); return jsx`

${(covered ? rows.slice(0, 1) : rows).map((row, line) => jsx`

${row}

`)}

`; } /** An empty place on the board: the stock's turnover arrow, or a suit's home. */ function Slot( {tier, mark, drop, cursor, onclick}: { tier: Tier; mark?: string; drop?: boolean; cursor?: boolean; onclick?: (event: MouseEvent) => unknown; }, ) { const rows = Array.from( {length: tier.height}, (_, line) => line === Math.floor(tier.height / 2) && mark ? centered(mark, tier.width) : blank(tier.width), ); const classes = ["slot"]; if (drop) { classes.push("drop"); } if (cursor) { classes.push("cursor"); } return jsx`

${rows.map((row, line) => jsx`

${row}

`)}

`; } /** A run's clock, as a speedrunner reads it: m:ss. */ function clock(ms: number): string { const seconds = Math.floor(ms / 1000); return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, "0")}`; } function *App(this: Context) { // One or three cards per turn of the stock -- chosen on the menu, kept // for every deal after. A deal named on the command line skips the menu: // that is the speedrunner's and the verifier's door. let mode: 1 | 3 = 1; let menu = startInMenu; let game = deal(opening, 1); let held: Held = null; let history: Game[] = []; let message = ""; // The clock runs from the first move to the win, and a best is the best // for THIS deal -- retrying the same number is what a speedrun is. let startedAt: number | null = null; let finishedAt: number | null = null; let best: {ms: number; moves: number} | null = null; const ticker = setInterval(() => { if (startedAt !== null && finishedAt === null) { // The tick changes no state; the render reads the clock itself. // eslint-disable-next-line crank/prefer-refresh-callback this.refresh(); } }, 1000); this.cleanup(() => clearInterval(ticker)); // A run in progress is worth a question: n, r and q open a