@vibes.diy/prompts 14.3.35 → 14.3.36

package/llms/voxel.draft.md

@@ -0,0 +1,244 @@
+# Voxel worlds — the first draft: a viewport that plays
+
+A voxel app's first draft is a full-screen 3D viewport with a block world you
+can fly through and look around, drawn the fast way, with the HUD floating over
+it. Placing and breaking blocks, walking with collision, endless terrain,
+saving edits and sharing the world are the next pass. What the draft owes that
+pass is the right skeleton: the world lives in a flat `Map`, the terrain is
+drawn as one `InstancedMesh`, and the engine is built once inside an effect —
+so the next pass adds to this file rather than rewriting it.
+
+Unlike the page-shaped draft above, a world does not flow down the page: the
+viewport is `fixed inset-0` and the controls sit on top of it.
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useRef, useState } from "react";
+import { useFireproof } from "use-fireproof";
+import * as THREE from "three";
+import { Button, Card, CardHeader, CardTitle, CardContent } from "@vibes.diy/look";
+
+// The block-in-hand palette (shared by materials and HUD swatches).
+const VOXEL_PALETTE = {
+  grass: "#6fcf5b", dirt: "#8a5a3b", stone: "#9b9b9b", wood: "#b5793a", glass: "#9fe3ff", candy: "#ff6fb1",
+  neon: "#39ff9e", water: "#2f8fe0", lava: "#ff5a2f", erase: "#ff4d6d", ink: "#1a1325", light: "#ffffff",
+};
+const HOTBAR = ["grass", "dirt", "stone", "wood"];
+const GAME_KEYS = new Set(["KeyW", "KeyA", "KeyS", "KeyD", "KeyC", "Space", "ShiftLeft"]);
+const SIZE = 24; // half-width of the starting island, in blocks
+const SEED = 7;
+
+const keyOf = (x, y, z) => `${x}|${y}|${z}`;
+const heightAt = (x, z) => Math.round(Math.sin((x + SEED) * 0.18) * 2 + Math.cos((z - SEED) * 0.15) * 2 + Math.sin((x + z) * 0.06) * 3) + 5;
+
+// The world model: every block, buried or not. Collision and picking read this, never the scene.
+function buildBlocks() {
+  const blocks = new Map();
+  for (let x = -SIZE; x <= SIZE; x++)
+    for (let z = -SIZE; z <= SIZE; z++) {
+      const h = heightAt(x, z);
+      for (let y = 0; y <= h; y++) blocks.set(keyOf(x, y, z), y === h ? "grass" : y > h - 3 ? "dirt" : "stone");
+    }
+  return blocks;
+}
+
+const NB = [[1, 0, 0], [-1, 0, 0], [0, 1, 0], [0, -1, 0], [0, 0, 1], [0, 0, -1]];
+const isHidden = (blocks, x, y, z) => NB.every(([dx, dy, dz]) => blocks.has(keyOf(x + dx, y + dy, z + dz)));
+
+// One shared cube, one shared material, one draw call: the exposed blocks as instances with a color each.
+const CUBE = new THREE.BoxGeometry(1, 1, 1);
+const WORLD_MAT = new THREE.MeshLambertMaterial({ color: 0xffffff });
+function buildWorldMesh(blocks) {
+  const visible = [];
+  for (const [k, type] of blocks) {
+    const [x, y, z] = k.split("|").map(Number);
+    if (!isHidden(blocks, x, y, z)) visible.push([x, y, z, type]);
+  }
+  const mesh = new THREE.InstancedMesh(CUBE, WORLD_MAT, visible.length);
+  const m = new THREE.Matrix4();
+  const c = new THREE.Color();
+  visible.forEach(([x, y, z, type], i) => {
+    mesh.setMatrixAt(i, m.makeTranslation(x + 0.5, y + 0.5, z + 0.5));
+    mesh.setColorAt(i, c.set(VOXEL_PALETTE[type]));
+  });
+  mesh.instanceMatrix.needsUpdate = true;
+  mesh.instanceColor.needsUpdate = true;
+  return mesh;
+}
+
+export default function App() {
+  const { useLiveQuery } = useFireproof("skyIsland");
+  const { docs: worlds } = useLiveQuery("type", { key: "world" });
+  const world = worlds[0];
+  const mountRef = useRef(null);
+  const engineRef = useRef(null);
+  const [locked, setLocked] = useState(false);
+  const [held, setHeld] = useState(HOTBAR[0]);
+
+  // The engine, built once: renderer, scene, world mesh, input, loop. React only draws the HUD over it.
+  useEffect(() => {
+    const mount = mountRef.current;
+    const renderer = new THREE.WebGLRenderer({ antialias: true });
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+    renderer.setSize(mount.clientWidth, mount.clientHeight);
+    mount.appendChild(renderer.domElement);
+
+    const scene = new THREE.Scene();
+    scene.background = new THREE.Color(0x8ecbff);
+    scene.fog = new THREE.Fog(0x8ecbff, 40, 140);
+    const camera = new THREE.PerspectiveCamera(75, mount.clientWidth / mount.clientHeight, 0.1, 500);
+    scene.add(new THREE.HemisphereLight(0xffffff, 0x8a5a3b, 0.9));
+    const sun = new THREE.DirectionalLight(0xffffff, 1);
+    sun.position.set(30, 60, 20);
+    scene.add(sun);
+
+    const blocks = buildBlocks();
+    const worldMesh = buildWorldMesh(blocks);
+    scene.add(worldMesh);
+
+    const state = { pos: new THREE.Vector3(0, heightAt(0, 0) + 3, 8), yaw: 0, pitch: -0.2, keys: {}, running: true };
+    const canvas = renderer.domElement;
+    const onLock = () => setLocked(document.pointerLockElement === canvas);
+    const onMove = (e) => {
+      if (document.pointerLockElement !== canvas) return;
+      state.yaw -= e.movementX * 0.002;
+      state.pitch = Math.max(-1.5, Math.min(1.5, state.pitch - e.movementY * 0.002));
+    };
+    const onKeyDown = (e) => {
+      if (document.pointerLockElement !== canvas) return; // only while the world holds the mouse
+      if (e.target.isContentEditable || e.target.closest("input, textarea")) return; // typing stays typing
+      if (!GAME_KEYS.has(e.code)) return; // browser shortcuts stay browser shortcuts
+      state.keys[e.code] = true;
+      e.preventDefault(); // Space flies up, never scrolls the page
+    };
+    const onKeyUp = (e) => {
+      state.keys[e.code] = false;
+    };
+    const onBlur = () => { state.keys = {}; };
+    const onResize = () => {
+      renderer.setSize(mount.clientWidth, mount.clientHeight);
+      camera.aspect = mount.clientWidth / mount.clientHeight;
+      camera.updateProjectionMatrix();
+    };
+    document.addEventListener("pointerlockchange", onLock);
+    document.addEventListener("mousemove", onMove);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", onBlur);
+    window.addEventListener("resize", onResize);
+    engineRef.current = { requestLock: () => canvas.requestPointerLock() };
+
+    const clock = new THREE.Clock();
+    const forward = new THREE.Vector3();
+    const right = new THREE.Vector3();
+    let raf;
+    const loop = () => {
+      if (!state.running) return;
+      const dt = Math.min(clock.getDelta(), 0.05);
+      const speed = (state.keys.ShiftLeft ? 18 : 9) * dt;
+      forward.set(-Math.sin(state.yaw), 0, -Math.cos(state.yaw));
+      right.set(forward.z, 0, -forward.x);
+      if (state.keys.KeyW) state.pos.addScaledVector(forward, speed);
+      if (state.keys.KeyS) state.pos.addScaledVector(forward, -speed);
+      if (state.keys.KeyD) state.pos.addScaledVector(right, speed);
+      if (state.keys.KeyA) state.pos.addScaledVector(right, -speed);
+      if (state.keys.Space) state.pos.y += speed;
+      if (state.keys.KeyC) state.pos.y -= speed;
+      camera.position.copy(state.pos);
+      camera.rotation.set(state.pitch, state.yaw, 0, "YXZ");
+      renderer.render(scene, camera);
+      raf = requestAnimationFrame(loop);
+    };
+    loop();
+
+    return () => {
+      state.running = false;
+      cancelAnimationFrame(raf);
+      document.removeEventListener("pointerlockchange", onLock);
+      document.removeEventListener("mousemove", onMove);
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", onBlur);
+      window.removeEventListener("resize", onResize);
+      worldMesh.dispose();
+      renderer.dispose();
+      mount.removeChild(canvas);
+    };
+  }, []);
+
+  return (
+    <div className="fixed inset-0 select-none touch-none bg-background text-foreground font-sans">
+      <div ref={mountRef} className="absolute inset-0" />
+
+      <div className="absolute left-4 top-4 rounded-lg bg-card/90 px-3 py-2 text-card-foreground shadow-md">
+        <p className="font-bold">{world?.name ?? "Sky Island"}</p>
+        <p className="text-muted-foreground">WASD fly · Space up · C down · Shift fast</p>
+      </div>
+
+      <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-2 rounded-lg bg-card/90 p-2 shadow-md">
+        {HOTBAR.map((type) => (
+          <Button key={type} size="sm" variant={type === held ? "default" : "outline"} onClick={() => setHeld(type)}
+            style={{ backgroundColor: type === held ? VOXEL_PALETTE[type] : undefined }}>
+            {type}
+          </Button>
+        ))}
+      </div>
+      {/* TODO(next pass): place and break the held block with a voxel raycast, walk with gravity and collision, save edits as documents */}
+
+      {!locked && (
+        <button onClick={() => engineRef.current?.requestLock()} className="absolute inset-0 z-20 flex items-center justify-center bg-black/55">
+          <Card className="max-w-sm">
+            <CardHeader>
+              <CardTitle>{world?.name ?? "Sky Island"}</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p>Click to play</p>
+              <p className="mt-2 text-muted-foreground">Mouse looks around. Esc gives the mouse back.</p>
+            </CardContent>
+          </Card>
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+### `seed.json`
+```json
+{
+  "skyIsland": [
+    { "key": "island", "type": "world", "name": "Sky Island", "sky": "clear" }
+  ]
+}
+```
+
+Draft note: the next pass adds placing and breaking blocks, walking with gravity and collision, saved edits per player, and inviting friends into the world.
+
+## What stays the same in a voxel draft
+
+- **The viewport fills the screen**: the outer element is `fixed inset-0
+  select-none touch-none`, the renderer mounts into an `absolute inset-0` div,
+  and every control is an `absolute` layer over it. Never the page-flow `main`
+  with padding from the shape above.
+- **The engine is built once** in `useEffect(() => {...}, [])` with the
+  renderer, scene, world mesh, listeners and loop inside it, `engineRef.current` for the few calls
+  React makes in, and a cleanup that stops the loop, removes every listener
+  and disposes the mesh and renderer. Per-frame values live in the `state`
+  object, never in React state.
+- **`setPixelRatio(Math.min(window.devicePixelRatio, 2))`**, a resize handler
+  that updates the renderer size and the camera aspect, and a `Fog` that
+  matches the sky color.
+- **The world is a flat `Map` keyed `"x|y|z"`**, and it is drawn as ONE
+  `InstancedMesh` of the exposed blocks with one shared `BoxGeometry` and one
+  shared material, the color per instance. Never a `THREE.Mesh` per block, and
+  never a geometry or material created inside the block loop.
+- **Pointer lock comes from a "Click to play" overlay** whose visibility follows
+  the real `pointerlockchange` state, so it returns when the player presses
+  Esc. Mouse look clamps pitch to ±1.5 rad. A keydown calls `preventDefault`
+  only when the canvas holds the lock, the target is not a text field, and the
+  key is in the game's own set; held keys clear on blur.
+- **The palette table** is the Blocktopia voxel palette, in full, named once
+  for both the instance colors and the HUD swatches.
+- **What waits for the next pass** is named in the `TODO(next pass)` comment
+  and the draft note: placing and breaking, collision and gravity, endless
+  terrain, saving edits, sharing. The draft draws none of it.

package/llms/voxel.js

@@ -13,6 +13,7 @@ export const voxelConfig = {
         "minecraft, voxel, block world, sandbox, blocks, mining, building, first-person, 3d game, " +
         "procedural world, chunks, terrain, overworld, creative mode, survival, crafting, nether",
     cues: ["voxel", "voxels", "minecraft", "block world", "blocky", "sandbox game"],
+    draftVariant: true,
     importModule: "three",
     importName: "THREE",
     importType: "namespace",

package/llms/voxel.js.map

@@ -1 +1 @@
-{"version":3,"file":"voxel.js","sourceRoot":"","sources":["../../jsr/llms/voxel.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,WAAW,EACT,yFAAyF;QACzF,6FAA6F;QAC7F,4FAA4F;QAC5F,yFAAyF;QACzF,uFAAuF;QACvF,gGAAgG;QAChG,2FAA2F;QAC3F,yFAAyF;QACzF,6CAA6C;QAC7C,2FAA2F;QAC3F,yFAAyF;IAC3F,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,CAAC;IAC/E,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}
+{"version":3,"file":"voxel.js","sourceRoot":"","sources":["../../jsr/llms/voxel.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAc;IACpC,IAAI,EAAE,OAAO;IACb,KAAK,EAAE,OAAO;IACd,WAAW,EACT,yFAAyF;QACzF,6FAA6F;QAC7F,4FAA4F;QAC5F,yFAAyF;QACzF,uFAAuF;QACvF,gGAAgG;QAChG,2FAA2F;QAC3F,yFAAyF;QACzF,6CAA6C;QAC7C,2FAA2F;QAC3F,yFAAyF;IAC3F,IAAI,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,cAAc,CAAC;IAG/E,YAAY,EAAE,IAAI;IAClB,YAAY,EAAE,OAAO;IACrB,UAAU,EAAE,OAAO;IACnB,UAAU,EAAE,WAAW;CACxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.3.35",
+  "version": "14.3.36",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -37,9 +37,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.3.35",
-    "@vibes.diy/identity": "14.3.35",
-    "@vibes.diy/use-vibes-types": "14.3.35",
+    "@vibes.diy/call-ai-v2": "14.3.36",
+    "@vibes.diy/identity": "14.3.36",
+    "@vibes.diy/use-vibes-types": "14.3.36",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },