presets, status banner, script progress highlighting, Playwright smoke test, and README demo guidance

Author: LEO0331

.gitignore

@@ -1,2 +1,4 @@
 /node_modules
 /dist
+/test-results
+/playwright-report

README.md

@@ -5,7 +5,7 @@ Toy Robot simulator with two modes:
 - CLI simulator (`npm start`)
 - Browser game for GitHub Pages (`npm run web:start`)
 
-Both modes use the same simulator core and command rules.
+The browser experience is an interactive game powered by the same command engine and rules as the CLI.
 
 ## Instructions
 
@@ -143,10 +143,23 @@ Then open:
 Features:
 
 - Visual 6x6 board with robot direction icon
+- Demo preset buttons for Example A/B/C
 - Single command input
 - Multiline script mode (Step / Run All)
+- Script progress preview with active-line highlight during stepping
+- Latest command status banner (`SUCCESS` / `FAILED`)
 - Command log with success/fail messages
 
+## Demo Walkthrough
+
+For a clean live demo:
+
+1. Open the app and show the `Board (0..5)` grid.
+2. Click `Example C` in `Demo Presets`.
+3. Click `Step` repeatedly and point out the highlighted active script line.
+4. Show `Current State`, `Latest Status`, and `Command Log` updating together.
+5. Click `Run All` for `Example A` to quickly show expected `REPORT` output.
+
 ## GitHub Pages
 
 Deployment is automated by GitHub Actions via `.github/workflows/deploy-pages.yml`.
@@ -156,3 +169,17 @@ Deployment is automated by GitHub Actions via `.github/workflows/deploy-pages.ym
   - [https://leo0331.github.io/ToyRobot/](https://leo0331.github.io/ToyRobot/)
 
 If your repo name or owner changes, update the URL accordingly.
+
+## E2E Smoke Test (Playwright)
+
+Install Playwright browsers once:
+
+```bash
+npx playwright install
+```
+
+Run smoke test:
+
+```bash
+npm run test:e2e
+```

index.html

@@ -10,7 +10,21 @@
     <main class="app">
       <section class="panel">
         <h1>Toy Robot</h1>
-        <p class="subhead">Web game mode with the same command rules as CLI.</p>
+        <p class="subhead">
+          Interactive browser game powered by the same command engine as the CLI.
+        </p>
+        <p id="latest-status" class="latest-status neutral">
+          Waiting for command...
+        </p>
+
+        <div class="controls">
+          <h2>Demo Presets</h2>
+          <div class="row">
+            <button class="preset" data-preset="A" type="button">Example A</button>
+            <button class="preset" data-preset="B" type="button">Example B</button>
+            <button class="preset" data-preset="C" type="button">Example C</button>
+          </div>
+        </div>
 
         <div class="controls">
           <h2>Single Command</h2>
@@ -39,6 +53,7 @@ <h2>Script Mode</h2>
             <button id="reset-script" type="button">Reset Script Cursor</button>
             <button id="reset-state" type="button">Reset Robot</button>
           </div>
+          <ol id="script-preview" class="script-preview"></ol>
         </div>
 
         <div class="status">

package-lock.json

@@ -6,17 +6,22 @@
   "scripts": {
     "start": "babel-node ./src/index.js",
     "test": "jest --runInBand",
+    "test:e2e": "playwright test",
     "web:build": "node ./scripts/build-site.js",
     "web:start": "npm run web:build && node ./scripts/serve-static.js dist"
   },
   "author": "Leo",
   "license": "ISC",
+  "jest": {
+    "testPathIgnorePatterns": ["/node_modules/", "/test/e2e/"]
+  },
   "devDependencies": {
     "@babel/cli": "^7.23.9",
     "@babel/core": "^7.23.9",
     "@babel/node": "^7.23.9",
     "@babel/preset-env": "^7.23.9",
     "@babel/register": "^7.23.7",
+    "@playwright/test": "^1.54.2",
     "jest": "^29.7.0",
     "prettier": "3.2.5"
   }

package.json

@@ -0,0 +1,16 @@
+const { defineConfig } = require("@playwright/test");
+
+module.exports = defineConfig({
+  testDir: "./test/e2e",
+  retries: 1,
+  use: {
+    baseURL: "http://127.0.0.1:8080",
+    headless: true,
+  },
+  webServer: {
+    command: "npm run web:start",
+    port: 8080,
+    reuseExistingServer: true,
+    timeout: 120000,
+  },
+});

playwright.config.js

@@ -0,0 +1,15 @@
+const { test, expect } = require("@playwright/test");
+
+test("web game loads and runs a simple script", async ({ page }) => {
+  await page.goto("/");
+
+  await expect(page.getByRole("heading", { name: "Toy Robot" })).toBeVisible();
+  await expect(page.locator("#board .cell")).toHaveCount(36);
+
+  await page.getByRole("button", { name: "Example A" }).click();
+  await page.getByRole("button", { name: "Run All" }).click();
+
+  await expect(page.locator("#state-line")).toHaveText("0,1,NORTH");
+  await expect(page.locator("#latest-status")).toContainText("0,1,NORTH");
+  await expect(page.locator("#log")).toContainText("REPORT");
+});

test/e2e/web-game.spec.js

@@ -15,18 +15,55 @@ const resetStateButton = document.getElementById("reset-state");
 const board = document.getElementById("board");
 const log = document.getElementById("log");
 const stateLine = document.getElementById("state-line");
+const latestStatus = document.getElementById("latest-status");
+const scriptPreview = document.getElementById("script-preview");
+const presetButtons = document.querySelectorAll(".preset");
 
 let state = { ...initialState };
 let scriptCommands = [];
 let scriptCursor = 0;
 
+const demoPresets = {
+  A: "PLACE 0,0,NORTH\nMOVE\nREPORT",
+  B: "PLACE 0,0,NORTH\nLEFT\nREPORT",
+  C: "PLACE 1,2,EAST\nMOVE\nMOVE\nLEFT\nMOVE\nREPORT",
+};
+
 function escapeHtml(text) {
   return String(text)
     .replaceAll("&", "&")
     .replaceAll("<", "&lt;")
     .replaceAll(">", "&gt;");
 }
 
+function setStatusBanner(status, message) {
+  latestStatus.classList.remove("success", "fail", "neutral");
+
+  if (status === "success") {
+    latestStatus.classList.add("success");
+  } else if (status === "fail") {
+    latestStatus.classList.add("fail");
+  } else {
+    latestStatus.classList.add("neutral");
+  }
+
+  latestStatus.textContent = message;
+}
+
+function renderScriptPreview() {
+  if (scriptCommands.length === 0) {
+    scriptPreview.innerHTML = "<li>No parsed script commands yet.</li>";
+    return;
+  }
+
+  scriptPreview.innerHTML = scriptCommands
+    .map((line, index) => {
+      const activeClass = index === scriptCursor ? "active-line" : "";
+      return `<li class="${activeClass}">${escapeHtml(line)}</li>`;
+    })
+    .join("");
+}
+
 function renderState() {
   if (!state.Placed) {
     stateLine.textContent = "Not placed";
@@ -65,6 +102,7 @@ function executeCommand(commandText) {
   state = result.state;
   renderState();
   renderBoard();
+  setStatusBanner(result.status, result.message);
   appendLog({
     commandText,
     status: result.status,
@@ -76,6 +114,7 @@ function executeCommand(commandText) {
 function reloadScriptCommands() {
   scriptCommands = parseScript(scriptInput.value);
   scriptCursor = 0;
+  renderScriptPreview();
 }
 
 runCommandButton.addEventListener("click", () => {
@@ -98,6 +137,7 @@ stepScriptButton.addEventListener("click", () => {
   }
 
   if (scriptCursor >= scriptCommands.length) {
+    setStatusBanner("fail", "Command failed: Script has no remaining commands");
     appendLog({
       commandText: "SCRIPT",
       status: "fail",
@@ -109,16 +149,20 @@ stepScriptButton.addEventListener("click", () => {
 
   executeCommand(scriptCommands[scriptCursor]);
   scriptCursor += 1;
+  renderScriptPreview();
 });
 
 runScriptButton.addEventListener("click", () => {
   reloadScriptCommands();
   scriptCommands.forEach((command) => executeCommand(command));
   scriptCursor = scriptCommands.length;
+  renderScriptPreview();
 });
 
 resetScriptButton.addEventListener("click", () => {
   scriptCursor = 0;
+  renderScriptPreview();
+  setStatusBanner("success", "Command success: Script cursor reset");
   appendLog({
     commandText: "SCRIPT",
     status: "success",
@@ -131,6 +175,7 @@ resetStateButton.addEventListener("click", () => {
   state = { ...initialState };
   renderState();
   renderBoard();
+  setStatusBanner("success", "Command success: Robot state reset");
   appendLog({
     commandText: "RESET",
     status: "success",
@@ -139,5 +184,19 @@ resetStateButton.addEventListener("click", () => {
   });
 });
 
+scriptInput.addEventListener("input", () => {
+  reloadScriptCommands();
+});
+
+presetButtons.forEach((button) => {
+  button.addEventListener("click", () => {
+    const presetKey = button.dataset.preset;
+    scriptInput.value = demoPresets[presetKey] || "";
+    reloadScriptCommands();
+    setStatusBanner("neutral", `Preset loaded: Example ${presetKey}`);
+  });
+});
+
 renderState();
 renderBoard();
+reloadScriptCommands();