jspsych-tangram 0.0.12 → 0.0.14

package/dist/prep/index.d.ts

@@ -62,6 +62,18 @@ declare const info: {
             type: ParameterType;
             default: undefined;
         };
+        /** Whether to use distinct colors for each primitive shape type in blueprints */
+        use_primitive_colors_blueprints: {
+            type: ParameterType;
+            default: boolean;
+            description: string;
+        };
+        /** Indices mapping primitives to colors from the color palette */
+        primitive_color_indices: {
+            type: ParameterType;
+            default: number[];
+            description: string;
+        };
     };
     data: {
         /** Completion status */
@@ -143,6 +155,18 @@ declare class TangramPrepPlugin implements JsPsychPlugin<Info> {
                 type: ParameterType;
                 default: undefined;
             };
+            /** Whether to use distinct colors for each primitive shape type in blueprints */
+            use_primitive_colors_blueprints: {
+                type: ParameterType;
+                default: boolean;
+                description: string;
+            };
+            /** Indices mapping primitives to colors from the color palette */
+            primitive_color_indices: {
+                type: ParameterType;
+                default: number[];
+                description: string;
+            };
         };
         data: {
             /** Completion status */

package/dist/prep/index.js

@@ -5,30 +5,41 @@ import { v4 } from '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" },
+    // validFill used here for placed composites
+    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" }
+    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, pieceSelectedPx: 5, allGreenStrokePx: 10, pieceBorderPx: 2, 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 },
@@ -46,7 +57,8 @@ const CONFIG = {
   game: {
     snapRadiusPx: 15,
     showBorders: false,
-    hideTouchingBorders: true
+    hideTouchingBorders: true,
+    silhouettesBelowPieces: true
   }
 };
 
@@ -830,6 +842,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,
@@ -849,6 +886,9 @@ function BoardView(props) {
     dragInvalid,
     lockedPieceId,
     showTangramDecomposition,
+    usePrimitiveColorsBlueprints,
+    usePrimitiveColorsTargets,
+    primitiveColorIndices,
     svgRef,
     setPieceRef,
     onPiecePointerDown,
@@ -859,6 +899,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;
@@ -879,6 +1057,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",
       {
@@ -890,7 +1074,7 @@ function BoardView(props) {
         {
           key: idx,
           d: pathD(poly),
-          fill: CONFIG.color.blueprint.fill,
+          fill: fillColor,
           opacity: CONFIG.opacity.blueprint,
           stroke: "none",
           strokeWidth: 0,
@@ -914,7 +1098,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;
@@ -924,35 +1108,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) {
@@ -960,23 +1116,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;
@@ -1067,7 +1232,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
+        }
+      )));
+    })
   );
 }
 
@@ -2952,7 +3135,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(() => {
@@ -3276,7 +3462,7 @@ function GameBoard(props) {
     justifyContent: "center",
     alignItems: "center",
     padding: "20px",
-    background: "#f5f5f5",
+    background: CONFIG.color.background,
     flex: "0 0 auto"
   };
   const headerContentStyle = {
@@ -3292,14 +3478,20 @@ function GameBoard(props) {
     lineHeight: 1.5,
     textAlign: "center"
   };
+  const scaleX = svgDimensions.width / viewBox.w;
+  const rightEdgeOfSemicircleLogical = viewBox.w / 2 + layout.outerR;
+  const distanceFromRightEdgeLogical = viewBox.w - rightEdgeOfSemicircleLogical;
+  const distanceFromRightEdgePx = distanceFromRightEdgeLogical * scaleX;
+  const charWidth = 24 * 0.6;
+  const offsetLeft = charWidth * 5;
   const timerStyle = {
     position: "absolute",
-    right: 0,
+    right: `${distanceFromRightEdgePx + offsetLeft}px`,
     fontSize: "24px",
     fontWeight: "bold",
     fontFamily: "monospace",
     color: "#333",
-    minWidth: "80px",
+    whiteSpace: "nowrap",
     textAlign: "right"
   };
   const gameboardWrapperStyle = {
@@ -3344,6 +3536,9 @@ function GameBoard(props) {
       onCenterBadgePointerDown,
       showTangramDecomposition: showTangramDecomposition ?? false,
       scaleS,
+      usePrimitiveColorsBlueprints: usePrimitiveColorsBlueprints ?? false,
+      usePrimitiveColorsTargets: usePrimitiveColorsTargets ?? false,
+      primitiveColorIndices: primitiveColorIndices ?? [0, 1, 2, 3, 4],
       ...eventCallbacks
     }
   ))));
@@ -3510,7 +3705,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));
@@ -3602,7 +3799,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 };
 }
@@ -3668,6 +3867,18 @@ const info = {
     onTrialEnd: {
       type: ParameterType.FUNCTION,
       default: void 0
+    },
+    /** Whether to use distinct colors for each primitive shape type in blueprints */
+    use_primitive_colors_blueprints: {
+      type: 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: 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: {
@@ -3712,7 +3923,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 };