jspsych-tangram 0.0.11 → 0.0.13

package/dist/index.cjs

@@ -7,30 +7,40 @@ var uuid = require('uuid');
 
 const CONFIG = {
   color: {
+    background: "#fff7e0ff",
     bands: {
-      silhouette: { fillEven: "#fff2ccff", fillOdd: "#fff2ccff", stroke: "#b1b1b1" },
-      workspace: { fillEven: "#fff2ccff", fillOdd: "#fff2ccff", stroke: "#b1b1b1" }
+      silhouette: { fillEven: "#ffffff", fillOdd: "#ffffff", stroke: "#b1b1b1" },
+      workspace: { fillEven: "#ffffff", fillOdd: "#ffffff", stroke: "#b1b1b1" }
     },
-    completion: { fill: "#ccfff2", stroke: "#13da57" },
+    completion: { fill: "#ccffcc", stroke: "#13da57" },
     silhouetteMask: "#374151",
     anchors: { invalid: "#7dd3fc", valid: "#475569" },
-    piece: { draggingFill: "#8e7cc3ff", validFill: "#8e7cc3ff", invalidFill: "#ef4444", 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" }
+    // validFill used here for placed composites
+    piece: { draggingFill: "#8e7cc3", validFill: "#8e7cc3", invalidFill: "#d55c00", invalidStroke: "#dc2626", allGreenStroke: "#86efac"},
+    blueprint: { fill: "#374151", badgeFill: "#000000", labelFill: "#ffffff" },
+    tangramDecomposition: { stroke: "#fef2cc" },
+    primitiveColors: [
+      // from seaborn "colorblind" palette, 6 colors, with red omitted
+      "#0173b2",
+      "#de8f05",
+      "#029e73",
+      "#cc78bc",
+      "#ca9161"
+    ]
   },
   opacity: {
-    blueprint: 0.4,
+    blueprint: 0.6,
     silhouetteMask: 0.25,
     //anchors: { valid: 0.80, invalid: 0.50 },
     anchors: { invalid: 0, valid: 0 },
-    piece: { invalid: 0.35, dragging: 0.75, locked: 1, normal: 1 }
+    piece: { invalid: 1, dragging: 1, locked: 1, normal: 1 }
   },
   size: {
-    stroke: { bandPx: 5, pieceSelectedPx: 3, allGreenStrokePx: 10, pieceBorderPx: 2, tangramDecompositionPx: 1 },
+    stroke: { bandPx: 5, allGreenStrokePx: 10, tangramDecompositionPx: 1 },
     anchorRadiusPx: { valid: 1, invalid: 1 },
     badgeFontPx: 16,
-    centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 }
+    centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 },
+    invalidMarker: { sizePx: 10, strokePx: 4 }
   },
   layout: {
     grid: { stepPx: 20, unitPx: 40 },
@@ -47,9 +57,7 @@ const CONFIG = {
   },
   game: {
     snapRadiusPx: 15,
-    showBorders: false,
-    hideTouchingBorders: true
-  }
+    showBorders: false}
 };
 
 function isComposite(bp) {
@@ -832,6 +840,31 @@ var unlockedIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAA
 function pathD(poly) {
   return `M ${poly.map((pt) => `${pt.x} ${pt.y}`).join(" L ")} Z`;
 }
+function getPieceColor(blueprint, usePrimitiveColors, defaultColor, primitiveColorIndices) {
+  if (!usePrimitiveColors) {
+    return defaultColor;
+  }
+  if ("kind" in blueprint) {
+    const kind = blueprint.kind;
+    const kindToIndex = {
+      "square": 0,
+      "smalltriangle": 1,
+      "parallelogram": 2,
+      "medtriangle": 3,
+      "largetriangle": 4
+    };
+    const primitiveIndex = kindToIndex[kind];
+    if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+      const colorIndex = primitiveColorIndices[primitiveIndex];
+      const color = CONFIG.color.primitiveColors[colorIndex];
+      if (color) {
+        return color;
+      }
+    }
+    return defaultColor;
+  }
+  return defaultColor;
+}
 function BoardView(props) {
   const {
     controller,
@@ -851,6 +884,9 @@ function BoardView(props) {
     dragInvalid,
     lockedPieceId,
     showTangramDecomposition,
+    usePrimitiveColorsBlueprints,
+    usePrimitiveColorsTargets,
+    primitiveColorIndices,
     svgRef,
     setPieceRef,
     onPiecePointerDown,
@@ -861,6 +897,144 @@ function BoardView(props) {
     onCenterBadgePointerDown
   } = props;
   const VW = viewBox.w, VH = viewBox.h;
+  const renderSilhouettes = () => layout.sectors.map((s) => {
+    const sectorCfg = controller.state.cfg.sectors.find((ss) => ss.id === s.id);
+    if (showTangramDecomposition && sectorCfg?.silhouette.primitiveDecomposition) {
+      const primitiveDecomposition = sectorCfg.silhouette.primitiveDecomposition;
+      const rect = rectForBand(layout, s, "silhouette", 1);
+      const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, { cx: rect.cx, cy: rect.cy });
+      return /* @__PURE__ */ React.createElement("g", { key: `sil-decomposed-${s.id}`, pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => {
+        const primInfo = primitiveDecomposition[i];
+        let fillColor = CONFIG.color.silhouetteMask;
+        if (usePrimitiveColorsTargets && primInfo?.kind && primitiveColorIndices) {
+          const kindToIndex = {
+            "square": 0,
+            "smalltriangle": 1,
+            "parallelogram": 2,
+            "medtriangle": 3,
+            "largetriangle": 4
+          };
+          const primitiveIndex = kindToIndex[primInfo.kind];
+          if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+            const colorIndex = primitiveColorIndices[primitiveIndex];
+            const color = CONFIG.color.primitiveColors[colorIndex];
+            if (color) {
+              fillColor = color;
+            }
+          }
+        }
+        return /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            key: `prim-fill-${i}`,
+            d: pathD(scaledPoly),
+            fill: fillColor,
+            opacity: CONFIG.opacity.silhouetteMask,
+            stroke: "none"
+          }
+        );
+      }));
+    } else {
+      const placedPolys = placedSilBySector.get(s.id) ?? [];
+      if (!placedPolys.length) return null;
+      return /* @__PURE__ */ React.createElement("g", { key: `sil-${s.id}`, pointerEvents: "none" }, placedPolys.map((poly, i) => /* @__PURE__ */ React.createElement("path", { key: i, d: pathD(poly), fill: CONFIG.color.silhouetteMask, opacity: CONFIG.opacity.silhouetteMask })));
+    }
+  });
+  const renderPieces = (piecesFilter) => {
+    const piecesToRender = pieces;
+    return piecesToRender.sort((a, b) => {
+      if (draggingId === a.id) return 1;
+      if (draggingId === b.id) return -1;
+      return 0;
+    }).map((p) => {
+      const bp = controller.getBlueprint(p.blueprintId);
+      const bb = boundsOfBlueprint(bp, (k) => controller.getPrimitive(k));
+      const isDragging = draggingId === p.id;
+      const locked = p.sectorId && controller.isSectorCompleted(p.sectorId);
+      const isConnectivityLocked = lockedPieceId === p.id;
+      selectedPieceId === p.id;
+      const isCarriedInvalid = isDragging && dragInvalid;
+      const translateX = p.x - bb.min.x;
+      const translateY = p.y - bb.min.y;
+      const validFillColor = getPieceColor(
+        bp,
+        usePrimitiveColorsBlueprints || false,
+        CONFIG.color.piece.validFill,
+        primitiveColorIndices || [0, 1, 2, 3, 4]
+      );
+      const draggingFillColor = getPieceColor(
+        bp,
+        usePrimitiveColorsBlueprints || false,
+        CONFIG.color.piece.draggingFill,
+        primitiveColorIndices || [0, 1, 2, 3, 4]
+      );
+      return /* @__PURE__ */ React.createElement("g", { key: p.id, ref: setPieceRef(p.id), transform: `translate(${translateX}, ${translateY})`, style: { cursor: locked ? "default" : clickMode ? "pointer" : "grab" }, pointerEvents: clickMode && isDragging ? "none" : "auto" }, ("shape" in bp ? bp.shape : []).map((poly, idx) => {
+        const showBorders = shouldShowBorders();
+        shouldUseSelectiveBorders(p.blueprintId);
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: idx }, /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: pathD(poly),
+            fill: isConnectivityLocked ? CONFIG.color.piece.invalidFill : isCarriedInvalid ? CONFIG.color.piece.invalidFill : isDragging ? draggingFillColor : validFillColor,
+            opacity: isConnectivityLocked ? CONFIG.opacity.piece.invalid : isCarriedInvalid ? CONFIG.opacity.piece.invalid : isDragging ? CONFIG.opacity.piece.dragging : locked ? CONFIG.opacity.piece.locked : CONFIG.opacity.piece.normal,
+            stroke: "none",
+            onPointerDown: (e) => onPiecePointerDown(e, p)
+          }
+        ), showBorders);
+      }), isDragging && isCarriedInvalid && "shape" in bp && bp.shape.length > 0 && (() => {
+        const { cx, cy } = polysAABB$1(bp.shape);
+        const size = CONFIG.size.invalidMarker.sizePx;
+        const strokeWidth = CONFIG.size.invalidMarker.strokePx;
+        const borderWidth = strokeWidth + 2;
+        return /* @__PURE__ */ React.createElement("g", { key: "invalid-marker" }, /* @__PURE__ */ React.createElement(
+          "line",
+          {
+            x1: cx - size,
+            y1: cy - size,
+            x2: cx + size,
+            y2: cy + size,
+            stroke: "white",
+            strokeWidth: borderWidth,
+            strokeLinecap: "round"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "line",
+          {
+            x1: cx - size,
+            y1: cy - size,
+            x2: cx + size,
+            y2: cy + size,
+            stroke: CONFIG.color.piece.invalidStroke,
+            strokeWidth,
+            strokeLinecap: "round"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "line",
+          {
+            x1: cx + size,
+            y1: cy - size,
+            x2: cx - size,
+            y2: cy + size,
+            stroke: "white",
+            strokeWidth: borderWidth,
+            strokeLinecap: "round"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "line",
+          {
+            x1: cx + size,
+            y1: cy - size,
+            x2: cx - size,
+            y2: cy + size,
+            stroke: CONFIG.color.piece.invalidStroke,
+            strokeWidth,
+            strokeLinecap: "round"
+          }
+        ));
+      })());
+    });
+  };
   const centerView = controller.state.blueprintView;
   const bps = centerView === "primitives" ? controller.state.primitives : controller.state.quickstash;
   const QS_SLOTS = controller.state.cfg.maxQuickstashSlots;
@@ -881,6 +1055,12 @@ function BoardView(props) {
     const bb = boundsOfBlueprint(bp, (k) => controller.getPrimitive(k));
     const cx = bb.min.x + bb.width / 2;
     const cy = bb.min.y + bb.height / 2;
+    const fillColor = getPieceColor(
+      bp,
+      usePrimitiveColorsBlueprints || false,
+      CONFIG.color.blueprint.fill,
+      primitiveColorIndices || [0, 1, 2, 3, 4]
+    );
     return /* @__PURE__ */ React.createElement(
       "g",
       {
@@ -892,7 +1072,7 @@ function BoardView(props) {
         {
           key: idx,
           d: pathD(poly),
-          fill: CONFIG.color.blueprint.fill,
+          fill: fillColor,
           opacity: CONFIG.opacity.blueprint,
           stroke: "none",
           strokeWidth: 0,
@@ -916,7 +1096,7 @@ function BoardView(props) {
       onPointerDown: (e) => {
         onRootPointerDown(e);
       },
-      style: { background: "#f5f5f5", touchAction: "none", userSelect: "none" }
+      style: { background: CONFIG.color.background, touchAction: "none", userSelect: "none" }
     },
     layout.sectors.map((s, i) => {
       const done = !!controller.state.sectors[s.id].completedAt;
@@ -926,35 +1106,7 @@ function BoardView(props) {
       const work = layout.bands.workspace;
       return /* @__PURE__ */ React.createElement("g", { key: `bands-${s.id}` }, controller.state.cfg.target === "workspace" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("path", { d: wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end), fill: baseSil, stroke: CONFIG.color.bands.silhouette.stroke, strokeWidth: CONFIG.size.stroke.bandPx, pointerEvents: "none" }), /* @__PURE__ */ React.createElement("path", { d: wedgePath(layout.cx, layout.cy, work[0], work[1], s.start, s.end), fill: done ? CONFIG.color.completion.fill : baseWork, stroke: done ? CONFIG.color.completion.stroke : CONFIG.color.bands.workspace.stroke, strokeWidth: CONFIG.size.stroke.bandPx, pointerEvents: "none" })) : /* @__PURE__ */ React.createElement("path", { d: wedgePath(layout.cx, layout.cy, sil[0], sil[1], s.start, s.end), fill: done ? CONFIG.color.completion.fill : baseSil, stroke: done ? CONFIG.color.completion.stroke : CONFIG.color.bands.silhouette.stroke, strokeWidth: CONFIG.size.stroke.bandPx, pointerEvents: "none" }));
     }),
-    pieces.sort((a, b) => {
-      if (draggingId === a.id) return 1;
-      if (draggingId === b.id) return -1;
-      return 0;
-    }).map((p) => {
-      const bp = controller.getBlueprint(p.blueprintId);
-      const bb = boundsOfBlueprint(bp, (k) => controller.getPrimitive(k));
-      const isDragging = draggingId === p.id;
-      const locked = p.sectorId && controller.isSectorCompleted(p.sectorId);
-      const isConnectivityLocked = lockedPieceId === p.id;
-      selectedPieceId === p.id;
-      const isCarriedInvalid = isDragging && dragInvalid;
-      const translateX = p.x - bb.min.x;
-      const translateY = p.y - bb.min.y;
-      return /* @__PURE__ */ React.createElement("g", { key: p.id, ref: setPieceRef(p.id), transform: `translate(${translateX}, ${translateY})`, style: { cursor: locked ? "default" : clickMode ? "pointer" : "grab" }, pointerEvents: clickMode && isDragging ? "none" : "auto" }, ("shape" in bp ? bp.shape : []).map((poly, idx) => {
-        const showBorders = shouldShowBorders();
-        shouldUseSelectiveBorders(p.blueprintId);
-        return /* @__PURE__ */ React.createElement(React.Fragment, { key: idx }, /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            d: pathD(poly),
-            fill: isConnectivityLocked ? CONFIG.color.piece.invalidFill : isCarriedInvalid ? CONFIG.color.piece.invalidFill : isDragging ? CONFIG.color.piece.draggingFill : CONFIG.color.piece.validFill,
-            opacity: isConnectivityLocked ? CONFIG.opacity.piece.invalid : isCarriedInvalid ? CONFIG.opacity.piece.invalid : isDragging ? CONFIG.opacity.piece.dragging : locked ? CONFIG.opacity.piece.locked : CONFIG.opacity.piece.normal,
-            stroke: "none",
-            onPointerDown: (e) => onPiecePointerDown(e, p)
-          }
-        ), showBorders);
-      }));
-    }),
+    /* @__PURE__ */ React.createElement(React.Fragment, null, renderSilhouettes(), renderPieces()) ,
     layout.sectors.map((s) => {
       const sectorCfg = controller.state.cfg.sectors.find((ss) => ss.id === s.id);
       if (showTangramDecomposition && sectorCfg?.silhouette.primitiveDecomposition) {
@@ -962,23 +1114,32 @@ function BoardView(props) {
         const rect = rectForBand(layout, s, "silhouette", 1);
         const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
         const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, { cx: rect.cx, cy: rect.cy });
-        return /* @__PURE__ */ React.createElement("g", { key: `sil-decomposed-${s.id}`, pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `prim-${i}` }, /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            d: pathD(scaledPoly),
-            fill: CONFIG.color.silhouetteMask,
-            opacity: CONFIG.opacity.silhouetteMask,
-            stroke: "none"
-          }
-        ), /* @__PURE__ */ React.createElement(
-          "path",
-          {
-            d: pathD(scaledPoly),
-            fill: "none",
-            stroke: CONFIG.color.tangramDecomposition.stroke,
-            strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+        return /* @__PURE__ */ React.createElement("g", { key: `sil-decomposed-${s.id}`, pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => {
+          const primInfo = primitiveDecomposition[i];
+          if (usePrimitiveColorsTargets && primInfo?.kind && primitiveColorIndices) {
+            const kindToIndex = {
+              "square": 0,
+              "smalltriangle": 1,
+              "parallelogram": 2,
+              "medtriangle": 3,
+              "largetriangle": 4
+            };
+            const primitiveIndex = kindToIndex[primInfo.kind];
+            if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+              primitiveColorIndices[primitiveIndex];
+            }
           }
-        ))));
+          return /* @__PURE__ */ React.createElement(
+            "path",
+            {
+              key: `prim-fill-${i}`,
+              d: pathD(scaledPoly),
+              fill: "none",
+              opacity: 0,
+              stroke: "none"
+            }
+          );
+        }));
       } else {
         const placedPolys = placedSilBySector.get(s.id) ?? [];
         if (!placedPolys.length) return null;
@@ -1069,7 +1230,25 @@ function BoardView(props) {
       const by = layout.cy + blueprintRingR * Math.sin(theta);
       return renderBlueprintGlyph(bp, bx, by);
     }),
-    controller.state.endedAt && /* @__PURE__ */ React.createElement("g", { pointerEvents: "none" }, /* @__PURE__ */ React.createElement("circle", { cx: layout.cx, cy: layout.cy, r: layout.outerR - 3, fill: "none", stroke: CONFIG.color.piece.allGreenStroke, strokeWidth: CONFIG.size.stroke.allGreenStrokePx, opacity: 0 }, /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "160ms", fill: "freeze" }), /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", begin: "560ms", dur: "520ms", fill: "freeze" })))
+    controller.state.endedAt && /* @__PURE__ */ React.createElement("g", { pointerEvents: "none" }, /* @__PURE__ */ React.createElement("circle", { cx: layout.cx, cy: layout.cy, r: layout.outerR - 3, fill: "none", stroke: CONFIG.color.piece.allGreenStroke, strokeWidth: CONFIG.size.stroke.allGreenStrokePx, opacity: 0 }, /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", from: "0", to: "1", dur: "160ms", fill: "freeze" }), /* @__PURE__ */ React.createElement("animate", { attributeName: "opacity", from: "1", to: "0", begin: "560ms", dur: "520ms", fill: "freeze" }))),
+    showTangramDecomposition && layout.sectors.map((s) => {
+      const sectorCfg = controller.state.cfg.sectors.find((ss) => ss.id === s.id);
+      if (!sectorCfg?.silhouette.primitiveDecomposition) return null;
+      const primitiveDecomposition = sectorCfg.silhouette.primitiveDecomposition;
+      const rect = rectForBand(layout, s, "silhouette", 1);
+      const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
+      const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, { cx: rect.cx, cy: rect.cy });
+      return /* @__PURE__ */ React.createElement("g", { key: `sil-borders-${s.id}`, pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          key: `prim-border-${i}`,
+          d: pathD(scaledPoly),
+          fill: "none",
+          stroke: CONFIG.color.tangramDecomposition.stroke,
+          strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+        }
+      )));
+    })
   );
 }
 
@@ -2954,7 +3133,10 @@ function GameBoard(props) {
     onPieceRemove,
     onInteraction,
     onTrialEnd,
-    onControllerReady
+    onControllerReady,
+    usePrimitiveColorsBlueprints,
+    usePrimitiveColorsTargets,
+    primitiveColorIndices
   } = props;
   const [timeRemaining, setTimeRemaining] = React.useState(timeLimitMs > 0 ? Math.floor(timeLimitMs / 1e3) : 0);
   const controller = React.useMemo(() => {
@@ -3275,19 +3457,28 @@ function GameBoard(props) {
   const headerStyle = {
     display: "flex",
     flexDirection: "row",
-    justifyContent: "space-between",
+    justifyContent: "center",
     alignItems: "center",
     padding: "20px",
-    background: "#f5f5f5",
+    background: CONFIG.color.background,
     flex: "0 0 auto"
   };
+  const headerContentStyle = {
+    position: "relative",
+    width: `${svgDimensions.width}px`,
+    maxWidth: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center"
+  };
   const instructionsStyle = {
-    flexGrow: 1,
     fontSize: "20px",
     lineHeight: 1.5,
-    marginRight: "20px"
+    textAlign: "center"
   };
   const timerStyle = {
+    position: "absolute",
+    right: 0,
     fontSize: "24px",
     fontWeight: "bold",
     fontFamily: "monospace",
@@ -3302,14 +3493,14 @@ function GameBoard(props) {
     justifyContent: "center",
     overflow: "hidden"
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "tangram-trial-container", style: containerStyle }, (instructions || timeLimitMs > 0) && /* @__PURE__ */ React.createElement("div", { className: "tangram-header", style: headerStyle }, instructions && /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: "tangram-trial-container", style: containerStyle }, (instructions || timeLimitMs > 0) && /* @__PURE__ */ React.createElement("div", { className: "tangram-header", style: headerStyle }, /* @__PURE__ */ React.createElement("div", { className: "tangram-header-content", style: headerContentStyle }, instructions && /* @__PURE__ */ React.createElement(
     "div",
     {
       className: "tangram-instructions",
       style: instructionsStyle,
       dangerouslySetInnerHTML: { __html: instructions }
     }
-  ), timeLimitMs > 0 && /* @__PURE__ */ React.createElement("div", { className: "tangram-timer", style: timerStyle }, formatTime(timeRemaining))), /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard-wrapper", style: gameboardWrapperStyle }, /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard", style: getGameboardStyle() }, /* @__PURE__ */ React.createElement(
+  ), timeLimitMs > 0 && /* @__PURE__ */ React.createElement("div", { className: "tangram-timer", style: timerStyle }, formatTime(timeRemaining)))), /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard-wrapper", style: gameboardWrapperStyle }, /* @__PURE__ */ React.createElement("div", { className: "tangram-gameboard", style: getGameboardStyle() }, /* @__PURE__ */ React.createElement(
     BoardView,
     {
       controller,
@@ -3337,6 +3528,9 @@ function GameBoard(props) {
       onCenterBadgePointerDown,
       showTangramDecomposition: showTangramDecomposition ?? false,
       scaleS,
+      usePrimitiveColorsBlueprints: usePrimitiveColorsBlueprints ?? false,
+      usePrimitiveColorsTargets: usePrimitiveColorsTargets ?? false,
+      primitiveColorIndices: primitiveColorIndices ?? [0, 1, 2, 3, 4],
       ...eventCallbacks
     }
   ))));
@@ -3556,7 +3750,10 @@ function startConstructionTrial(display_element, params, _jsPsych) {
     trialParams,
     ...params.instructions && { instructions: params.instructions },
     ...params.onInteraction && { onInteraction: params.onInteraction },
-    ...params.onTrialEnd && { onTrialEnd: params.onTrialEnd }
+    ...params.onTrialEnd && { onTrialEnd: params.onTrialEnd },
+    ...params.usePrimitiveColorsBlueprints !== void 0 && { usePrimitiveColorsBlueprints: params.usePrimitiveColorsBlueprints },
+    ...params.usePrimitiveColorsTargets !== void 0 && { usePrimitiveColorsTargets: params.usePrimitiveColorsTargets },
+    ...params.primitiveColorIndices !== void 0 && { primitiveColorIndices: params.primitiveColorIndices }
   };
   const root = client.createRoot(display_element);
   root.render(React.createElement(GameBoard, gameBoardProps));
@@ -3641,6 +3838,24 @@ const info$2 = {
       type: jspsych.ParameterType.FUNCTION,
       default: void 0,
       description: "Callback when trial completes with full data"
+    },
+    /** Whether to use distinct colors for each primitive shape type in blueprints */
+    use_primitive_colors_blueprints: {
+      type: jspsych.ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color in the blueprint dock area"
+    },
+    /** Whether to use distinct colors for each primitive shape type in target tangrams */
+    use_primitive_colors_targets: {
+      type: jspsych.ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color in target tangram silhouettes"
+    },
+    /** Indices mapping primitives to colors from the color palette */
+    primitive_color_indices: {
+      type: jspsych.ParameterType.OBJECT,
+      default: [0, 1, 2, 3, 4],
+      description: "Array of 5 integers indexing into primitiveColors array, mapping [square, smalltriangle, parallelogram, medtriangle, largetriangle] to colors"
     }
   },
   data: {
@@ -3706,7 +3921,10 @@ class TangramConstructPlugin {
       show_tangram_decomposition: trial.show_tangram_decomposition,
       instructions: trial.instructions,
       onInteraction: trial.onInteraction,
-      onTrialEnd: wrappedOnTrialEnd
+      onTrialEnd: wrappedOnTrialEnd,
+      usePrimitiveColorsBlueprints: trial.use_primitive_colors_blueprints,
+      usePrimitiveColorsTargets: trial.use_primitive_colors_targets,
+      primitiveColorIndices: trial.primitive_color_indices
     };
     const { root, display_element: element, jsPsych } = startConstructionTrial(display_element, params, this.jsPsych);
     element.__reactContext = { root, jsPsych };
@@ -3724,7 +3942,9 @@ function startPrepTrial(display_element, params, jsPsych) {
     quickstashMacros,
     primitiveOrder,
     onInteraction,
-    onTrialEnd
+    onTrialEnd,
+    usePrimitiveColorsBlueprints,
+    primitiveColorIndices
   } = params;
   const { onInteraction: _, onTrialEnd: __, ...trialParams } = params;
   const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => primitiveOrder.indexOf(a.kind) - primitiveOrder.indexOf(b.kind));
@@ -3816,7 +4036,9 @@ function startPrepTrial(display_element, params, jsPsych) {
     ...params.instructions && { instructions: params.instructions },
     onControllerReady: handleControllerReady,
     ...onInteraction && { onInteraction },
-    ...onTrialEnd && { onTrialEnd }
+    ...onTrialEnd && { onTrialEnd },
+    ...usePrimitiveColorsBlueprints !== void 0 && { usePrimitiveColorsBlueprints },
+    ...primitiveColorIndices !== void 0 && { primitiveColorIndices }
   }));
   return { root, display_element, jsPsych };
 }
@@ -3882,6 +4104,18 @@ const info$1 = {
     onTrialEnd: {
       type: jspsych.ParameterType.FUNCTION,
       default: void 0
+    },
+    /** Whether to use distinct colors for each primitive shape type in blueprints */
+    use_primitive_colors_blueprints: {
+      type: jspsych.ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color in the blueprint dock area"
+    },
+    /** Indices mapping primitives to colors from the color palette */
+    primitive_color_indices: {
+      type: jspsych.ParameterType.OBJECT,
+      default: [0, 1, 2, 3, 4],
+      description: "Array of 5 integers indexing into primitiveColors array, mapping [square, smalltriangle, parallelogram, medtriangle, largetriangle] to colors"
     }
   },
   data: {
@@ -3926,7 +4160,9 @@ class TangramPrepPlugin {
       primitiveOrder: trial.primitive_order,
       instructions: trial.instructions,
       onInteraction: trial.onInteraction,
-      onTrialEnd: wrappedOnTrialEnd
+      onTrialEnd: wrappedOnTrialEnd,
+      usePrimitiveColorsBlueprints: trial.use_primitive_colors_blueprints,
+      primitiveColorIndices: trial.primitive_color_indices
     };
     const { root, display_element: element, jsPsych } = startPrepTrial(display_element, params, this.jsPsych);
     element.__reactContext = { root, jsPsych };
@@ -3946,6 +4182,8 @@ function NBackView({ params }) {
     instructions,
     button_text,
     duration,
+    usePrimitiveColors,
+    primitiveColorIndices,
     onTrialEnd
   } = params;
   const trialStartTime = React.useRef(Date.now());
@@ -4001,7 +4239,12 @@ function NBackView({ params }) {
       ...data,
       accuracy,
       tangram_id: tangram.tangramID,
-      is_match: isMatch
+      is_match: isMatch,
+      show_tangram_decomposition,
+      use_primitive_colors: usePrimitiveColors,
+      primitive_color_indices: primitiveColorIndices,
+      duration,
+      button_text
     };
     if (onTrialEnd) {
       onTrialEnd(trialData);
@@ -4055,35 +4298,77 @@ function NBackView({ params }) {
     if (show_tangram_decomposition) {
       const rawPolys = primitiveDecomposition.map((primInfo) => primInfo.polygon);
       const placedPolys = placeSilhouetteGridAlignedAsPolys(rawPolys, scaleS, centerPos);
-      return /* @__PURE__ */ React.createElement("g", { key: "sil-decomposed", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `prim-${i}` }, /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          d: pathD(scaledPoly),
-          fill: CONFIG.color.silhouetteMask,
-          opacity: CONFIG.opacity.silhouetteMask,
-          stroke: "none"
-        }
-      ), /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          d: pathD(scaledPoly),
-          fill: "none",
-          stroke: CONFIG.color.tangramDecomposition.stroke,
-          strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+      return /* @__PURE__ */ React.createElement("g", { key: "sil-decomposed", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => {
+        const primInfo = primitiveDecomposition[i];
+        let fillColor = CONFIG.color.silhouetteMask;
+        if (usePrimitiveColors && primInfo?.kind && primitiveColorIndices) {
+          const kindToIndex = {
+            "square": 0,
+            "smalltriangle": 1,
+            "parallelogram": 2,
+            "medtriangle": 3,
+            "largetriangle": 4
+          };
+          const primitiveIndex = kindToIndex[primInfo.kind];
+          if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+            const colorIndex = primitiveColorIndices[primitiveIndex];
+            const color = CONFIG.color.primitiveColors[colorIndex];
+            if (color) {
+              fillColor = color;
+            }
+          }
         }
-      ))));
+        return /* @__PURE__ */ React.createElement(React.Fragment, { key: `prim-${i}` }, /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: pathD(scaledPoly),
+            fill: fillColor,
+            opacity: CONFIG.opacity.silhouetteMask,
+            stroke: "none"
+          }
+        ), /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: pathD(scaledPoly),
+            fill: "none",
+            stroke: CONFIG.color.tangramDecomposition.stroke,
+            strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
+          }
+        ));
+      }));
     } else {
       const placedPolys = placeSilhouetteGridAlignedAsPolys(mask, scaleS, centerPos);
-      return /* @__PURE__ */ React.createElement("g", { key: "sil-unified", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => /* @__PURE__ */ React.createElement(
-        "path",
-        {
-          key: `sil-${i}`,
-          d: pathD(scaledPoly),
-          fill: CONFIG.color.silhouetteMask,
-          opacity: CONFIG.opacity.silhouetteMask,
-          stroke: "none"
+      return /* @__PURE__ */ React.createElement("g", { key: "sil-unified", pointerEvents: "none" }, placedPolys.map((scaledPoly, i) => {
+        const primInfo = primitiveDecomposition[i];
+        let fillColor = CONFIG.color.silhouetteMask;
+        if (usePrimitiveColors && primInfo?.kind && primitiveColorIndices) {
+          const kindToIndex = {
+            "square": 0,
+            "smalltriangle": 1,
+            "parallelogram": 2,
+            "medtriangle": 3,
+            "largetriangle": 4
+          };
+          const primitiveIndex = kindToIndex[primInfo.kind];
+          if (primitiveIndex !== void 0 && primitiveColorIndices[primitiveIndex] !== void 0) {
+            const colorIndex = primitiveColorIndices[primitiveIndex];
+            const color = CONFIG.color.primitiveColors[colorIndex];
+            if (color) {
+              fillColor = color;
+            }
+          }
         }
-      )));
+        return /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            key: `sil-${i}`,
+            d: pathD(scaledPoly),
+            fill: fillColor,
+            opacity: CONFIG.opacity.silhouetteMask,
+            stroke: "none"
+          }
+        );
+      }));
     }
   };
   return /* @__PURE__ */ React.createElement("div", { style: {
@@ -4182,6 +4467,18 @@ const info = {
       default: 3e3,
       description: "Duration in milliseconds to display tangram and accept responses"
     },
+    /** Whether to use distinct colors for each primitive shape type */
+    use_primitive_colors: {
+      type: jspsych.ParameterType.BOOL,
+      default: false,
+      description: "Whether each primitive shape type should have its own distinct color in the displayed tangram"
+    },
+    /** Indices mapping primitives to colors from the color palette */
+    primitive_color_indices: {
+      type: jspsych.ParameterType.OBJECT,
+      default: [0, 1, 2, 3, 4],
+      description: "Array of 5 integers indexing into primitiveColors array, mapping [square, smalltriangle, parallelogram, medtriangle, largetriangle] to colors"
+    },
     /** Callback fired when trial ends */
     onTrialEnd: {
       type: jspsych.ParameterType.FUNCTION,
@@ -4248,6 +4545,8 @@ class TangramNBackPlugin {
       instructions: trial.instructions,
       button_text: trial.button_text,
       duration: trial.duration,
+      usePrimitiveColors: trial.use_primitive_colors,
+      primitiveColorIndices: trial.primitive_color_indices,
       onTrialEnd: wrappedOnTrialEnd
     };
     const { root, display_element: element, jsPsych } = startNBackTrial(display_element, params, this.jsPsych);