castle-web-cli 0.4.74 → 0.4.75

package/dist/commonInstructions.d.ts

@@ -1 +1 @@
-export declare const COMMON_INSTRUCTIONS = "## Touch controls (every deck)\n\n- **Build for touch from the start.** Every deck must be fully playable on a touchscreen with no physical keyboard \u2014 design the touch controls first, not as an afterthought. Keyboard input is still fine on top, for shortcuts or typing. A touch control that only mirrors keys (e.g. a d-pad over the arrow keys) may hide itself when a hardware keyboard is present. Use good judgement.\n";
+export declare const COMMON_INSTRUCTIONS = "## Touch controls (every deck)\n\n- **Playable on a touchscreen, with only the controls the game actually needs.** Castle decks are played on phones, so whatever input a game does use must work by touch \u2014 direct tap/drag on the game itself wherever possible, and on-screen buttons only where the mechanics genuinely call for them. Do NOT add controls a game doesn't need: never drop in a generic d-pad or movement overlay by default. Prefer touching the game directly over an overlay that just mirrors keyboard keys. Keyboard input is fine to support on top for desktop play. Match the controls to the actual mechanics \u2014 a game with no directional movement should have no movement controls at all.\n";

package/dist/commonInstructions.js

@@ -4,5 +4,5 @@
 // (e.g. Space being reserved for play/stop) live in each kit's own CLAUDE.md.
 export const COMMON_INSTRUCTIONS = `## Touch controls (every deck)
 
-- **Build for touch from the start.** Every deck must be fully playable on a touchscreen with no physical keyboard — design the touch controls first, not as an afterthought. Keyboard input is still fine on top, for shortcuts or typing. A touch control that only mirrors keys (e.g. a d-pad over the arrow keys) may hide itself when a hardware keyboard is present. Use good judgement.
+- **Playable on a touchscreen, with only the controls the game actually needs.** Castle decks are played on phones, so whatever input a game does use must work by touch — direct tap/drag on the game itself wherever possible, and on-screen buttons only where the mechanics genuinely call for them. Do NOT add controls a game doesn't need: never drop in a generic d-pad or movement overlay by default. Prefer touching the game directly over an overlay that just mirrors keyboard keys. Keyboard input is fine to support on top for desktop play. Match the controls to the actual mechanics — a game with no directional movement should have no movement controls at all.
 `;

package/kits/basic-2d/CLAUDE.md

@@ -144,7 +144,7 @@ if (scene.keys.has('KeyX')) /* launch ball */ ;
 
 **Space is reserved** — the editor binds it to the play/stop toggle, so don't bind Space to a gameplay action (jump / shoot / launch / ...). Use arrows, WASD, letter keys, or on-screen buttons instead.
 
-For HUD text use a behavior's `ui` hook (returns React); for in-world text or shapes, draw with `ctx` from `draw`. The deck has TouchControls overlay support out of the box for mobile play (arrow keys + a button); no setup needed.
+For HUD text use a behavior's `ui` hook (returns React); for in-world text or shapes, draw with `ctx` from `draw`.
 
 ## Common breakout-shaped recipe (sketch)
 

package/kits/basic-2d/editors/SceneEditor.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { renderSpriteFrame } from '../engine/pxart';
 import { basename, formatJson, parseJsonFile } from '../engine/files';
-import { TouchControls } from '../engine/TouchControls';
 import {
   addActor,
   arrangeActors,
@@ -90,7 +89,6 @@ export function SceneEditor({
   const showMulti = selectedActorIds.length > 1 || multiSelectMode;
   const inspectorSheet = useSelectionInspectorSheet(true);
   const { value: sceneData, error } = parseJsonFile(path, text);
-  const getRuntimeKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
   const getRuntime = useCallback(() => runtimeRef.current, []);
   useScenePlayLoop({
     sceneData,
@@ -288,7 +286,6 @@ export function SceneEditor({
           </aside>
         </div>
       </EditorBody>
-      <TouchControls getKeys={getRuntimeKeys} visible={isPlaying} />
     </>
   );
 }

package/kits/basic-2d/engine/ScenePlayer.jsx

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { configureSceneCanvas, makeScene } from './scene';
 import { SceneUI } from './SceneUI';
-import { TouchControls } from './TouchControls';
 import { cx, Icon, styles } from './ui';
 import { usePlayLogs } from './playConsole';
 // Engine-level scene player: mount a `SceneRuntime` against a canvas, wire
@@ -15,7 +14,6 @@ export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame
   // Bumping this re-runs the mount effect below, which tears down the running
   // loop/runtime and rebuilds a fresh scene from the same data -- a clean restart.
   const [runToken, setRunToken] = useState(0);
-  const getKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
   const getRuntime = useCallback(() => runtimeRef.current, []);
   const restart = useCallback(() => setRunToken((token) => token + 1), []);
   useEffect(() => {
@@ -87,7 +85,6 @@ export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame
           style={{ width: '100%', height: '100%', display: 'block', outline: 'none' }}
         />
         <SceneUI getRuntime={getRuntime} />
-        <TouchControls getKeys={getKeys} />
       </div>
       {/* Portal to <body> so the console drawer escapes the SDK's card-sized,
           transformed `#root > *` wrapper and pins to the panel, outside the

package/kits/basic-2d/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+allowBuilds:
+  '@fortawesome/fontawesome-common-types': set this to true or false
+  '@fortawesome/free-solid-svg-icons': set this to true or false

package/kits/basic-3d/CLAUDE.md

@@ -142,7 +142,7 @@ if (scene.keys.has('KeyJ')) /* jump */ ;
 
 **Space is reserved** — the editor binds it to the play/stop toggle, so don't bind Space to a gameplay action (jump / shoot / launch / ...). Use arrows, WASD, letter keys, or on-screen buttons instead.
 
-For HUD text use a behavior's `ui` hook (returns React, 500x700 design space); for in-world visuals, use Mesh/Model components or a custom `sync`. The deck has TouchControls overlay support out of the box for mobile play (arrow keys d-pad); no setup needed.
+For HUD text use a behavior's `ui` hook (returns React, 500x700 design space); for in-world visuals, use Mesh/Model components or a custom `sync`.
 
 ## Common exploration-shaped recipe (sketch)
 

package/kits/basic-3d/editors/SceneEditor.jsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import * as THREE from 'three';
 import { basename, formatJson, parseJsonFile } from '../engine/files';
-import { TouchControls } from '../engine/TouchControls';
 import {
   addActor,
   defaultCameraSpec,
@@ -83,10 +82,6 @@ export function SceneEditor({
     applyScene,
     recordSnapshot: history.recordSnapshot,
   });
-  const getRuntimeKeys = useCallback(
-    () => viewport.playRuntimeRef.current?.keys ?? null,
-    [viewport.playRuntimeRef]
-  );
   const getPlayRuntime = useCallback(
     () => viewport.playRuntimeRef.current,
     [viewport.playRuntimeRef]
@@ -240,7 +235,6 @@ export function SceneEditor({
           </aside>
         </div>
       </EditorBody>
-      <TouchControls getKeys={getRuntimeKeys} visible={isPlaying} />
     </>
   );
 }

package/kits/basic-3d/engine/ScenePlayer.jsx

@@ -4,7 +4,6 @@ import { makeScene, defaultCameraSpec } from './scene';
 import { applyCameraSpec, fitRendererToCanvas } from './threeUtil';
 import { attachSceneKeys, makePlayPointerHandlers, ThreeCanvas } from './SceneViewport';
 import { SceneUI } from './SceneUI';
-import { TouchControls } from './TouchControls';
 // Engine-level scene player: mount a `SceneRuntime` against a WebGL canvas,
 // wire keyboard / pointer input, run the update+sync+render loop, and render
 // the behavior-driven UI overlay. No game logic lives here -- behaviors and
@@ -13,7 +12,6 @@ export function ScenePlayer({ sceneData, models, behaviorClasses, onFirstFrame }
   const runtimeRef = useRef(null);
   const cameraRef = useRef(null);
   const firstFrameRef = useRef(false);
-  const getKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
   const getRuntime = useCallback(() => runtimeRef.current, []);
   const pointerHandlers = useMemo(() => makePlayPointerHandlers(getRuntime), [getRuntime]);
   useEffect(() => {
@@ -55,7 +53,6 @@ export function ScenePlayer({ sceneData, models, behaviorClasses, onFirstFrame }
         {...pointerHandlers}
       />
       <SceneUI getRuntime={getRuntime} />
-      <TouchControls getKeys={getKeys} />
     </div>
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.74",
+  "version": "0.4.75",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"

package/kits/basic-2d/engine/TouchControls.jsx

@@ -1,136 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-// On-screen movement controls: a 4-way d-pad feeds arrow keys onto
-// `scene.keys` -- the exact same keyboard keys behaviors consume, no separate
-// input path.
-const KEYS = {
-  up: 'ArrowUp',
-  down: 'ArrowDown',
-  left: 'ArrowLeft',
-  right: 'ArrowRight',
-};
-export function TouchControls({ getKeys, visible = true }) {
-  const [isTouch, setIsTouch] = useState(false);
-  const heldRef = useRef(new Set());
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const override = params.get('touch');
-    if (override === '1' || override === 'true') {
-      setIsTouch(true);
-      return undefined;
-    }
-    if (override === '0' || override === 'false') {
-      setIsTouch(false);
-      return undefined;
-    }
-    const mq = window.matchMedia('(pointer: coarse)');
-    const update = () => {
-      setIsTouch(mq.matches || 'ontouchstart' in window || navigator.maxTouchPoints > 0);
-    };
-    update();
-    mq.addEventListener?.('change', update);
-    return () => mq.removeEventListener?.('change', update);
-  }, []);
-  const release = useCallback(
-    (id) => {
-      if (!heldRef.current.has(id)) return;
-      heldRef.current.delete(id);
-      getKeys()?.delete(KEYS[id]);
-    },
-    [getKeys]
-  );
-  useEffect(() => {
-    if (!visible || !isTouch) {
-      // Drop any keys we were holding when controls hide.
-      const keys = getKeys();
-      if (keys) for (const id of heldRef.current) keys.delete(KEYS[id]);
-      heldRef.current.clear();
-    }
-  }, [visible, isTouch, getKeys]);
-  if (!visible || !isTouch) return null;
-  const press = (id) => {
-    heldRef.current.add(id);
-    getKeys()?.add(KEYS[id]);
-  };
-  const button = (id, label, extra) => (
-    <button
-      key={id}
-      type="button"
-      tabIndex={-1}
-      aria-label={id}
-      onTouchStart={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onTouchEnd={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onTouchCancel={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onMouseUp={() => release(id)}
-      onMouseLeave={() => release(id)}
-      onContextMenu={(event) => event.preventDefault()}
-      style={{ ...buttonStyle, ...extra }}>
-      {label}
-    </button>
-  );
-  return (
-    <div style={containerStyle}>
-      <div style={dpadStyle}>
-        {button('up', '▲', dpadUpStyle)}
-        {button('left', '◀', dpadLeftStyle)}
-        {button('right', '▶', dpadRightStyle)}
-        {button('down', '▼', dpadDownStyle)}
-      </div>
-    </div>
-  );
-}
-const containerStyle = {
-  position: 'fixed',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'flex-end',
-  padding: '12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px)',
-  pointerEvents: 'none',
-  zIndex: 50,
-};
-// 3x3 grid -- the d-pad arms occupy the cross cells, corners stay empty.
-const dpadStyle = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 64px)',
-  gridTemplateRows: 'repeat(3, 64px)',
-  gap: 6,
-  pointerEvents: 'auto',
-};
-const dpadUpStyle = { gridColumn: 2, gridRow: 1 };
-const dpadLeftStyle = { gridColumn: 1, gridRow: 2 };
-const dpadRightStyle = { gridColumn: 3, gridRow: 2 };
-const dpadDownStyle = { gridColumn: 2, gridRow: 3 };
-const buttonStyle = {
-  width: 64,
-  height: 64,
-  borderRadius: 12,
-  border: '1px solid rgba(255, 255, 255, 0.35)',
-  background: 'rgba(0, 0, 0, 0.35)',
-  color: 'rgba(255, 255, 255, 0.92)',
-  fontSize: 24,
-  fontWeight: 600,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  WebkitTouchCallout: 'none',
-  WebkitTapHighlightColor: 'transparent',
-  touchAction: 'none',
-  cursor: 'pointer',
-};

package/kits/basic-3d/engine/TouchControls.jsx

@@ -1,136 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-// On-screen movement controls: a 4-way d-pad feeds arrow keys onto
-// `scene.keys` -- the exact same keyboard keys behaviors consume, no separate
-// input path.
-const KEYS = {
-  up: 'ArrowUp',
-  down: 'ArrowDown',
-  left: 'ArrowLeft',
-  right: 'ArrowRight',
-};
-export function TouchControls({ getKeys, visible = true }) {
-  const [isTouch, setIsTouch] = useState(false);
-  const heldRef = useRef(new Set());
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const override = params.get('touch');
-    if (override === '1' || override === 'true') {
-      setIsTouch(true);
-      return undefined;
-    }
-    if (override === '0' || override === 'false') {
-      setIsTouch(false);
-      return undefined;
-    }
-    const mq = window.matchMedia('(pointer: coarse)');
-    const update = () => {
-      setIsTouch(mq.matches || 'ontouchstart' in window || navigator.maxTouchPoints > 0);
-    };
-    update();
-    mq.addEventListener?.('change', update);
-    return () => mq.removeEventListener?.('change', update);
-  }, []);
-  const release = useCallback(
-    (id) => {
-      if (!heldRef.current.has(id)) return;
-      heldRef.current.delete(id);
-      getKeys()?.delete(KEYS[id]);
-    },
-    [getKeys]
-  );
-  useEffect(() => {
-    if (!visible || !isTouch) {
-      // Drop any keys we were holding when controls hide.
-      const keys = getKeys();
-      if (keys) for (const id of heldRef.current) keys.delete(KEYS[id]);
-      heldRef.current.clear();
-    }
-  }, [visible, isTouch, getKeys]);
-  if (!visible || !isTouch) return null;
-  const press = (id) => {
-    heldRef.current.add(id);
-    getKeys()?.add(KEYS[id]);
-  };
-  const button = (id, label, extra) => (
-    <button
-      key={id}
-      type="button"
-      tabIndex={-1}
-      aria-label={id}
-      onTouchStart={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onTouchEnd={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onTouchCancel={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onMouseUp={() => release(id)}
-      onMouseLeave={() => release(id)}
-      onContextMenu={(event) => event.preventDefault()}
-      style={{ ...buttonStyle, ...extra }}>
-      {label}
-    </button>
-  );
-  return (
-    <div style={containerStyle}>
-      <div style={dpadStyle}>
-        {button('up', '▲', dpadUpStyle)}
-        {button('left', '◀', dpadLeftStyle)}
-        {button('right', '▶', dpadRightStyle)}
-        {button('down', '▼', dpadDownStyle)}
-      </div>
-    </div>
-  );
-}
-const containerStyle = {
-  position: 'fixed',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'flex-end',
-  padding: '12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px)',
-  pointerEvents: 'none',
-  zIndex: 50,
-};
-// 3x3 grid -- the d-pad arms occupy the cross cells, corners stay empty.
-const dpadStyle = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 64px)',
-  gridTemplateRows: 'repeat(3, 64px)',
-  gap: 6,
-  pointerEvents: 'auto',
-};
-const dpadUpStyle = { gridColumn: 2, gridRow: 1 };
-const dpadLeftStyle = { gridColumn: 1, gridRow: 2 };
-const dpadRightStyle = { gridColumn: 3, gridRow: 2 };
-const dpadDownStyle = { gridColumn: 2, gridRow: 3 };
-const buttonStyle = {
-  width: 64,
-  height: 64,
-  borderRadius: 12,
-  border: '1px solid rgba(255, 255, 255, 0.35)',
-  background: 'rgba(0, 0, 0, 0.35)',
-  color: 'rgba(255, 255, 255, 0.92)',
-  fontSize: 24,
-  fontWeight: 600,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  WebkitTouchCallout: 'none',
-  WebkitTapHighlightColor: 'transparent',
-  touchAction: 'none',
-  cursor: 'pointer',
-};