jspsych-tangram 0.0.4 → 0.0.6

package/package.json

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

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

@@ -357,8 +357,11 @@ export default function GameBoard(props: GameBoardProps) {
         setGameCompleted(true);
 
         // Finalize trial data tracking (which calls onTrialEnd)
+        // Defer to avoid unmounting React while still in commit phase
         if (tracker) {
-          tracker.finalizeTrial('auto_complete');
+          setTimeout(() => {
+            tracker.finalizeTrial('auto_complete');
+          }, 0);
         }
       }
     };

package/src/core/engine/state/BaseGameController.ts

@@ -196,7 +196,6 @@ export class BaseGameController {
     const allDone = Object.values(this.state.sectors).every((s: SectorState) => !!s.completedAt);
     if (allDone && !this.state.endedAt) {
       this.state.endedAt = NOW();
-      console.log("[BaseGameController] all sectors complete");
     }
   }
 

package/src/plugins/tangram-construct/ConstructionApp.tsx

@@ -25,6 +25,7 @@ import { CONFIG } from "../../core/config/config";
 export interface StartConstructionTrialParams {
   tangrams: any[];
   quickstash_macros?: Blueprint[] | AnchorComposite[];
+  primitiveOrder: string[];
   target?: PlacementTarget;
   input?: InputMode;
   layout?: LayoutMode;
@@ -57,43 +58,28 @@ export function startConstructionTrial(
     "largetriangle",
   ]);
 
-  // Convert JSON plugin parameters to internal Sector[] format
-  console.log('[ConstructionApp] Starting tangram conversion...');
-  console.log('[ConstructionApp] Received tangrams:', params.tangrams);
-  console.log('[ConstructionApp] Number of tangrams:', params.tangrams.length);
-
-  const sectors: Sector[] = params.tangrams.map((tangramSpec, index) => {
-    console.log(`\n[ConstructionApp] Processing tangram ${index}:`, tangramSpec);
-    console.log(`[ConstructionApp] tangramID: ${tangramSpec.tangramID}`);
-    console.log(`[ConstructionApp] setLabel: ${tangramSpec.setLabel}`);
-    console.log(`[ConstructionApp] solutionTans count: ${tangramSpec.solutionTans?.length}`);
-    console.log(`[ConstructionApp] solutionTans:`, tangramSpec.solutionTans);
+  // make copy of PRIMITIVE_BLUEPRINTS sorted by primitiveOrder
+  const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => params.primitiveOrder.indexOf(a.kind) - params.primitiveOrder.indexOf(b.kind));
 
+  // Convert JSON plugin parameters to internal Sector[] format
+    const sectors: Sector[] = params.tangrams.map((tangramSpec, index) => {
+  
     // Filter to canonical pieces only and convert vertices to polygon format
     const filteredTans = tangramSpec.solutionTans.filter((tan: any) => {
       // Support both "name" and "kind" fields (different JSON formats)
       const tanName = tan.name ?? tan.kind;
       const isCanonical = CANON.has(tanName);
-      console.log(`[ConstructionApp]   Tan "${tanName}": canonical=${isCanonical}, vertices count=${tan.vertices?.length}`);
       return isCanonical;
     });
 
-    console.log(`[ConstructionApp] Filtered to ${filteredTans.length} canonical pieces`);
-
     const mask = filteredTans.map((tan: any, tanIndex: number) => {
-      const tanName = tan.name ?? tan.kind;
       const polygon = tan.vertices.map(([x, y]: number[]) => ({ x: x ?? 0, y: -(y ?? 0) }));
-      console.log(`[ConstructionApp]   Polygon ${tanIndex} (${tanName}): ${tan.vertices.length} vertices -> ${polygon.length} points`);
-      console.log(`[ConstructionApp]     First vertex: [${tan.vertices[0]?.[0]}, ${tan.vertices[0]?.[1]}] -> {x: ${polygon[0]?.x}, y: ${polygon[0]?.y}}`);
       return polygon;
     });
 
     // Assign sector ID from alphabetical sequence
     const sectorId = `sector${index}`;
     
-    console.log(`[ConstructionApp] Assigned sector ID: ${sectorId}`);
-    console.log(`[ConstructionApp] Final mask has ${mask.length} polygons`);
-
     const sector = {
       id: sectorId,
       tangramId: tangramSpec.tangramID,
@@ -103,76 +89,50 @@ export function startConstructionTrial(
       },
     };
 
-    console.log(`[ConstructionApp] Created sector:`, sector);
     return sector;
   });
 
-  console.log('\n[ConstructionApp] Final sectors array:', sectors);
-  console.log(`[ConstructionApp] Total sectors created: ${sectors.length}`);
-
   // Convert quickstash_macros to Blueprint[] format
   // Handle both anchor-based composites and pre-converted blueprints
-  console.log('\n[ConstructionApp] Processing quickstash macros...');
-  console.log('[ConstructionApp] quickstash_macros:', params.quickstash_macros);
-  console.log('[ConstructionApp] quickstash_macros count:', params.quickstash_macros?.length ?? 0);
-
   let quickstash: Blueprint[] = [];
 
   if (params.quickstash_macros && params.quickstash_macros.length > 0) {
     // Check if the first item has anchorOffset (anchor-based) or offset (pixel-based)
     const firstMacro = params.quickstash_macros[0];
-    console.log('[ConstructionApp] First macro:', firstMacro);
     if (firstMacro && 'parts' in firstMacro && firstMacro.parts && firstMacro.parts[0] && 'anchorOffset' in firstMacro.parts[0]) {
-      console.log('[ConstructionApp] Detected anchor-based composites, converting to pixels...');
 
       // Create primitive map for conversion
       const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
-      PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
+      PRIMITIVE_BLUEPRINTS_ORDERED.forEach(p => primsByKind.set(p.kind, p));
 
       // Convert each anchor composite to pixel-based blueprint
       quickstash = (params.quickstash_macros as AnchorComposite[]).map(anchorComposite =>
         convertAnchorCompositeToPixels(anchorComposite, primsByKind, CONFIG.layout.grid.stepPx) // Use current CONFIG grid step
       );
-      console.log('[ConstructionApp] Converted to pixel-based blueprints:', quickstash);
     } else {
-      console.log('[ConstructionApp] Already pixel-based blueprints');
       // Already pixel-based blueprints
       quickstash = params.quickstash_macros as Blueprint[];
     }
   } else {
-    console.log('[ConstructionApp] No quickstash macros provided');
   }
 
   // Create React root and render GameBoard
   const gameBoardProps = {
     sectors,
     quickstash,
-    primitives: PRIMITIVE_BLUEPRINTS,
-    layout: (params.layout || "semicircle") as LayoutMode,
-    target: (params.target || "silhouette") as PlacementTarget,
-    input: (params.input || "drag") as InputMode,
-    timeLimitMs: params.time_limit_ms || 0,
+    primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
+    layout: params.layout as LayoutMode,
+    target: params.target as PlacementTarget,
+    input: params.input as InputMode,
+    timeLimitMs: params.time_limit_ms,
     maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
-    mode: 'construction' as const, // Explicit construction mode
+    mode: 'construction' as const,
     ...(params.onInteraction && { onInteraction: params.onInteraction }),
     ...(params.onTrialEnd && { onTrialEnd: params.onTrialEnd })
   };
 
-  console.log('\n[ConstructionApp] Final GameBoard props:');
-  console.log('[ConstructionApp]   sectors count:', gameBoardProps.sectors.length);
-  console.log('[ConstructionApp]   quickstash count:', gameBoardProps.quickstash.length);
-  console.log('[ConstructionApp]   primitives count:', gameBoardProps.primitives.length);
-  console.log('[ConstructionApp]   layout:', gameBoardProps.layout);
-  console.log('[ConstructionApp]   target:', gameBoardProps.target);
-  console.log('[ConstructionApp]   input:', gameBoardProps.input);
-  console.log('[ConstructionApp]   timeLimitMs:', gameBoardProps.timeLimitMs);
-  console.log('[ConstructionApp]   mode:', gameBoardProps.mode);
-  console.log('[ConstructionApp] Full props:', gameBoardProps);
-
   const root = createRoot(display_element);
   root.render(React.createElement(GameBoard, gameBoardProps));
 
-  console.log('[ConstructionApp] GameBoard rendered successfully');
-
   return { root, display_element, jsPsych: _jsPsych };
 }

package/src/plugins/tangram-construct/index.ts

@@ -17,6 +17,12 @@ const info = {
       default: [],
       description: "Array of MacroSpec objects created in prep trial"
     },
+    /** Array of primitive names in the order they should be displayed */
+    primitive_order: {
+      type: ParameterType.OBJECT,
+      default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
+      description: "Array of primitive names in the order they should be displayed"
+    },
     /** Whether to place pieces in workspace or directly on silhouette */
     target: {
       type: ParameterType.SELECT,
@@ -137,10 +143,11 @@ class TangramConstructPlugin implements JsPsychPlugin<Info> {
     const params: StartConstructionTrialParams = {
       tangrams: trial.tangrams,
       quickstash_macros: trial.quickstash_macros,
+      primitiveOrder: trial.primitive_order,
       target: trial.target,
       input: trial.input,
       layout: trial.layout,
-      time_limit_ms: trial.time_limit_ms || 0,
+      time_limit_ms: trial.time_limit_ms,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd
     };

package/src/plugins/tangram-prep/PrepApp.tsx

@@ -32,6 +32,7 @@ export interface StartPrepTrialParams {
   layoutMode: "circle" | "semicircle";
   requireAllSlots: boolean;
   quickstashMacros?: AnchorComposite[];
+  primitiveOrder: string[];
   onInteraction?: (event: any) => void;
   onTrialEnd?: (data: any) => void;
 }
@@ -53,10 +54,14 @@ export function startPrepTrial(
     layoutMode, 
     requireAllSlots,
     quickstashMacros,
+    primitiveOrder,
     onInteraction,
     onTrialEnd,
   } = params;
 
+  // make copy of PRIMITIVE_BLUEPRINTS sorted by primitiveOrder
+  const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => primitiveOrder.indexOf(a.kind) - primitiveOrder.indexOf(b.kind));
+
   // Create blank prep sectors (no silhouettes)
   const prepSectors: Sector[] = Array.from({ length: numQuickstashSlots }, (_, i) => ({
     id: `prep-sector-${i}`,
@@ -75,7 +80,8 @@ export function startPrepTrial(
     if (quickstashMacros && quickstashMacros.length > 0 && layout) {
       // Spawn pieces immediately when controller and layout are ready
       const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
-      PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
+
+      PRIMITIVE_BLUEPRINTS_ORDERED.forEach(p => primsByKind.set(p.kind, p));
       
       quickstashMacros.forEach((anchorComposite, macroIndex) => {
         const sectorId = `prep-sector-${macroIndex}`;
@@ -164,7 +170,7 @@ export function startPrepTrial(
   root.render(React.createElement(GameBoard, {
     sectors: prepSectors,
     quickstash: [], // No pre-made macros
-    primitives: PRIMITIVE_BLUEPRINTS,
+    primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
     layout: layoutMode,
     target: 'workspace', // Pieces go in sectors
     input: inputMode,

package/src/plugins/tangram-prep/index.ts

@@ -41,6 +41,12 @@ const info = {
       default: [],
       description: "Array of AnchorComposite objects to edit as primitive pieces"
     },
+    /** Array of primitive names in the order they should be displayed */
+    primitive_order: {
+      type: ParameterType.OBJECT,
+      default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
+      description: "Array of primitive names in the order they should be displayed"
+    },
     /** Callback fired after each interaction (optional analytics hook) */
     onInteraction: {
       type: ParameterType.FUNCTION,
@@ -101,13 +107,14 @@ class TangramPrepPlugin implements JsPsychPlugin<Info> {
     };
 
     const params: StartPrepTrialParams = {
-      numQuickstashSlots: trial.num_quickstash_slots || 4,
+      numQuickstashSlots: trial.num_quickstash_slots,
       maxPiecesPerMacro: trial.max_pieces_per_macro,
       minPiecesPerMacro: trial.min_pieces_per_macro,
       inputMode: trial.input as "click" | "drag",
       layoutMode: trial.layout as "circle" | "semicircle",
       requireAllSlots: trial.require_all_slots,
       quickstashMacros: trial.quickstash_macros,
+      primitiveOrder: trial.primitive_order,
       onInteraction: trial.onInteraction,
       onTrialEnd: wrappedOnTrialEnd,
     };