initial

src/arcRender_retool_inline.js

@@ -0,0 +1,178 @@
+/**
+ * ARC Puzzle Renderer for Retool - INLINE VERSION
+ *
+ * USAGE IN RETOOL HTML COMPONENT:
+ * Paste this entire code block wrapped in {{ ... }} in your HTML component
+ *
+ * Example for database query:
+ * {{
+ *   (function() {
+ *     // ... paste this entire file content here ...
+ *   })()
+ * }}
+ */
+
+(function() {
+  // =============================================
+  // GET DATA FROM RETOOL QUERY
+  // =============================================
+
+  // ADJUST THESE LINES based on your Retool setup:
+  const selectedPuzzle = problem_select.value; // Your selector name
+
+  // Handle empty selection
+  if (!selectedPuzzle) {
+    return '<div style="color: orange; padding: 20px; font-family: Arial;">No puzzle data available. Please select a problem.</div>';
+  }
+
+  // Use the selected row directly
+  const row = selectedPuzzle;
+
+  // Parse JSON if it's stored as text, otherwise use as-is
+  let puzzleData;
+  try {
+    puzzleData = typeof row.json === 'string'
+      ? JSON.parse(row.json)
+      : row.json;
+  } catch (e) {
+    return '<div style="color: red; padding: 20px; font-family: Arial;">Error parsing JSON: ' + e.message + '</div>';
+  }
+
+  // =============================================
+  // ARC RENDERER CODE
+  // =============================================
+
+  // Color mapping for ARC puzzles (0-9)
+  const ARC_COLORS = {
+    0: '#000000', // black
+    1: '#0074D9', // blue
+    2: '#FF4136', // red
+    3: '#2ECC40', // green
+    4: '#FFDC00', // yellow
+    5: '#AAAAAA', // grey
+    6: '#F012BE', // magenta
+    7: '#FF851B', // orange
+    8: '#7FDBFF', // light blue
+    9: '#85144b'  // dark red
+  };
+
+  /**
+   * Renders a single grid as HTML
+   */
+  function renderGrid(grid, label) {
+    if (!grid || grid.length === 0) {
+      return '<div style="color: red;">Invalid grid data</div>';
+    }
+
+    const rows = grid.length;
+    const cols = grid[0].length;
+    const cellSize = 20; // Fixed 20px per cell
+
+    let html = '<div style="display: inline-block; margin: 10px;">';
+
+    // Add dimension label
+    if (label) {
+      html += `<div style="text-align: center; margin-bottom: 5px; font-size: 12px; color: #333;">${label}</div>`;
+    }
+
+    // Grid container with black border
+    html += `<div style="display: inline-block; border: 1px solid #000000;">`;
+
+    // Render each row
+    for (let r = 0; r < rows; r++) {
+      html += '<div style="display: flex; line-height: 0;">';
+
+      // Render each cell in the row
+      for (let c = 0; c < cols; c++) {
+        const cellValue = grid[r][c];
+        const color = ARC_COLORS[cellValue] || '#FFFFFF';
+
+        html += `<div style="width: ${cellSize}px; height: ${cellSize}px; background-color: ${color}; outline: 0.5px solid rgba(200, 200, 200, 0.3); outline-offset: -0.5px;"></div>`;
+      }
+
+      html += '</div>'; // Close row
+    }
+
+    html += '</div>'; // Close grid container
+    html += '</div>'; // Close inline-block wrapper
+
+    return html;
+  }
+
+  /**
+   * Renders a training or test pair (input and output side-by-side)
+   */
+  function renderPair(inputGrid, outputGrid, exampleIndex) {
+    let html = '';
+
+    // Add spacing between examples (except for the first one)
+    if (exampleIndex > 0) {
+      html += '<div style="height: 40px;"></div>';
+    }
+
+    html += '<div style="display: flex; align-items: flex-start; justify-content: flex-start;">';
+
+    // Render input grid
+    const inputRows = inputGrid.length;
+    const inputCols = inputGrid[0].length;
+    html += renderGrid(inputGrid, `${inputCols}×${inputRows}`);
+
+    // Add spacing between input and output (2 cells worth = 40px)
+    html += '<div style="width: 40px;"></div>';
+
+    // Render output grid if provided
+    if (outputGrid) {
+      const outputRows = outputGrid.length;
+      const outputCols = outputGrid[0].length;
+      html += renderGrid(outputGrid, `${outputCols}×${outputRows}`);
+    }
+
+    html += '</div>'; // Close pair container
+
+    return html;
+  }
+
+  /**
+   * Main rendering function
+   */
+  function renderArcPuzzle(data) {
+    // Validate data structure
+    if (!data || !data.train || !data.test) {
+      return '<div style="color: red;">Error: JSON must contain "train" and "test" properties</div>';
+    }
+
+    let html = '<div style="font-family: Arial, sans-serif;">';
+
+    // === TRAINING SECTION ===
+    html += '<div style="margin-bottom: 60px;">';
+    html += '<h3 style="margin: 0 0 20px 0; color: #333;">Training Examples</h3>';
+
+    data.train.forEach((example, index) => {
+      html += renderPair(example.input, example.output, index);
+    });
+
+    html += '</div>'; // Close training section
+
+    // === TEST SECTION ===
+    html += '<div>';
+    html += '<h3 style="margin: 0 0 20px 0; color: #333;">Test</h3>';
+
+    data.test.forEach((example, index) => {
+      // Render both test input and output
+      html += renderPair(example.input, example.output, index);
+    });
+
+    html += '</div>'; // Close test section
+
+    html += '</div>'; // Close main container
+
+    return html;
+  }
+
+  // =============================================
+  // RENDER AND RETURN
+  // =============================================
+
+  return renderArcPuzzle(puzzleData);
+
+})()