add as visual fame

Author: LEO0331

.github/workflows/deploy-pages.yml

@@ -0,0 +1,56 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: ["main"]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build static site
+        run: npm run web:build
+
+      - name: Configure Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+  deploy:
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1 +1,2 @@
 /node_modules
+/dist

README.md

@@ -1,63 +1,87 @@
 # Toy Robot
 
+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.
+
 ## Instructions
 
-This is a program that simulates a Toy Robot moving on a table top. The table top is a grid of 5 units x 5 units. There are no obstructions on the table surface. The Toy Robot is free to roam around the surface of the table, but must be prevented from falling to destruction. A failed or invalid command should not stop the simulation.
+Toy Robot moves on a tabletop grid with no obstacles.
+
+- Grid coordinates are `0..5` for both X and Y (6x6 board).
+- Origin `(0,0)` is the south-west corner.
+- Invalid/failed commands do not stop the simulation.
+
+Commands:
 
-- `PLACE X,Y,F` will place the Toy Robot on the table at position X,Y and facing direction F.
-  - Direction can be one of the cardinal points: `NORTH`, `EAST`, `SOUTH` or `WEST`.
-- `MOVE` will move the Toy Robot one unit forward in the direction it is currently facing.
-- `LEFT` will rotate the Toy Robot 90 degrees left (anti-clockwise/counter-clockwise).
-- `RIGHT` will rotate the Toy Robot 90 degrees right (clockwise).
-- `REPORT` will announce the X,Y,F of Toy Robot.
-- Every command should provide visual output that the command has either succeeded or failed (display fail messages).
+- `PLACE X,Y,F` places the robot at `X,Y` facing `F`.
+- `MOVE` moves one unit forward.
+- `LEFT` rotates 90 degrees anti-clockwise.
+- `RIGHT` rotates 90 degrees clockwise.
+- `REPORT` outputs `X,Y,F`.
+
+Facing direction `F` must be one of:
+
+- `NORTH`
+- `EAST`
+- `SOUTH`
+- `WEST`
 
 ## Assumptions
 
-- Successful commands are upper case (lower case letters would result fail).
-- Allow empty space before/after commands (e.g. ` REPORT` or `PLACE 1,1,NORTH ` result success).
-- Do not allow empty space between position X,Y,F (e.g. `PLACE ,,NORTH` will result fail).
-- Origin (0,0) to be the SOUTH WEST most corner.
-- Inputs are from standard input.
-- Ignore any move that would cause the robot to fall and fail (remain the same state).
-- Discard all commands in the sequence until a valid PLACE command has been executed.
-- Current version installed
-  - npm: 10.2.4
-  - node: 20.11.0
-  - git: 2.39.2 (Apple Git-143)
+- Commands are case-sensitive and must be uppercase.
+- Leading/trailing spaces are allowed (for example ` REPORT`).
+- `PLACE` parameters cannot contain empty values (for example `PLACE ,,NORTH` fails).
+- Any move that would cause a fall fails and keeps the same state.
+- Commands are ignored until the first valid `PLACE`.
 
 ## Constraints
 
-The first valid command must be `PLACE`. After that, any sequence of commands may be issued in any order, including another PLACE command.
+The first valid command must be `PLACE`.
+After that, any sequence of commands is allowed, including another `PLACE`.
+
+## Example Input/Output
 
-## Example Input and Output
 ### Example A
+
 Input:
-```
+
+```text
 PLACE 0,0,NORTH
 MOVE
 REPORT
 ```
 
 Output:
-```
+
+```text
 0,1,NORTH
 ```
+
 ### Example B
+
 Input:
-```
+
+```text
 PLACE 0,0,NORTH
 LEFT
 REPORT
 ```
 
 Output:
-```
+
+```text
 0,0,WEST
 ```
+
 ### Example C
+
 Input:
-```
+
+```text
 PLACE 1,2,EAST
 MOVE
 MOVE
@@ -67,46 +91,68 @@ REPORT
 ```
 
 Output:
-```
+
+```text
 3,3,NORTH
 ```
+
 ## Setup
-#### Make sure you have the latest git, Node.js and Npm installed on your machine
 
+Install dependencies:
+
+```bash
+npm install
+```
+
+Run tests:
+
+```bash
+npm test
 ```
-$ git --version
-$ npm --version
-$ node --version
+
+## CLI Mode
+
+Start CLI simulator:
+
+```bash
+npm start
 ```
 
-#### Clone the repo from Github
+Example input:
 
-`git clone https://github.com/LEO0331/ToyRobot.git`
+```text
+PLACE 0,0,NORTH
+MOVE
+REPORT
+```
 
-#### Install dependencies with `npm install` in the ToyRobot folder
+Exit with `Ctrl + C` (Windows/Linux) or `Cmd + C` (macOS).
 
-`npm install`
+## Web Game Mode
 
-#### Run tests
+Build and serve the static game locally:
 
-`npm run test`
+```bash
+npm run web:start
+```
 
-#### Run prettier
+Then open:
 
-`npx prettier . --write`
+- [http://localhost:8080](http://localhost:8080)
 
-#### Start the simulator
+Features:
 
-`npm run start` or `npm start`
+- Visual 6x6 board with robot direction icon
+- Single command input
+- Multiline script mode (Step / Run All)
+- Command log with success/fail messages
 
-#### Paste your input followed by Enter
+## GitHub Pages
 
-```
-PLACE 0,0,NORTH -> type Enter
-MOVE -> type Enter
-REPORT -> type Enter then the result will show
-```
+Deployment is automated by GitHub Actions via `.github/workflows/deploy-pages.yml`.
 
-#### Exit the simulator
+- Push to `main` triggers tests + static build + deployment.
+- Expected public URL:
+  - [https://leo0331.github.io/ToyRobot/](https://leo0331.github.io/ToyRobot/)
 
-`Ctrl + C` or `Cmd + C` to terminate the simulator
+If your repo name or owner changes, update the URL accordingly.

index.html

@@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Toy Robot Game</title>
+    <link rel="stylesheet" href="./web/styles.css" />
+  </head>
+  <body>
+    <main class="app">
+      <section class="panel">
+        <h1>Toy Robot</h1>
+        <p class="subhead">Web game mode with the same command rules as CLI.</p>
+
+        <div class="controls">
+          <h2>Single Command</h2>
+          <div class="row">
+            <input
+              id="command-input"
+              type="text"
+              placeholder="PLACE 0,0,NORTH"
+              aria-label="Single command input"
+            />
+            <button id="run-command" type="button">Run</button>
+          </div>
+        </div>
+
+        <div class="controls">
+          <h2>Script Mode</h2>
+          <textarea
+            id="script-input"
+            rows="8"
+            placeholder="PLACE 0,0,NORTH&#10;MOVE&#10;RIGHT&#10;REPORT"
+            aria-label="Script input"
+          ></textarea>
+          <div class="row">
+            <button id="step-script" type="button">Step</button>
+            <button id="run-script" type="button">Run All</button>
+            <button id="reset-script" type="button">Reset Script Cursor</button>
+            <button id="reset-state" type="button">Reset Robot</button>
+          </div>
+        </div>
+
+        <div class="status">
+          <h2>Current State</h2>
+          <p id="state-line">Not placed</p>
+        </div>
+      </section>
+
+      <section class="panel">
+        <h2>Board (0..5)</h2>
+        <div id="board" class="board" aria-live="polite"></div>
+      </section>
+
+      <section class="panel">
+        <h2>Command Log</h2>
+        <ol id="log" class="log"></ol>
+      </section>
+    </main>
+
+    <script type="module" src="./web/app.js"></script>
+  </body>
+</html>

package.json

@@ -5,7 +5,9 @@
   "main": "index.js",
   "scripts": {
     "start": "babel-node ./src/index.js",
-    "test": "jest"
+    "test": "jest --runInBand",
+    "web:build": "node ./scripts/build-site.js",
+    "web:start": "npm run web:build && node ./scripts/serve-static.js dist"
   },
   "author": "Leo",
   "license": "ISC",

scripts/build-site.js

@@ -0,0 +1,21 @@
+const fs = require("fs");
+const path = require("path");
+
+const rootDir = path.resolve(process.cwd());
+const outDir = path.join(rootDir, "dist");
+const filesToCopy = [
+  ["index.html", "index.html"],
+  ["web", "web"],
+  ["src", "src"],
+];
+
+fs.rmSync(outDir, { recursive: true, force: true });
+fs.mkdirSync(outDir, { recursive: true });
+
+for (const [from, to] of filesToCopy) {
+  fs.cpSync(path.join(rootDir, from), path.join(outDir, to), {
+    recursive: true,
+  });
+}
+
+console.log(`Site build complete: ${outDir}`);