feuerwerk/src/viewport/PixelCels.ts

import type { Project } from '../core/model/Project';
import { celFilesOf } from '../core/model/pixelart';
import { type CelPixels, celFileName, decodeCel, encodeCel, isEmptyCel } from '../core/model/pixelCel';
import { dataPath } from '../core/site';
import { FileLibrary } from './FileLibrary';

/** Where cels go on the server: raw bytes in, the stored name back. */
export interface CelUploader {
  upload(bytes: ArrayBuffer, type: string): Promise<{ file: string }>;
}

/**
 * The pixels of pixel art (#130) in memory, keyed by cel file. A cel painted here is named from its
 * bytes and kept at once, so the model can point at it while nothing has left the browser yet; the
 * cels the server does not hold are uploaded before the project that names them is saved (answer 1).
 * A cel from the server is loaded on the first ask, like a texture.
 */
export class PixelCels extends FileLibrary<CelPixels> {
  private readonly cels = new Map<string, CelPixels>();
  /** Painted here and not on the server yet. */
  private readonly local = new Set<string>();

  constructor() {
    super(dataPath('pixels'), 'pixels');
  }

  /**
   * The pixels of a cel: null for the empty name and for a file that cannot be read, undefined while
   * it loads. A broken file reads as empty rather than holding the picture back for good.
   */
  read(file: string): CelPixels | null | undefined {
    if (!file) return null;
    const cel = this.cels.get(file);
    if (cel) return cel;
    if (this.hasFailed(file)) return null;
    this.startLoading(file);
    return undefined;
  }

  /** Keeps painted pixels and returns the name they go by; an empty cel is `''`, no file at all. */
  put(cel: CelPixels): string {
    if (isEmptyCel(cel)) return '';
    const bytes = encodeCel(cel);
    const file = celFileName(bytes);
    if (!this.cels.has(file)) {
      this.cels.set(file, { width: cel.width, height: cel.height, data: cel.data.slice() });
      this.local.add(file);
    }
    return file;
  }

  /** The cels this project names that only this browser holds. */
  pending(project: Project): string[] {
    const files = new Set<string>();
    for (const asset of project.assets)
      if (asset.type === 'pixelart')
        for (const file of celFilesOf(asset)) if (this.local.has(file)) files.add(file);
    return [...files];
  }

  /**
   * Sends every cel the project needs and the server lacks. A name the server works out differently
   * is an error: the project would point at a file that is not there.
   */
  async upload(project: Project, store: CelUploader): Promise<void> {
    for (const file of this.pending(project)) {
      const cel = this.cels.get(file);
      if (!cel) continue;
      const bytes = encodeCel(cel);
      const stored = await store.upload(bytes.buffer as ArrayBuffer, 'application/octet-stream');
      if (stored.file !== file) throw new Error(`The server stored pixels as ${stored.file}, not ${file}`);
      this.local.delete(file);
    }
  }

  protected async fetchFile(url: string): Promise<CelPixels> {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    const cel = decodeCel(new Uint8Array(await response.arrayBuffer()));
    if (!cel) throw new Error('not a cel');
    return cel;
  }

  protected keep(file: string, cel: CelPixels): void {
    this.cels.set(file, cel);
  }

  protected holds(file: string): boolean {
    return this.cels.has(file);
  }
}

export const pixelCels = new PixelCels();