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