feat(fsharp): Fable browser platform, snake and pong pages, build-web.sh
Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
Lucas Winther
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
527b2cd157
commit
a7a4cb5b2a
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"version": 1,
|
||||
"isRoot": true,
|
||||
"tools": {
|
||||
"fable": {
|
||||
"version": "5.24.0",
|
||||
"commands": [
|
||||
"fable"
|
||||
],
|
||||
"rollForward": false
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+11
@@ -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
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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")
|
||||
@@ -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 ())
|
||||
@@ -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 ())
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user