jspsych-tangram 0.0.10 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -14,8 +14,9 @@ const CONFIG = {
14
14
  completion: { fill: "#ccfff2", stroke: "#13da57" },
15
15
  silhouetteMask: "#374151",
16
16
  anchors: { invalid: "#7dd3fc", valid: "#475569" },
17
- piece: { draggingFill: "#8e7cc3ff", validFill: "#8e7cc3ff", invalidFill: "#ef4444", allGreenStroke: "#86efac"},
18
- blueprint: { fill: "#374151", badgeFill: "#000000", labelFill: "#ffffff" },
17
+ piece: { draggingFill: "#8e7cc3ff", validFill: "#8e7cc3ff", invalidFill: "#ef4444", invalidStroke: "#dc2626", selectedStroke: "#674ea7", allGreenStroke: "#86efac", borderStroke: "#674ea7" },
18
+ ui: { light: "#60a5fa", dark: "#1d4ed8" },
19
+ blueprint: { fill: "#374151", selectedStroke: "#111827", badgeFill: "#000000", labelFill: "#ffffff" },
19
20
  tangramDecomposition: { stroke: "#fef2cc" }
20
21
  },
21
22
  opacity: {
@@ -26,7 +27,7 @@ const CONFIG = {
26
27
  piece: { invalid: 0.35, dragging: 0.75, locked: 1, normal: 1 }
27
28
  },
28
29
  size: {
29
- stroke: { bandPx: 5, allGreenStrokePx: 10, tangramDecompositionPx: 1 },
30
+ stroke: { bandPx: 5, pieceSelectedPx: 3, allGreenStrokePx: 10, pieceBorderPx: 2, tangramDecompositionPx: 1 },
30
31
  anchorRadiusPx: { valid: 1, invalid: 1 },
31
32
  badgeFontPx: 16,
32
33
  centerBadge: { fractionOfOuterR: 0.15, minPx: 20, marginPx: 4 }
@@ -41,10 +42,14 @@ const CONFIG = {
41
42
  quickstashDiamAnchors: 7,
42
43
  // num anchors req'd to be in single quickstash slot
43
44
  primitiveDiamAnchors: 5
44
- }},
45
+ },
46
+ defaults: { maxQuickstashSlots: 1 }
47
+ },
45
48
  game: {
46
49
  snapRadiusPx: 15,
47
- showBorders: false}
50
+ showBorders: false,
51
+ hideTouchingBorders: true
52
+ }
48
53
  };
49
54
 
50
55
  function isComposite(bp) {
@@ -3270,19 +3275,28 @@ function GameBoard(props) {
3270
3275
  const headerStyle = {
3271
3276
  display: "flex",
3272
3277
  flexDirection: "row",
3273
- justifyContent: "space-between",
3278
+ justifyContent: "center",
3274
3279
  alignItems: "center",
3275
3280
  padding: "20px",
3276
3281
  background: "#f5f5f5",
3277
3282
  flex: "0 0 auto"
3278
3283
  };
3284
+ const headerContentStyle = {
3285
+ position: "relative",
3286
+ width: `${svgDimensions.width}px`,
3287
+ maxWidth: "100%",
3288
+ display: "flex",
3289
+ justifyContent: "center",
3290
+ alignItems: "center"
3291
+ };
3279
3292
  const instructionsStyle = {
3280
- flexGrow: 1,
3281
3293
  fontSize: "20px",
3282
3294
  lineHeight: 1.5,
3283
- marginRight: "20px"
3295
+ textAlign: "center"
3284
3296
  };
3285
3297
  const timerStyle = {
3298
+ position: "absolute",
3299
+ right: 0,
3286
3300
  fontSize: "24px",
3287
3301
  fontWeight: "bold",
3288
3302
  fontFamily: "monospace",
@@ -3297,14 +3311,14 @@ function GameBoard(props) {
3297
3311
  justifyContent: "center",
3298
3312
  overflow: "hidden"
3299
3313
  };
3300
- 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(
3314
+ 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(
3301
3315
  "div",
3302
3316
  {
3303
3317
  className: "tangram-instructions",
3304
3318
  style: instructionsStyle,
3305
3319
  dangerouslySetInnerHTML: { __html: instructions }
3306
3320
  }
3307
- ), 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(
3321
+ ), 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(
3308
3322
  BoardView,
3309
3323
  {
3310
3324
  controller,