jspsych-tangram 0.0.2 → 0.0.3

package/dist/construct/index.browser.js

@@ -20143,11 +20143,11 @@ var TangramConstructPlugin = (function (jspsych) {
 	  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)]
+	  "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)]
 	};
 	const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
 	  const specs = [
@@ -20160,7 +20160,7 @@ var TangramConstructPlugin = (function (jspsych) {
 	    },
 	    {
 	      id: "prim:small",
-	      kind: "small_triangle",
+	      kind: "small-triangle",
 	      sideLens: [HALFDIAGONAL, HALFDIAGONAL, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT],
 	      angles: [180, 45, 180, 90, 180, 45],
 	      color: "#f59e0b"
@@ -20174,14 +20174,14 @@ var TangramConstructPlugin = (function (jspsych) {
 	    },
 	    {
 	      id: "prim:med",
-	      kind: "med_triangle",
+	      kind: "med-triangle",
 	      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",
+	      kind: "large-triangle",
 	      sideLens: [
 	        HALFDIAGONAL,
 	        HALFDIAGONAL,
@@ -20251,48 +20251,103 @@ var TangramConstructPlugin = (function (jspsych) {
 	}
 
 	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",
+	    "small-triangle",
+	    "parallelogram",
+	    "med-triangle",
+	    "large-triangle"
+	  ]);
+	  const SECTOR_IDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L"];
+	  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_IDS[index] ?? `S${index}`;
+	    console.log(`[ConstructionApp] Assigned sector ID: ${sectorId}`);
+	    console.log(`[ConstructionApp] Final mask has ${mask.length} polygons`);
+	    const sector = {
+	      id: sectorId,
+	      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 = clientExports.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 };
 	}