jspsych-tangram 0.0.12 → 0.0.14

package/dist/nback/index.browser.js

@@ -16675,30 +16675,41 @@ var TangramNBackPlugin = (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 },
@@ -16716,7 +16727,8 @@ var TangramNBackPlugin = (function (jspsych) {
 	  game: {
 	    snapRadiusPx: 15,
 	    showBorders: false,
-	    hideTouchingBorders: true
+	    hideTouchingBorders: true,
+	    silhouettesBelowPieces: true
 	  }
 	};
 
@@ -16768,6 +16780,8 @@ var TangramNBackPlugin = (function (jspsych) {
 	    instructions,
 	    button_text,
 	    duration,
+	    usePrimitiveColors,
+	    primitiveColorIndices,
 	    onTrialEnd
 	  } = params;
 	  const trialStartTime = reactExports.useRef(Date.now());
@@ -16823,7 +16837,12 @@ var TangramNBackPlugin = (function (jspsych) {
 	      ...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);
@@ -16877,35 +16896,77 @@ var TangramNBackPlugin = (function (jspsych) {
 	    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"
+	      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;
+	            }
+	          }
 	        }
-	      ), /* @__PURE__ */ React.createElement(
-	        "path",
-	        {
-	          d: pathD(scaledPoly),
-	          fill: "none",
-	          stroke: CONFIG.color.tangramDecomposition.stroke,
-	          strokeWidth: CONFIG.size.stroke.tangramDecompositionPx
-	        }
-	      ))));
+	        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: {
@@ -16914,7 +16975,7 @@ var TangramNBackPlugin = (function (jspsych) {
 	    alignItems: "center",
 	    justifyContent: "center",
 	    padding: "20px",
-	    background: "#f5f5f5"
+	    background: "#fff7e0ff"
 	  } }, instructions && /* @__PURE__ */ React.createElement(
 	    "div",
 	    {
@@ -17004,6 +17065,18 @@ var TangramNBackPlugin = (function (jspsych) {
 	      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,
@@ -17070,6 +17143,8 @@ var TangramNBackPlugin = (function (jspsych) {
 	      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);