{"spec_id":"sudoku-basic","library":"echarts","language":"javascript","code":"// anyplot.ai\n// sudoku-basic: Basic Sudoku Grid\n// Library: echarts 5.5.1 | JavaScript 22.23.0\n// Quality: 89/100 | Created: 2026-06-25\n//# anyplot-orientation: square\n\nconst t = window.ANYPLOT_TOKENS;\nconst THEME = window.ANYPLOT_THEME;\nconst W = window.ANYPLOT_SIZE.width;\nconst H = window.ANYPLOT_SIZE.height;\n\n// --- Data -------------------------------------------------------------------\n// Classic Sudoku puzzle (0 = empty cell)\nconst puzzle = [\n  [5, 3, 0, 0, 7, 0, 0, 0, 0],\n  [6, 0, 0, 1, 9, 5, 0, 0, 0],\n  [0, 9, 8, 0, 0, 0, 0, 6, 0],\n  [8, 0, 0, 0, 6, 0, 0, 0, 3],\n  [4, 0, 0, 8, 0, 3, 0, 0, 1],\n  [7, 0, 0, 0, 2, 0, 0, 0, 6],\n  [0, 6, 0, 0, 0, 0, 2, 8, 0],\n  [0, 0, 0, 4, 1, 9, 0, 0, 5],\n  [0, 0, 0, 0, 8, 0, 0, 7, 9],\n];\n\n// --- Theme tokens -----------------------------------------------------------\nconst INK = t.ink;\nconst CELL_BG = t.elevatedBg;\nconst BOX_ALT_BG = THEME === \"light\"\n  ? \"rgba(26,26,23,0.04)\"\n  : \"rgba(240,239,232,0.06)\";\nconst THIN_LINE = THEME === \"light\"\n  ? \"rgba(26,26,23,0.30)\"\n  : \"rgba(240,239,232,0.30)\";\n\n// --- Layout (CSS pixels; square canvas = 1200×1200 CSS → 2400×2400 PNG) ----\nconst TITLE_H = 90;\nconst PAD = 75;\nconst GRID_SIZE = Math.min(W - 2 * PAD, H - TITLE_H - PAD);\nconst OFFSET_X = Math.round((W - GRID_SIZE) / 2);\nconst OFFSET_Y = TITLE_H + Math.round((H - TITLE_H - PAD - GRID_SIZE) / 2);\nconst CELL = GRID_SIZE / 9;\nconst BOX = CELL * 3;\nconst NUM_FONT = Math.round(CELL * 0.50);\n\n// --- Build graphic elements -------------------------------------------------\nconst els = [];\n\n// 1. Cell background fill (base)\nels.push({\n  type: \"rect\",\n  shape: { x: OFFSET_X, y: OFFSET_Y, width: GRID_SIZE, height: GRID_SIZE },\n  style: { fill: CELL_BG, stroke: \"none\" },\n  z: 1,\n});\n\n// 1b. Alternating 3×3 box tonal overlay to reinforce box region grouping\nfor (let br = 0; br < 3; br++) {\n  for (let bc = 0; bc < 3; bc++) {\n    if ((br + bc) % 2 === 0) continue;\n    els.push({\n      type: \"rect\",\n      shape: {\n        x: OFFSET_X + bc * BOX,\n        y: OFFSET_Y + br * BOX,\n        width: BOX,\n        height: BOX,\n      },\n      style: { fill: BOX_ALT_BG, stroke: \"none\" },\n      z: 1,\n    });\n  }\n}\n\n// 2. Thin cell lines (skip box boundaries at multiples of 3)\nfor (let i = 1; i < 9; i++) {\n  if (i % 3 === 0) continue;\n  const lx = OFFSET_X + i * CELL;\n  const ly = OFFSET_Y + i * CELL;\n  els.push({\n    type: \"line\",\n    shape: { x1: lx, y1: OFFSET_Y, x2: lx, y2: OFFSET_Y + GRID_SIZE },\n    style: { stroke: THIN_LINE, lineWidth: 1 },\n    z: 2,\n  });\n  els.push({\n    type: \"line\",\n    shape: { x1: OFFSET_X, y1: ly, x2: OFFSET_X + GRID_SIZE, y2: ly },\n    style: { stroke: THIN_LINE, lineWidth: 1 },\n    z: 2,\n  });\n}\n\n// 3. Thick box-boundary lines at columns/rows 3 and 6\nfor (let i = 3; i < 9; i += 3) {\n  const bx = OFFSET_X + i * CELL;\n  const by = OFFSET_Y + i * CELL;\n  els.push({\n    type: \"line\",\n    shape: { x1: bx, y1: OFFSET_Y, x2: bx, y2: OFFSET_Y + GRID_SIZE },\n    style: { stroke: INK, lineWidth: 3 },\n    z: 3,\n  });\n  els.push({\n    type: \"line\",\n    shape: { x1: OFFSET_X, y1: by, x2: OFFSET_X + GRID_SIZE, y2: by },\n    style: { stroke: INK, lineWidth: 3 },\n    z: 3,\n  });\n}\n\n// 4. Outer border (slightly heavier than box lines)\nels.push({\n  type: \"rect\",\n  shape: { x: OFFSET_X, y: OFFSET_Y, width: GRID_SIZE, height: GRID_SIZE },\n  style: { fill: \"none\", stroke: INK, lineWidth: 4 },\n  z: 4,\n});\n\n// 5. Numbers — bold, centered in each cell\nfor (let row = 0; row < 9; row++) {\n  for (let col = 0; col < 9; col++) {\n    const num = puzzle[row][col];\n    if (num === 0) continue;\n    els.push({\n      type: \"text\",\n      style: {\n        text: String(num),\n        x: OFFSET_X + col * CELL + CELL / 2,\n        y: OFFSET_Y + row * CELL + CELL / 2,\n        textAlign: \"center\",\n        textVerticalAlign: \"middle\",\n        fill: INK,\n        fontSize: NUM_FONT,\n        fontFamily: \"'Helvetica Neue', Arial, sans-serif\",\n        fontWeight: \"bold\",\n      },\n      z: 5,\n    });\n  }\n}\n\n// --- Init -------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\nchart.setOption({\n  animation: false,\n  backgroundColor: \"transparent\",\n  title: {\n    text: \"sudoku-basic · javascript · echarts · anyplot.ai\",\n    left: \"center\",\n    top: 22,\n    textStyle: { color: t.ink, fontSize: 22 },\n  },\n  graphic: els,\n});\n"}