diff --git a/apps/web/src/routes/proto/v4.tsx b/apps/web/src/routes/proto/v4.tsx index adfeb81..5214ce7 100644 --- a/apps/web/src/routes/proto/v4.tsx +++ b/apps/web/src/routes/proto/v4.tsx @@ -2,36 +2,36 @@ import { createFileRoute } from "@tanstack/react-router"; import { useEffect, useRef, useState } from "react"; export const Route = createFileRoute("/proto/v4")({ - component: V4ManagerIsland, + component: V4ManagerIsland, }); /* ── palette ─────────────────────────────────────────── */ const P = { - floor: "#3a3a5c", - floorAlt: "#33335a", - wall: "#2a2a4a", - wallTrim: "#4a4a6a", - desk: "#8b6914", - deskTop: "#a07828", - deskLeg: "#6b4c10", - monitor: "#1a1a2e", - monitorScreen: "#44ee88", - monitorScreenAlt: "#33ccff", - chair: "#5a2d82", - chairAlt: "#2d5a82", - plant: "#2d8b46", - plantPot: "#8b5a2d", - rug: "#4a2d6b", - rugBorder: "#5a3d7b", - lamp: "#ffcc44", - lampPost: "#666666", - bookshelf: "#6b4c28", - book1: "#cc4444", - book2: "#4488cc", - book3: "#44cc88", - whiteboard: "#e8e8e8", - whiteboardFrame: "#888888", - shadow: "#22223a", + floor: "#3a3a5c", + floorAlt: "#33335a", + wall: "#2a2a4a", + wallTrim: "#4a4a6a", + desk: "#8b6914", + deskTop: "#a07828", + deskLeg: "#6b4c10", + monitor: "#1a1a2e", + monitorScreen: "#44ee88", + monitorScreenAlt: "#33ccff", + chair: "#5a2d82", + chairAlt: "#2d5a82", + plant: "#2d8b46", + plantPot: "#8b5a2d", + rug: "#4a2d6b", + rugBorder: "#5a3d7b", + lamp: "#ffcc44", + lampPost: "#666666", + bookshelf: "#6b4c28", + book1: "#cc4444", + book2: "#4488cc", + book3: "#44cc88", + whiteboard: "#e8e8e8", + whiteboardFrame: "#888888", + shadow: "#22223a", }; const COLS = 20; @@ -43,381 +43,354 @@ const CANVAS_H = ROWS * 8 * TILE; type Desk = { col: number; row: number; screenColor: string }; const DESKS: Desk[] = [ - { col: 2, row: 3, screenColor: P.monitorScreen }, - { col: 6, row: 3, screenColor: P.monitorScreenAlt }, - { col: 12, row: 3, screenColor: P.monitorScreen }, - { col: 16, row: 3, screenColor: P.monitorScreenAlt }, - { col: 2, row: 7, screenColor: P.monitorScreenAlt }, - { col: 6, row: 7, screenColor: P.monitorScreen }, - { col: 12, row: 7, screenColor: P.monitorScreenAlt }, - { col: 16, row: 7, screenColor: P.monitorScreen }, + { col: 2, row: 3, screenColor: P.monitorScreen }, + { col: 6, row: 3, screenColor: P.monitorScreenAlt }, + { col: 12, row: 3, screenColor: P.monitorScreen }, + { col: 16, row: 3, screenColor: P.monitorScreenAlt }, + { col: 2, row: 7, screenColor: P.monitorScreenAlt }, + { col: 6, row: 7, screenColor: P.monitorScreen }, + { col: 12, row: 7, screenColor: P.monitorScreenAlt }, + { col: 16, row: 7, screenColor: P.monitorScreen }, ]; /* ── tiny pixel drawing helpers ────────────────────── */ -function fillTile( - ctx: CanvasRenderingContext2D, - col: number, - row: number, - color: string, -) { - const s = 8 * TILE; - ctx.fillStyle = color; - ctx.fillRect(col * s, row * s, s, s); +function fillTile(ctx: CanvasRenderingContext2D, col: number, row: number, color: string) { + const s = 8 * TILE; + ctx.fillStyle = color; + ctx.fillRect(col * s, row * s, s, s); } function fillPx( - ctx: CanvasRenderingContext2D, - col: number, - row: number, - x: number, - y: number, - w: number, - h: number, - color: string, + ctx: CanvasRenderingContext2D, + col: number, + row: number, + x: number, + y: number, + w: number, + h: number, + color: string, ) { - const s = 8 * TILE; - ctx.fillStyle = color; - ctx.fillRect(col * s + x * TILE, row * s + y * TILE, w * TILE, h * TILE); + const s = 8 * TILE; + ctx.fillStyle = color; + ctx.fillRect(col * s + x * TILE, row * s + y * TILE, w * TILE, h * TILE); } /* ── draw routines ──────────────────────────────────── */ function drawFloor(ctx: CanvasRenderingContext2D) { - for (let r = 0; r < ROWS; r++) { - for (let c = 0; c < COLS; c++) { - fillTile(ctx, c, r, (c + r) % 2 === 0 ? P.floor : P.floorAlt); - } - } + for (let r = 0; r < ROWS; r++) { + for (let c = 0; c < COLS; c++) { + fillTile(ctx, c, r, (c + r) % 2 === 0 ? P.floor : P.floorAlt); + } + } } function drawWalls(ctx: CanvasRenderingContext2D) { - for (let c = 0; c < COLS; c++) { - fillTile(ctx, c, 0, P.wall); - fillPx(ctx, c, 0, 0, 7, 8, 1, P.wallTrim); - } + for (let c = 0; c < COLS; c++) { + fillTile(ctx, c, 0, P.wall); + fillPx(ctx, c, 0, 0, 7, 8, 1, P.wallTrim); + } } function drawDesk(ctx: CanvasRenderingContext2D, d: Desk) { - const { col, row, screenColor } = d; - /* desk surface */ - fillPx(ctx, col, row, 0, 4, 8, 2, P.deskTop); - fillPx(ctx, col, row, 0, 6, 8, 1, P.desk); - /* legs */ - fillPx(ctx, col, row, 1, 7, 1, 1, P.deskLeg); - fillPx(ctx, col, row, 6, 7, 1, 1, P.deskLeg); - /* monitor */ - fillPx(ctx, col, row, 2, 1, 4, 3, P.monitor); - fillPx(ctx, col, row, 3, 2, 2, 1, screenColor); - /* monitor stand */ - fillPx(ctx, col, row, 3, 4, 2, 1, P.monitor); - /* shadow under desk */ - fillPx(ctx, col, row + 1, 0, 0, 8, 1, P.shadow); + const { col, row, screenColor } = d; + /* desk surface */ + fillPx(ctx, col, row, 0, 4, 8, 2, P.deskTop); + fillPx(ctx, col, row, 0, 6, 8, 1, P.desk); + /* legs */ + fillPx(ctx, col, row, 1, 7, 1, 1, P.deskLeg); + fillPx(ctx, col, row, 6, 7, 1, 1, P.deskLeg); + /* monitor */ + fillPx(ctx, col, row, 2, 1, 4, 3, P.monitor); + fillPx(ctx, col, row, 3, 2, 2, 1, screenColor); + /* monitor stand */ + fillPx(ctx, col, row, 3, 4, 2, 1, P.monitor); + /* shadow under desk */ + fillPx(ctx, col, row + 1, 0, 0, 8, 1, P.shadow); } -function drawChair( - ctx: CanvasRenderingContext2D, - col: number, - row: number, - color: string, -) { - fillPx(ctx, col, row, 2, 2, 4, 3, color); - fillPx(ctx, col, row, 3, 5, 2, 1, color); - fillPx(ctx, col, row, 2, 6, 1, 1, P.deskLeg); - fillPx(ctx, col, row, 5, 6, 1, 1, P.deskLeg); +function drawChair(ctx: CanvasRenderingContext2D, col: number, row: number, color: string) { + fillPx(ctx, col, row, 2, 2, 4, 3, color); + fillPx(ctx, col, row, 3, 5, 2, 1, color); + fillPx(ctx, col, row, 2, 6, 1, 1, P.deskLeg); + fillPx(ctx, col, row, 5, 6, 1, 1, P.deskLeg); } -function drawPlant( - ctx: CanvasRenderingContext2D, - col: number, - row: number, -) { - fillPx(ctx, col, row, 3, 5, 2, 2, P.plantPot); - fillPx(ctx, col, row, 2, 3, 4, 2, P.plant); - fillPx(ctx, col, row, 3, 2, 2, 1, P.plant); +function drawPlant(ctx: CanvasRenderingContext2D, col: number, row: number) { + fillPx(ctx, col, row, 3, 5, 2, 2, P.plantPot); + fillPx(ctx, col, row, 2, 3, 4, 2, P.plant); + fillPx(ctx, col, row, 3, 2, 2, 1, P.plant); } -function drawBookshelf( - ctx: CanvasRenderingContext2D, - col: number, - row: number, -) { - fillPx(ctx, col, row, 0, 0, 8, 8, P.bookshelf); - fillPx(ctx, col, row, 1, 1, 2, 3, P.book1); - fillPx(ctx, col, row, 3, 1, 2, 3, P.book2); - fillPx(ctx, col, row, 5, 1, 2, 3, P.book3); - fillPx(ctx, col, row, 1, 5, 2, 2, P.book3); - fillPx(ctx, col, row, 3, 5, 2, 2, P.book1); - fillPx(ctx, col, row, 5, 5, 2, 2, P.book2); +function drawBookshelf(ctx: CanvasRenderingContext2D, col: number, row: number) { + fillPx(ctx, col, row, 0, 0, 8, 8, P.bookshelf); + fillPx(ctx, col, row, 1, 1, 2, 3, P.book1); + fillPx(ctx, col, row, 3, 1, 2, 3, P.book2); + fillPx(ctx, col, row, 5, 1, 2, 3, P.book3); + fillPx(ctx, col, row, 1, 5, 2, 2, P.book3); + fillPx(ctx, col, row, 3, 5, 2, 2, P.book1); + fillPx(ctx, col, row, 5, 5, 2, 2, P.book2); } -function drawWhiteboard( - ctx: CanvasRenderingContext2D, - col: number, - row: number, -) { - fillPx(ctx, col, row, 1, 1, 6, 5, P.whiteboardFrame); - fillPx(ctx, col, row, 2, 2, 4, 3, P.whiteboard); +function drawWhiteboard(ctx: CanvasRenderingContext2D, col: number, row: number) { + fillPx(ctx, col, row, 1, 1, 6, 5, P.whiteboardFrame); + fillPx(ctx, col, row, 2, 2, 4, 3, P.whiteboard); } function drawRug(ctx: CanvasRenderingContext2D) { - const cx = 9; - const cy = 5; - fillPx(ctx, cx, cy, 0, 2, 8, 4, P.rug); - fillPx(ctx, cx + 1, cy, 0, 2, 8, 4, P.rug); - fillPx(ctx, cx, cy, 0, 2, 1, 4, P.rugBorder); - fillPx(ctx, cx + 1, cy, 7, 2, 1, 4, P.rugBorder); - fillPx(ctx, cx, cy, 0, 2, 8, 1, P.rugBorder); - fillPx(ctx, cx + 1, cy, 0, 2, 8, 1, P.rugBorder); - fillPx(ctx, cx, cy, 0, 5, 8, 1, P.rugBorder); - fillPx(ctx, cx + 1, cy, 0, 5, 8, 1, P.rugBorder); + const cx = 9; + const cy = 5; + fillPx(ctx, cx, cy, 0, 2, 8, 4, P.rug); + fillPx(ctx, cx + 1, cy, 0, 2, 8, 4, P.rug); + fillPx(ctx, cx, cy, 0, 2, 1, 4, P.rugBorder); + fillPx(ctx, cx + 1, cy, 7, 2, 1, 4, P.rugBorder); + fillPx(ctx, cx, cy, 0, 2, 8, 1, P.rugBorder); + fillPx(ctx, cx + 1, cy, 0, 2, 8, 1, P.rugBorder); + fillPx(ctx, cx, cy, 0, 5, 8, 1, P.rugBorder); + fillPx(ctx, cx + 1, cy, 0, 5, 8, 1, P.rugBorder); } -function drawLamp( - ctx: CanvasRenderingContext2D, - col: number, - row: number, -) { - fillPx(ctx, col, row, 3, 6, 2, 2, P.lampPost); - fillPx(ctx, col, row, 3, 3, 2, 3, P.lampPost); - fillPx(ctx, col, row, 2, 1, 4, 2, P.lamp); +function drawLamp(ctx: CanvasRenderingContext2D, col: number, row: number) { + fillPx(ctx, col, row, 3, 6, 2, 2, P.lampPost); + fillPx(ctx, col, row, 3, 3, 2, 3, P.lampPost); + fillPx(ctx, col, row, 2, 1, 4, 2, P.lamp); } function drawScene(ctx: CanvasRenderingContext2D) { - ctx.imageSmoothingEnabled = false; - drawFloor(ctx); - drawWalls(ctx); - drawRug(ctx); + ctx.imageSmoothingEnabled = false; + drawFloor(ctx); + drawWalls(ctx); + drawRug(ctx); - /* whiteboards on wall */ - drawWhiteboard(ctx, 4, 0); - drawWhiteboard(ctx, 14, 0); + /* whiteboards on wall */ + drawWhiteboard(ctx, 4, 0); + drawWhiteboard(ctx, 14, 0); - /* furniture */ - drawBookshelf(ctx, 0, 1); - drawBookshelf(ctx, 19, 1); - drawPlant(ctx, 0, 5); - drawPlant(ctx, 19, 5); - drawLamp(ctx, 10, 8); - drawLamp(ctx, 0, 9); - drawLamp(ctx, 19, 9); + /* furniture */ + drawBookshelf(ctx, 0, 1); + drawBookshelf(ctx, 19, 1); + drawPlant(ctx, 0, 5); + drawPlant(ctx, 19, 5); + drawLamp(ctx, 10, 8); + drawLamp(ctx, 0, 9); + drawLamp(ctx, 19, 9); - /* desks + chairs */ - for (const d of DESKS) { - drawDesk(ctx, d); - const chairColor = - d.screenColor === P.monitorScreen ? P.chair : P.chairAlt; - drawChair(ctx, d.col, d.row + 1, chairColor); - } + /* desks + chairs */ + for (const d of DESKS) { + drawDesk(ctx, d); + const chairColor = d.screenColor === P.monitorScreen ? P.chair : P.chairAlt; + drawChair(ctx, d.col, d.row + 1, chairColor); + } } /* ── component ──────────────────────────────────────── */ function V4ManagerIsland() { - const canvasRef = useRef(null); - const [task, setTask] = useState(""); + const canvasRef = useRef(null); + const [task, setTask] = useState(""); - useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; - const ctx = canvas.getContext("2d"); - if (!ctx) return; - drawScene(ctx); - }, []); + useEffect(() => { + const canvas = canvasRef.current; + if (!canvas) return; + const ctx = canvas.getContext("2d"); + if (!ctx) return; + drawScene(ctx); + }, []); - return ( - <> - {/* Google Font */} - -
- {/* canvas */} - -
+
+ {/* canvas */} + +
- {/* ── Manager Island — fixed bottom bar ──────── */} -
-
- {/* robot + label */} -
- 🤖 - - Manager - -
+ {/* ── Manager Island — fixed bottom bar ──────── */} +
+
+ {/* robot + label */} +
+ 🤖 + + Manager + +
- {/* divider */} -
+ {/* divider */} +
- {/* text input */} - setTask(e.target.value)} - placeholder="Give the manager a task..." - style={{ - flex: 1, - background: "#16161e", - border: "2px solid #4a4a6a", - color: "#e0e0ff", - fontSize: 8, - fontFamily: "'Press Start 2P', monospace", - padding: "8px 10px", - outline: "none", - minWidth: 0, - }} - /> + {/* text input */} + setTask(e.target.value)} + placeholder="Give the manager a task..." + style={{ + flex: 1, + background: "#16161e", + border: "2px solid #4a4a6a", + color: "#e0e0ff", + fontSize: 8, + fontFamily: "'Press Start 2P', monospace", + padding: "8px 10px", + outline: "none", + minWidth: 0, + }} + /> - {/* divider */} -
+ {/* divider */} +
- {/* tasks badge */} -
- - Tasks: - - - 3/5 - -
+ {/* tasks badge */} +
+ + Tasks: + + + 3/5 + +
- {/* divider */} -
+ {/* divider */} +
- {/* sandbox status */} -
-
- - Sandbox - -
-
-
- - ); + {/* sandbox status */} +
+
+ + Sandbox + +
+
+
+ + ); } diff --git a/bun.lock b/bun.lock index 0e97743..300ebe4 100644 --- a/bun.lock +++ b/bun.lock @@ -1,6 +1,5 @@ { "lockfileVersion": 1, - "configVersion": 1, "workspaces": { "": { "name": "mistral-hack", @@ -16,7 +15,7 @@ "lefthook": "^2.1.1", "oxfmt": "^0.35.0", "oxlint": "^1.50.0", - "turbo": "^2.6.3", + "turbo": "^2.9.14", "typescript": "catalog:", "web": "workspace:*", }, @@ -1055,6 +1054,18 @@ "@ts-morph/common": ["@ts-morph/common@0.27.0", "", { "dependencies": { "fast-glob": "^3.3.3", "minimatch": "^10.0.1", "path-browserify": "^1.0.1" } }, "sha512-Wf29UqxWDpc+i61k3oIOzcUfQt79PIT9y/MWfAGlrkjg6lBC1hwDECLXPVJAhWjiGbfBCxZd65F/LIZF3+jeJQ=="], + "@turbo/darwin-64": ["@turbo/darwin-64@2.9.14", "", { "os": "darwin", "cpu": "x64" }, "sha512-t7QiPflaEyBE4oayeZtSmu4mEfjgIrcNlNNl1z1dmIVPqEdtA7+CfTf8d7KXsOGPh6aNgWjKxyvQg9uGfDQF+A=="], + + "@turbo/darwin-arm64": ["@turbo/darwin-arm64@2.9.14", "", { "os": "darwin", "cpu": "arm64" }, "sha512-d23147mC9BsCPA9mJ0h/ubcpbRgcJBXbcG3+Vq7YLhjz3IXuvQsJ1UXH8f4MD76ZjJ4m/E4aRdJV+MW88CDfbw=="], + + "@turbo/linux-64": ["@turbo/linux-64@2.9.14", "", { "os": "linux", "cpu": "x64" }, "sha512-P3ZKB5tuUDdDQWuAsACGUR1qv9W7BNWxdxqVJ0kZNuNNPRaVYTPPikLcp79+GiEcW3npsR+KyP38lnQiBc5aSA=="], + + "@turbo/linux-arm64": ["@turbo/linux-arm64@2.9.14", "", { "os": "linux", "cpu": "arm64" }, "sha512-ZRTlzcUMrrPv9ZuDzRF9n60Ym13bKeG9jDB8WjxyLhWNzV+AJQN+zdpIk3NJYf2zQsGUm1mNar2P0elRzLw25g=="], + + "@turbo/windows-64": ["@turbo/windows-64@2.9.14", "", { "os": "win32", "cpu": "x64" }, "sha512-exanwN6sIduZwykYeiTQj8kCmOhazP5WOz3bvXMcYtjhL6Z3iRWLewKrXCBq0bqwSP3iBMb/AerRCnHI4lx46A=="], + + "@turbo/windows-arm64": ["@turbo/windows-arm64@2.9.14", "", { "os": "win32", "cpu": "arm64" }, "sha512-fVdCsnmYoKICsycbWuuGp6Jvi51/3G/UluFWuAUCvR8PIW5IJkAk5BM9UF8PSm0Q2IphWHFZjYEgjHsh3B9y/g=="], + "@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="], "@types/aria-query": ["@types/aria-query@5.0.4", "", {}, "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw=="], @@ -2415,19 +2426,7 @@ "tsyringe": ["tsyringe@4.10.0", "", { "dependencies": { "tslib": "^1.9.3" } }, "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw=="], - "turbo": ["turbo@2.8.12", "", { "optionalDependencies": { "turbo-darwin-64": "2.8.12", "turbo-darwin-arm64": "2.8.12", "turbo-linux-64": "2.8.12", "turbo-linux-arm64": "2.8.12", "turbo-windows-64": "2.8.12", "turbo-windows-arm64": "2.8.12" }, "bin": { "turbo": "bin/turbo" } }, "sha512-auUAMLmi0eJhxDhQrxzvuhfEbICnVt0CTiYQYY8WyRJ5nwCDZxD0JG8bCSxT4nusI2CwJzmZAay5BfF6LmK7Hw=="], - - "turbo-darwin-64": ["turbo-darwin-64@2.8.12", "", { "os": "darwin", "cpu": "x64" }, "sha512-EiHJmW2MeQQx+21x8hjMHw/uPhXt9PIxvDrxzOtyVwrXzL0tQmsxtO4qHf2l7uA+K6PUJ4+TjY1MHZDuCvWXrw=="], - - "turbo-darwin-arm64": ["turbo-darwin-arm64@2.8.12", "", { "os": "darwin", "cpu": "arm64" }, "sha512-cbqqGN0vd7ly2TeuaM8k9AK9u1CABO4kBA5KPSqovTiLL3sORccn/mZzJSbvQf0EsYRfU34MgW5FotfwW3kx8Q=="], - - "turbo-linux-64": ["turbo-linux-64@2.8.12", "", { "os": "linux", "cpu": "x64" }, "sha512-jXKw9j4r4q6s0goSXuKI3aKbQK2qiNeP25lGGEnq018TM6SWRW1CCpPMxyG91aCKrub7wDm/K45sGNT4ZFBcFQ=="], - - "turbo-linux-arm64": ["turbo-linux-arm64@2.8.12", "", { "os": "linux", "cpu": "arm64" }, "sha512-BRJCMdyXjyBoL0GYpvj9d2WNfMHwc3tKmJG5ATn2Efvil9LsiOsd/93/NxDqW0jACtHFNVOPnd/CBwXRPiRbwA=="], - - "turbo-windows-64": ["turbo-windows-64@2.8.12", "", { "os": "win32", "cpu": "x64" }, "sha512-vyFOlpFFzQFkikvSVhVkESEfzIopgs2J7J1rYvtSwSHQ4zmHxkC95Q8Kjkus8gg+8X2mZyP1GS5jirmaypGiPw=="], - - "turbo-windows-arm64": ["turbo-windows-arm64@2.8.12", "", { "os": "win32", "cpu": "arm64" }, "sha512-9nRnlw5DF0LkJClkIws1evaIF36dmmMEO84J5Uj4oQ8C0QTHwlH7DNe5Kq2Jdmu8GXESCNDNuUYG8Cx6W/vm3g=="], + "turbo": ["turbo@2.9.14", "", { "optionalDependencies": { "@turbo/darwin-64": "2.9.14", "@turbo/darwin-arm64": "2.9.14", "@turbo/linux-64": "2.9.14", "@turbo/linux-arm64": "2.9.14", "@turbo/windows-64": "2.9.14", "@turbo/windows-arm64": "2.9.14" }, "bin": { "turbo": "bin/turbo" } }, "sha512-BQqXRr4UoWI3UPFrtznCLykYHxwxWh53iCB57x092jPMjIlW1wnm3N895g5irpiXmnxUhREBB0n6+y8BHhs4nw=="], "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="], diff --git a/package.json b/package.json index f6a6a4f..f0a1a07 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ "lefthook": "^2.1.1", "oxfmt": "^0.35.0", "oxlint": "^1.50.0", - "turbo": "^2.6.3", + "turbo": "^2.9.14", "typescript": "catalog:", "web": "workspace:*" },