Improve template onboarding for student game projects

README.md

@@ -4,17 +4,18 @@ This template gives you a simple web page to explore and change. You do not
 need to know Git or GitHub to get started. GitHub is where your project lives;
 the Copilot App is where you can open and work on it.
 
-[See the live example](https://OWNER.github.io/REPO/) ·
-[Create your own copy](https://github.com/OWNER/REPO/generate)
+[Create your own copy](https://github.com/jbj/typescript-static-template/generate)
 
 ## Start in the Copilot App
 
 1. On GitHub, choose **Create your own copy** (or **Use this template**) and
    create a repository for your project.
 2. Open that new repository in the Copilot App.
-3. Install [Node.js 22.12 or newer](https://nodejs.org/en/download/) on your
-   Windows laptop. Node.js is the tool that runs this project. If the
-   Copilot App was open during installation, reopen its terminal.
+3. Install the current Node.js LTS version from
+   [nodejs.org](https://nodejs.org/en/download/) on your Windows laptop. Choose
+   the Windows installer and accept its defaults. Node.js is the tool that runs
+   this project. If the Copilot App was open during installation, reopen its
+   terminal.
 4. In the Copilot App terminal, run these commands:
 
    ```powershell
@@ -28,30 +29,56 @@ the Copilot App is where you can open and work on it.
    `http://localhost:5173/`. Leave the command running while you work; press
    **Ctrl+C** in the terminal when you are done.
 
-5. Open `src/main.ts` in the editor and change the greeting. Save the file to
-   see the page update in your browser. You can change its colors and layout in
-   `src/style.css`, and its browser-tab title in `index.html`.
+5. To make a game, open the Copilot App chat for your repository and paste this
+   prompt. Copilot can edit the project files for you:
+
+   ```text
+   Build a complete, fun browser game called Star Catcher in this project. Make
+   the changes in the files; don't just tell me how.
+
+   The player moves a basket at the bottom of the screen to catch falling stars.
+   Use the left/right arrow keys and A/D keys on a keyboard, and add big on-screen
+   left/right buttons that work on a touchscreen. Catching a star adds a point.
+   A falling rock ends the game. Show the score, a clear game-over message, and
+   a button to play again.
+
+   Use the project's existing TypeScript and Vite setup. Do not add packages,
+   call online services, or depend on images or sounds from the internet. Draw
+   the game with CSS or simple shapes. Make it work on a phone-sized screen and
+   a laptop, keep browser zoom working, use readable colors and text, and make
+   buttons usable by keyboard as well as touch.
+
+   When you're done, run the project's checks. If full verification cannot
+   finish because Google Chrome isn't installed, explain that; don't let it
+   stop me from trying the game. Start the local preview if you can, try playing
+   the game, and fix any problems you find. Tell me what you changed, how to
+   play, and whether the checks and preview worked.
+   ```
+
+6. Keep `npm run dev` running while you play. Open the address it printed in a
+   browser; Microsoft Edge is fine. When you want to stop the page, press
+   **Ctrl+C** in the terminal.
 
-The page works on small screens, supports normal browser zoom, and has no
-application services to set up.
+You do not need to know how to code or use Git to ask Copilot to make the game.
+The project has no application services to set up.
 
 ## When you are ready for more
 
 Run `npm run verify` to check the project, or `npm run build` to make its
-publishable files. Full verification works on Windows and Linux and needs
-Chrome or Chromium; setup details are in the
-[code guide](docs/code.md#local-and-ci-environments). GitHub also runs the
-checks for you when you make a change. The normal checks run on Linux even if
-you are working on Windows; maintainers can manually run Windows verification to
-check Windows too.
+publishable files. Full local verification also needs Google Chrome; you can
+still make and play the game without it. GitHub runs checks when you open or
+update a pull request, or push changes to `main`. See the
+[code guide](docs/code.md#local-and-ci-environments) for Chrome setup. The
+normal checks run on Linux even if you are working on Windows; maintainers can
+manually run Windows verification to check Windows too.
 
 ## For repository maintainers
 
 GitHub templates copy files, **not live repository settings**.
 
 1. Rename the package with `npm pkg set name=your-app`, then update the lockfile
-   with `npm install --package-lock-only`. Replace `OWNER` and `REPO` in this
-   README and [ruleset instructions](.github/rulesets/README.md), the path
+   with `npm install --package-lock-only`. Update the repository-specific
+   examples in the [ruleset instructions](.github/rulesets/README.md), the path
    example in `vite.config.ts`, and the owner in `.github/CODEOWNERS`.
 2. Update the [working agreement](.github/copilot-instructions.md) and selected
    [documentation topics](docs/) for your app. Keep the original MIT copyright

docs/code.md

@@ -10,8 +10,6 @@
   definition of done.
 - Let the repository's format command handle code style. Markdown is
   hand-wrapped as described in [`documentation.md`](documentation.md).
-- Treat bundle limits as constraints, not targets to move quietly. The budget
-  checker owns current values and reports the evidence needed to change them.
 - A check that parallelizes must honor the resource budget supplied by the
   verify runner rather than discovering and consuming the whole machine.
 

package.json

@@ -6,8 +6,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc --noEmit && vite build && npm run budget",
-    "budget": "node scripts/check-bundle.mjs",
+    "build": "tsc --noEmit && vite build",
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",

scripts/verify.mjs

@@ -5,8 +5,7 @@
  * chain made the five-minute browser run wait for every short check before it
  * could begin, while tools with their own workers could assume they owned the
  * whole machine. This runner gives every task an explicit cost and keeps the
- * only real build edges visible: the budget reads Vite's report, and the shot
- * run serves Vite's `dist/`.
+ * only real build edge visible: the shot run serves Vite's `dist/`.
  *
  * Output is held per task. A passing run says one line unless asked for
  * `--verbose`; a failure prints only the failed tasks in fixed order, so the
@@ -34,7 +33,7 @@ const FIX_COMMANDS = new Map([
   ["format:check", "npm run format"],
 ]);
 const CHEAP_TASKS = new Set(["typecheck", "lint", "format:check", "docs:check"]);
-const VERBOSE_TASKS = new Set(["docs:check", "budget", "shot"]);
+const VERBOSE_TASKS = new Set(["docs:check", "shot"]);
 
 export function verifyTasks(cpuCapacity, browserCapacity) {
   const shotCpuSlots = Math.min(4, browserCapacity, Math.max(1, cpuCapacity - 2));
@@ -79,23 +78,16 @@ export function verifyTasks(cpuCapacity, browserCapacity) {
       slots: { cpu: testCpuSlots, browser: 0 },
     },
     {
-      name: "bundle",
+      name: "build",
       run: packageTool("vite", "bin/vite.js", "build"),
       needs: [],
       inputs: [],
       slots: { cpu: 1, browser: 0 },
     },
-    {
-      name: "budget",
-      run: script("check-bundle.mjs"),
-      needs: ["bundle"],
-      inputs: [],
-      slots: { cpu: 1, browser: 0 },
-    },
     {
       name: "shot",
       run: script("shot.mjs"),
-      needs: ["bundle"],
+      needs: ["build"],
       inputs: [],
       // Each screenshot worker owns one browser and one CPU share.
       slots: { cpu: shotCpuSlots, browser: shotCpuSlots },

tests/verify.test.mjs

@@ -100,12 +100,10 @@ describe("the verify runner", () => {
       "format:check",
       "docs:check",
       "test",
-      "bundle",
-      "budget",
+      "build",
       "shot",
     ]);
-    expect(tasks.find(({ name }) => name === "shot").needs).toEqual(["bundle"]);
-    expect(tasks.find(({ name }) => name === "budget").needs).toEqual(["bundle"]);
+    expect(tasks.find(({ name }) => name === "shot").needs).toEqual(["build"]);
     expect(tasks.filter(({ needs }) => needs.length === 0)).toHaveLength(6);
   });