jspsych-tangram 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jspsych-tangram",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "Tangram tasks for jsPsych: prep and construct.",
   "type": "module",
   "main": "dist/index.cjs",

package/src/core/domain/primitives.ts

@@ -77,11 +77,11 @@ function constructFromSpec(
 // ===== default first edges in UNIT coords ( +y is UP here ) =================
 // Copied from your `default_pilot_rotations`. We invert y above for canvas.
 const FIRST_EDGES_UNITS: Record<TanKind, [Vec, Vec]> = {
-  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)],
 };
 
 // ===== canonical half-edge primitives ===================
@@ -105,7 +105,7 @@ const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
     },
     {
       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",
@@ -119,14 +119,14 @@ const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
     },
     {
       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, HALFDIAGONAL, HALFDIAGONAL,
         HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT, HALFUNIT

package/src/core/domain/types.ts

@@ -5,10 +5,10 @@ export type Poly = Vec[];
 // Canonical tans
 export type TanKind =
   | "square"
-  | "small_triangle"
+  | "small-triangle"
   | "parallelogram"
-  | "med_triangle"
-  | "large_triangle";
+  | "med-triangle"
+  | "large-triangle";
 
 // 2×2 interaction axes
 export type PlacementTarget = "workspace" | "silhouette";
@@ -51,7 +51,6 @@ export type SilhouetteSpec = {
   id: string;
   anchors?: Anchor[];
   mask?: Poly[];            // polygon masks for silhouette matching
-  requiredCount?: number;   // minimal pieces to consider the sector complete (M4)
 };
 
 export type Sector = {

package/src/core/io/quickstash.ts

@@ -84,10 +84,10 @@ const ANCHOR_COMPOSITES = [
     label: "Parallelogram+Parallelogram"
   },
   {
-    id: "comp:small_triangle+med_triangle", 
+    id: "comp:small-triangle+med-triangle",
     parts: [
-      { kind: "small_triangle" as TanKind, anchorOffset: { x: -2, y: -2 } },
-      { kind: "med_triangle" as TanKind, anchorOffset: { x: 0, y: 0 } },
+      { kind: "small-triangle" as TanKind, anchorOffset: { x: -2, y: -2 } },
+      { kind: "med-triangle" as TanKind, anchorOffset: { x: 0, y: 0 } },
     ],
     label: "SmallTriangle+MedTriangle"
   },

package/src/core/io/stims.ts

@@ -18,10 +18,10 @@ type RawStim = {
 /** Canonical tangram names we accept as actual piece polys. */
 const CANON = new Set([
   "square",
-  "small_triangle",
+  "small-triangle",
   "parallelogram",
-  "med_triangle",
-  "large_triangle",
+  "med-triangle",
+  "large-triangle",
 ]);
 
 // ----------------------- guards & converters -----------------------
@@ -59,8 +59,7 @@ function polyFromVertices(vertices: Array<[number, number] | { x: number; y: num
  */
 export function normalizeStims(
   src: unknown,
-  fallbackSectorIds: string[],
-  defaultRequired = 2
+  fallbackSectorIds: string[]
 ): Sector[] {
   const rawList: RawStim[] = Array.isArray(src)
     ? (src as RawStim[])
@@ -89,7 +88,6 @@ export function normalizeStims(
       silhouette: {
         id,
         mask: polys,
-        requiredCount: defaultRequired,
       },
     });
   }
@@ -100,11 +98,10 @@ export function normalizeStims(
 /** Fetch + normalize helper for dev path (e.g., "/dev/assets/stims_dev.json"). */
 export async function loadStimSectorsFromUrl(
   url: string,
-  sectorIds: string[],
-  defaultRequired = 2
+  sectorIds: string[]
 ): Promise<Sector[]> {
   const res = await fetch(url);
   if (!res.ok) throw new Error(`Failed to load stims: ${res.status} ${res.statusText}`);
   const json = await res.json();
-  return normalizeStims(json, sectorIds, defaultRequired);
+  return normalizeStims(json, sectorIds);
 }

package/src/core/types/plugin-interfaces.ts

@@ -37,11 +37,12 @@ export interface PrepTrialData {
 
 // Supporting types for plugin interfaces
 export interface TangramSpec {
-  id: string;
-  silhouette: {
-    mask: number[][][];               // Polygon arrays as numbers
-    requiredCount: number;
-  };
+  tangramID: string;
+  setLabel: string;
+  solutionTans: Array<{
+    name: string;                     // TanKind as string (e.g., "small-triangle")
+    vertices: number[][];             // Array of [x, y] coordinate pairs
+  }>;
 }
 
 export interface MacroSpec {

package/src/index.spec.ts

@@ -1,19 +0,0 @@
-import { startTimeline } from "@jspsych/test-utils";
-
-import { TangramConstructPlugin } from ".";
-
-jest.useFakeTimers();
-
-describe("my plugin", () => {
-  it("should load", async () => {
-    const { expectFinished } = await startTimeline([
-      {
-        type: TangramConstructPlugin,
-        parameter_name: 1,
-        parameter_name2: "img.png",
-      },
-    ]);
-
-    await expectFinished();
-  });
-});

package/src/plugins/tangram-construct/ConstructionApp.tsx

@@ -44,62 +44,136 @@ type AnchorComposite = {
  * Start a construction trial by rendering the GameBoard component
  */
 export function startConstructionTrial(
-  display_element: HTMLElement, 
+  display_element: HTMLElement,
   params: StartConstructionTrialParams,
   _jsPsych: JsPsych
 ) {
+  // Canonical piece names we accept
+  const CANON = new Set([
+    "square",
+    "small-triangle",
+    "parallelogram",
+    "med-triangle",
+    "large-triangle",
+  ]);
+
+  // Sector IDs in alphabetical order
+  const SECTOR_IDS = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'];
+
   // Convert JSON plugin parameters to internal Sector[] format
-  const sectors: Sector[] = params.tangrams.map(tangramSpec => ({
-    id: tangramSpec.id,
-    silhouette: {
-      id: tangramSpec.id,
-      mask: tangramSpec.silhouette.mask.map((polygonArray: number[][]) => 
-        polygonArray.map(([x, y]: number[]) => ({ x: x ?? 0, y: -(y ?? 0) })) // Convert to SVG coords (flip Y)
-      ),
-      requiredCount: tangramSpec.silhouette.requiredCount,
-    },
-  }));
+  console.log('[ConstructionApp] Starting tangram conversion...');
+  console.log('[ConstructionApp] Received tangrams:', params.tangrams);
+  console.log('[ConstructionApp] Number of tangrams:', params.tangrams.length);
+
+  const sectors: Sector[] = params.tangrams.map((tangramSpec, index) => {
+    console.log(`\n[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);
+
+    // Filter to canonical pieces only and convert vertices to polygon format
+    const filteredTans = tangramSpec.solutionTans.filter((tan: any) => {
+      // Support both "name" and "kind" fields (different JSON formats)
+      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: any, tanIndex: number) => {
+      const tanName = tan.name ?? tan.kind;
+      const polygon = tan.vertices.map(([x, y]: number[]) => ({ 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;
+    });
+
+    // Assign sector ID from alphabetical sequence
+    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}`);
 
   // Convert quickstash_macros to Blueprint[] format
   // Handle both anchor-based composites and pre-converted blueprints
+  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: Blueprint[] = [];
-  
+
   if (params.quickstash_macros && params.quickstash_macros.length > 0) {
     // Check if the first item has anchorOffset (anchor-based) or offset (pixel-based)
     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...');
+
       // Create primitive map for conversion
       const primsByKind = new Map<TanKind, PrimitiveBlueprint>();
       PRIMITIVE_BLUEPRINTS.forEach(p => primsByKind.set(p.kind, p));
-      
+
       // Convert each anchor composite to pixel-based blueprint
-      quickstash = (params.quickstash_macros as AnchorComposite[]).map(anchorComposite => 
+      quickstash = (params.quickstash_macros as AnchorComposite[]).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');
       // Already pixel-based blueprints
       quickstash = params.quickstash_macros as Blueprint[];
     }
+  } else {
+    console.log('[ConstructionApp] No quickstash macros provided');
   }
 
   // Create React root and render GameBoard
+  const gameBoardProps = {
+    sectors,
+    quickstash,
+    primitives: PRIMITIVE_BLUEPRINTS,
+    layout: (params.layout || "semicircle") as LayoutMode,
+    target: (params.target || "silhouette") as PlacementTarget,
+    input: (params.input || "drag") as InputMode,
+    timeLimitMs: params.time_limit_ms || 0,
+    maxQuickstashSlots: CONFIG.layout.defaults.maxQuickstashSlots,
+    mode: 'construction' as const, // 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 = createRoot(display_element);
-  root.render(
-    React.createElement(GameBoard, {
-      sectors,
-      quickstash,
-      primitives: PRIMITIVE_BLUEPRINTS,
-      layout: (params.layout || "semicircle") as LayoutMode,
-      target: (params.target || "silhouette") as PlacementTarget,
-      input: (params.input || "drag") as InputMode,
-      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 };
 }