@xavatech/create-xara-game 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,36 @@
-# Temporary Holding Version
+# @xavatech/create-xara-game
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Starts a game for Xara chats: a working starter built with [`@xavatech/xara-game-sdk`](https://www.npmjs.com/package/@xavatech/xara-game-sdk), with tests, and with the [game skill](https://docs.usexara.ai/games/skill) installed, so a coding assistant can turn your description into the real game.
+
+```bash
+npx @xavatech/create-xara-game word-chain --name "Word Chain" --players 2-4
+cd word-chain
+npm run dev
+```
+
+| Option | |
+| --- | --- |
+| `--name` | The game's name, as players see it. Defaults to the folder's name. |
+| `--description` | One line about the game. |
+| `--players` | `2`, or a range like `2-4`. Defaults to `2`. |
+| `--xara-games <dir>` | For Xara's own games. Also adds the game to that [xara-games](https://github.com/xavatech/xara-games) checkout. |
+
+The starter is a placeholder game: add 1, 2, or 3, and whoever makes the total 10 wins.
+
+## Xara's own games
+
+Name the folder `xara-<game>` and pass `--xara-games`:
+
+```bash
+npx @xavatech/create-xara-game xara-word-chain --name "Word Chain" --players 2-4 --xara-games ./xara-games
+```
+
+This also adds the game as the submodule `games/word-chain` (pointing at `github.com/xavatech/xara-word-chain`), adds it to `games.json`, and builds it into `site/word-chain/`. With the site served at `GAMES_URL`, run the backend's `Game` seeder to list it. Then push the game's repo.
+
+## Change the starter
+
+`template/` is copied as is, after these are replaced: `__PATH__`, `__NAME__`, `__DESCRIPTION__`, `__PLAYERS__`. `template/gitignore` becomes `.gitignore`, because npm leaves `.gitignore` files out of packages. `template/.cursor/skills/build-xara-game/SKILL.md` is a copy of the skill in `xara-game-sdk`. Keep them the same.
+
+```bash
+npm publish
+```

package/index.mjs

@@ -0,0 +1,103 @@
+#!/usr/bin/env node
+import { execSync } from "node:child_process";
+import { cpSync, existsSync, readFileSync, readdirSync, renameSync, statSync, writeFileSync } from "node:fs";
+import { basename, dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { parseArgs } from "node:util";
+
+const USAGE = `Start a game for Xara chats.
+
+  npx @xavatech/create-xara-game <folder> [options]
+
+  --name <name>                The game's name, as players see it. Defaults to the folder's name.
+  --description <description>  One line about the game.
+  --players <players>          How many play: 2, or a range like 2-4. Defaults to 2.
+  --xara-games <dir>           For Xara's own games: also add it to that xara-games checkout.`;
+
+const fail = (message) => {
+  console.error(`\n${message}\n`);
+  process.exit(1);
+};
+
+const { values, positionals } = parseArgs({
+  allowPositionals: true,
+  options: {
+    name: { type: "string" },
+    description: { type: "string" },
+    players: { type: "string", default: "2" },
+    "xara-games": { type: "string" },
+    help: { type: "boolean", short: "h" },
+  },
+});
+if (values.help || !positionals[0]) {
+  console.log(USAGE);
+  process.exit(values.help ? 0 : 1);
+}
+
+const dir = resolve(positionals[0]);
+const folder = basename(dir);
+if (!/^[a-z0-9]+(-[a-z0-9]+)*$/.test(folder)) fail("Name the folder like word-chain: lowercase letters, numbers, and dashes.");
+if (existsSync(dir)) fail(`${dir} already exists.`);
+
+// Xara's own repos are named xara-<game>; the game is served at /<game>/.
+const path = folder.replace(/^xara-/, "");
+const name = values.name?.trim() || path.split("-").map((word) => word[0].toUpperCase() + word.slice(1)).join(" ");
+const description = values.description?.trim() ?? "";
+const [minPlayers, maxPlayers = minPlayers] = values.players.split("-").map(Number);
+if (![minPlayers, maxPlayers].every(Number.isInteger) || minPlayers < 2 || maxPlayers < minPlayers || maxPlayers > 8) {
+  fail("--players is from 2 to 8, like 2 or 2-4.");
+}
+
+const gamesDir = values["xara-games"] && resolve(values["xara-games"]);
+const listFile = gamesDir && join(gamesDir, "games.json");
+const list = listFile && (existsSync(listFile) ? JSON.parse(readFileSync(listFile, "utf8")) : fail(`${listFile} was not found.`));
+if (list?.some((game) => game.path === path || game.name === name)) fail(`${path} or "${name}" is already in games.json.`);
+
+const run = (command, cwd) => execSync(command, { cwd, stdio: "inherit" });
+
+console.log(`\nCreating ${name} in ${dir}\n`);
+cpSync(join(dirname(fileURLToPath(import.meta.url)), "template"), dir, { recursive: true });
+renameSync(join(dir, "gitignore"), join(dir, ".gitignore"));
+const players = minPlayers === maxPlayers ? `${minPlayers}` : `${minPlayers} to ${maxPlayers}`;
+for (const entry of readdirSync(dir, { recursive: true, encoding: "utf8" })) {
+  const file = join(dir, entry);
+  if (statSync(file).isDirectory()) continue;
+  const text = readFileSync(file, "utf8");
+  const filled = text
+    .replace(/__PATH__/g, path)
+    .replace(/__NAME__/g, () => name)
+    .replace(/__DESCRIPTION__/g, () => description)
+    .replace(/__PLAYERS__/g, players);
+  if (filled !== text) writeFileSync(file, filled);
+}
+
+run("npm install --no-fund --no-audit", dir);
+run(`git init -q -b main && git add -A && git commit -q -m "${name.replace(/"/g, "")} for Xara chats"`, dir);
+
+if (gamesDir) {
+  run(`git -c protocol.file.allow=always submodule add -q "${dir}" games/${path}`, gamesDir);
+  run(`git config -f .gitmodules submodule.games/${path}.url https://github.com/xavatech/${folder}.git`, gamesDir);
+  writeFileSync(listFile, `${JSON.stringify([...list, { path, name, description, minPlayers, maxPlayers }], null, 2)}\n`);
+  run(`node build.mjs ${path}`, gamesDir);
+  run("git add -A", gamesDir);
+}
+
+console.log(`
+${name} is ready.
+
+  cd ${positionals[0]}
+  npm run dev        Play it in a browser; every player shares the screen.
+
+Then describe the real game to your coding assistant in that folder.`);
+
+if (gamesDir) {
+  console.log(`
+It is in xara-games at games/${path}, and built into site/${path}/.
+
+  List it:  bun run avanda.ts app seed -t Game     (in xara_backend, with xara-games served at GAMES_URL)
+  Push it:  create github.com/xavatech/${folder}, then
+            cd ${dir} && git remote add origin https://github.com/xavatech/${folder}.git && git push -u origin main
+            cd ${gamesDir} && git commit -m "Add ${name}"`);
+} else {
+  console.log(`To ship it, see README.md.`);
+}

package/package.json

@@ -1,6 +1,20 @@
 {
   "name": "@xavatech/create-xara-game",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "Start a game for Xara chats: a working starter with the Xara game SDK and the coding-assistant skill.",
+  "type": "module",
+  "bin": {
+    "create-xara-game": "index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "template"
+  ],
+  "engines": {
+    "node": ">=18.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT"
+}

package/template/.cursor/skills/build-xara-game/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: build-xara-game
+description: >-
+  Builds a turn-based web game for Xara chats from a plain-language game
+  description, using @xavatech/xara-game-sdk. Use when a third party asks to
+  create, scaffold, or implement a game for Xara, describes a game people
+  should play from a Xara chat, or mentions the Xara game SDK.
+---
+
+# Build a Xara game
+
+The user describes a game. Build it as its own static web page with `@xavatech/xara-game-sdk`. Create a new project. Do not add the game to the SDK repo, and do not call Xara's HTTP API.
+
+Xara already checks membership, acceptance, whose turn it is, and that a move follows the previous one. The game checks whether a move is legal.
+
+## Turn the description into rules
+
+Write this down before the screen:
+
+- Player count, fixed or a range, between 2 and 8. The starter goes first. Turns continue in that order.
+- One move, as JSON the game sends. Keep it under 4,000 characters.
+- How replaying `state.moves` draws the current game. Every phone, including someone watching, rebuilds from that list. Do not keep board state only in memory.
+- Who wins, and what a draw is.
+- A purchase, only if the description includes one: the item name, a whole naira amount from 1 to 1,000,000, and a reference.
+
+A fact every phone must share, and that is not itself a move (a secret number, a shuffled deck), is derived from `session.id` plus the move list. There is no hidden game state on the server.
+
+The chat card shows one summary to everyone. It never says "you". Name the player by their mark, the winning value, or similar. Stay within 120 characters.
+
+## Project
+
+Vite and TypeScript. `base: "./"` so the built files work from any https path. One private package. Depend on `@xavatech/xara-game-sdk`.
+
+```
+index.html
+src/main.ts
+src/rules.ts
+src/rules.test.ts
+src/style.css
+vite.config.ts
+```
+
+Rules live in `src/rules.ts` and have tests. `src/main.ts` only draws state and sends moves. Do not add a helper module for something `rules.ts` can do.
+
+Lock the page to itself:
+
+```html
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; frame-src 'none'">
+```
+
+No other origins, no CDN fonts, no iframes.
+
+## Connect
+
+```ts
+import { connect, inXara, mockApp } from "@xavatech/xara-game-sdk";
+
+if (import.meta.env.DEV && !inXara()) {
+  mockApp({
+    players: [
+      { id: 1, name: "Ada" },
+      { id: 2, name: "Bayo" },
+    ],
+    approvePayment: (item, amount) => window.confirm(`Buy ${item} for ₦${amount}?`),
+  });
+}
+
+type Move = { cell: number };
+const xara = connect<Move>();
+xara.onChange(draw);
+draw(await xara.load());
+```
+
+`mockApp` is for the browser during development. It is not part of the build the app opens.
+
+## Draw and play
+
+Redraw from the `GameState` passed to `draw`. Fields the game uses:
+
+- `session.status`: `invited`, `active`, `completed`, `declined`, `cancelled`
+- `session.moveCount`, `session.turn`, `session.id`, `session.outcome` (`winners`, `summary`)
+- `players`: `id`, `name`, `status`, `you`
+- `me`: `id`, `watching` (a group member who is not playing)
+- `moves`: `step`, `playerId`, `move`, `at` — oldest first. `move` is the JSON this game sent
+- `purchases`: `reference`, `status` (`requested` or `paid`), `receipt`
+
+While `session.status` is `invited` and this phone's player is still invited, show an accept control that calls `xara.accept()`. The session starts after every invitee accepts. Someone watching gets no accept control and no move control.
+
+Accept a move only when `xara.isMyTurn()` is true. Ignore clicks otherwise.
+
+```ts
+await xara.move({ cell }, won
+  ? { outcome: { winners: [xara.state!.me.id], summary: "X wins with three in a row" } }
+  : {});
+```
+
+Pass `outcome` on the move that ends the game. `winners` is the player ids. An empty list is a draw. Call `xara.end(outcome)` only when the game ends without a move. `xara.close()` leaves the game screen.
+
+Give status, the board, and any purchase line a fixed height so a new move does not push the page around.
+
+## A purchase
+
+Skip this when the description has nothing to sell.
+
+```ts
+const paid = await xara.buy({
+  item: "Hint",
+  amount: 100,
+  reference: `hint-${state.session.id}-${state.session.moveCount}`,
+});
+if (paid.status === "success") showHint();
+```
+
+The reference matches `/^[A-Za-z0-9_.:-]{1,64}$/`. The same reference returns the existing purchase. A different item or amount on that reference is refused. Put `moveCount` in the reference only when a later turn is a new purchase; leave it out when the purchase is once per session (`hint-${session.id}`).
+
+After a reload, read `state.purchases`. Show the item when one with that reference has `status === "paid"`. The page never asks for a PIN. The app shows its own approval sheet. The payee is the business that submitted the game.
+
+`XaraGameError` codes are `rejected`, `timeout`, and `closed`. A closed error means the page was not opened from a Xara chat.
+
+## Names to use
+
+Use the names above. These older names are not the SDK: `ready`, `onState`, `viewer`, `requestPayment`, `installMockHost`, `winner_ids`, `revision`, `turn_user_id`.
+
+## Check
+
+1. `npm test` for the rules, including an illegal move, a win, a draw, and a purchase reference if the game sells something.
+2. `npm run build`.
+3. With the dev server, play a full game through `mockApp`: accept, take turns, reach the outcome, and buy once if the game sells something. Play again with the same reference and confirm it does not describe a second charge.
+4. Replay the same `moves` and confirm both players would draw the same board.
+
+## What to tell the user
+
+The built `dist/` is a static site. It has to be served over https on one origin. They submit that URL in the Xara business dashboard with the player counts and SDK version `2.0.0`. The game stays in review until an admin approves it. Changing the URL or the player counts after approval sends it back to review. Changing the name, description, or icon does not.
+
+Do not submit, host, or publish the package unless the user asks.

package/template/README.md

@@ -0,0 +1,21 @@
+# __NAME__
+
+__DESCRIPTION__
+
+A game people start from a Xara chat, built with [`@xavatech/xara-game-sdk`](https://www.npmjs.com/package/@xavatech/xara-game-sdk). It starts as a placeholder: add 1, 2, or 3, and whoever makes the total 10 wins. Describe the real game to your coding assistant. The skill in `.cursor/skills/build-xara-game` tells it how.
+
+## Run it
+
+```bash
+npm run dev     # http://localhost:5173, with a mock app: every player shares the screen
+npm test        # the rules
+npm run build   # static files in dist/
+```
+
+## Ship it
+
+1. Serve `dist/` over **https**. Xara only opens https games, and only answers SDK calls from that URL's origin.
+2. In the Xara business dashboard, open **Games → Submit a game** with the URL, __PLAYERS__ players, and SDK version `2.0.0`.
+3. Once an admin approves it, people find it under **+ → Game** in their chats.
+
+See [Games overview](https://docs.usexara.ai/games/overview).

package/template/gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

package/template/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; frame-src 'none'" />
+    <title>__NAME__</title>
+  </head>
+  <body>
+    <main>
+      <ol id="players" class="players" aria-label="Players"></ol>
+      <p id="status" class="status" aria-live="polite">Loading…</p>
+      <p id="total" class="total" aria-label="Total">0</p>
+      <div id="pad" class="pad" role="group" aria-label="Add to the total"></div>
+      <div class="actions">
+        <button id="accept" class="action" tabindex="-1">Accept and play</button>
+      </div>
+      <p id="note" class="note" role="alert"></p>
+    </main>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "__PATH__",
+  "version": "1.0.0",
+  "private": true,
+  "description": "__NAME__ for Xara chats, built with the Xara game SDK.",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@xavatech/xara-game-sdk": "^2.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2",
+    "vite": "^6.0.7",
+    "vitest": "^2.1.8"
+  }
+}

package/template/src/main.ts

@@ -0,0 +1,116 @@
+import "./style.css";
+import { connect, inXara, mockApp, XaraGameError, type GameState } from "@xavatech/xara-game-sdk";
+import { STEPS, TARGET, canAdd, isWon, totalOf, type Move } from "./rules";
+
+// In `npm run dev` outside the app, a mock app lets every player take turns on one screen.
+if (import.meta.env.DEV && !inXara()) {
+  mockApp({
+    game: { id: 1, name: "__NAME__" },
+    players: [
+      { id: 1, name: "Ada" },
+      { id: 2, name: "Bayo" },
+    ],
+    approvePayment: (item, amount) => window.confirm(`Buy ${item} for ₦${amount}?`),
+  });
+}
+
+type State = GameState<Move>;
+
+const xara = connect<Move>();
+const playersEl = document.getElementById("players")!;
+const statusEl = document.getElementById("status")!;
+const totalEl = document.getElementById("total")!;
+const padEl = document.getElementById("pad")!;
+const acceptEl = document.getElementById("accept") as HTMLButtonElement;
+const noteEl = document.getElementById("note")!;
+
+const keys = STEPS.map((add) => {
+  const button = document.createElement("button");
+  button.className = "key";
+  button.textContent = `+${add}`;
+  button.disabled = true;
+  button.addEventListener("click", () => play(add));
+  padEl.append(button);
+  return button;
+});
+
+let busy = false;
+
+const nameOf = (state: State, playerId: number | null) =>
+  state.players.find((player) => player.id === playerId)?.name ?? "Someone";
+
+function statusText(state: State): string {
+  const { session, me } = state;
+  switch (session.status) {
+    case "invited":
+      return state.players.find((player) => player.you)?.status === "invited"
+        ? "You've been invited to play"
+        : "Waiting for everyone to accept";
+    case "active":
+      return xara.isMyTurn() ? "Your turn" : `${nameOf(state, session.turn)}'s turn`;
+    case "completed": {
+      const outcome = session.outcome!;
+      if (outcome.leftBy) return `${nameOf(state, outcome.leftBy)} left the game`;
+      if (!outcome.winners.length) return "It's a draw";
+      return outcome.winners.includes(me.id) ? "You won!" : `${nameOf(state, outcome.winners[0])} won`;
+    }
+    case "declined":
+      return "The invite was declined";
+    default:
+      return "This game was called off";
+  }
+}
+
+function render(state: State) {
+  const total = totalOf(state.moves);
+  const playable = xara.isMyTurn() && !busy;
+
+  playersEl.replaceChildren(
+    ...state.players.map((player) => {
+      const item = document.createElement("li");
+      item.textContent = player.name;
+      item.classList.toggle("turn", state.session.status === "active" && player.id === state.session.turn);
+      return item;
+    })
+  );
+  statusEl.textContent = statusText(state);
+  totalEl.textContent = `${total} / ${TARGET}`;
+  keys.forEach((button, i) => (button.disabled = !playable || !canAdd(total, STEPS[i])));
+
+  const invited = state.session.status === "invited" && state.players.find((player) => player.you)?.status === "invited";
+  acceptEl.classList.toggle("shown", invited && !busy);
+  acceptEl.disabled = !invited || busy;
+}
+
+async function run(action: () => Promise<unknown>) {
+  busy = true;
+  noteEl.textContent = "";
+  if (xara.state) render(xara.state);
+  try {
+    await action();
+  } catch (error) {
+    noteEl.textContent = error instanceof XaraGameError ? error.message : "Something went wrong";
+  } finally {
+    busy = false;
+    if (xara.state) render(xara.state);
+  }
+}
+
+function play(add: number) {
+  const state = xara.state;
+  if (!state || !xara.isMyTurn() || busy) return;
+  const total = totalOf(state.moves);
+  if (!canAdd(total, add)) return;
+  // Every player reads the same summary, so it can't say "you".
+  const outcome = isWon(total + add)
+    ? { winners: [state.me.id], summary: `${nameOf(state, state.me.id)} reached ${TARGET}` }
+    : undefined;
+  return run(() => xara.move({ add }, { outcome }));
+}
+
+acceptEl.addEventListener("click", () => run(() => xara.accept()));
+
+xara.onChange(render);
+xara.load().catch((error) => {
+  statusEl.textContent = error instanceof XaraGameError ? error.message : "Couldn't start the game";
+});

package/template/src/rules.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, test } from "vitest";
+import type { PlayedMove } from "@xavatech/xara-game-sdk";
+import { canAdd, isWon, totalOf, type Move } from "./rules";
+
+const moves = (adds: number[]): PlayedMove<Move>[] =>
+  adds.map((add, i) => ({ step: i + 1, playerId: (i % 2) + 1, move: { add }, at: "" }));
+
+describe("rules", () => {
+  test("adds up every move, as after a reload", () => {
+    expect(totalOf(moves([3, 2, 1]))).toBe(6);
+  });
+
+  test("skips moves that break the rules", () => {
+    expect(totalOf(moves([3, 5, 3, 3, 3]))).toBe(9);
+    expect(canAdd(9, 2)).toBe(false);
+  });
+
+  test("making the total 10 wins", () => {
+    expect(isWon(totalOf(moves([3, 3, 3, 1])))).toBe(true);
+    expect(isWon(9)).toBe(false);
+  });
+});

package/template/src/rules.ts

@@ -0,0 +1,20 @@
+import type { PlayedMove } from "@xavatech/xara-game-sdk";
+
+/** A starter game: take turns adding 1, 2, or 3. Whoever makes the total 10 wins. Replace it with yours. */
+export const TARGET = 10;
+export const STEPS = [1, 2, 3] as const;
+
+export type Move = { add: number };
+
+/** The total after every move so far. Moves that don't follow the rules are skipped, on every phone alike. */
+export function totalOf(moves: PlayedMove<Move>[]): number {
+  return moves.reduce((total, played) => (canAdd(total, played.move.add) ? total + played.move.add : total), 0);
+}
+
+export function canAdd(total: number, add: number): boolean {
+  return (STEPS as readonly number[]).includes(add) && total + add <= TARGET;
+}
+
+export function isWon(total: number): boolean {
+  return total === TARGET;
+}

package/template/src/style.css

@@ -0,0 +1,134 @@
+:root {
+  --blue: #1e5eff;
+  --blue-soft: #e8efff;
+  --ink: #102a24;
+  --muted: #607080;
+  font-family: system-ui, -apple-system, sans-serif;
+  color: var(--ink);
+  background: #f4f8ff;
+  -webkit-tap-highlight-color: transparent;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  overscroll-behavior: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Every row has a fixed height, so a new state never moves the page. */
+main {
+  min-height: 100dvh;
+  max-width: 420px;
+  margin: 0 auto;
+  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
+  display: grid;
+  grid-template-rows: 40px 28px 96px 64px 52px 20px;
+  align-content: center;
+  row-gap: 20px;
+}
+
+.players {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  overflow: hidden;
+}
+
+.players li {
+  padding: 8px 12px;
+  border-radius: 14px;
+  background: #fff;
+  border: 1.5px solid transparent;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.players li.turn {
+  border-color: var(--blue);
+}
+
+.status,
+.note {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: center;
+}
+
+.status {
+  line-height: 28px;
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.total {
+  margin: 0;
+  display: grid;
+  place-items: center;
+  border-radius: 24px;
+  background: #fff;
+  font-size: 40px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+}
+
+.pad {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+}
+
+.key {
+  border: 0;
+  border-radius: 18px;
+  background: var(--blue);
+  color: #fff;
+  font: inherit;
+  font-size: 22px;
+  font-weight: 800;
+  touch-action: manipulation;
+}
+
+.key:disabled {
+  background: var(--blue-soft);
+  color: var(--muted);
+}
+
+.actions {
+  display: grid;
+  place-items: center;
+}
+
+.action {
+  height: 48px;
+  padding: 0 24px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--blue);
+  color: #fff;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 700;
+  visibility: hidden;
+}
+
+.action.shown {
+  visibility: visible;
+}
+
+.note {
+  font-size: 13px;
+  color: #c0392b;
+}

package/template/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM"],
+    "types": ["vite/client"],
+    "strict": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "vite";
+
+// Relative asset paths, so the built game works from any https path it is served under.
+export default defineConfig({
+  base: "./",
+  build: { outDir: "dist", emptyOutDir: true },
+});