// Mythic Oracle — Meaning tables (Action + Descriptor)

import { getTable } from './api.js';

let actionEntries = null;
let descriptorEntries = null;

async function loadTables() {
  if (!actionEntries) {
    actionEntries = (await getTable('action')).entries;
  }
  if (!descriptorEntries) {
    descriptorEntries = (await getTable('descriptor')).entries;
  }
}

function renderWord(elId, word) {
  const el = document.getElementById(elId);
  el.textContent = word;
  el.classList.remove('animate');
  void el.offsetWidth;
  el.classList.add('animate');
}

async function rollAction() {
  await loadTables();
  const word = actionEntries[Math.floor(Math.random() * actionEntries.length)];
  renderWord('meaningAction', word);
}

async function rollDescriptor() {
  await loadTables();
  const word = descriptorEntries[Math.floor(Math.random() * descriptorEntries.length)];
  renderWord('meaningDescriptor', word);
}

async function rollMeaning() {
  await rollAction();
  await rollDescriptor();
}

function init() {
  document.getElementById('meaningRollBtn').addEventListener('click', rollMeaning);
  document.getElementById('actionRollBtn').addEventListener('click', rollAction);
  document.getElementById('descriptorRollBtn').addEventListener('click', rollDescriptor);
}

document.addEventListener('DOMContentLoaded', init);