jspsych-tangram 0.0.3 → 0.0.4

package/package.json

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

package/src/core/domain/primitives.ts

@@ -77,15 +77,14 @@ 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)],
+  "smalltriangle":   [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)],
+  "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)],
 };
 
 // ===== canonical half-edge primitives ===================
-// TODO: Sean we need to talk about aligning this with your Python implementation
 // Unchanging primitive tangram pieces - these are constants, not configurable
 const PRIMITIVE_BLUEPRINTS_CACHE = (() => {
   // Sequences copied verbatim from your Python tanprimitives_halfedges()
@@ -104,8 +103,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",
@@ -118,15 +117,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, 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"
+  | "smalltriangle"
   | "parallelogram"
-  | "med-triangle"
-  | "large-triangle";
+  | "medtriangle"
+  | "largetriangle";
 
 // 2×2 interaction axes
 export type PlacementTarget = "workspace" | "silhouette";
@@ -55,6 +55,7 @@ export type SilhouetteSpec = {
 
 export type Sector = {
   id: string;
+  tangramId: string;
   silhouette: SilhouetteSpec;
 };
 

package/src/core/io/InteractionTracker.ts

@@ -571,7 +571,7 @@ export class InteractionTracker {
     // Build sector-tangram map
     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
     }));
 
     // Build blueprint order

package/src/core/io/quickstash.ts

@@ -3,32 +3,6 @@ import { CONFIG } from "@/core/config/config";
 import type { Blueprint, CompositeBlueprint, PrimitiveBlueprint, TanKind, Vec } from "@/core/domain/types";
 import { primitiveBlueprintsHalfEdge } from "@/core/domain/primitives";
 
-/**
- * Convert anchor coordinates to pixel coordinates
- * @param anchorX - X coordinate in anchor units (integer)
- * @param anchorY - Y coordinate in anchor units (integer)
- * @returns Pixel coordinates
- */
-export function anchorToPixels(anchorX: number, anchorY: number): Vec {
-  return { 
-    x: anchorX * CONFIG.layout.grid.stepPx, 
-    y: anchorY * CONFIG.layout.grid.stepPx 
-  };
-}
-
-/**
- * Convert pixel coordinates to anchor coordinates
- * @param pixelX - X coordinate in pixels
- * @param pixelY - Y coordinate in pixels
- * @returns Anchor coordinates (rounded to nearest grid point)
- */
-export function pixelsToAnchor(pixelX: number, pixelY: number): Vec {
-  return {
-    x: Math.round(pixelX / CONFIG.layout.grid.stepPx),
-    y: Math.round(pixelY / CONFIG.layout.grid.stepPx)
-  };
-}
-
 /**
  * Convert anchor-based composite definition to pixel-based composite with custom grid step
  * @param anchorComposite - Composite defined with anchor coordinates
@@ -84,10 +58,10 @@ const ANCHOR_COMPOSITES = [
     label: "Parallelogram+Parallelogram"
   },
   {
-    id: "comp:small-triangle+med-triangle",
+    id: "comp:smalltriangle+medtriangle",
     parts: [
-      { kind: "small-triangle" as TanKind, anchorOffset: { x: -2, y: -2 } },
-      { kind: "med-triangle" as TanKind, anchorOffset: { x: 0, y: 0 } },
+      { kind: "smalltriangle" as TanKind, anchorOffset: { x: -2, y: -2 } },
+      { kind: "medtriangle" as TanKind, anchorOffset: { x: 0, y: 0 } },
     ],
     label: "SmallTriangle+MedTriangle"
   },

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

@@ -40,7 +40,7 @@ export interface TangramSpec {
   tangramID: string;
   setLabel: string;
   solutionTans: Array<{
-    name: string;                     // TanKind as string (e.g., "small-triangle")
+    name: string;                     // TanKind as string (e.g., "smalltriangle")
     vertices: number[][];             // Array of [x, y] coordinate pairs
   }>;
 }

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

@@ -51,15 +51,12 @@ export function startConstructionTrial(
   // Canonical piece names we accept
   const CANON = new Set([
     "square",
-    "small-triangle",
+    "smalltriangle",
     "parallelogram",
-    "med-triangle",
-    "large-triangle",
+    "medtriangle",
+    "largetriangle",
   ]);
 
-  // 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
   console.log('[ConstructionApp] Starting tangram conversion...');
   console.log('[ConstructionApp] Received tangrams:', params.tangrams);
@@ -92,12 +89,14 @@ export function startConstructionTrial(
     });
 
     // Assign sector ID from alphabetical sequence
-    const sectorId = SECTOR_IDS[index] ?? `S${index}`;
+    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,

package/src/plugins/tangram-prep/PrepApp.tsx

@@ -60,6 +60,7 @@ export function startPrepTrial(
   // Create blank prep sectors (no silhouettes)
   const prepSectors: Sector[] = 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: []