jspsych-tangram 0.0.15 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspsych-tangram",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Tangram tasks for jsPsych: prep and construct.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -27,6 +27,11 @@
       "types": "./dist/nback/index.d.ts",
       "import": "./dist/nback/index.js",
       "require": "./dist/nback/index.cjs"
+    },
+    "./afc": {
+      "types": "./dist/afc/index.d.ts",
+      "import": "./dist/afc/index.js",
+      "require": "./dist/afc/index.cjs"
     }
   },
   "files": [
@@ -34,12 +39,13 @@
     "dist",
     "tangram-prep.min.js",
     "tangram-construct.min.js",
-    "tangram-nback.min.js"
+    "tangram-nback.min.js",
+    "tangram-afc.min.js"
   ],
   "source": "src/index.ts",
   "scripts": {
     "build": "rollup --config",
-    "postbuild": "cp dist/prep/index.browser.min.js tangram-prep.min.js && cp dist/construct/index.browser.min.js tangram-construct.min.js && cp dist/nback/index.browser.min.js tangram-nback.min.js",
+    "postbuild": "cp dist/prep/index.browser.min.js tangram-prep.min.js && cp dist/construct/index.browser.min.js tangram-construct.min.js && cp dist/nback/index.browser.min.js tangram-nback.min.js && cp dist/afc/index.browser.min.js tangram-afc.min.js",
     "build:watch": "npm run build -- --watch",
     "dev": "vite",
     "test": "jest",

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
 }
 
 /**