@jjlmoya/utils-games-development 1.69.0 → 1.71.0

package/src/tool/fixerEditor/runtime.ts

@@ -0,0 +1,88 @@
+import { createFrameSpecs, detectGridFromImageData } from './logic';
+import { saveDraftImage } from './storage';
+import type { ControllerContext } from './controller';
+
+export function loadImage(context: ControllerContext, file: File): void {
+  const image = new Image();
+  image.onload = () => rememberImage(context, image, file.name, file);
+  image.onerror = () => { context.refs.status.textContent = context.ui.statusInvalidImage; URL.revokeObjectURL(image.src); };
+  image.src = URL.createObjectURL(file);
+}
+
+function rememberImage(context: ControllerContext, image: HTMLImageElement, sourceName: string, file: File): void {
+  const reader = new FileReader();
+  reader.onload = () => {
+    const imageDataUrl = typeof reader.result === 'string' ? reader.result : undefined;
+    if (imageDataUrl) saveDraftImage(imageDataUrl);
+    applyImage(context, image, sourceName, imageDataUrl);
+  };
+  reader.onerror = () => applyImage(context, image, sourceName);
+  reader.readAsDataURL(file);
+}
+
+export function restoreDraftImage(context: ControllerContext, sourceImage: string, sourceName: string): void {
+  const image = new Image();
+  image.onload = () => applyImage(context, image, sourceName, sourceImage);
+  image.onerror = () => { context.refs.status.textContent = context.ui.statusInvalidImage; };
+  image.src = sourceImage;
+}
+
+function applyImage(context: ControllerContext, image: HTMLImageElement, sourceName: string, imageDataUrl?: string): void {
+  const pending = context.state.pendingProject;
+  const matchesProject = !pending || hasMatchingSize(pending, image);
+  context.state.image = image;
+  if (imageDataUrl) context.state.imageDataUrl = imageDataUrl;
+  else delete context.state.imageDataUrl;
+  context.state.sourceName = sourceName;
+  context.state.grid = chooseGrid(pending, matchesProject, context.state.grid, image);
+  context.state.adjustments = chooseAdjustments(pending, matchesProject);
+  context.state.pendingProject = null;
+  context.state.frames = createFrameSpecs(image.naturalWidth, image.naturalHeight, context.state.grid);
+  context.state.selected = Math.min(context.state.selected, Math.max(0, context.state.frames.length - 1));
+  context.updateView(matchesProject ? context.ui.loaded : context.ui.statusImageMismatch);
+  URL.revokeObjectURL(image.src);
+}
+
+function chooseGrid(project: NonNullable<ControllerContext['state']['pendingProject']> | null, matches: boolean, current: ControllerContext['state']['grid'], image: HTMLImageElement): ControllerContext['state']['grid'] {
+  if (matches && project) return project.grid;
+  return detectImageGrid(image) ?? current;
+}
+
+function chooseAdjustments(project: NonNullable<ControllerContext['state']['pendingProject']> | null, matches: boolean): ControllerContext['state']['adjustments'] {
+  if (!matches) return {};
+  return project?.adjustments ?? {};
+}
+
+function hasMatchingSize(project: NonNullable<ControllerContext['state']['pendingProject']>, image: HTMLImageElement): boolean {
+  return project.sourceWidth === image.naturalWidth && project.sourceHeight === image.naturalHeight;
+}
+
+function detectImageGrid(image: HTMLImageElement) {
+  const canvas = document.createElement('canvas');
+  canvas.width = image.naturalWidth;
+  canvas.height = image.naturalHeight;
+  const context = canvas.getContext('2d');
+  if (!context) return null;
+  context.drawImage(image, 0, 0);
+  return detectGridFromImageData(context.getImageData(0, 0, canvas.width, canvas.height).data, canvas.width, canvas.height);
+}
+
+export function autoDetectGrid(context: ControllerContext): void {
+  const { state, ui } = context;
+  if (!state.image) return;
+  const grid = detectImageGrid(state.image);
+  if (!grid) return;
+  context.recordHistory();
+  state.grid = grid;
+  state.frames = createFrameSpecs(state.image.naturalWidth, state.image.naturalHeight, state.grid);
+  state.selected = Math.min(state.selected, Math.max(0, state.frames.length - 1));
+  context.updateView(ui.ready);
+}
+
+export function animate(context: ControllerContext): void {
+  const { state } = context;
+  if (!state.playing || !state.image || state.frames.length === 0) return;
+  state.selected = (state.selected + 1) % state.frames.length;
+  context.updateView(context.ui.ready);
+  state.animationId = window.setTimeout(() => animate(context), 1000 / state.fps);
+}

package/src/tool/fixerEditor/seo.astro

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

package/src/tool/fixerEditor/state.ts

@@ -0,0 +1,10 @@
+import { DEFAULT_GRID } from './logic';
+import type { EditorState } from './controller';
+import type { DraftFile } from './types';
+
+export function createInitialState(draft: DraftFile | null): EditorState {
+  const saved = { sourceName: '', grid: DEFAULT_GRID, adjustments: {}, selected: 0, step: 1, zoom: 3, fps: 12, ...(draft || {}) };
+  const state: EditorState = { image: null, sourceName: saved.sourceName, grid: saved.grid, frames: [], adjustments: saved.adjustments, selected: saved.selected, step: saved.step, zoom: saved.zoom, fps: saved.fps, playing: false, animationId: null, history: [], future: [], pendingProject: draft };
+  if (saved.sourceImage) state.imageDataUrl = saved.sourceImage;
+  return state;
+}

package/src/tool/fixerEditor/storage.ts

@@ -0,0 +1,68 @@
+import { clamp, parseProjectFile } from './logic';
+import type { DraftFile, DraftSession, ProjectFile } from './types';
+
+const STORAGE_KEY = 'jjlmoya-fixer-editor-draft-v1';
+const IMAGE_KEY = 'jjlmoya-fixer-editor-image-v1';
+
+export function saveDraft(project: ProjectFile, session: DraftSession): boolean {
+  try {
+    const draft = { ...project, ...session };
+    delete draft.sourceImage;
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(draft));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function loadDraft(): DraftFile | null {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    const value = JSON.parse(raw) as unknown;
+    const project = parseProjectFile(value);
+    const sourceImage = loadDraftImage();
+    return project ? { ...project, ...readDraftSession(value), ...(sourceImage ? { sourceImage } : {}) } : null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveDraftImage(sourceImage: string): boolean {
+  try {
+    localStorage.setItem(IMAGE_KEY, sourceImage);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function loadDraftImage(): string | null {
+  try {
+    const sourceImage = localStorage.getItem(IMAGE_KEY);
+    return sourceImage && sourceImage.startsWith('data:image/') ? sourceImage : null;
+  } catch {
+    return null;
+  }
+}
+
+function readDraftSession(value: unknown): DraftSession {
+  const candidate = value && typeof value === 'object' ? value as Partial<DraftSession> : {};
+  const session: DraftSession = { selected: readInteger(candidate.selected, 0, 8192, 0), step: readInteger(candidate.step, 1, 4, 1), zoom: readInteger(candidate.zoom, 1, 8, 3), fps: readInteger(candidate.fps, 1, 30, 12) };
+  if (typeof candidate.sourceImage === 'string') session.sourceImage = candidate.sourceImage;
+  return session;
+}
+
+function readInteger(value: unknown, min: number, max: number, fallback: number): number {
+  if (typeof value !== 'number' || !Number.isInteger(value)) return fallback;
+  return clamp(value, min, max);
+}
+
+export function clearDraft(): void {
+  try {
+    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(IMAGE_KEY);
+  } catch {
+    return;
+  }
+}

package/src/tool/fixerEditor/types.ts

@@ -0,0 +1,70 @@
+export interface GridSettings {
+  columns: number;
+  rows: number;
+  cellWidth: number;
+  cellHeight: number;
+  marginX: number;
+  marginY: number;
+  gapX: number;
+  gapY: number;
+}
+
+export interface CropRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface FrameAdjustment {
+  crop: CropRect;
+  offsetX: number;
+  offsetY: number;
+}
+
+export interface FrameSpec {
+  index: number;
+  row: number;
+  column: number;
+  sourceX: number;
+  sourceY: number;
+  width: number;
+  height: number;
+  adjustment: FrameAdjustment;
+}
+
+export interface FrameMetadata {
+  index: number;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  crop: CropRect;
+  offset: { x: number; y: number };
+  modified: boolean;
+}
+
+export interface ProjectFile {
+  version: 1;
+  sourceName: string;
+  sourceWidth: number;
+  sourceHeight: number;
+  grid: GridSettings;
+  adjustments: Record<string, FrameAdjustment>;
+}
+
+export interface DraftSession {
+  selected: number;
+  step: number;
+  zoom: number;
+  fps: number;
+  sourceImage?: string;
+}
+
+export type DraftFile = ProjectFile & DraftSession;
+
+export interface HistoryState {
+  grid: GridSettings;
+  adjustments: Record<string, FrameAdjustment>;
+  selected: number;
+}

package/src/tool/fixerEditor/ui.ts

@@ -0,0 +1,71 @@
+export interface FixerEditorUI extends Record<string, string> {
+  uploadTitle: string;
+  uploadHint: string;
+  chooseImage: string;
+  sourceFile: string;
+  noImage: string;
+  gridSettings: string;
+  columns: string;
+  rows: string;
+  cellWidth: string;
+  cellHeight: string;
+  marginX: string;
+  marginY: string;
+  gapX: string;
+  gapY: string;
+  frameTools: string;
+  cropX: string;
+  cropY: string;
+  cropWidth: string;
+  cropHeight: string;
+  offsetX: string;
+  offsetY: string;
+  trimTransparent: string;
+  trimAll: string;
+  autoDetectGrid: string;
+  resetFrame: string;
+  nudgeStep: string;
+  stepOne: string;
+  stepTwo: string;
+  stepFour: string;
+  history: string;
+  undo: string;
+  redo: string;
+  resetAll: string;
+  saveProject: string;
+  loadProject: string;
+  exportSheet: string;
+  exportJson: string;
+  sheetView: string;
+  correctedView: string;
+  activeFrame: string;
+  frameStrip: string;
+  flipbook: string;
+  play: string;
+  pause: string;
+  fps: string;
+  zoom: string;
+  ready: string;
+  loaded: string;
+  modified: string;
+  unchanged: string;
+  frameCount: string;
+  correctionCount: string;
+  imageSize: string;
+  statusEmpty: string;
+  statusSaved: string;
+  statusLoaded: string;
+  statusExported: string;
+  statusInvalidImage: string;
+  statusInvalidProject: string;
+  statusProjectNeedsImage: string;
+  statusImageMismatch: string;
+  metadataNote: string;
+  sourceLabel: string;
+  resultLabel: string;
+  selectFrame: string;
+  moveUp: string;
+  moveDown: string;
+  moveLeft: string;
+  moveRight: string;
+}

package/src/tools.ts

@@ -3,6 +3,7 @@ import type { ToolDefinition } from './types';
 import { STEAM_CAPSULE_GENERATOR_TOOL } from './tool/steamCapsuleGenerator';
 import { ITCHIO_GAME_TESTER_TOOL } from './tool/itchioGameTester';
 import { SPRITE_SHEET_PACKER_TOOL } from './tool/spriteSheetPacker';
+import { FIXER_EDITOR_TOOL } from './tool/fixerEditor';
 import { AUDIO_LOOP_POINT_FINDER_TOOL } from './tool/audioLoopPointFinder';
 import { SAVE_FILE_EDITOR_TOOL } from './tool/saveFileEditor';
 import { LOCALIZATION_SANITIZER_TOOL } from './tool/localizationSanitizer';
@@ -19,6 +20,7 @@ export const ALL_TOOLS: ToolDefinition[] = [
   STEAM_CAPSULE_GENERATOR_TOOL,
   ITCHIO_GAME_TESTER_TOOL,
   SPRITE_SHEET_PACKER_TOOL,
+  FIXER_EDITOR_TOOL,
   AUDIO_LOOP_POINT_FINDER_TOOL,
   SAVE_FILE_EDITOR_TOOL,
   LOCALIZATION_SANITIZER_TOOL,