Boxels

import { Boxels } from 'boxels-in-js';

const sceneEl = document.getElementById('boxel-scene');

const b = new Boxels({
  boxelSize: 120,
  gap: 1,
  edgeWidth: 1,
  camera: { rotation: [-25, 15], distance: 1200 },
  orbit: true,
  zoom: true,
  showBackfaces: false,
});

// Build a 2x2x2 cube
b.addBox({ position: [0, 0, 0], size: [2, 2, 2] });

b.mount(sceneEl);
b.setTexture('glass', 20, 1);
b.startSpin({ x: false, y: true, speed: 1 });

// Handle clicks — show toast with face number
b.enableClick(({ face, boxel }) => {
  const msg = `Face ${face} at [${boxel}]`;
  console.log(msg);
});

// Number each visible face 1-4 per face direction
const faceCounters = {};
sceneEl.querySelectorAll('[data-boxel]').forEach((boxelEl) => {
  boxelEl.querySelectorAll('[data-face]').forEach((faceEl) => {
    const face = faceEl.dataset.face;
    faceCounters[face] = (faceCounters[face] || 0) + 1;
    const label = document.createElement('span');
    label.textContent = String(faceCounters[face]);
    faceEl.appendChild(label);
  });
});

// Texture switching
const textures = ['glass', 'solid', 'neon', 'hollow', 'frosted'];
document.querySelectorAll('.boxel-tex-btn').forEach((btn) => {
  btn.addEventListener('click', () => {
    const tex = btn.dataset.tex;
    b.setTexture(tex, 100, tex === 'frosted' ? 0.8 : 1.0);
  });
});