import { artDirection, directionTheme, appearanceTile } from './art-directions.js';
import { drawScene, drawTile, CanvasPainter } from './renderer.js';
import { createStudyLevel } from './study-levels.js';
import { layout } from './geometry.js';
import { TILE_ATLAS } from './sprites.js';
const direction=artDirection(document.body.dataset.design),level=createStudyLevel(3),atlas=new Image();
function paint(){
  const c=document.querySelector('#sheet-tokens'),p=new CanvasPainter(c.getContext('2d'));p.atlas=atlas;p.ctx.clearRect(0,0,c.width,c.height);
  for(let i=0;i<4;i++)drawTile(p,105+i*165,135+(i%2?-12:12),83,appearanceTile({color:i,dir:1},directionTheme(direction,'lagoon')));
  document.querySelectorAll('[data-sheet-theme]').forEach(c=>{const p=new CanvasPainter(c.getContext('2d'));p.atlas=atlas;drawScene(p,level,level.tiles,layout(level.cells,c.width,c.height),{theme:directionTheme(direction,c.dataset.sheetTheme)});});
  const reference=document.querySelector('#sheet-reference-board');
  if(reference){
    const sample=JSON.parse(document.querySelector('#sheet-reference-data').textContent),ctx=reference.getContext('2d'),p=new CanvasPainter(ctx);
    const view={size:reference.width/9.3,ox:reference.width/2,oy:reference.height/2};
    const theme={...directionTheme(direction,'lagoon'),palette:sample.tiles.map(t=>t.color)};
    ctx.clearRect(0,0,reference.width,reference.height);drawScene(p,sample,sample.tiles,view,{theme});
  }
}
atlas.onload=paint;atlas.src=new URL('../'+TILE_ATLAS,import.meta.url).href;paint();