@jjlmoya/utils-tabletop 1.26.0 → 1.28.0

package/src/tool/mus-scoreboard/seo.astro

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

package/src/tool/mus-scoreboard/storage.ts

@@ -0,0 +1,29 @@
+import type { MusState } from './logic';
+
+const STORAGE_KEY = 'jjlmoya-mus-scoreboard-state';
+
+export const loadMusState = (): MusState | null => {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const state = JSON.parse(raw) as MusState;
+    if (!state.config.deck) state.config.deck = 'spanish';
+    if (state.hand !== 0 && state.hand !== 1) state.hand = 0;
+    state.history = state.history.map((entry) => ({ ...entry, hand: entry.hand === 1 ? 1 : 0 }));
+    return state;
+  } catch {
+    return null;
+  }
+};
+
+export const saveMusState = (state: MusState): void => {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+  } catch {}
+};
+
+export const clearMusState = (): void => {
+  try {
+    window.localStorage.removeItem(STORAGE_KEY);
+  } catch {}
+};

package/src/tool/mus-scoreboard/ui.ts

@@ -0,0 +1,63 @@
+export interface MusScoreboardUI {
+  [key: string]: string;
+  onboarding: string;
+  pairOneLabel: string;
+  pairTwoLabel: string;
+  pairOneDefault: string;
+  pairTwoDefault: string;
+  targetPointsLabel: string;
+  targetPointsHint: string;
+  gamesToWinLabel: string;
+  gamesToWinHint: string;
+  deckLabel: string;
+  deckHint: string;
+  spanishDeck: string;
+  frenchDeck: string;
+  frenchDeckNotice: string;
+  pointsOption30: string;
+  pointsOption40: string;
+  pointsOption50: string;
+  gamesOption1: string;
+  gamesOption2: string;
+  gamesOption3: string;
+  startMatch: string;
+  matchSettings: string;
+  liveMatch: string;
+  targetLabel: string;
+  gameLabel: string;
+  gamePlural: string;
+  vacaLabel: string;
+  scoreLabel: string;
+  handLabel: string;
+  handSelected: string;
+  stonesLabel: string;
+  stoneSingular: string;
+  stonePlural: string;
+  amarracoSingular: string;
+  amarracoPlural: string;
+  pointsToGo: string;
+  addStone: string;
+  addAmarraco: string;
+  closeGame: string;
+  closeGamePrompt: string;
+  confirmationTitle: string;
+  confirmAction: string;
+  cancelAction: string;
+  undo: string;
+  resetMatch: string;
+  resetMatchPrompt: string;
+  historyTitle: string;
+  noHistory: string;
+  matchReady: string;
+  closeGameHint: string;
+  waitingForScore: string;
+  gameWon: string;
+  vacaWon: string;
+  gameClosed: string;
+  pointsAdded: string;
+  matchSaved: string;
+  lastAction: string;
+  settingsApplied: string;
+  pairNameRequired: string;
+  visualScoreLabel: string;
+}

package/src/tool/token-stamp-studio/bibliography.astro

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

package/src/tool/token-stamp-studio/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Foundry Virtual Tabletop, Tokens',
+    url: 'https://foundryvtt.com/article/tokens/',
+  },
+  {
+    name: 'Foundry Virtual Tabletop, Actors',
+    url: 'https://foundryvtt.com/article/actors/',
+  },
+];

package/src/tool/token-stamp-studio/component.astro

@@ -0,0 +1,91 @@
+---
+import './token-stamp-studio.css';
+import type { TokenStampUI } from './ui';
+
+const { ui } = Astro.props as { ui: TokenStampUI };
+---
+
+<div class="token-stamp-studio" data-token-stamp-studio data-ui={JSON.stringify(ui)}>
+  <div class="foundry-shell">
+  <section class="marker-library marker-library-header" aria-label={ui.savedMarkers}>
+    <div class="marker-library-grid" data-marker-library></div>
+  </section>
+    <div class="foundry-layout">
+    <section class="foundry-stage-panel" aria-label={ui.stageLabel}>
+      <label class="marker-name-field marker-name-stage"><input data-marker-name type="text" maxlength="48" placeholder={ui.markerNamePlaceholder} aria-label={ui.markerName} /></label>
+      <div class="token-stage" data-drop-zone>
+        <canvas data-token-canvas aria-label={ui.stageLabel}></canvas>
+        <p class="stage-caption"><span>{ui.positionHint}</span><span data-current-image>{ui.noImage}</span></p>
+      </div>
+      <div class="stage-actions">
+        <label class="button button-primary" for="token-image-input">{ui.chooseImage}</label>
+        <input id="token-image-input" data-image-input type="file" accept="image/png,image/jpeg,image/webp,image/gif" hidden />
+        <button class="button button-quiet" type="button" data-clear-image>{ui.clearImage}</button>
+        <button class="button button-quiet" type="button" data-copy>{ui.copy}</button>
+        <button class="button button-primary" type="button" data-download>{ui.download}</button>
+      </div>
+      <p class="export-hint">{ui.exportHint}</p>
+    </section>
+
+    <aside class="foundry-inspector" aria-label={ui.tokenDetails}>
+      <section class="inspector-block inspector-frames">
+        <div class="block-heading"><div><p class="eyebrow">01</p><h3>{ui.frameLegend}</h3></div><button class="micro-action" type="button" data-random-frame>{ui.randomFrame}</button></div>
+        <p class="block-hint">{ui.frameHint}</p>
+        <div class="frame-gallery" data-frame-gallery></div>
+      </section>
+
+      <section class="inspector-block">
+        <div class="block-heading"><div><p class="eyebrow">02</p><h3>{ui.surfaceLegend}</h3></div><button class="micro-action" type="button" data-random-colors>{ui.randomColors}</button></div>
+        <div class="color-grid">
+          <label class="color-control"><span>{ui.backgroundLabel}</span><input data-color="background" type="color" value="#1d2430" /></label>
+          <label class="color-control"><span>{ui.borderLabel}</span><input data-color="border" type="color" value="#d89555" /></label>
+          <label class="color-control"><span>{ui.textLabel}</span><input data-color="text" type="color" value="#fff4d6" /></label>
+          <label class="color-control"><span>{ui.overlayLabel}</span><input data-color="overlay" type="color" value="#e05b4f" /></label>
+        </div>
+        <label class="range-control"><span>{ui.borderWidthLabel}<output data-border-width-output>16</output></span><input data-border-width type="range" min="4" max="34" step="1" value="16" /></label>
+        <label class="range-control"><span>{ui.opacityLabel}<output data-border-opacity-output>100%</output></span><input data-border-opacity type="range" min="0.2" max="1" step="0.05" value="1" /></label>
+        <label class="range-control"><span>{ui.overlayOpacityLabel}<output data-overlay-opacity-output>0%</output></span><input data-overlay-opacity type="range" min="0" max="0.8" step="0.05" value="0" /></label>
+      </section>
+
+      <section class="inspector-block">
+        <div class="block-heading"><div><p class="eyebrow">03</p><h3>{ui.imageLegend}</h3></div></div>
+        <label class="range-control"><span>{ui.imageZoomLabel}<output data-image-zoom-output>100%</output></span><input data-image-zoom type="range" min="0.7" max="1.8" step="0.05" value="1" /></label>
+        <label class="range-control"><span>{ui.scaleLabel}<output data-scale-output>100%</output></span><input data-scale type="range" min="0.75" max="1.5" step="0.05" value="1" /></label>
+      </section>
+
+      <section class="inspector-block">
+        <div class="block-heading"><div><p class="eyebrow">04</p><h3>{ui.textLegend}</h3></div></div>
+        <p class="block-hint" data-text-hint>{ui.textHint}</p>
+        <div class="text-layer-list" data-text-layers></div>
+        <div class="text-editor">
+          <input data-text-input type="text" maxlength="24" placeholder={ui.textPlaceholder} aria-label={ui.textPlaceholder} />
+          <div class="editor-row"><label class="range-control"><span>{ui.textSizeLabel}<output data-text-size-output>54</output></span><input data-text-size type="range" min="22" max="86" step="1" value="54" /></label></div>
+          <div class="align-actions" aria-label={ui.alignmentLabel}>
+            <button type="button" data-align="left" aria-label={ui.alignLeft} title={ui.alignLeft}>↤</button><button type="button" data-align="center" aria-label={ui.alignCenter} title={ui.alignCenter}>↔</button><button type="button" data-align="right" aria-label={ui.alignRight} title={ui.alignRight}>↦</button>
+          </div>
+          <div class="editor-actions"><button class="button button-quiet" type="button" data-add-text>{ui.addText}</button><button class="button button-danger" type="button" data-remove-text>{ui.removeText}</button></div>
+        </div>
+      </section>
+
+    </aside>
+    </div>
+
+  <details class="batch-advanced">
+    <summary>{ui.batchLabel}</summary>
+    <section class="batch-dock" aria-labelledby="batch-title">
+      <div><h3 id="batch-title">{ui.batchHint}</h3><p data-batch-status>{ui.batchHint}</p></div>
+      <div class="batch-actions"><label class="button button-quiet" for="token-batch-input">{ui.chooseBatch}</label><input id="token-batch-input" data-batch-input type="file" accept="image/png,image/jpeg,image/webp,image/gif" multiple hidden /><button class="button button-primary" type="button" data-batch-download disabled>{ui.downloadBatch}</button></div>
+    </section>
+  </details>
+  </div>
+</div>
+
+<script>
+  import { mountTokenStampStudio } from './controller';
+
+  const root = document.querySelector<HTMLElement>('[data-token-stamp-studio]');
+  if (root) {
+    const ui = JSON.parse(root.dataset.ui ?? '{}');
+    void mountTokenStampStudio(root, ui);
+  }
+</script>

package/src/tool/token-stamp-studio/controller.ts

@@ -0,0 +1,179 @@
+import { createTextLayer, FRAME_PRESETS, getRandomPalette, hitTestText, updateTextLayer, clamp } from './logic';
+import { pointerToCanvas } from './dom-views';
+import { attachBatchEvents, attachFileEvents, attachWorkspaceEvents } from './workspace';
+import { StudioStore } from './store';
+import type { TokenStampUI } from './ui';
+import type { TextAlign, TokenStampState } from './types';
+
+export interface StudioElements {
+  root: HTMLElement;
+  canvas: HTMLCanvasElement;
+  frames: HTMLElement;
+  textLayers: HTMLElement;
+  imageInput: HTMLInputElement;
+  batchInput: HTMLInputElement;
+  textInput: HTMLInputElement;
+  textSize: HTMLInputElement;
+  imageZoom: HTMLInputElement;
+  scale: HTMLInputElement;
+  borderWidth: HTMLInputElement;
+  borderOpacity: HTMLInputElement;
+  overlayOpacity: HTMLInputElement;
+  currentImage: HTMLElement;
+  batchStatus: HTMLElement;
+  library: HTMLElement;
+  markerName: HTMLInputElement;
+  copy: HTMLButtonElement;
+  download: HTMLButtonElement;
+  batchDownload: HTMLButtonElement;
+}
+
+function getElement<T extends Element>(root: HTMLElement, selector: string): T {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Token stamp studio element missing: ${selector}`);
+  return element;
+}
+
+function getElements(root: HTMLElement): StudioElements {
+  return {
+    root,
+    canvas: getElement(root, '[data-token-canvas]'),
+    frames: getElement(root, '[data-frame-gallery]'),
+    textLayers: getElement(root, '[data-text-layers]'),
+    imageInput: getElement(root, '[data-image-input]'),
+    batchInput: getElement(root, '[data-batch-input]'),
+    textInput: getElement(root, '[data-text-input]'),
+    textSize: getElement(root, '[data-text-size]'),
+    imageZoom: getElement(root, '[data-image-zoom]'),
+    scale: getElement(root, '[data-scale]'),
+    borderWidth: getElement(root, '[data-border-width]'),
+    borderOpacity: getElement(root, '[data-border-opacity]'),
+    overlayOpacity: getElement(root, '[data-overlay-opacity]'),
+    currentImage: getElement(root, '[data-current-image]'),
+    batchStatus: getElement(root, '[data-batch-status]'),
+    library: getElement(root, '[data-marker-library]'),
+    markerName: getElement<HTMLInputElement>(root, '[data-marker-name]'),
+    copy: getElement<HTMLButtonElement>(root, '[data-copy]'),
+    download: getElement(root, '[data-download]'),
+    batchDownload: getElement(root, '[data-batch-download]'),
+  };
+}
+
+function getColor(root: HTMLElement, name: string): HTMLInputElement {
+  return getElement<HTMLInputElement>(root, `[data-color="${name}"]`);
+}
+
+function attachFrameEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  elements.frames.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    const button = target.closest<HTMLButtonElement>('[data-frame-id]');
+    if (button?.dataset.frameId) setState({ ...getState(), frameId: button.dataset.frameId });
+  });
+}
+
+function attachColorEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  const colors: Array<[string, keyof TokenStampState]> = [['background', 'background'], ['border', 'border'], ['text', 'textColor'], ['overlay', 'overlay']];
+  colors.forEach(([name, key]) => getColor(elements.root, name).addEventListener('input', (event) => {
+    setState({ ...getState(), [key]: (event.target as HTMLInputElement).value } as TokenStampState);
+  }));
+}
+
+function attachRangeEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  const ranges: Array<[HTMLInputElement, keyof TokenStampState]> = [
+    [elements.imageZoom, 'imageZoom'], [elements.scale, 'scale'], [elements.borderWidth, 'borderWidth'], [elements.borderOpacity, 'borderOpacity'], [elements.overlayOpacity, 'overlayOpacity'],
+  ];
+  ranges.forEach(([input, key]) => input.addEventListener('input', (event) => setState({ ...getState(), [key]: Number((event.target as HTMLInputElement).value) } as TokenStampState)));
+}
+
+function updateDraftText(value: string, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  const current = getState();
+  if (!current.selectedTextId && value.trim()) {
+    const text = { ...createTextLayer(current.texts.length + 1), text: value };
+    setState({ ...current, texts: [...current.texts, text], selectedTextId: text.id });
+    return;
+  }
+  setState({ ...current, texts: updateTextLayer(current.texts, current.selectedTextId, { text: value }) });
+}
+
+function attachTextEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void, ui: TokenStampUI): void {
+  elements.textLayers.addEventListener('click', (event) => {
+    const button = (event.target as HTMLElement).closest<HTMLButtonElement>('[data-text-id]');
+    if (button?.dataset.textId) setState({ ...getState(), selectedTextId: button.dataset.textId });
+  });
+  elements.textInput.addEventListener('input', (event) => updateDraftText((event.target as HTMLInputElement).value, getState, setState));
+  elements.textSize.addEventListener('input', (event) => setState({ ...getState(), texts: updateTextLayer(getState().texts, getState().selectedTextId, { size: Number((event.target as HTMLInputElement).value) }) }));
+  elements.root.querySelectorAll<HTMLButtonElement>('[data-align]').forEach((button) => button.addEventListener('click', () => {
+    const align = button.dataset.align as TextAlign;
+    setState({ ...getState(), texts: updateTextLayer(getState().texts, getState().selectedTextId, { align }) });
+  }));
+  getElement<HTMLButtonElement>(elements.root, '[data-add-text]').addEventListener('click', () => {
+    const text = createTextLayer(getState().texts.length + 1);
+    setState({ ...getState(), texts: [...getState().texts, text], selectedTextId: text.id });
+  });
+  getElement<HTMLButtonElement>(elements.root, '[data-remove-text]').addEventListener('click', () => {
+    const current = getState();
+    const texts = current.texts.filter((text) => text.id !== current.selectedTextId);
+    setState({ ...current, texts, selectedTextId: texts[0]?.id ?? null });
+  });
+  getElement<HTMLElement>(elements.root, '[data-text-hint]').textContent = ui.textHint;
+}
+
+function attachCanvasEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  let drag: { mode: 'image' | 'text'; start: { x: number; y: number }; imageX: number; imageY: number; textX: number; textY: number } | null = null;
+  elements.canvas.addEventListener('pointerdown', (event) => {
+    const point = pointerToCanvas(elements.canvas, event);
+    const state = getState();
+    const text = state.texts.find((item) => hitTestText(item, point));
+    if (text) setState({ ...state, selectedTextId: text.id });
+    drag = { mode: text ? 'text' : 'image', start: point, imageX: state.imageX, imageY: state.imageY, textX: text?.x ?? 0.5, textY: text?.y ?? 0.8 };
+    elements.canvas.setPointerCapture(event.pointerId);
+  });
+  elements.canvas.addEventListener('pointermove', (event) => {
+    if (!drag) return;
+    const point = pointerToCanvas(elements.canvas, event);
+    const state = getState();
+    const delta = { x: point.x - drag.start.x, y: point.y - drag.start.y };
+    if (drag.mode === 'image') setState({ ...state, imageX: clamp(drag.imageX + delta.x, -0.5, 0.5), imageY: clamp(drag.imageY + delta.y, -0.5, 0.5) });
+    else setState({ ...state, texts: updateTextLayer(state.texts, state.selectedTextId, { x: clamp(drag.textX + delta.x, 0.12, 0.88), y: clamp(drag.textY + delta.y, 0.12, 0.9) }) });
+  });
+  elements.canvas.addEventListener('pointerup', () => { drag = null; });
+  elements.canvas.addEventListener('pointercancel', () => { drag = null; });
+  elements.canvas.addEventListener('wheel', (event) => {
+    event.preventDefault();
+    const nextZoom = clamp(getState().imageZoom - event.deltaY * 0.001, 0.7, 1.8);
+    setState({ ...getState(), imageZoom: nextZoom });
+  }, { passive: false });
+}
+
+function attachStudioInteractions(elements: StudioElements, ui: TokenStampUI, store: StudioStore): void {
+  attachFrameEvents(elements, store.getState, store.setState);
+  attachRandomEvents(elements, store.getState, store.setState);
+  attachColorEvents(elements, store.getState, store.setState);
+  attachRangeEvents(elements, store.getState, store.setState);
+  attachTextEvents(elements, store.getState, store.setState, ui);
+  attachCanvasEvents(elements, store.getState, store.setState);
+  const context = { getState: store.getState, setState: store.setState, ui, getMarkers: store.getMarkers, getImage: store.getImage, selectMarker: store.selectMarker, addMarker: store.addMarker, removeMarker: store.removeMarker, setImage: store.setImage };
+  attachWorkspaceEvents(elements, context);
+  attachFileEvents(elements, context);
+  attachBatchEvents(elements, context);
+}
+
+export async function mountTokenStampStudio(root: HTMLElement, ui: TokenStampUI): Promise<void> {
+  const elements = getElements(root);
+  const store = new StudioStore(elements, ui);
+  await store.restore();
+  store.render();
+  attachStudioInteractions(elements, ui, store);
+}
+
+function attachRandomEvents(elements: StudioElements, getState: () => TokenStampState, setState: (state: TokenStampState) => void): void {
+  getElement<HTMLButtonElement>(elements.root, '[data-random-frame]').addEventListener('click', () => {
+    const available = FRAME_PRESETS.filter((frame) => frame.id !== getState().frameId);
+    const frame = available[Math.floor(Math.random() * available.length)] ?? FRAME_PRESETS[0]!;
+    setState({ ...getState(), frameId: frame.id });
+  });
+  getElement<HTMLButtonElement>(elements.root, '[data-random-colors]').addEventListener('click', () => {
+    const palette = getRandomPalette();
+    setState({ ...getState(), ...palette, overlayOpacity: 0.18 });
+  });
+}