@jjlmoya/utils-games-development 1.69.0 → 1.70.0

package/src/tool/fixerEditor/dom-views.ts

@@ -0,0 +1,200 @@
+import { getAdjustmentState } from './evaluator';
+import { countModified, isModified } from './logic';
+import type { FrameAdjustment, FrameSpec, GridSettings } from './types';
+
+export interface EditorRefs {
+  shell: HTMLElement;
+  sourceCanvas: HTMLCanvasElement;
+  resultCanvas: HTMLCanvasElement;
+  frameCanvas: HTMLCanvasElement;
+  filmstrip: HTMLElement;
+  status: HTMLElement;
+  sourceName: HTMLElement;
+  frameNumber: HTMLElement;
+  frameState: HTMLElement;
+  frameCount: HTMLElement;
+  correctionCount: HTMLElement;
+  imageSize: HTMLElement;
+  workbench: HTMLElement;
+  exportSheet: HTMLButtonElement;
+  exportJson: HTMLButtonElement;
+  loadProject: HTMLInputElement;
+}
+
+export interface RenderInput {
+  refs: EditorRefs;
+  image: HTMLImageElement | null;
+  frames: FrameSpec[];
+  adjustments: Record<string, FrameAdjustment>;
+  grid: GridSettings;
+  selected: number;
+  zoom: number;
+  sourceName: string;
+  statusText: string;
+  noImageText: string;
+  modifiedText: string;
+  unchangedText: string;
+  selectFrameText: string;
+}
+
+export function renderEditor(input: RenderInput): void {
+  const { refs } = input;
+  refs.shell.classList.toggle('has-image', Boolean(input.image));
+  refs.workbench.hidden = !input.image;
+  refs.sourceName.textContent = input.sourceName || input.noImageText;
+  refs.shell.style.setProperty('--fe-zoom', `${input.zoom}`);
+  refs.status.textContent = input.statusText;
+  if (!input.image || input.frames.length === 0) return;
+  renderSheet({ canvas: refs.sourceCanvas, image: input.image, frames: input.frames, grid: input.grid, selected: input.selected, corrected: false });
+  renderCorrectedSheet({ canvas: refs.resultCanvas, image: input.image, frames: input.frames, adjustments: input.adjustments, grid: input.grid });
+  renderActiveFrame(refs.frameCanvas, input.image, input.frames[input.selected], input.adjustments);
+  renderFilmstrip(input);
+  updateSummary(input);
+}
+
+function renderSheet(input: { canvas: HTMLCanvasElement; image: HTMLImageElement; frames: FrameSpec[]; grid: GridSettings; selected: number; corrected: boolean }): void {
+  const { canvas, image, frames, grid, selected, corrected } = input;
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext('2d');
+  if (!context) return;
+  context.imageSmoothingEnabled = false;
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(image, 0, 0);
+  context.lineWidth = 1;
+  frames.forEach((frame, framePosition) => drawFrameMark({ context, frame, selected: framePosition === selected, corrected, grid }));
+  drawGridGuides({ context, width: canvas.width, height: canvas.height, grid, corrected });
+}
+
+function drawFrameMark(input: { context: CanvasRenderingContext2D; frame: FrameSpec; selected: boolean; corrected: boolean; grid: GridSettings }): void {
+  const { context, frame, selected, corrected } = input;
+  context.strokeStyle = getCorrectedStroke(corrected);
+  context.lineWidth = selected ? 2 : 1;
+  context.fillStyle = selected ? 'rgba(255, 202, 88, 0.18)' : 'rgba(15, 23, 42, 0.08)';
+  context.fillRect(frame.sourceX, frame.sourceY, frame.width, frame.height);
+  context.strokeRect(frame.sourceX + 0.5, frame.sourceY + 0.5, frame.width - 1, frame.height - 1);
+  context.fillStyle = selected ? '#ffca58' : '#ffffff';
+  context.font = 'bold 10px sans-serif';
+  context.fillText(String(frame.index + 1).padStart(2, '0'), frame.sourceX + 4, frame.sourceY + 13);
+}
+
+function getCorrectedStroke(corrected: boolean): string {
+  return corrected ? '#68d6c0' : '#ffca58';
+}
+
+function renderCorrectedSheet(input: { canvas: HTMLCanvasElement; image: HTMLImageElement; frames: FrameSpec[]; adjustments: Record<string, FrameAdjustment>; grid?: GridSettings }): void {
+  const { canvas, image, frames, adjustments, grid } = input;
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext('2d');
+  if (!context) return;
+  context.imageSmoothingEnabled = false;
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.drawImage(image, 0, 0);
+  frames.forEach((frame) => renderCorrectedFrame({ context, image, frame, adjustment: adjustments[String(frame.index)] }));
+  if (grid) drawGridGuides({ context, width: canvas.width, height: canvas.height, grid, corrected: true });
+}
+
+function drawGridGuides(input: { context: CanvasRenderingContext2D; width: number; height: number; grid: GridSettings; corrected: boolean }): void {
+  const { context, width, height, grid, corrected } = input;
+  context.save();
+  context.strokeStyle = corrected ? '#68d6c0' : '#ffca58';
+  context.lineWidth = 2;
+  context.setLineDash([5, 3]);
+  for (let row = 0; row < grid.rows; row += 1) {
+    for (let column = 0; column < grid.columns; column += 1) {
+      const x = grid.marginX + column * (grid.cellWidth + grid.gapX);
+      const y = grid.marginY + row * (grid.cellHeight + grid.gapY);
+      if (x >= width || y >= height) continue;
+      const cellWidth = Math.min(grid.cellWidth, width - x);
+      const cellHeight = Math.min(grid.cellHeight, height - y);
+      context.strokeRect(x + 1, y + 1, Math.max(0, cellWidth - 2), Math.max(0, cellHeight - 2));
+    }
+  }
+  context.restore();
+}
+
+function renderCorrectedFrame(input: { context: CanvasRenderingContext2D; image: HTMLImageElement; frame: FrameSpec; adjustment: FrameAdjustment | undefined }): void {
+  const { context, image, frame } = input;
+  const adjustment = input.adjustment ?? frame.adjustment;
+  context.save();
+  context.beginPath();
+  context.rect(frame.sourceX, frame.sourceY, frame.width, frame.height);
+  context.clip();
+  context.clearRect(frame.sourceX, frame.sourceY, frame.width, frame.height);
+  context.drawImage(image, frame.sourceX + adjustment.crop.x, frame.sourceY + adjustment.crop.y, adjustment.crop.width, adjustment.crop.height, frame.sourceX + adjustment.offsetX, frame.sourceY + adjustment.offsetY, adjustment.crop.width, adjustment.crop.height);
+  context.restore();
+}
+
+function renderActiveFrame(canvas: HTMLCanvasElement, image: HTMLImageElement, frame: FrameSpec | undefined, adjustments: Record<string, FrameAdjustment>): void {
+  if (!frame) return;
+  canvas.width = frame.width;
+  canvas.height = frame.height;
+  const context = canvas.getContext('2d');
+  if (!context) return;
+  const adjustment = adjustments[String(frame.index)] ?? frame.adjustment;
+  context.imageSmoothingEnabled = false;
+  context.clearRect(0, 0, canvas.width, canvas.height);
+  context.save();
+  context.beginPath();
+  context.rect(0, 0, canvas.width, canvas.height);
+  context.clip();
+  context.drawImage(image, frame.sourceX + adjustment.crop.x, frame.sourceY + adjustment.crop.y, adjustment.crop.width, adjustment.crop.height, adjustment.offsetX, adjustment.offsetY, adjustment.crop.width, adjustment.crop.height);
+  context.restore();
+  context.strokeStyle = '#ffca58';
+  context.strokeRect(adjustment.offsetX + 0.5, adjustment.offsetY + 0.5, adjustment.crop.width - 1, adjustment.crop.height - 1);
+}
+
+function renderFilmstrip(input: RenderInput): void {
+  const { refs, frames, adjustments, selected, modifiedText, unchangedText, selectFrameText } = input;
+  refs.filmstrip.replaceChildren();
+  refs.filmstrip.style.setProperty('--fe-frame-columns', String(input.grid.columns));
+  frames.forEach((frame, framePosition) => {
+    const button = document.createElement('button');
+    const adjustment = adjustments[String(frame.index)] ?? frame.adjustment;
+    const state = getAdjustmentState(adjustment, frame);
+    button.type = 'button';
+    button.className = `fe-frame-button${framePosition === selected ? ' is-selected' : ''}${state === 'modified' ? ' is-modified' : ''}`;
+    button.dataset.frame = String(framePosition);
+    button.style.gridRow = String(frame.row + 1);
+    button.style.gridColumn = String(frame.column + 1);
+    button.ariaLabel = `${selectFrameText} ${frame.index + 1}, ${state === 'modified' ? modifiedText : unchangedText}`;
+    button.textContent = String(frame.index + 1).padStart(2, '0');
+    refs.filmstrip.append(button);
+  });
+}
+
+function updateSummary(input: RenderInput): void {
+  const { refs, frames, adjustments, selected, sourceName, image } = input;
+  const selectedFrame = frames[selected];
+  const selectedAdjustment = getSelectedAdjustment(selectedFrame, adjustments);
+  refs.frameNumber.textContent = getFrameNumber(selectedFrame, frames.length);
+  refs.frameState.textContent = getFrameState(selectedFrame, selectedAdjustment, input);
+  refs.frameCount.textContent = String(frames.length);
+  refs.correctionCount.textContent = String(countModified(frames, adjustments));
+  refs.imageSize.textContent = image ? `${image.naturalWidth} x ${image.naturalHeight} px` : '0 x 0 px';
+  refs.sourceName.textContent = sourceName || input.noImageText;
+}
+
+function getSelectedAdjustment(frame: FrameSpec | undefined, adjustments: Record<string, FrameAdjustment>): FrameAdjustment | null {
+  return frame ? adjustments[String(frame.index)] ?? frame.adjustment : null;
+}
+
+function getFrameNumber(frame: FrameSpec | undefined, total: number): string {
+  return frame ? `${frame.index + 1} / ${total}` : '0 / 0';
+}
+
+function getFrameState(frame: FrameSpec | undefined, adjustment: FrameAdjustment | null, input: RenderInput): string {
+  if (frame && adjustment && isModified(adjustment, frame)) return input.modifiedText;
+  return input.unchangedText;
+}
+
+export function drawPreviewFrame(input: { canvas: HTMLCanvasElement; image: HTMLImageElement; frame: FrameSpec; adjustment: FrameAdjustment }): void {
+  renderActiveFrame(input.canvas, input.image, input.frame, { [String(input.frame.index)]: input.adjustment });
+}
+
+export function createExportCanvas(image: HTMLImageElement, frames: FrameSpec[], adjustments: Record<string, FrameAdjustment>): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  renderCorrectedSheet({ canvas, image, frames, adjustments });
+  return canvas;
+}

package/src/tool/fixerEditor/entry.ts

@@ -0,0 +1,28 @@
+import type { GamesToolEntry, ToolLocaleContent } from '../../types';
+import type { FixerEditorUI } from './ui';
+
+export type { FixerEditorUI };
+
+export type FixerEditorLocaleContent = ToolLocaleContent<FixerEditorUI>;
+
+export const fixerEditor: GamesToolEntry<FixerEditorUI> = {
+  id: 'sprite-sheet-fixer-editor',
+  icons: { bg: 'mdi:gamepad-variant', fg: 'mdi:crop-free' },
+  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),
+  },
+};

package/src/tool/fixerEditor/evaluator.ts

@@ -0,0 +1,17 @@
+import { countModified } from './logic';
+import type { FrameAdjustment, FrameSpec } from './types';
+
+export interface EditorSummary {
+  frameCount: number;
+  modifiedCount: number;
+  imageSize: string;
+}
+
+export function summarizeEditor(input: { frames: FrameSpec[]; adjustments: Record<string, FrameAdjustment>; imageWidth: number; imageHeight: number }): EditorSummary {
+  return { frameCount: input.frames.length, modifiedCount: countModified(input.frames, input.adjustments), imageSize: `${input.imageWidth} x ${input.imageHeight} px` };
+}
+
+export function getAdjustmentState(adjustment: FrameAdjustment, frame: FrameSpec): 'modified' | 'unchanged' {
+  const changed = adjustment.crop.x !== 0 || adjustment.crop.y !== 0 || adjustment.crop.width !== frame.width || adjustment.crop.height !== frame.height || adjustment.offsetX !== 0 || adjustment.offsetY !== 0;
+  return changed ? 'modified' : 'unchanged';
+}

package/src/tool/fixerEditor/events.ts

@@ -0,0 +1,98 @@
+import { exportMetadata, exportProject, exportSheet } from './exporter';
+import { cloneAdjustments, createFrameSpecs, parseProjectFile } from './logic';
+import type { ControllerContext, EditorInputs } from './controller';
+
+export interface EventActions {
+  loadImage: (file: File) => void;
+  updateGrid: (inputs: EditorInputs, changed: keyof EditorInputs) => void;
+  updateSelectedAdjustment: (inputs: EditorInputs) => void;
+  selectFrame: (index: number) => void;
+  nudge: (axis: 'x' | 'y', direction: number) => void;
+  trimFrame: () => void;
+  trimAll: () => void;
+  autoDetect: () => void;
+  resetFrame: () => void;
+  resetAll: () => void;
+  undo: () => void;
+  redo: () => void;
+  applyProject: (project: ReturnType<typeof parseProjectFile>) => void;
+}
+
+function required<T extends Element>(root: ParentNode, id: string): T {
+  const element = root.querySelector(`#${id}`);
+  if (!element) throw new Error(`Missing fixer-editor element: ${id}`);
+  return element as T;
+}
+
+function handleProjectFile(context: ControllerContext, file: File, applyProject: EventActions['applyProject']): void {
+  file.text().then((text) => {
+    const project = parseProjectFile(JSON.parse(text));
+    if (!project) { context.refs.status.textContent = context.ui.statusInvalidProject; return; }
+    if (context.state.image) applyProject(project);
+    else { context.state.pendingProject = project; context.refs.status.textContent = context.ui.statusProjectNeedsImage; }
+  }).catch(() => { context.refs.status.textContent = context.ui.statusInvalidProject; });
+}
+
+function bindFileEvents(context: ControllerContext, actions: EventActions): void {
+  const { refs } = context;
+  const fileInput = required<HTMLInputElement>(refs.shell, 'fe-file-input');
+  const dropZone = required<HTMLElement>(refs.shell, 'fe-drop-zone');
+  dropZone.onclick = () => fileInput.click();
+  fileInput.onchange = () => { const file = fileInput.files?.[0]; if (file) actions.loadImage(file); };
+  dropZone.ondragover = (event) => { event.preventDefault(); dropZone.classList.add('is-dragging'); };
+  dropZone.ondragleave = () => dropZone.classList.remove('is-dragging');
+  dropZone.ondrop = (event) => { event.preventDefault(); dropZone.classList.remove('is-dragging'); const file = event.dataTransfer?.files[0]; if (file) actions.loadImage(file); };
+  dropZone.onkeydown = (event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); fileInput.click(); } };
+}
+
+function bindFrameEvents(context: ControllerContext, inputs: EditorInputs, actions: EventActions): void {
+  const { refs } = context;
+  const gridInputIds: Array<keyof EditorInputs> = ['columns', 'rows', 'cell-width', 'cell-height', 'margin-x', 'margin-y', 'gap-x', 'gap-y'];
+  gridInputIds.forEach((id) => { inputs[id].onchange = () => actions.updateGrid(inputs, id); });
+  const adjustmentInputIds: Array<keyof EditorInputs> = ['crop-x', 'crop-y', 'crop-width', 'crop-height', 'offset-x', 'offset-y'];
+  adjustmentInputIds.forEach((id) => { inputs[id].onchange = () => actions.updateSelectedAdjustment(inputs); });
+  refs.filmstrip.onclick = (event: MouseEvent) => { const button = (event.target as HTMLElement).closest<HTMLButtonElement>('[data-frame]'); if (button) actions.selectFrame(Number(button.dataset.frame)); };
+  refs.shell.querySelectorAll<HTMLButtonElement>('.fe-nudge').forEach((button: HTMLButtonElement) => { button.onclick = () => actions.nudge(button.dataset.axis as 'x' | 'y', Number(button.dataset.direction)); });
+  refs.shell.querySelectorAll<HTMLButtonElement>('.fe-step').forEach((button: HTMLButtonElement) => { button.onclick = () => { context.state.step = Number(button.dataset.step); refs.shell.querySelectorAll<HTMLButtonElement>('.fe-step').forEach((item: HTMLButtonElement) => item.classList.toggle('is-active', item === button)); context.persistDraft(); }; });
+  required<HTMLButtonElement>(refs.shell, 'fe-trim').onclick = actions.trimFrame;
+  required<HTMLButtonElement>(refs.shell, 'fe-trim-all').onclick = actions.trimAll;
+  required<HTMLButtonElement>(refs.shell, 'fe-reset-frame').onclick = actions.resetFrame;
+}
+
+function bindHistoryEvents(context: ControllerContext, actions: EventActions): void {
+  const { refs } = context;
+  required<HTMLButtonElement>(refs.shell, 'fe-auto-detect').onclick = actions.autoDetect;
+  required<HTMLButtonElement>(refs.shell, 'fe-reset-all').onclick = actions.resetAll;
+  required<HTMLButtonElement>(refs.shell, 'fe-undo').onclick = actions.undo;
+  required<HTMLButtonElement>(refs.shell, 'fe-redo').onclick = actions.redo;
+}
+
+function bindOutputEvents(context: ControllerContext, actions: EventActions): void {
+  const { refs, state } = context;
+  required<HTMLButtonElement>(refs.shell, 'fe-save-project').onclick = () => exportProject(context);
+  required<HTMLButtonElement>(refs.shell, 'fe-load-project-button').onclick = () => refs.loadProject.click();
+  refs.loadProject.onchange = () => { const file = refs.loadProject.files?.[0]; if (file) handleProjectFile(context, file, actions.applyProject); };
+  refs.exportJson.onclick = () => exportMetadata(context);
+  refs.exportSheet.onclick = () => exportSheet(context);
+  required<HTMLInputElement>(refs.shell, 'fe-zoom').oninput = (event) => { state.zoom = Number((event.target as HTMLInputElement).value); required<HTMLOutputElement>(refs.shell, 'fe-zoom-value').value = `${state.zoom}x`; context.refs.shell.style.setProperty('--fe-zoom', `${state.zoom}`); context.persistDraft(); };
+  required<HTMLInputElement>(refs.shell, 'fe-fps').oninput = (event) => { state.fps = Number((event.target as HTMLInputElement).value); required<HTMLOutputElement>(refs.shell, 'fe-fps-value').value = String(state.fps); context.persistDraft(); };
+  required<HTMLButtonElement>(refs.shell, 'fe-play').onclick = () => { state.playing = true; context.animate(); };
+  required<HTMLButtonElement>(refs.shell, 'fe-pause').onclick = () => { state.playing = false; if (state.animationId) window.clearTimeout(state.animationId); state.animationId = null; };
+  window.addEventListener('keydown', (event) => { if (!state.image || event.target instanceof HTMLInputElement || event.target instanceof HTMLButtonElement) return; const directions: Record<string, ['x' | 'y', number]> = { ArrowLeft: ['x', -1], ArrowRight: ['x', 1], ArrowUp: ['y', -1], ArrowDown: ['y', 1] }; const direction = directions[event.key]; if (direction) { event.preventDefault(); actions.nudge(direction[0], direction[1]); } });
+}
+
+export function bindEvents(input: { context: ControllerContext; inputs: EditorInputs; actions: EventActions }): void {
+  bindFileEvents(input.context, input.actions);
+  bindFrameEvents(input.context, input.inputs, input.actions);
+  bindHistoryEvents(input.context, input.actions);
+  bindOutputEvents(input.context, input.actions);
+}
+
+export function applyProjectToContext(context: ControllerContext, project: ReturnType<typeof parseProjectFile>): void {
+  if (!project) return;
+  context.state.grid = project.grid;
+  context.state.adjustments = cloneAdjustments(project.adjustments);
+  context.state.frames = context.state.image ? createFrameSpecs(context.state.image.naturalWidth, context.state.image.naturalHeight, context.state.grid) : [];
+  context.state.selected = 0;
+  context.updateView(context.ui.statusLoaded);
+}

package/src/tool/fixerEditor/exporter.ts

@@ -0,0 +1,42 @@
+import { createExportCanvas } from './dom-views';
+import { createFrameMetadata, createProjectFile } from './logic';
+import type { ControllerContext } from './controller';
+import type { ProjectFile } from './types';
+
+function downloadBlob(blob: Blob, name: string): void {
+  const url = URL.createObjectURL(blob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = name;
+  link.click();
+  URL.revokeObjectURL(url);
+}
+
+function projectFor(context: ControllerContext): ProjectFile | null {
+  const { state } = context;
+  if (!state.image) return null;
+  return createProjectFile({ sourceName: state.sourceName, sourceWidth: state.image.naturalWidth, sourceHeight: state.image.naturalHeight, grid: state.grid, adjustments: state.adjustments });
+}
+
+export function exportProject(context: ControllerContext): void {
+  const project = projectFor(context);
+  if (!project) return;
+  context.persistDraft();
+  downloadBlob(new Blob([JSON.stringify(project, null, 2)], { type: 'application/json' }), 'fixer-editor-project.json');
+  context.refs.status.textContent = context.ui.statusSaved;
+}
+
+export function exportMetadata(context: ControllerContext): void {
+  const project = projectFor(context);
+  if (!project) return;
+  const frames = createFrameMetadata(context.state.frames, context.state.adjustments);
+  downloadBlob(new Blob([JSON.stringify({ ...project, frames }, null, 2)], { type: 'application/json' }), 'fixer-editor-metadata.json');
+  context.refs.status.textContent = context.ui.statusExported;
+}
+
+export function exportSheet(context: ControllerContext): void {
+  if (!context.state.image) return;
+  const canvas = createExportCanvas(context.state.image, context.state.frames, context.state.adjustments);
+  canvas.toBlob((blob) => { if (blob) downloadBlob(blob, 'fixer-editor-corrected.png'); }, 'image/png');
+  context.refs.status.textContent = context.ui.statusExported;
+}