jspsych-tangram 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -2928,8 +2928,7 @@ class InteractionTracker {
     }
     const sectorTangramMap = this.controller.state.cfg.sectors.map((s) => ({
       sectorId: s.id,
-      tangramId: s.id
-      // In our system, sector ID == tangram ID
+      tangramId: s.tangramId
     }));
     const blueprintOrder = {
       primitives: this.controller.state.primitives.map((bp) => bp.id),
@@ -3434,11 +3433,11 @@ function constructFromSpec(sideLens, angles, firstEdgeUnits) {
   return pts;
 }
 const FIRST_EDGES_UNITS = {
-  small_triangle: [P(0, 0), P(0.5, 0.5)],
-  parallelogram: [P(0, 0), P(0.5, 0)],
-  large_triangle: [P(0, 0), P(0.5, -0.5)],
-  med_triangle: [P(0, 0), P(0.5, 0)],
-  square: [P(0, 0), P(0.5, 0)]
+  "smalltriangle": [P(0, 0), P(0.5, 0.5)],
+  "parallelogram": [P(0, 0), P(0.5, 0)],
+  "largetriangle": [P(0, 0), P(0.5, -0.5)],
+  "medtriangle": [P(0, 0), P(0.5, 0)],
+  "square": [P(0, 0), P(0.5, 0)]
 };
 const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
   const specs = [
@@ -3450,8 +3449,8 @@ const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
       color: "#f43f5e"
     },
     {
-      id: "prim:small",
-      kind: "small_triangle",
+      id: "prim:smalltriangle",
+      kind: "smalltriangle",
       sideLens: [HALFDIAGONAL, HALFDIAGONAL, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT],
       angles: [180, 45, 180, 90, 180, 45],
       color: "#f59e0b"
@@ -3464,15 +3463,15 @@ const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
       color: "#10b981"
     },
     {
-      id: "prim:med",
-      kind: "med_triangle",
+      id: "prim:medtriangle",
+      kind: "medtriangle",
       sideLens: [HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFDIAGONAL, HALFDIAGONAL, HALFDIAGONAL, HALFDIAGONAL],
       angles: [180, 180, 180, 45, 180, 90, 180, 45],
       color: "#3b82f6"
     },
     {
-      id: "prim:large",
-      kind: "large_triangle",
+      id: "prim:largetriangle",
+      kind: "largetriangle",
       sideLens: [
         HALFDIAGONAL,
         HALFDIAGONAL,
@@ -3542,48 +3541,103 @@ function convertAnchorCompositeToPixels(anchorComposite, primsByKind, gridStepPx
 }
 
 function startConstructionTrial(display_element, params, _jsPsych) {
-  const sectors = params.tangrams.map((tangramSpec) => ({
-    id: tangramSpec.id,
-    silhouette: {
-      id: tangramSpec.id,
-      mask: tangramSpec.silhouette.mask.map(
-        (polygonArray) => polygonArray.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }))
-        // Convert to SVG coords (flip Y)
-      ),
-      requiredCount: tangramSpec.silhouette.requiredCount
-    }
-  }));
+  const CANON = /* @__PURE__ */ new Set([
+    "square",
+    "smalltriangle",
+    "parallelogram",
+    "medtriangle",
+    "largetriangle"
+  ]);
+  console.log("[ConstructionApp] Starting tangram conversion...");
+  console.log("[ConstructionApp] Received tangrams:", params.tangrams);
+  console.log("[ConstructionApp] Number of tangrams:", params.tangrams.length);
+  const sectors = params.tangrams.map((tangramSpec, index) => {
+    console.log(`
+[ConstructionApp] Processing tangram ${index}:`, tangramSpec);
+    console.log(`[ConstructionApp] tangramID: ${tangramSpec.tangramID}`);
+    console.log(`[ConstructionApp] setLabel: ${tangramSpec.setLabel}`);
+    console.log(`[ConstructionApp] solutionTans count: ${tangramSpec.solutionTans?.length}`);
+    console.log(`[ConstructionApp] solutionTans:`, tangramSpec.solutionTans);
+    const filteredTans = tangramSpec.solutionTans.filter((tan) => {
+      const tanName = tan.name ?? tan.kind;
+      const isCanonical = CANON.has(tanName);
+      console.log(`[ConstructionApp]   Tan "${tanName}": canonical=${isCanonical}, vertices count=${tan.vertices?.length}`);
+      return isCanonical;
+    });
+    console.log(`[ConstructionApp] Filtered to ${filteredTans.length} canonical pieces`);
+    const mask = filteredTans.map((tan, tanIndex) => {
+      const tanName = tan.name ?? tan.kind;
+      const polygon = tan.vertices.map(([x, y]) => ({ x: x ?? 0, y: -(y ?? 0) }));
+      console.log(`[ConstructionApp]   Polygon ${tanIndex} (${tanName}): ${tan.vertices.length} vertices -> ${polygon.length} points`);
+      console.log(`[ConstructionApp]     First vertex: [${tan.vertices[0]?.[0]}, ${tan.vertices[0]?.[1]}] -> {x: ${polygon[0]?.x}, y: ${polygon[0]?.y}}`);
+      return polygon;
+    });
+    const sectorId = `sector${index}`;
+    console.log(`[ConstructionApp] Assigned sector ID: ${sectorId}`);
+    console.log(`[ConstructionApp] Final mask has ${mask.length} polygons`);
+    const sector = {
+      id: sectorId,
+      tangramId: tangramSpec.tangramID,
+      silhouette: {
+        id: sectorId,
+        mask
+      }
+    };
+    console.log(`[ConstructionApp] Created sector:`, sector);
+    return sector;
+  });
+  console.log("\n[ConstructionApp] Final sectors array:", sectors);
+  console.log(`[ConstructionApp] Total sectors created: ${sectors.length}`);
+  console.log("\n[ConstructionApp] Processing quickstash macros...");
+  console.log("[ConstructionApp] quickstash_macros:", params.quickstash_macros);
+  console.log("[ConstructionApp] quickstash_macros count:", params.quickstash_macros?.length ?? 0);
   let quickstash = [];
   if (params.quickstash_macros && params.quickstash_macros.length > 0) {
     const firstMacro = params.quickstash_macros[0];
+    console.log("[ConstructionApp] First macro:", firstMacro);
     if (firstMacro && "parts" in firstMacro && firstMacro.parts && firstMacro.parts[0] && "anchorOffset" in firstMacro.parts[0]) {
+      console.log("[ConstructionApp] Detected anchor-based composites, converting to pixels...");
       const primsByKind = /* @__PURE__ */ new Map();
       PRIMITIVE_BLUEPRINTS.forEach((p) => primsByKind.set(p.kind, p));
       quickstash = params.quickstash_macros.map(
         (anchorComposite) => convertAnchorCompositeToPixels(anchorComposite, primsByKind, CONFIG.layout.grid.stepPx)
         // Use current CONFIG grid step
       );
+      console.log("[ConstructionApp] Converted to pixel-based blueprints:", quickstash);
     } else {
+      console.log("[ConstructionApp] Already pixel-based blueprints");
       quickstash = params.quickstash_macros;
     }
+  } else {
+    console.log("[ConstructionApp] No quickstash macros provided");
   }
+  const gameBoardProps = {
+    sectors,
+    quickstash,
+    primitives: PRIMITIVE_BLUEPRINTS,
+    layout: params.layout || "semicircle",
+    target: params.target || "silhouette",
+    input: params.input || "drag",
+    timeLimitMs: params.time_limit_ms || 0,
+    maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
+    mode: "construction",
+    // Explicit construction mode
+    ...params.onInteraction && { onInteraction: params.onInteraction },
+    ...params.onTrialEnd && { onTrialEnd: params.onTrialEnd }
+  };
+  console.log("\n[ConstructionApp] Final GameBoard props:");
+  console.log("[ConstructionApp]   sectors count:", gameBoardProps.sectors.length);
+  console.log("[ConstructionApp]   quickstash count:", gameBoardProps.quickstash.length);
+  console.log("[ConstructionApp]   primitives count:", gameBoardProps.primitives.length);
+  console.log("[ConstructionApp]   layout:", gameBoardProps.layout);
+  console.log("[ConstructionApp]   target:", gameBoardProps.target);
+  console.log("[ConstructionApp]   input:", gameBoardProps.input);
+  console.log("[ConstructionApp]   timeLimitMs:", gameBoardProps.timeLimitMs);
+  console.log("[ConstructionApp]   mode:", gameBoardProps.mode);
+  console.log("[ConstructionApp] Full props:", gameBoardProps);
   const root = client.createRoot(display_element);
-  root.render(
-    React.createElement(GameBoard, {
-      sectors,
-      quickstash,
-      primitives: PRIMITIVE_BLUEPRINTS,
-      layout: params.layout || "semicircle",
-      target: params.target || "silhouette",
-      input: params.input || "drag",
-      timeLimitMs: params.time_limit_ms || 0,
-      maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
-      mode: "construction",
-      // Explicit construction mode
-      ...params.onInteraction && { onInteraction: params.onInteraction },
-      ...params.onTrialEnd && { onTrialEnd: params.onTrialEnd }
-    })
-  );
+  root.render(React.createElement(GameBoard, gameBoardProps));
+  console.log("[ConstructionApp] GameBoard rendered successfully");
   return { root, display_element, jsPsych: _jsPsych };
 }
 
@@ -3730,6 +3784,8 @@ function startPrepTrial(display_element, params, jsPsych) {
   } = params;
   const prepSectors = Array.from({ length: numQuickstashSlots }, (_, i) => ({
     id: `prep-sector-${i}`,
+    tangramId: `prep-sector-${i}`,
+    // dummy value since prep mode doesn't have tangrams
     silhouette: {
       id: `prep-silhouette-${i}`,
       mask: []