jspsych-tangram 0.0.13 → 0.0.14

package/dist/prep/index.cjs

@@ -16,8 +16,9 @@ const CONFIG = {
     silhouetteMask: "#374151",
     anchors: { invalid: "#7dd3fc", valid: "#475569" },
     // validFill used here for placed composites
-    piece: { draggingFill: "#8e7cc3", validFill: "#8e7cc3", invalidFill: "#d55c00", invalidStroke: "#dc2626", allGreenStroke: "#86efac"},
-    blueprint: { fill: "#374151", badgeFill: "#000000", labelFill: "#ffffff" },
+    piece: { draggingFill: "#8e7cc3", validFill: "#8e7cc3", invalidFill: "#d55c00", invalidStroke: "#dc2626", selectedStroke: "#674ea7", allGreenStroke: "#86efac", borderStroke: "#674ea7" },
+    ui: { light: "#60a5fa", dark: "#1d4ed8" },
+    blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#000000", labelFill: "#ffffff" },
     tangramDecomposition: { stroke: "#fef2cc" },
     primitiveColors: [
       // from seaborn "colorblind" palette, 6 colors, with red omitted
@@ -36,7 +37,7 @@ const CONFIG = {
     piece: { invalid: 1, dragging: 1, locked: 1, normal: 1 }
   },
   size: {
-    stroke: { bandPx: 5, allGreenStrokePx: 10, tangramDecompositionPx: 1 },
+    stroke: { bandPx: 5, pieceSelectedPx: 5, allGreenStrokePx: 10, pieceBorderPx: 2, tangramDecompositionPx: 1 },
     anchorRadiusPx: { valid: 1, invalid: 1 },
     badgeFontPx: 16,
     centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 },
@@ -52,10 +53,15 @@ const CONFIG = {
       quickstashDiamAnchors: 7,
       // num anchors req'd to be in single quickstash slot
       primitiveDiamAnchors: 5
-    }},
+    },
+    defaults: { maxQuickstashSlots: 1 }
+  },
   game: {
     snapRadiusPx: 15,
-    showBorders: false}
+    showBorders: false,
+    hideTouchingBorders: true,
+    silhouettesBelowPieces: true
+  }
 };
 
 function isComposite(bp) {
@@ -3474,14 +3480,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 = {