feat(fsharp): Fable browser platform, snake and pong pages, build-web.sh

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

fsharp/.config/dotnet-tools.json

@@ -0,0 +1,13 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "fable": {
+      "version": "5.24.0",
+      "commands": [
+        "fable"
+      ],
+      "rollForward": false
+    }
+  }
+}

fsharp/build-web.sh

@@ -0,0 +1,11 @@
+#!/usr/bin/env bash
+# Usage: ./build-web.sh
+# Compiles src/ + web/ to JavaScript with Fable (a local dotnet tool, see .config/dotnet-tools.json) into web/dist/.
+# index.html loads the Snake entry module, pong.html the Pong one.
+# Then serve the repo root (node scripts/serve.mjs) and open http://localhost:8000/fsharp/index.html.
+set -euo pipefail
+cd "$(dirname "$0")"
+export PATH="$HOME/.dotnet:$PATH"
+export DOTNET_NOLOGO=1 DOTNET_CLI_TELEMETRY_OPTOUT=1
+dotnet tool restore
+dotnet fable web -o web/dist --noCache

fsharp/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">
+  <title>Pure Snake</title>
+  <link rel="icon" href="data:,">
+  <style>
+    body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
+           justify-content: center; gap: 12px; background: #1b1b1b; color: #ddd; font: 14px system-ui, sans-serif; }
+    h1 { margin: 0; font-size: 20px; }
+    canvas { background: #111111; border: 2px solid #333; }
+    p { margin: 0; color: #999; }
+  </style>
+</head>
+<body>
+  <h1>Pure Snake</h1>
+  <canvas id="game" width="400" height="400"></canvas>
+  <p>Arrows / WASD to move. Space to pause, R to restart (after module 10).</p>
+  <script type="module" src="web/dist/SnakeMain.js"></script>
+</body>
+</html>

fsharp/pong.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">
+  <title>Pure Pong</title>
+  <link rel="icon" href="data:,">
+  <style>
+    body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center;
+           justify-content: center; gap: 12px; background: #1b1b1b; color: #ddd; font: 14px system-ui, sans-serif; }
+    h1 { margin: 0; font-size: 20px; }
+    canvas { background: #111111; border: 2px solid #333; }
+    p { margin: 0; color: #999; }
+  </style>
+</head>
+<body>
+  <h1>Pure Pong</h1>
+  <canvas id="game" width="640" height="400"></canvas>
+  <p>Up/Down arrows (or W/S) move your paddle. First to 5 wins. R restarts.</p>
+  <script type="module" src="web/dist/PongMain.js"></script>
+</body>
+</html>

fsharp/web/BrowserPlatform.fs

@@ -0,0 +1,64 @@
+/// Browser glue: turns a canvas into a Platform. Impure by nature; not part of the exercises' logic.
+/// `?` (Fable.Core.JsInterop dynamic access) calls browser APIs by name, without type bindings or extra packages.
+module Snake.Web.BrowserPlatform
+
+open Fable.Core
+open Fable.Core.JsInterop
+open Snake.Runtime
+
+[<Global>]
+let private window: obj = jsNative
+
+[<Global>]
+let private crypto: obj = jsNative
+
+// Keys that scroll the page should only steer the game.
+let private prevent = [ "ArrowUp"; "ArrowDown"; "ArrowLeft"; "ArrowRight"; " " ]
+
+let private listen (kind: string) (cb: string -> unit) : unit =
+    window?addEventListener (kind,
+                             fun (e: obj) ->
+                                 let key: string = e?key
+
+                                 if List.contains key prevent then
+                                     e?preventDefault ()
+
+                                 cb key)
+
+// t is the number of milliseconds since the first animation frame.
+let private startClock (onTime: int64 -> unit) : unit =
+    let rec frame (start: float option) : float -> unit =
+        fun now ->
+            let t0 = defaultArg start now
+            onTime (int64 (now - t0))
+            window?requestAnimationFrame (frame (Some t0))
+
+    window?requestAnimationFrame (frame None)
+
+// Fable compiles a uint32 array to a Uint32Array, which is what crypto.getRandomValues fills.
+let private randomSeed () : uint32 =
+    let buf: uint32[] = Array.zeroCreate 1
+    crypto?getRandomValues (buf)
+    buf[0]
+
+/// A Platform drawing on `canvas` (an HTML canvas element) and listening to the window's keys and frames.
+let create (canvas: obj) : Platform =
+    let ctx = canvas?getContext ("2d")
+
+    { FillRect =
+        fun x y w h color ->
+            ctx?fillStyle <- color
+            ctx?fillRect (x, y, w, h)
+      FillText =
+        fun x y text color size align ->
+            ctx?fillStyle <- color
+            ctx?font <- $"{size}px monospace"
+            ctx?textAlign <- align
+            ctx?fillText (text, x, y)
+      RandomSeed = randomSeed
+      StartClock = startClock
+      OnKeyDown = listen "keydown"
+      OnKeyUp = listen "keyup" }
+
+/// The page's `<canvas id="game">`.
+let gameCanvas () : obj = window?document?getElementById ("game")

fsharp/web/PongMain.fs

@@ -0,0 +1,6 @@
+/// fsharp/pong.html loads this module (web/dist/PongMain.js): one call runs Pong (m11).
+module Snake.Web.PongMain
+
+open Snake
+
+Runtime.runApp (BrowserPlatform.create (BrowserPlatform.gameCanvas ())) (Pong.App.pongMain ())

fsharp/web/SnakeMain.fs

@@ -0,0 +1,6 @@
+/// fsharp/index.html loads this module (web/dist/SnakeMain.js): one call runs the whole Snake program.
+module Snake.Web.SnakeMain
+
+open Snake
+
+Runtime.runApp (BrowserPlatform.create (BrowserPlatform.gameCanvas ())) (App.main ())

fsharp/web/Web.fsproj

@@ -0,0 +1,33 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <!-- Fable project for the browser pages: compiles ../src (the student's code) plus the browser glue to JavaScript.
+       Build with ../build-web.sh; it is never part of the .NET test build. -->
+  <PropertyGroup>
+    <TargetFramework>net10.0</TargetFramework>
+    <!-- FS0046: `pure` is reserved for future use by F#; the course keeps the name used by every track. -->
+    <NoWarn>$(NoWarn);FS0046</NoWarn>
+  </PropertyGroup>
+  <ItemGroup>
+    <Compile Include="../src/Util.fs" />
+    <Compile Include="../src/Model.fs" />
+    <Compile Include="../src/Rules.fs" />
+    <Compile Include="../src/Random.fs" />
+    <Compile Include="../src/Spawn.fs" />
+    <Compile Include="../src/Game.fs" />
+    <Compile Include="../src/View.fs" />
+    <Compile Include="../src/IO.fs" />
+    <Compile Include="../src/Stream.fs" />
+    <Compile Include="../src/Input.fs" />
+    <Compile Include="../src/App.fs" />
+    <Compile Include="../src/Runtime.fs" />
+    <Compile Include="../src/Pong/Model.fs" />
+    <Compile Include="../src/Pong/Rules.fs" />
+    <Compile Include="../src/Pong/View.fs" />
+    <Compile Include="../src/Pong/App.fs" />
+    <Compile Include="BrowserPlatform.fs" />
+    <Compile Include="SnakeMain.fs" />
+    <Compile Include="PongMain.fs" />
+  </ItemGroup>
+  <ItemGroup>
+    <PackageReference Include="Fable.Core" Version="5.6.0" />
+  </ItemGroup>
+</Project>