jspsych-tangram 0.0.4 → 0.0.6
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.
- package/dist/construct/index.browser.js +18 -49
- package/dist/construct/index.browser.js.map +1 -1
- package/dist/construct/index.browser.min.js +10 -14
- package/dist/construct/index.browser.min.js.map +1 -1
- package/dist/construct/index.cjs +18 -49
- package/dist/construct/index.cjs.map +1 -1
- package/dist/construct/index.d.ts +12 -0
- package/dist/construct/index.js +18 -49
- package/dist/construct/index.js.map +1 -1
- package/dist/index.cjs +30 -52
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +24 -0
- package/dist/index.js +30 -52
- package/dist/index.js.map +1 -1
- package/dist/prep/index.browser.js +15 -5
- package/dist/prep/index.browser.js.map +1 -1
- package/dist/prep/index.browser.min.js +11 -11
- package/dist/prep/index.browser.min.js.map +1 -1
- package/dist/prep/index.cjs +15 -5
- package/dist/prep/index.cjs.map +1 -1
- package/dist/prep/index.d.ts +12 -0
- package/dist/prep/index.js +15 -5
- package/dist/prep/index.js.map +1 -1
- package/package.json +1 -1
- package/src/core/components/board/GameBoard.tsx +4 -1
- package/src/core/engine/state/BaseGameController.ts +0 -1
- package/src/plugins/tangram-construct/ConstructionApp.tsx +13 -53
- package/src/plugins/tangram-construct/index.ts +8 -1
- package/src/plugins/tangram-prep/PrepApp.tsx +8 -2
- package/src/plugins/tangram-prep/index.ts +8 -1
- package/tangram-construct.min.js +10 -14
- package/tangram-prep.min.js +11 -11
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,12 @@ declare const info$1: {
|
|
|
16
16
|
default: never[];
|
|
17
17
|
description: string;
|
|
18
18
|
};
|
|
19
|
+
/** Array of primitive names in the order they should be displayed */
|
|
20
|
+
primitive_order: {
|
|
21
|
+
type: ParameterType;
|
|
22
|
+
default: string[];
|
|
23
|
+
description: string;
|
|
24
|
+
};
|
|
19
25
|
/** Whether to place pieces in workspace or directly on silhouette */
|
|
20
26
|
target: {
|
|
21
27
|
type: ParameterType;
|
|
@@ -118,6 +124,12 @@ declare class TangramConstructPlugin implements JsPsychPlugin<Info$1> {
|
|
|
118
124
|
default: never[];
|
|
119
125
|
description: string;
|
|
120
126
|
};
|
|
127
|
+
/** Array of primitive names in the order they should be displayed */
|
|
128
|
+
primitive_order: {
|
|
129
|
+
type: ParameterType;
|
|
130
|
+
default: string[];
|
|
131
|
+
description: string;
|
|
132
|
+
};
|
|
121
133
|
/** Whether to place pieces in workspace or directly on silhouette */
|
|
122
134
|
target: {
|
|
123
135
|
type: ParameterType;
|
|
@@ -241,6 +253,12 @@ declare const info: {
|
|
|
241
253
|
default: never[];
|
|
242
254
|
description: string;
|
|
243
255
|
};
|
|
256
|
+
/** Array of primitive names in the order they should be displayed */
|
|
257
|
+
primitive_order: {
|
|
258
|
+
type: ParameterType;
|
|
259
|
+
default: string[];
|
|
260
|
+
description: string;
|
|
261
|
+
};
|
|
244
262
|
/** Callback fired after each interaction (optional analytics hook) */
|
|
245
263
|
onInteraction: {
|
|
246
264
|
type: ParameterType;
|
|
@@ -310,6 +328,12 @@ declare class TangramPrepPlugin implements JsPsychPlugin<Info> {
|
|
|
310
328
|
default: never[];
|
|
311
329
|
description: string;
|
|
312
330
|
};
|
|
331
|
+
/** Array of primitive names in the order they should be displayed */
|
|
332
|
+
primitive_order: {
|
|
333
|
+
type: ParameterType;
|
|
334
|
+
default: string[];
|
|
335
|
+
description: string;
|
|
336
|
+
};
|
|
313
337
|
/** Callback fired after each interaction (optional analytics hook) */
|
|
314
338
|
onInteraction: {
|
|
315
339
|
type: ParameterType;
|
package/dist/index.js
CHANGED
|
@@ -185,7 +185,6 @@ class BaseGameController {
|
|
|
185
185
|
const allDone = Object.values(this.state.sectors).every((s) => !!s.completedAt);
|
|
186
186
|
if (allDone && !this.state.endedAt) {
|
|
187
187
|
this.state.endedAt = NOW();
|
|
188
|
-
console.log("[BaseGameController] all sectors complete");
|
|
189
188
|
}
|
|
190
189
|
}
|
|
191
190
|
// ===== Piece Operations =====
|
|
@@ -3153,7 +3152,9 @@ function GameBoard(props) {
|
|
|
3153
3152
|
if (allSectorsComplete && !gameCompleted) {
|
|
3154
3153
|
setGameCompleted(true);
|
|
3155
3154
|
if (tracker) {
|
|
3156
|
-
|
|
3155
|
+
setTimeout(() => {
|
|
3156
|
+
tracker.finalizeTrial("auto_complete");
|
|
3157
|
+
}, 0);
|
|
3157
3158
|
}
|
|
3158
3159
|
}
|
|
3159
3160
|
};
|
|
@@ -3546,33 +3547,18 @@ function startConstructionTrial(display_element, params, _jsPsych) {
|
|
|
3546
3547
|
"medtriangle",
|
|
3547
3548
|
"largetriangle"
|
|
3548
3549
|
]);
|
|
3549
|
-
|
|
3550
|
-
console.log("[ConstructionApp] Received tangrams:", params.tangrams);
|
|
3551
|
-
console.log("[ConstructionApp] Number of tangrams:", params.tangrams.length);
|
|
3550
|
+
const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => params.primitiveOrder.indexOf(a.kind) - params.primitiveOrder.indexOf(b.kind));
|
|
3552
3551
|
const sectors = params.tangrams.map((tangramSpec, index) => {
|
|
3553
|
-
console.log(`
|
|
3554
|
-
[ConstructionApp] Processing tangram ${index}:`, tangramSpec);
|
|
3555
|
-
console.log(`[ConstructionApp] tangramID: ${tangramSpec.tangramID}`);
|
|
3556
|
-
console.log(`[ConstructionApp] setLabel: ${tangramSpec.setLabel}`);
|
|
3557
|
-
console.log(`[ConstructionApp] solutionTans count: ${tangramSpec.solutionTans?.length}`);
|
|
3558
|
-
console.log(`[ConstructionApp] solutionTans:`, tangramSpec.solutionTans);
|
|
3559
3552
|
const filteredTans = tangramSpec.solutionTans.filter((tan) => {
|
|
3560
3553
|
const tanName = tan.name ?? tan.kind;
|
|
3561
3554
|
const isCanonical = CANON.has(tanName);
|
|
3562
|
-
console.log(`[ConstructionApp] Tan "${tanName}": canonical=${isCanonical}, vertices count=${tan.vertices?.length}`);
|
|
3563
3555
|
return isCanonical;
|
|
3564
3556
|
});
|
|
3565
|
-
console.log(`[ConstructionApp] Filtered to ${filteredTans.length} canonical pieces`);
|
|
3566
3557
|
const mask = filteredTans.map((tan, tanIndex) => {
|
|
3567
|
-
const tanName = tan.name ?? tan.kind;
|
|
3568
3558
|
const polygon = tan.vertices.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }));
|
|
3569
|
-
console.log(`[ConstructionApp] Polygon ${tanIndex} (${tanName}): ${tan.vertices.length} vertices -> ${polygon.length} points`);
|
|
3570
|
-
console.log(`[ConstructionApp] First vertex: [${tan.vertices[0]?.[0]}, ${tan.vertices[0]?.[1]}] -> {x: ${polygon[0]?.x}, y: ${polygon[0]?.y}}`);
|
|
3571
3559
|
return polygon;
|
|
3572
3560
|
});
|
|
3573
3561
|
const sectorId = `sector${index}`;
|
|
3574
|
-
console.log(`[ConstructionApp] Assigned sector ID: ${sectorId}`);
|
|
3575
|
-
console.log(`[ConstructionApp] Final mask has ${mask.length} polygons`);
|
|
3576
3562
|
const sector = {
|
|
3577
3563
|
id: sectorId,
|
|
3578
3564
|
tangramId: tangramSpec.tangramID,
|
|
@@ -3581,61 +3567,37 @@ function startConstructionTrial(display_element, params, _jsPsych) {
|
|
|
3581
3567
|
mask
|
|
3582
3568
|
}
|
|
3583
3569
|
};
|
|
3584
|
-
console.log(`[ConstructionApp] Created sector:`, sector);
|
|
3585
3570
|
return sector;
|
|
3586
3571
|
});
|
|
3587
|
-
console.log("\n[ConstructionApp] Final sectors array:", sectors);
|
|
3588
|
-
console.log(`[ConstructionApp] Total sectors created: ${sectors.length}`);
|
|
3589
|
-
console.log("\n[ConstructionApp] Processing quickstash macros...");
|
|
3590
|
-
console.log("[ConstructionApp] quickstash_macros:", params.quickstash_macros);
|
|
3591
|
-
console.log("[ConstructionApp] quickstash_macros count:", params.quickstash_macros?.length ?? 0);
|
|
3592
3572
|
let quickstash = [];
|
|
3593
3573
|
if (params.quickstash_macros && params.quickstash_macros.length > 0) {
|
|
3594
3574
|
const firstMacro = params.quickstash_macros[0];
|
|
3595
|
-
console.log("[ConstructionApp] First macro:", firstMacro);
|
|
3596
3575
|
if (firstMacro && "parts" in firstMacro && firstMacro.parts && firstMacro.parts[0] && "anchorOffset" in firstMacro.parts[0]) {
|
|
3597
|
-
console.log("[ConstructionApp] Detected anchor-based composites, converting to pixels...");
|
|
3598
3576
|
const primsByKind = /* @__PURE__ */ new Map();
|
|
3599
|
-
|
|
3577
|
+
PRIMITIVE_BLUEPRINTS_ORDERED.forEach((p) => primsByKind.set(p.kind, p));
|
|
3600
3578
|
quickstash = params.quickstash_macros.map(
|
|
3601
3579
|
(anchorComposite) => convertAnchorCompositeToPixels(anchorComposite, primsByKind, CONFIG.layout.grid.stepPx)
|
|
3602
3580
|
// Use current CONFIG grid step
|
|
3603
3581
|
);
|
|
3604
|
-
console.log("[ConstructionApp] Converted to pixel-based blueprints:", quickstash);
|
|
3605
3582
|
} else {
|
|
3606
|
-
console.log("[ConstructionApp] Already pixel-based blueprints");
|
|
3607
3583
|
quickstash = params.quickstash_macros;
|
|
3608
3584
|
}
|
|
3609
|
-
} else {
|
|
3610
|
-
console.log("[ConstructionApp] No quickstash macros provided");
|
|
3611
3585
|
}
|
|
3612
3586
|
const gameBoardProps = {
|
|
3613
3587
|
sectors,
|
|
3614
3588
|
quickstash,
|
|
3615
|
-
primitives:
|
|
3616
|
-
layout: params.layout
|
|
3617
|
-
target: params.target
|
|
3618
|
-
input: params.input
|
|
3619
|
-
timeLimitMs: params.time_limit_ms
|
|
3589
|
+
primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
|
|
3590
|
+
layout: params.layout,
|
|
3591
|
+
target: params.target,
|
|
3592
|
+
input: params.input,
|
|
3593
|
+
timeLimitMs: params.time_limit_ms,
|
|
3620
3594
|
maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
|
|
3621
3595
|
mode: "construction",
|
|
3622
|
-
// Explicit construction mode
|
|
3623
3596
|
...params.onInteraction && { onInteraction: params.onInteraction },
|
|
3624
3597
|
...params.onTrialEnd && { onTrialEnd: params.onTrialEnd }
|
|
3625
3598
|
};
|
|
3626
|
-
console.log("\n[ConstructionApp] Final GameBoard props:");
|
|
3627
|
-
console.log("[ConstructionApp] sectors count:", gameBoardProps.sectors.length);
|
|
3628
|
-
console.log("[ConstructionApp] quickstash count:", gameBoardProps.quickstash.length);
|
|
3629
|
-
console.log("[ConstructionApp] primitives count:", gameBoardProps.primitives.length);
|
|
3630
|
-
console.log("[ConstructionApp] layout:", gameBoardProps.layout);
|
|
3631
|
-
console.log("[ConstructionApp] target:", gameBoardProps.target);
|
|
3632
|
-
console.log("[ConstructionApp] input:", gameBoardProps.input);
|
|
3633
|
-
console.log("[ConstructionApp] timeLimitMs:", gameBoardProps.timeLimitMs);
|
|
3634
|
-
console.log("[ConstructionApp] mode:", gameBoardProps.mode);
|
|
3635
|
-
console.log("[ConstructionApp] Full props:", gameBoardProps);
|
|
3636
3599
|
const root = createRoot(display_element);
|
|
3637
3600
|
root.render(React.createElement(GameBoard, gameBoardProps));
|
|
3638
|
-
console.log("[ConstructionApp] GameBoard rendered successfully");
|
|
3639
3601
|
return { root, display_element, jsPsych: _jsPsych };
|
|
3640
3602
|
}
|
|
3641
3603
|
|
|
@@ -3655,6 +3617,12 @@ const info$1 = {
|
|
|
3655
3617
|
default: [],
|
|
3656
3618
|
description: "Array of MacroSpec objects created in prep trial"
|
|
3657
3619
|
},
|
|
3620
|
+
/** Array of primitive names in the order they should be displayed */
|
|
3621
|
+
primitive_order: {
|
|
3622
|
+
type: ParameterType.OBJECT,
|
|
3623
|
+
default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
|
|
3624
|
+
description: "Array of primitive names in the order they should be displayed"
|
|
3625
|
+
},
|
|
3658
3626
|
/** Whether to place pieces in workspace or directly on silhouette */
|
|
3659
3627
|
target: {
|
|
3660
3628
|
type: ParameterType.SELECT,
|
|
@@ -3756,10 +3724,11 @@ class TangramConstructPlugin {
|
|
|
3756
3724
|
const params = {
|
|
3757
3725
|
tangrams: trial.tangrams,
|
|
3758
3726
|
quickstash_macros: trial.quickstash_macros,
|
|
3727
|
+
primitiveOrder: trial.primitive_order,
|
|
3759
3728
|
target: trial.target,
|
|
3760
3729
|
input: trial.input,
|
|
3761
3730
|
layout: trial.layout,
|
|
3762
|
-
time_limit_ms: trial.time_limit_ms
|
|
3731
|
+
time_limit_ms: trial.time_limit_ms,
|
|
3763
3732
|
onInteraction: trial.onInteraction,
|
|
3764
3733
|
onTrialEnd: wrappedOnTrialEnd
|
|
3765
3734
|
};
|
|
@@ -3777,9 +3746,11 @@ function startPrepTrial(display_element, params, jsPsych) {
|
|
|
3777
3746
|
layoutMode,
|
|
3778
3747
|
requireAllSlots,
|
|
3779
3748
|
quickstashMacros,
|
|
3749
|
+
primitiveOrder,
|
|
3780
3750
|
onInteraction,
|
|
3781
3751
|
onTrialEnd
|
|
3782
3752
|
} = params;
|
|
3753
|
+
const PRIMITIVE_BLUEPRINTS_ORDERED = [...PRIMITIVE_BLUEPRINTS].sort((a, b) => primitiveOrder.indexOf(a.kind) - primitiveOrder.indexOf(b.kind));
|
|
3783
3754
|
const prepSectors = Array.from({ length: numQuickstashSlots }, (_, i) => ({
|
|
3784
3755
|
id: `prep-sector-${i}`,
|
|
3785
3756
|
tangramId: `prep-sector-${i}`,
|
|
@@ -3793,7 +3764,7 @@ function startPrepTrial(display_element, params, jsPsych) {
|
|
|
3793
3764
|
const handleControllerReady = (controller, layout, force) => {
|
|
3794
3765
|
if (quickstashMacros && quickstashMacros.length > 0 && layout) {
|
|
3795
3766
|
const primsByKind = /* @__PURE__ */ new Map();
|
|
3796
|
-
|
|
3767
|
+
PRIMITIVE_BLUEPRINTS_ORDERED.forEach((p) => primsByKind.set(p.kind, p));
|
|
3797
3768
|
quickstashMacros.forEach((anchorComposite, macroIndex) => {
|
|
3798
3769
|
const sectorId = `prep-sector-${macroIndex}`;
|
|
3799
3770
|
const compositeBlueprint = convertAnchorCompositeToPixels(
|
|
@@ -3850,7 +3821,7 @@ function startPrepTrial(display_element, params, jsPsych) {
|
|
|
3850
3821
|
sectors: prepSectors,
|
|
3851
3822
|
quickstash: [],
|
|
3852
3823
|
// No pre-made macros
|
|
3853
|
-
primitives:
|
|
3824
|
+
primitives: PRIMITIVE_BLUEPRINTS_ORDERED,
|
|
3854
3825
|
layout: layoutMode,
|
|
3855
3826
|
target: "workspace",
|
|
3856
3827
|
// Pieces go in sectors
|
|
@@ -3911,6 +3882,12 @@ const info = {
|
|
|
3911
3882
|
default: [],
|
|
3912
3883
|
description: "Array of AnchorComposite objects to edit as primitive pieces"
|
|
3913
3884
|
},
|
|
3885
|
+
/** Array of primitive names in the order they should be displayed */
|
|
3886
|
+
primitive_order: {
|
|
3887
|
+
type: ParameterType.OBJECT,
|
|
3888
|
+
default: ["square", "smalltriangle", "parallelogram", "medtriangle", "largetriangle"],
|
|
3889
|
+
description: "Array of primitive names in the order they should be displayed"
|
|
3890
|
+
},
|
|
3914
3891
|
/** Callback fired after each interaction (optional analytics hook) */
|
|
3915
3892
|
onInteraction: {
|
|
3916
3893
|
type: ParameterType.FUNCTION,
|
|
@@ -3954,13 +3931,14 @@ class TangramPrepPlugin {
|
|
|
3954
3931
|
this.jsPsych.finishTrial(data);
|
|
3955
3932
|
};
|
|
3956
3933
|
const params = {
|
|
3957
|
-
numQuickstashSlots: trial.num_quickstash_slots
|
|
3934
|
+
numQuickstashSlots: trial.num_quickstash_slots,
|
|
3958
3935
|
maxPiecesPerMacro: trial.max_pieces_per_macro,
|
|
3959
3936
|
minPiecesPerMacro: trial.min_pieces_per_macro,
|
|
3960
3937
|
inputMode: trial.input,
|
|
3961
3938
|
layoutMode: trial.layout,
|
|
3962
3939
|
requireAllSlots: trial.require_all_slots,
|
|
3963
3940
|
quickstashMacros: trial.quickstash_macros,
|
|
3941
|
+
primitiveOrder: trial.primitive_order,
|
|
3964
3942
|
onInteraction: trial.onInteraction,
|
|
3965
3943
|
onTrialEnd: wrappedOnTrialEnd
|
|
3966
3944
|
};
|