jspsych-tangram 0.0.15 → 0.0.17

package/dist/construct/index.cjs

@@ -16,8 +16,9 @@ const CONFIG = {
     silhouetteMask: "#374151",
     anchors: { invalid: "#7dd3fc", valid: "#475569" },
     // validFill used here for placed composites
-    piece: { draggingFill: "#8e7cc3", validFill: "#8e7cc3", invalidFill: "#d55c00", invalidStroke: "#dc2626", allGreenStroke: "#86efac"},
-    blueprint: { fill: "#374151", badgeFill: "#000000", labelFill: "#ffffff" },
+    piece: { draggingFill: "#8e7cc3", validFill: "#8e7cc3", invalidFill: "#d55c00", invalidStroke: "#dc2626", selectedStroke: "#674ea7", allGreenStroke: "#86efac", borderStroke: "#674ea7" },
+    ui: { light: "#60a5fa", dark: "#1d4ed8" },
+    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#000000", labelFill: "#ffffff" },
     tangramDecomposition: { stroke: "#fef2cc" },
     primitiveColors: [
       // from seaborn "colorblind" palette, 6 colors, with red omitted
@@ -36,7 +37,7 @@ const CONFIG = {
     piece: { invalid: 1, dragging: 1, locked: 1, normal: 1 }
   },
   size: {
-    stroke: { bandPx: 5, allGreenStrokePx: 10, tangramDecompositionPx: 1 },
+    stroke: { bandPx: 5, pieceSelectedPx: 5, allGreenStrokePx: 10, pieceBorderPx: 2, tangramDecompositionPx: 1 },
     anchorRadiusPx: { valid: 1, invalid: 1 },
     badgeFontPx: 16,
     centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 },
@@ -57,7 +58,10 @@ const CONFIG = {
   },
   game: {
     snapRadiusPx: 15,
-    showBorders: false}
+    showBorders: false,
+    hideTouchingBorders: true,
+    silhouettesBelowPieces: true
+  }
 };
 
 function isComposite(bp) {
@@ -2657,7 +2661,9 @@ function useClickController(controller, layout, pieces, clickMode, draggingId, s
 
 class InteractionTracker {
   constructor(controller, callbacks, trialParams) {
-    this.gridStep = CONFIG.layout.grid.stepPx;
+    this.completionTimes = [];
+    // Sector centers (set by GameBoard after layout computation)
+    this.sectorCenters = {};
     // Interaction state
     this.interactionIndex = 0;
     this.currentPickup = null;
@@ -2667,14 +2673,13 @@ class InteractionTracker {
     this.mouseTracking = [];
     // Interaction history (for TrialEndData)
     this.interactions = [];
-    // Construction-specific tracking
-    this.completionTimes = [];
     // Prep-specific tracking
     this.createdMacros = [];
     this.controller = controller;
     this.callbacks = callbacks;
     this.trialParams = trialParams;
     this.trialStartTime = Date.now();
+    this.gridStep = CONFIG.layout.grid.stepPx;
     this.controller.setTrackingCallbacks({
       onSectorCompleted: (sectorId) => this.recordSectorCompletion(sectorId)
     });
@@ -2804,7 +2809,13 @@ class InteractionTracker {
     });
   }
   /**
-   * Record sector completion
+   * Set sector centers (for anchor alignment)
+   */
+  setSectorCenters(centers) {
+    this.sectorCenters = centers;
+  }
+  /**
+   * Record a sector completion event
    */
   recordSectorCompletion(sectorId) {
     this.completionTimes.push({
@@ -2981,7 +2992,8 @@ class InteractionTracker {
         sectorId: sector.id,
         completed,
         pieceCount: pieces.length,
-        pieces
+        pieces,
+        center: this.sectorCenters[sector.id] ? this.toAnchorPoint(this.sectorCenters[sector.id]) : void 0
       };
       if (sectorState?.completedAt !== void 0) {
         snapshot.completedAt = sectorState.completedAt;
@@ -3209,6 +3221,16 @@ function GameBoard(props) {
       viewBox: { w: logicalBox.LOGICAL_W, h: logicalBox.LOGICAL_H }
     };
   }, [sectors, layoutMode, target, maxQuickstashSlots, primitives.length]);
+  React.useEffect(() => {
+    if (tracker && layout) {
+      const centers = {};
+      layout.sectors.forEach((s) => {
+        const rect = rectForBand(layout, s, "silhouette", 1);
+        centers[s.id] = { x: rect.cx, y: rect.cy };
+      });
+      tracker.setSectorCenters(centers);
+    }
+  }, [tracker, layout]);
   const [, force] = React.useReducer((x) => x + 1, 0);
   React.useEffect(() => {
     if (onControllerReady) {