jspsych-tangram 0.0.11 → 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.
@@ -3273,19 +3273,28 @@ function GameBoard(props) {
3273
3273
  const headerStyle = {
3274
3274
  display: "flex",
3275
3275
  flexDirection: "row",
3276
- justifyContent: "space-between",
3276
+ justifyContent: "center",
3277
3277
  alignItems: "center",
3278
3278
  padding: "20px",
3279
3279
  background: "#f5f5f5",
3280
3280
  flex: "0 0 auto"
3281
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
+ };
3282
3290
  const instructionsStyle = {
3283
- flexGrow: 1,
3284
3291
  fontSize: "20px",
3285
3292
  lineHeight: 1.5,
3286
- marginRight: "20px"
3293
+ textAlign: "center"
3287
3294
  };
3288
3295
  const timerStyle = {
3296
+ position: "absolute",
3297
+ right: 0,
3289
3298
  fontSize: "24px",
3290
3299
  fontWeight: "bold",
3291
3300
  fontFamily: "monospace",
@@ -3300,14 +3309,14 @@ function GameBoard(props) {
3300
3309
  justifyContent: "center",
3301
3310
  overflow: "hidden"
3302
3311
  };
3303
- 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(
3304
3313
  "div",
3305
3314
  {
3306
3315
  className: "tangram-instructions",
3307
3316
  style: instructionsStyle,
3308
3317
  dangerouslySetInnerHTML: { __html: instructions }
3309
3318
  }
3310
- ), 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(
3311
3320
  BoardView,
3312
3321
  {
3313
3322
  controller,