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.
Files changed (34) hide show
  1. package/dist/construct/index.browser.js +3881 -4521
  2. package/dist/construct/index.browser.js.map +1 -1
  3. package/dist/construct/index.browser.min.js +13 -13
  4. package/dist/construct/index.browser.min.js.map +1 -1
  5. package/dist/construct/index.cjs +21 -9
  6. package/dist/construct/index.cjs.map +1 -1
  7. package/dist/construct/index.js +21 -9
  8. package/dist/construct/index.js.map +1 -1
  9. package/dist/index.cjs +23 -12
  10. package/dist/index.cjs.map +1 -1
  11. package/dist/index.js +23 -12
  12. package/dist/index.js.map +1 -1
  13. package/dist/nback/index.browser.js +3897 -4517
  14. package/dist/nback/index.browser.js.map +1 -1
  15. package/dist/nback/index.browser.min.js +12 -12
  16. package/dist/nback/index.browser.min.js.map +1 -1
  17. package/dist/nback/index.cjs +39 -7
  18. package/dist/nback/index.cjs.map +1 -1
  19. package/dist/nback/index.js +39 -7
  20. package/dist/nback/index.js.map +1 -1
  21. package/dist/prep/index.browser.js +3883 -4521
  22. package/dist/prep/index.browser.js.map +1 -1
  23. package/dist/prep/index.browser.min.js +13 -13
  24. package/dist/prep/index.browser.min.js.map +1 -1
  25. package/dist/prep/index.cjs +24 -10
  26. package/dist/prep/index.cjs.map +1 -1
  27. package/dist/prep/index.js +24 -10
  28. package/dist/prep/index.js.map +1 -1
  29. package/package.json +1 -1
  30. package/src/core/components/board/GameBoard.tsx +102 -89
  31. package/src/plugins/tangram-nback/NBackApp.tsx +2 -3
  32. package/tangram-construct.min.js +13 -13
  33. package/tangram-nback.min.js +12 -12
  34. package/tangram-prep.min.js +13 -13
package/dist/index.js CHANGED
@@ -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 }
@@ -44,7 +45,9 @@ const CONFIG = {
44
45
  },
45
46
  game: {
46
47
  snapRadiusPx: 15,
47
- showBorders: false}
48
+ showBorders: false,
49
+ hideTouchingBorders: true
50
+ }
48
51
  };
49
52
 
50
53
  function isComposite(bp) {
@@ -3270,19 +3273,28 @@ function GameBoard(props) {
3270
3273
  const headerStyle = {
3271
3274
  display: "flex",
3272
3275
  flexDirection: "row",
3273
- justifyContent: "space-between",
3276
+ justifyContent: "center",
3274
3277
  alignItems: "center",
3275
3278
  padding: "20px",
3276
3279
  background: "#f5f5f5",
3277
3280
  flex: "0 0 auto"
3278
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
+ };
3279
3290
  const instructionsStyle = {
3280
- flexGrow: 1,
3281
3291
  fontSize: "20px",
3282
3292
  lineHeight: 1.5,
3283
- marginRight: "20px"
3293
+ textAlign: "center"
3284
3294
  };
3285
3295
  const timerStyle = {
3296
+ position: "absolute",
3297
+ right: 0,
3286
3298
  fontSize: "24px",
3287
3299
  fontWeight: "bold",
3288
3300
  fontFamily: "monospace",
@@ -3297,14 +3309,14 @@ function GameBoard(props) {
3297
3309
  justifyContent: "center",
3298
3310
  overflow: "hidden"
3299
3311
  };
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(
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(
3301
3313
  "div",
3302
3314
  {
3303
3315
  className: "tangram-instructions",
3304
3316
  style: instructionsStyle,
3305
3317
  dangerouslySetInnerHTML: { __html: instructions }
3306
3318
  }
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(
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(
3308
3320
  BoardView,
3309
3321
  {
3310
3322
  controller,
@@ -4085,9 +4097,8 @@ function NBackView({ params }) {
4085
4097
  display: "flex",
4086
4098
  flexDirection: "column",
4087
4099
  alignItems: "center",
4088
- justifyContent: "flex-start",
4089
- minHeight: "100vh",
4090
- padding: "40px 20px",
4100
+ justifyContent: "center",
4101
+ padding: "20px",
4091
4102
  background: "#f5f5f5"
4092
4103
  } }, instructions && /* @__PURE__ */ React.createElement(
4093
4104
  "div",