jspsych-tangram 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspsych-tangram",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Tangram tasks for jsPsych: prep and construct.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/core/components/board/GameBoard.tsx

@@ -718,15 +718,25 @@ export default function GameBoard(props: GameBoardProps) {
     textAlign: 'center'
   };
 
-  // Timer style (positioned absolutely to not affect centering)
+  // Timer style - positioned absolutely to align right edge with semicircle's right edge
+  // Independent of instructions content
+  const scaleX = svgDimensions.width / viewBox.w;
+  const rightEdgeOfSemicircleLogical = viewBox.w / 2 + layout.outerR;
+  const distanceFromRightEdgeLogical = viewBox.w - rightEdgeOfSemicircleLogical;
+  const distanceFromRightEdgePx = distanceFromRightEdgeLogical * scaleX;
+
+  // Shift left by 5 monospaced characters (monospace is typically 0.6em wide per char)
+  const charWidth = 24 * 0.6; // fontSize * typical monospace char width ratio
+  const offsetLeft = charWidth * 5;
+
   const timerStyle: React.CSSProperties = {
     position: 'absolute',
-    right: 0,
+    right: `${distanceFromRightEdgePx + offsetLeft}px`,
     fontSize: '24px',
     fontWeight: 'bold',
     fontFamily: 'monospace',
     color: '#333',
-    minWidth: '80px',
+    whiteSpace: 'nowrap',
     textAlign: 'right'
   };
 
@@ -797,42 +807,3 @@ export default function GameBoard(props: GameBoardProps) {
     </div>
   );
 }
-
-/**
- * Hook for managing GameBoard state externally
- * Useful for plugins that need direct access to game state
- */
-export function useGameBoard(config: GameBoardConfig) {
-  const controller = React.useMemo(() => {
-    const gameConfig = {
-      n: config.sectors.length,
-      layout: config.layout,
-      target: config.target,
-      input: config.input,
-      timeLimitMs: config.timeLimitMs,
-      maxQuickstashSlots: config.maxQuickstashSlots,
-      ...(config.maxCompositeSize !== undefined && { maxCompositeSize: config.maxCompositeSize }),
-      mode: config.mode || "construction",
-      ...(config.minPiecesPerMacro !== undefined && { minPiecesPerMacro: config.minPiecesPerMacro }),
-      ...(config.requireAllSlots !== undefined && { requireAllSlots: config.requireAllSlots })
-    };
-
-    return new BaseGameController(
-      config.sectors,
-      config.quickstash,
-      config.primitives,
-      gameConfig
-    );
-  }, [config]);
-
-  const snapshot = React.useMemo(() =>
-    controller.snapshot(),
-    [controller.updateCount]
-  );
-
-  return {
-    controller,
-    snapshot,
-    isComplete: !!controller.state.endedAt
-  };
-}

package/src/core/components/board/useGameBoard.ts

@@ -0,0 +1,52 @@
+/**
+ * Hook for managing GameBoard state externally
+ *
+ * This hook provides external access to the GameBoard's internal state
+ * management, useful for plugins that need to track or control game state
+ * directly without rendering the full GameBoard component.
+ *
+ * REQUIRES: config contains valid GameBoardConfig properties
+ * EFFECTS: Creates and manages a BaseGameController instance
+ *
+ * @param config - GameBoard configuration object
+ * @returns Object containing controller, snapshot, and completion status
+ */
+
+import React from "react";
+import { BaseGameController } from "@/core/engine/state/BaseGameController";
+import type { GameBoardConfig } from "./GameBoard";
+
+export function useGameBoard(config: GameBoardConfig) {
+  const controller = React.useMemo(() => {
+    const gameConfig = {
+      n: config.sectors.length,
+      layout: config.layout,
+      target: config.target,
+      input: config.input,
+      timeLimitMs: config.timeLimitMs,
+      maxQuickstashSlots: config.maxQuickstashSlots,
+      ...(config.maxCompositeSize !== undefined && { maxCompositeSize: config.maxCompositeSize }),
+      mode: config.mode || "construction",
+      ...(config.minPiecesPerMacro !== undefined && { minPiecesPerMacro: config.minPiecesPerMacro }),
+      ...(config.requireAllSlots !== undefined && { requireAllSlots: config.requireAllSlots })
+    };
+
+    return new BaseGameController(
+      config.sectors,
+      config.quickstash,
+      config.primitives,
+      gameConfig
+    );
+  }, [config]);
+
+  const snapshot = React.useMemo(() =>
+    controller.snapshot(),
+    [controller.updateCount]
+  );
+
+  return {
+    controller,
+    snapshot,
+    isComplete: !!controller.state.endedAt
+  };
+}

package/src/core/components/index.ts

@@ -6,11 +6,13 @@
  */
 
 // Core game board component
-export { default as GameBoard, useGameBoard } from './board/GameBoard';
+export { default as GameBoard } from './board/GameBoard';
+export { useGameBoard } from './board/useGameBoard';
 export type { GameBoardConfig, GameBoardProps } from './board/GameBoard';
 
 // Blueprint ring component for plugin UI
-export { default as BlueprintRing, useBlueprintRing } from './pieces/BlueprintRing';
+export { default as BlueprintRing } from './pieces/BlueprintRing';
+export { useBlueprintRing } from './pieces/useBlueprintRing';
 export type { BlueprintRingProps } from './pieces/BlueprintRing';
 
 // Legacy Board components (deprecated - use GameBoard instead)

package/src/core/components/pieces/BlueprintRing.tsx

@@ -268,29 +268,4 @@ export default function BlueprintRing(props: BlueprintRingProps) {
       })}
     </g>
   );
-}
-
-/**
- * Hook for managing blueprint ring state
- * Useful for components that need more control over blueprint ring behavior
- */
-export function useBlueprintRing(
-  primitives: PrimitiveBlueprint[],
-  quickstash: Blueprint[],
-  initialView: "primitives" | "quickstash" = "quickstash"
-) {
-  const [currentView, setCurrentView] = React.useState<"primitives" | "quickstash">(initialView);
-
-  const switchView = React.useCallback(() => {
-    setCurrentView(prev => prev === "primitives" ? "quickstash" : "primitives");
-  }, []);
-
-  const blueprints = currentView === "primitives" ? primitives : quickstash;
-
-  return {
-    currentView,
-    blueprints,
-    switchView,
-    setCurrentView
-  };
 }

package/src/core/components/pieces/useBlueprintRing.ts

@@ -0,0 +1,39 @@
+/**
+ * Hook for managing BlueprintRing state externally
+ *
+ * This hook manages the state for switching between primitives and quickstash
+ * views in the blueprint ring. Useful for components that need more control
+ * over blueprint ring behavior.
+ *
+ * REQUIRES: primitives and quickstash are valid arrays of blueprints
+ * EFFECTS: Manages view state and provides toggle functionality
+ *
+ * @param primitives - Array of primitive piece blueprints
+ * @param quickstash - Array of quickstash macro blueprints
+ * @param initialView - Initial view to display (defaults to "quickstash")
+ * @returns Object with current view, blueprints, and control functions
+ */
+
+import React from "react";
+import type { Blueprint, PrimitiveBlueprint } from "@/core/domain/types";
+
+export function useBlueprintRing(
+  primitives: PrimitiveBlueprint[],
+  quickstash: Blueprint[],
+  initialView: "primitives" | "quickstash" = "quickstash"
+) {
+  const [currentView, setCurrentView] = React.useState<"primitives" | "quickstash">(initialView);
+
+  const switchView = React.useCallback(() => {
+    setCurrentView(prev => prev === "primitives" ? "quickstash" : "primitives");
+  }, []);
+
+  const blueprints = currentView === "primitives" ? primitives : quickstash;
+
+  return {
+    currentView,
+    blueprints,
+    switchView,
+    setCurrentView
+  };
+}

package/src/plugins/tangram-nback/NBackApp.tsx

@@ -315,7 +315,7 @@ function NBackView({ params }: NBackViewProps) {
       alignItems: "center",
       justifyContent: "center",
       padding: "20px",
-      background: "#f5f5f5"
+      background: "#fff7e0ff"
     }}>
       {/* Instructions */}
       {instructions && (