@jjlmoya/utils-tabletop 1.4.0 → 1.5.0

package/src/tool/fantasy-runes-translator/types.ts

@@ -0,0 +1,26 @@
+export interface RuneCharacter {
+  symbol: string;
+  name: string;
+  meaning: string;
+  phonetic: string;
+}
+
+export type RuneAlphabetKey = 'elder-futhark' | 'anglo-saxon' | 'fantasy' | 'theban' | 'enochian' | 'daemonic' | 'ogham';
+
+export interface RuneAlphabet {
+  key: RuneAlphabetKey;
+  name: string;
+  description: string;
+  mapping: Record<string, RuneCharacter>;
+}
+
+export interface RuneCharacterResult {
+  input: string;
+  char: RuneCharacter | null;
+}
+
+export interface RuneTranslationResult {
+  alphabetKey: RuneAlphabetKey;
+  characters: RuneCharacterResult[];
+  raw: string;
+}

package/src/tool/rpg-initiative-tracker/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { initiativeTracker } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = initiativeTracker.i18n[locale] || initiativeTracker.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/rpg-initiative-tracker/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Dungeons & Dragons Basic Rules',
+    url: 'https://media.wizards.com/2018/dnd/downloads/DnD_BasicRules_2018.pdf',
+  },
+  {
+    name: 'Pathfinder Initiative Rules',
+    url: 'https://2e.aonprd.com/Rules.aspx?ID=2539',
+  },
+];

package/src/tool/rpg-initiative-tracker/client.ts

@@ -0,0 +1,201 @@
+import { addCombatant, removeCombatant, toggleStatus, startCombat, nextTurn, prevTurn, endCombat, createBlankState } from './logic';
+import type { InitiativeState } from './types';
+
+const STORAGE_KEY = 'initiative-tracker-state';
+
+const wrapper = document.querySelector('.init-main-wrapper') as HTMLElement;
+if (!wrapper) throw new Error('Initiative tracker wrapper not found');
+
+const ui: Record<string, string> = JSON.parse(wrapper.dataset.ui || '{}');
+
+function saveState(): void {
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(state)); } catch { }
+}
+
+function loadState(): InitiativeState {
+  try {
+    const s = localStorage.getItem(STORAGE_KEY);
+    if (s) return JSON.parse(s) as InitiativeState;
+  } catch { }
+  return createBlankState();
+}
+
+let state: InitiativeState = loadState();
+
+const $ = (id: string) => document.getElementById(id) as HTMLElement;
+const combatantList = $('init-combatant-list');
+const emptyState = $('init-empty-state');
+const nameInput = $('init-name-input') as HTMLInputElement;
+const initInput = $('init-value-input') as HTMLInputElement;
+const modInput = $('init-mod-input') as HTMLInputElement;
+const addBtn = $('init-add-btn');
+const startBtn = $('init-start-btn');
+const endBtn = $('init-end-btn');
+const nextBtn = $('init-next-btn');
+const prevBtn = $('init-prev-btn');
+const roundLabel = $('init-round-label');
+
+let currentType: 'player' | 'npc' = 'player';
+
+function renderCombatantList(): void {
+  if (state.combatants.length === 0) {
+    combatantList.innerHTML = '';
+    combatantList.appendChild(emptyState);
+    return;
+  }
+  const items = state.combatants.map((c, i) => {
+    const isActive = state.isCombatActive && i === state.currentIndex;
+    const typeClass = c.isPlayer ? 'player-order' : 'npc-order';
+    const activeClass = isActive ? ' active' : '';
+    const npcClass = c.isPlayer ? '' : ' npc';
+    const orderClass = isActive ? ' active-order' : ' ' + typeClass;
+    const statusHtml = c.statuses.map(s => {
+      return `<span class="init-status-tag active" data-status="${s}">${s}</span>`;
+    }).join('');
+    return `<div class="init-combatant-item${activeClass}${npcClass}" data-cbt-id="${c.id}"><span class="init-cbt-order${orderClass}">${i + 1}</span><span class="init-cbt-name">${c.name}</span><span class="init-cbt-init">${c.initiative}</span><div class="init-cbt-statuses">${statusHtml}</div><div class="init-cbt-actions"><button type="button" class="init-btn-icon remove" data-action="remove" title="${ui.removeCombatant}"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div></div>`;
+  }).join('');
+  combatantList.innerHTML = items;
+  combatantList.querySelectorAll('[data-action="remove"]').forEach(b => b.addEventListener('click', onRemove));
+  combatantList.querySelectorAll('.init-status-tag').forEach(t => {
+    t.addEventListener('click', onToggleStatus);
+  });
+}
+
+function onRemove(e: Event): void {
+  const item = (e.currentTarget as HTMLElement).closest('.init-combatant-item') as HTMLElement;
+  const id = item?.dataset.cbtId;
+  if (id) {
+    state = removeCombatant(state, id);
+    renderAll();
+  }
+}
+
+function onToggleStatus(e: Event): void {
+  const tag = e.currentTarget as HTMLElement;
+  const item = tag.closest('.init-combatant-item') as HTMLElement;
+  const id = item?.dataset.cbtId;
+  const status = tag.dataset.status;
+  if (id && status) {
+    state = toggleStatus(state, id, status);
+    renderAll();
+  }
+}
+
+function spawnTurnParticle(text: string): void {
+  const el = document.createElement('div');
+  el.className = 'init-turn-particle';
+  el.textContent = text;
+  el.style.cssText = 'left:50%;top:50%;position:fixed';
+  document.body.appendChild(el);
+  setTimeout(() => el.remove(), 1000);
+}
+
+function longPress(el: HTMLElement, duration: number, cb: () => void): void {
+  let timer: number | null = null;
+  const start = (): void => {
+    el.style.setProperty('--lp-dur', duration + 'ms');
+    el.classList.add('lp-active');
+    timer = window.setTimeout(() => {
+      el.classList.remove('lp-active');
+      cb();
+    }, duration);
+  };
+  const cancel = (): void => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+    el.classList.remove('lp-active');
+  };
+  el.addEventListener('mousedown', start);
+  el.addEventListener('mouseup', cancel);
+  el.addEventListener('mouseleave', cancel);
+  el.addEventListener('touchstart', start);
+  el.addEventListener('touchend', cancel);
+  el.addEventListener('touchcancel', cancel);
+}
+
+function getActiveCombatantName(): string {
+  const c = state.combatants[state.currentIndex];
+  return c ? c.name : '';
+}
+
+function renderAll(): void {
+  renderCombatantList();
+  const hasCombatants = state.combatants.length > 0;
+  const inCombat = state.isCombatActive;
+
+  if (inCombat && hasCombatants) {
+    roundLabel.textContent = ui.roundLabel + ' ' + state.round + ' - ' + ui.turnLabel + ' ' + (state.currentIndex + 1);
+  } else {
+    roundLabel.textContent = ui.roundLabel + ': --';
+  }
+
+  startBtn.style.display = inCombat ? 'none' : 'inline-block';
+  startBtn.disabled = !hasCombatants;
+  endBtn.style.display = inCombat ? 'inline-block' : 'none';
+  endBtn.disabled = !inCombat;
+  nextBtn.disabled = !inCombat;
+  prevBtn.disabled = !inCombat;
+
+  saveState();
+}
+
+addBtn.addEventListener('click', () => {
+  const name = nameInput.value.trim();
+  const initiative = parseInt(initInput.value, 10);
+  const modifier = parseInt(modInput.value, 10) || 0;
+  if (!name || isNaN(initiative)) return;
+  state = addCombatant(state, name, initiative, { modifier, isPlayer: currentType === 'player' });
+  nameInput.value = '';
+  initInput.value = '';
+  modInput.value = '';
+  nameInput.focus();
+  renderAll();
+});
+
+initInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') addBtn.click();
+});
+
+nameInput.addEventListener('keydown', (e) => {
+  if (e.key === 'Enter') initInput.focus();
+});
+
+const toggleBtns = document.querySelectorAll('.init-toggle-btn');
+toggleBtns.forEach(btn => {
+  btn.addEventListener('click', () => {
+    toggleBtns.forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    currentType = btn.dataset.type as 'player' | 'npc';
+  });
+});
+
+startBtn.addEventListener('click', () => {
+  state = startCombat(state);
+  const name = getActiveCombatantName();
+  if (name) spawnTurnParticle(name + ' ' + ui.yourTurn);
+  renderAll();
+});
+
+nextBtn.addEventListener('click', () => {
+  state = nextTurn(state);
+  const name = getActiveCombatantName();
+  if (name) spawnTurnParticle(name + ' ' + ui.yourTurn);
+  renderAll();
+});
+
+prevBtn.addEventListener('click', () => {
+  state = prevTurn(state);
+  const name = getActiveCombatantName();
+  if (name) spawnTurnParticle(name + ' ' + ui.yourTurn);
+  renderAll();
+});
+
+longPress(endBtn, 1000, () => {
+  state = endCombat(state);
+  spawnTurnParticle(ui.combatEnded);
+  renderAll();
+});
+
+renderAll();

package/src/tool/rpg-initiative-tracker/component.astro

@@ -0,0 +1,23 @@
+---
+import './rpg-initiative-tracker.css';
+import AddForm from './components/AddForm.astro';
+import CombatantList from './components/CombatantList.astro';
+import TurnControls from './components/TurnControls.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="init-main-wrapper" data-ui={JSON.stringify(ui)}>
+  <div class="init-header">
+    <h2>{ui.title}</h2>
+  </div>
+  <AddForm labels={ui} />
+  <CombatantList labels={ui} />
+  <TurnControls labels={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/rpg-initiative-tracker/components/AddForm.astro

@@ -0,0 +1,49 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="init-add-form" id="init-add-form">
+  <div class="init-form-group">
+    <label for="init-name-input">{labels.namePlaceholder}</label>
+    <input
+      type="text"
+      class="init-input"
+      id="init-name-input"
+      placeholder={labels.namePlaceholder}
+      autocomplete="off"
+    />
+  </div>
+  <div class="init-form-group">
+    <label for="init-value-input">{labels.initiativeLabel}</label>
+    <input
+      type="number"
+      class="init-input"
+      id="init-value-input"
+      placeholder={labels.initiativePlaceholder}
+    />
+  </div>
+  <div class="init-form-group">
+    <label for="init-mod-input">{labels.modifierLabel}</label>
+    <input
+      type="number"
+      class="init-input"
+      id="init-mod-input"
+      placeholder={labels.modifierPlaceholder}
+    />
+  </div>
+  <div class="init-toggle-group" id="init-type-toggle">
+    <button type="button" class="init-toggle-btn player active" data-type="player">
+      {labels.playerLabel}
+    </button>
+    <button type="button" class="init-toggle-btn npc" data-type="npc">
+      {labels.npcLabel}
+    </button>
+  </div>
+  <button type="button" class="init-btn-add" id="init-add-btn">
+    {labels.addButton}
+  </button>
+</div>

package/src/tool/rpg-initiative-tracker/components/CombatantList.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div id="init-combatant-list" class="init-combatant-list">
+  <div id="init-empty-state" class="init-empty-state">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
+    </svg>
+    <span>{labels.noCombatants}</span>
+  </div>
+</div>

package/src/tool/rpg-initiative-tracker/components/TurnControls.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="init-round-display" id="init-round-display">
+  <span class="init-round-number" id="init-round-label">
+    {labels.roundLabel}: --
+  </span>
+</div>
+
+<div class="init-turn-controls" id="init-turn-controls">
+  <button type="button" class="init-turn-btn primary" id="init-start-btn">
+    {labels.startCombat}
+  </button>
+  <button type="button" class="init-turn-btn" id="init-prev-btn" disabled>
+    {labels.prevTurn}
+  </button>
+  <button type="button" class="init-turn-btn" id="init-next-btn" disabled>
+    {labels.nextTurn}
+  </button>
+  <button type="button" class="init-turn-btn danger" id="init-end-btn" disabled>
+    {labels.endCombat}
+  </button>
+</div>

package/src/tool/rpg-initiative-tracker/entry.ts

@@ -0,0 +1,50 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+
+export type InitiativeTrackerUI = {
+  title: string;
+  addCombatant: string;
+  removeCombatant: string;
+  playerLabel: string;
+  npcLabel: string;
+  initiativeLabel: string;
+  modifierLabel: string;
+  namePlaceholder: string;
+  initiativePlaceholder: string;
+  modifierPlaceholder: string;
+  addButton: string;
+  startCombat: string;
+  endCombat: string;
+  nextTurn: string;
+  prevTurn: string;
+  roundLabel: string;
+  turnLabel: string;
+  noCombatants: string;
+  statusInput: string;
+  combatStarted: string;
+  combatEnded: string;
+  yourTurn: string;
+};
+
+export type InitiativeTrackerLocaleContent = ToolLocaleContent<InitiativeTrackerUI>;
+
+export const initiativeTracker: TabletopToolEntry<InitiativeTrackerUI> = {
+  id: 'rpg-initiative-tracker',
+  icons: { bg: 'mdi:sword-cross', fg: 'mdi:sword-cross' },
+  i18n: {
+    de: () => import('./i18n/de').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};