jspsych-tangram 0.0.12 → 0.0.14

package/dist/prep/index.browser.js

@@ -16660,30 +16660,41 @@ var TangramPrepPlugin = (function (jspsych) {
 
 	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 },
@@ -16701,7 +16712,8 @@ var TangramPrepPlugin = (function (jspsych) {
 	  game: {
 	    snapRadiusPx: 15,
 	    showBorders: false,
-	    hideTouchingBorders: true
+	    hideTouchingBorders: true,
+	    silhouettesBelowPieces: true
 	  }
 	};
 
@@ -17485,6 +17497,31 @@ var TangramPrepPlugin = (function (jspsych) {
 	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,
@@ -17504,6 +17541,9 @@ var TangramPrepPlugin = (function (jspsych) {
 	    dragInvalid,
 	    lockedPieceId,
 	    showTangramDecomposition,
+	    usePrimitiveColorsBlueprints,
+	    usePrimitiveColorsTargets,
+	    primitiveColorIndices,
 	    svgRef,
 	    setPieceRef,
 	    onPiecePointerDown,
@@ -17514,6 +17554,144 @@ var TangramPrepPlugin = (function (jspsych) {
 	    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;
@@ -17534,6 +17712,12 @@ var TangramPrepPlugin = (function (jspsych) {
 	    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",
 	      {
@@ -17545,7 +17729,7 @@ var TangramPrepPlugin = (function (jspsych) {
 	        {
 	          key: idx,
 	          d: pathD(poly),
-	          fill: CONFIG.color.blueprint.fill,
+	          fill: fillColor,
 	          opacity: CONFIG.opacity.blueprint,
 	          stroke: "none",
 	          strokeWidth: 0,
@@ -17569,7 +17753,7 @@ var TangramPrepPlugin = (function (jspsych) {
 	      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;
@@ -17579,35 +17763,7 @@ var TangramPrepPlugin = (function (jspsych) {
 	      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) {
@@ -17615,23 +17771,32 @@ var TangramPrepPlugin = (function (jspsych) {
 	        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;
@@ -17722,7 +17887,25 @@ var TangramPrepPlugin = (function (jspsych) {
 	      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
+	        }
+	      )));
+	    })
 	  );
 	}
 
@@ -19663,7 +19846,10 @@ var TangramPrepPlugin = (function (jspsych) {
 	    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(() => {
@@ -19987,7 +20173,7 @@ var TangramPrepPlugin = (function (jspsych) {
 	    justifyContent: "center",
 	    alignItems: "center",
 	    padding: "20px",
-	    background: "#f5f5f5",
+	    background: CONFIG.color.background,
 	    flex: "0 0 auto"
 	  };
 	  const headerContentStyle = {
@@ -20003,14 +20189,20 @@ var TangramPrepPlugin = (function (jspsych) {
 	    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 = {
@@ -20055,6 +20247,9 @@ var TangramPrepPlugin = (function (jspsych) {
 	      onCenterBadgePointerDown,
 	      showTangramDecomposition: showTangramDecomposition ?? false,
 	      scaleS,
+	      usePrimitiveColorsBlueprints: usePrimitiveColorsBlueprints ?? false,
+	      usePrimitiveColorsTargets: usePrimitiveColorsTargets ?? false,
+	      primitiveColorIndices: primitiveColorIndices ?? [0, 1, 2, 3, 4],
 	      ...eventCallbacks
 	    }
 	  ))));
@@ -20221,7 +20416,9 @@ var TangramPrepPlugin = (function (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));
@@ -20313,7 +20510,9 @@ var TangramPrepPlugin = (function (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 };
 	}
@@ -20379,6 +20578,18 @@ var TangramPrepPlugin = (function (jspsych) {
 	    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: {
@@ -20423,7 +20634,9 @@ var TangramPrepPlugin = (function (jspsych) {
 	      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 };