@jjlmoya/utils-tabletop 1.26.0 → 1.28.0

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

@@ -0,0 +1,50 @@
+export interface TokenStampUI {
+  [key: string]: string;
+  frameLegend: string;
+  frameHint: string;
+  randomFrame: string;
+  surfaceLegend: string;
+  backgroundLabel: string;
+  borderLabel: string;
+  textLabel: string;
+  overlayLabel: string;
+  randomColors: string;
+  borderWidthLabel: string;
+  opacityLabel: string;
+  overlayOpacityLabel: string;
+  stageLabel: string;
+  chooseImage: string;
+  clearImage: string;
+  positionHint: string;
+  markerName: string;
+  markerNamePlaceholder: string;
+  textLegend: string;
+  textHint: string;
+  textPlaceholder: string;
+  addText: string;
+  removeText: string;
+  textSizeLabel: string;
+  alignmentLabel: string;
+  alignLeft: string;
+  alignCenter: string;
+  alignRight: string;
+  imageLegend: string;
+  imageZoomLabel: string;
+  scaleLabel: string;
+  savedMarkers: string;
+  noSavedMarkers: string;
+  reuseMarker: string;
+  deleteMarker: string;
+  newMarker: string;
+  download: string;
+  copy: string;
+  downloadBatch: string;
+  batchLabel: string;
+  batchHint: string;
+  chooseBatch: string;
+  batchReady: string;
+  noImage: string;
+  noText: string;
+  tokenDetails: string;
+  exportHint: string;
+}

package/src/tool/token-stamp-studio/workspace-media.ts

@@ -0,0 +1,36 @@
+export function readFile(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.addEventListener('load', () => resolve(String(reader.result)));
+    reader.addEventListener('error', () => reject(reader.error));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function loadImage(source: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', () => reject(new Error('Image could not be loaded')));
+    image.src = source;
+  });
+}
+
+export function downloadCanvas(canvas: HTMLCanvasElement, name: string): void {
+  const link = document.createElement('a');
+  link.download = `${name || 'tabletop-token'}.png`;
+  link.href = canvas.toDataURL('image/png');
+  link.click();
+}
+
+export async function copyCanvas(canvas: HTMLCanvasElement): Promise<boolean> {
+  if (!navigator.clipboard?.write || typeof ClipboardItem === 'undefined') return false;
+  const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/png'));
+  if (!blob) return false;
+  await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })]);
+  return true;
+}
+
+export function cleanName(name: string): string {
+  return name.replace(/\.[^/.]+$/, '').replace(/[^a-z0-9]+/gi, '-').replace(/^-|-$/g, '').toLowerCase() || 'tabletop-token';
+}

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

@@ -0,0 +1,83 @@
+import { drawTokenCanvas } from './dom-views';
+import { loadImage, readFile, cleanName, copyCanvas, downloadCanvas } from './workspace-media';
+import type { StudioElements } from './controller';
+import type { SavedMarker, TokenStampState } from './types';
+import type { TokenStampUI } from './ui';
+
+export interface WorkspaceContext {
+  getState: () => TokenStampState;
+  setState: (state: TokenStampState) => void;
+  ui: TokenStampUI;
+  getMarkers: () => SavedMarker[];
+  getImage: () => HTMLImageElement | null;
+  selectMarker: (marker: SavedMarker) => void;
+  addMarker: () => void;
+  removeMarker: (id: string) => void;
+  setImage: (image: HTMLImageElement | null) => void;
+}
+
+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 attachLibraryEvents(elements: StudioElements, context: WorkspaceContext): void {
+  elements.library.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    const deleteId = target.closest<HTMLElement>('[data-delete-marker]')?.dataset.deleteMarker;
+    if (deleteId) { context.removeMarker(deleteId); return; }
+    if (target.closest('[data-new-marker]')) { context.addMarker(); return; }
+    const markerId = target.closest<HTMLElement>('[data-marker-id]')?.dataset.markerId;
+    const marker = context.getMarkers().find((item) => item.id === markerId);
+    if (!marker) return;
+    context.selectMarker(marker);
+  });
+}
+
+export function attachWorkspaceEvents(elements: StudioElements, context: WorkspaceContext): void {
+  getElement<HTMLButtonElement>(elements.root, '[data-clear-image]').addEventListener('click', () => context.setState({ ...context.getState(), imageSrc: null, imageName: '', imageX: 0, imageY: 0 }));
+  const exportCanvas = (): HTMLCanvasElement => {
+    const canvas = document.createElement('canvas');
+    drawTokenCanvas(canvas, context.getState(), context.getImage(), false);
+    return canvas;
+  };
+  elements.download.addEventListener('click', () => downloadCanvas(exportCanvas(), cleanName(context.getState().imageName)));
+  elements.copy.addEventListener('click', () => void copyCanvas(exportCanvas()).catch(() => false));
+  elements.markerName.addEventListener('input', (event) => context.setState({ ...context.getState(), markerName: (event.target as HTMLInputElement).value }));
+  attachLibraryEvents(elements, context);
+}
+
+export function attachFileEvents(elements: StudioElements, context: WorkspaceContext): void {
+  const load = async (file: File) => context.setImage(await loadDroppedFile(file, context));
+  elements.imageInput.addEventListener('change', () => { const file = elements.imageInput.files?.[0]; if (file) void load(file); });
+  elements.root.addEventListener('dragover', (event) => event.preventDefault());
+  elements.root.addEventListener('drop', (event) => { event.preventDefault(); const file = event.dataTransfer?.files[0]; if (file?.type.startsWith('image/')) void load(file); });
+}
+
+async function loadDroppedFile(file: File, context: WorkspaceContext): Promise<HTMLImageElement> {
+  const source = await readFile(file);
+  const image = await loadImage(source);
+  context.setState({ ...context.getState(), imageSrc: source, imageName: file.name, imageX: 0, imageY: 0, imageZoom: 1 });
+  return image;
+}
+
+async function exportBatch(files: File[], state: TokenStampState): Promise<void> {
+  for (const file of files) {
+    const source = await readFile(file);
+    const image = await loadImage(source);
+    const canvas = document.createElement('canvas');
+    drawTokenCanvas(canvas, { ...state, imageSrc: source, imageName: file.name }, image, false);
+    downloadCanvas(canvas, cleanName(file.name));
+  }
+}
+
+export function attachBatchEvents(elements: StudioElements, context: WorkspaceContext): void {
+  let files: File[] = [];
+  elements.batchInput.addEventListener('change', () => {
+    files = Array.from(elements.batchInput.files ?? []);
+    elements.batchStatus.textContent = files.length ? context.ui.batchReady.replace('{count}', String(files.length)) : context.ui.batchHint;
+    elements.batchDownload.disabled = files.length === 0;
+  });
+  elements.batchDownload.addEventListener('click', () => void exportBatch(files, context.getState()));
+}

package/src/tools.ts

@@ -13,6 +13,8 @@ import { HIDDEN_ROLE_DEALER_TOOL } from './tool/hidden-role-dealer';
 import { SCATTER_DIRECTION_SELECTOR_TOOL } from './tool/scatter-direction-selector';
 import { DUNGEON_MAP_GENERATOR_TOOL } from './tool/dungeon-map-generator';
 import { ENCOUNTER_DIFFICULTY_CALCULATOR_TOOL } from './tool/encounter-difficulty-calculator';
+import { TOKEN_STAMP_STUDIO_TOOL } from './tool/token-stamp-studio';
+import { MUS_SCOREBOARD_TOOL } from './tool/mus-scoreboard';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   DICE_ROLLER_SIMULATOR_TOOL,
@@ -28,5 +30,7 @@ export const ALL_TOOLS: ToolDefinition[] = [
   SCATTER_DIRECTION_SELECTOR_TOOL,
   DUNGEON_MAP_GENERATOR_TOOL,
   ENCOUNTER_DIFFICULTY_CALCULATOR_TOOL,
+  TOKEN_STAMP_STUDIO_TOOL,
+  MUS_SCOREBOARD_TOOL,
 ];