drinkmarble/app/game/asset-storage.ts

export type DiceFace = 1 | 2 | 3 | 4 | 5 | 6;

export type DrinkmarbleAssets = {
  background: string;
  chessman: string;
  dice: Record<DiceFace, string>;
};

const STORAGE_KEY = 'drinkmarble.assets';

export const DEFAULT_ASSETS: DrinkmarbleAssets = {
  background: '/background/default.png',
  chessman: '/chessman/default.png',
  dice: {
    1: '/dice/1.png',
    2: '/dice/2.png',
    3: '/dice/3.png',
    4: '/dice/4.png',
    5: '/dice/5.png',
    6: '/dice/6.png',
  },
};

type StoredAssets = Partial<{
  background: string;
  chessman: string;
  dice: Partial<Record<DiceFace, string>>;
}>;

function readStored(): StoredAssets {
  if (typeof window === 'undefined') return {};
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY);
    if (raw) return JSON.parse(raw) as StoredAssets;

    // 이전 단일 배경 키 마이그레이션
    const legacyBg = window.localStorage.getItem('drinkmarble.backgroundSrc');
    if (legacyBg) {
      const migrated: StoredAssets = { background: legacyBg };
      writeStored(migrated);
      window.localStorage.removeItem('drinkmarble.backgroundSrc');
      return migrated;
    }
    return {};
  } catch {
    return {};
  }
}

function writeStored(next: StoredAssets) {
  if (typeof window === 'undefined') return;
  window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
}

/** 저장된 값이 있으면 쓰고, 없으면 서버 public 기본 경로를 쓴다. */
export function getAssets(): DrinkmarbleAssets {
  const stored = readStored();
  return {
    background: stored.background || DEFAULT_ASSETS.background,
    chessman: stored.chessman || DEFAULT_ASSETS.chessman,
    dice: {
      1: stored.dice?.[1] || DEFAULT_ASSETS.dice[1],
      2: stored.dice?.[2] || DEFAULT_ASSETS.dice[2],
      3: stored.dice?.[3] || DEFAULT_ASSETS.dice[3],
      4: stored.dice?.[4] || DEFAULT_ASSETS.dice[4],
      5: stored.dice?.[5] || DEFAULT_ASSETS.dice[5],
      6: stored.dice?.[6] || DEFAULT_ASSETS.dice[6],
    },
  };
}

export function setBackgroundAsset(src: string) {
  const stored = readStored();
  writeStored({ ...stored, background: src });
}

export function setChessmanAsset(src: string) {
  const stored = readStored();
  writeStored({ ...stored, chessman: src });
}

export function setDiceFaceAsset(face: DiceFace, src: string) {
  const stored = readStored();
  writeStored({
    ...stored,
    dice: { ...stored.dice, [face]: src },
  });
}

export function clearBackgroundAsset() {
  const stored = readStored();
  const { background: _removed, ...rest } = stored;
  writeStored(rest);
}

export function clearChessmanAsset() {
  const stored = readStored();
  const { chessman: _removed, ...rest } = stored;
  writeStored(rest);
}

export function clearDiceFaceAsset(face: DiceFace) {
  const stored = readStored();
  if (!stored.dice) return;
  const dice = { ...stored.dice };
  delete dice[face];
  writeStored({ ...stored, dice });
}

export function clearAllAssets() {
  if (typeof window === 'undefined') return;
  window.localStorage.removeItem(STORAGE_KEY);
}

/** boxGeometry material 순서: +X,-X,+Y,-Y,+Z,-Z = 2,5,1,6,3,4 */
export function getDiceFaceTextureList(assets: DrinkmarbleAssets = getAssets()): string[] {
  return [
    assets.dice[2],
    assets.dice[5],
    assets.dice[1],
    assets.dice[6],
    assets.dice[3],
    assets.dice[4],
  ];
}

export function isCustomAsset(src: string, fallback: string) {
  return src !== fallback && src.startsWith('data:');
}

/** 애셋별 고정 비율. 업로드 시 중앙 크롭 후 이 비율로 저장한다. */
export const ASSET_ASPECT = {
  background: { w: 16, h: 9, label: '16:9' },
  chessman: { w: 1, h: 1, label: '1:1' },
  dice: { w: 1, h: 1, label: '1:1' },
} as const;

export type AssetKind = keyof typeof ASSET_ASPECT;

function centerCropRect(
  srcW: number,
  srcH: number,
  aspectW: number,
  aspectH: number,
) {
  const target = aspectW / aspectH;
  const source = srcW / srcH;

  if (source > target) {
    const sw = srcH * target;
    return { sx: (srcW - sw) / 2, sy: 0, sw, sh: srcH };
  }

  const sh = srcW / target;
  return { sx: 0, sy: (srcH - sh) / 2, sw: srcW, sh };
}

/** 업로드 이미지를 지정 비율로 중앙 크롭·리사이즈해 data URL로 만든다. */
export function fileToAssetDataUrl(
  file: File,
  options: {
    aspectW: number;
    aspectH: number;
    maxW?: number;
    maxH?: number;
    quality?: number;
  },
): Promise<string> {
  const maxW = options.maxW ?? 1024;
  const maxH = options.maxH ?? 1024;
  const quality = options.quality ?? 0.85;
  const aspect = options.aspectW / options.aspectH;

  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onerror = () => reject(new Error('파일을 읽을 수 없습니다.'));
    reader.onload = () => {
      const img = new Image();
      img.onerror = () => reject(new Error('이미지 형식이 올바르지 않습니다.'));
      img.onload = () => {
        const crop = centerCropRect(img.width, img.height, options.aspectW, options.aspectH);

        // 출력 크기는 비율을 유지한 채 max 안에 맞춤
        let outW = maxW;
        let outH = Math.round(outW / aspect);
        if (outH > maxH) {
          outH = maxH;
          outW = Math.round(outH * aspect);
        }

        const canvas = document.createElement('canvas');
        canvas.width = outW;
        canvas.height = outH;
        const ctx = canvas.getContext('2d');
        if (!ctx) {
          reject(new Error('canvas를 사용할 수 없습니다.'));
          return;
        }

        ctx.drawImage(
          img,
          crop.sx,
          crop.sy,
          crop.sw,
          crop.sh,
          0,
          0,
          outW,
          outH,
        );
        resolve(canvas.toDataURL('image/jpeg', quality));
      };
      img.src = String(reader.result);
    };
    reader.readAsDataURL(file);
  });
}