import * as EASEL from "easel";

const scene = new EASEL.Scene();
const camera = new EASEL.PerspectiveCamera({
  fov: 60, aspect: width / height, near: 0.1, far: 200,
});
camera.position.set(0, 4, 12);

const renderer = new EASEL.Renderer({ canvas, width, height });
scene.add(new EASEL.AmbientLight(0xffffff, 0.4));

const geometry = new EASEL.BoxGeometry(0.8, 0.8, 0.8);
const colors = [0x5577dd, 0xe07050, 0x50c080, 0xd0a030, 0xb060d0, 0x60b0d0];
const layers = [EASEL.Layer.GROUND, EASEL.Layer.SCENERY,
                EASEL.Layer.ENTITY, EASEL.Layer.OVERLAY];

// Optional fog
scene.fog = new EASEL.Fog({ color: 0x000000, near: 1, far: 30 });

// Optional checker texture
const size = 32;
const data = new Uint8ClampedArray(size * size * 4);
for (let y = 0; y < size; y++) {
  for (let x = 0; x < size; x++) {
    const i = (y * size + x) * 4;
    const v = ((x / 4 | 0) + (y / 4 | 0)) % 2 === 0 ? 220 : 60;
    data[i] = data[i+1] = data[i+2] = v;
    data[i+3] = 255;
  }
}
const texture = new EASEL.DataTexture(data, size, size);

// Spawn meshes in a grid with mixed layers and textures
for (let i = 0; i < 100; i++) {
  const mat = new EASEL.LambertMaterial({ color: colors[i % 6] });
  mat.layer = layers[i % 4];
  mat.map = texture;
  const mesh = new EASEL.Mesh(geometry, mat);
  const cols = Math.ceil(Math.sqrt(100));
  mesh.position.x = (i % cols) * 1.2 - ((cols - 1) * 1.2) / 2;
  mesh.position.z = Math.floor(i / cols) * 1.2 - ((cols - 1) * 1.2) / 2;
  scene.add(mesh);
}