jspsych-tangram 0.0.16 → 0.0.17

package/package.json

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

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

@@ -378,6 +378,18 @@ export default function GameBoard(props: GameBoardProps) {
     };
   }, [sectors, layoutMode, target, maxQuickstashSlots, primitives.length]);
 
+  // Update tracker with sector centers whenever layout changes
+  React.useEffect(() => {
+    if (tracker && layout) {
+      const centers: { [sectorId: string]: { x: number; y: number } } = {};
+      layout.sectors.forEach(s => {
+        const rect = rectForBand(layout, s, "silhouette", 1.0);
+        centers[s.id] = { x: rect.cx, y: rect.cy };
+      });
+      tracker.setSectorCenters(centers);
+    }
+  }, [tracker, layout]);
+
   // Force re-render utility
   const [, force] = React.useReducer((x) => x + 1, 0);
 

package/src/core/io/InteractionTracker.ts

@@ -99,7 +99,10 @@ export class InteractionTracker {
 
   // Trial timing
   private trialStartTime: number;
-  private readonly gridStep: number = CONFIG.layout.grid.stepPx;
+  private completionTimes: Array<{ sectorId: string; completedAt: number }> = [];
+
+  // Sector centers (set by GameBoard after layout computation)
+  private sectorCenters: { [sectorId: string]: { x: number; y: number } } = {};
 
   // Interaction state
   private interactionIndex: number = 0;
@@ -113,21 +116,22 @@ export class InteractionTracker {
   // Interaction history (for TrialEndData)
   private interactions: InteractionEvent[] = [];
 
-  // Construction-specific tracking
-  private completionTimes: Array<{ sectorId: string; completedAt: number }> = [];
-
   // Prep-specific tracking
   private createdMacros: MacroSnapshot[] = [];
 
+  // Grid step for coordinate conversion
+  private gridStep: number;
+
   constructor(
     controller: BaseGameController,
     callbacks: DataTrackingCallbacks,
-    trialParams?: any
+    trialParams: any
   ) {
     this.controller = controller;
     this.callbacks = callbacks;
     this.trialParams = trialParams;
     this.trialStartTime = Date.now();
+    this.gridStep = CONFIG.layout.grid.stepPx;
 
     // Register tracking callbacks with controller
     this.controller.setTrackingCallbacks({
@@ -325,7 +329,14 @@ export class InteractionTracker {
   }
 
   /**
-   * Record sector completion
+   * Set sector centers (for anchor alignment)
+   */
+  setSectorCenters(centers: { [sectorId: string]: { x: number; y: number } }): void {
+    this.sectorCenters = centers;
+  }
+
+  /**
+   * Record a sector completion event
    */
   recordSectorCompletion(sectorId: string): void {
     this.completionTimes.push({
@@ -557,7 +568,8 @@ export class InteractionTracker {
         sectorId: sector.id,
         completed,
         pieceCount: pieces.length,
-        pieces
+        pieces,
+        center: this.sectorCenters[sector.id] ? this.toAnchorPoint(this.sectorCenters[sector.id]) : undefined
       };
 
       if (sectorState?.completedAt !== undefined) {

package/src/core/io/data-tracking.ts

@@ -146,6 +146,10 @@ export interface ConstructionTrialData extends BaseTrialData {
     completedAt: number;          // timestamp in ms (Date.now())
   }>;
 
+  // Sector centers (computed layout positions)
+  // Removed in favor of SectorSnapshot.center
+  // sectorCenters?: { [sectorId: string]: { x: number; y: number } };
+
   // Final blueprint state (usage counts + definitions)
   finalBlueprintState: Array<{
     blueprintId: string;
@@ -212,6 +216,7 @@ export interface SectorSnapshot {
   completedAt?: number;           // timestamp in ms (Date.now()) (undefined if not completed)
   pieceCount: number;
   pieces: PieceSnapshot[];
+  center?: { x: number; y: number }; // Center of sector in anchor coordinates
 }
 
 /**