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