const imageCache = new Map<string, HTMLImageElement>();

const loaded = ref(0);
const total = ref({{TOTAL}});
const isReady = computed(() => loaded.value === total.value);

const createImage = (path: string) => {
  if (imageCache.has(path)) {
    return imageCache.get(path)!;
  }

  const img = document.createElement('img');
  img.src = path;
  imageCache.set(path, img);

  if (img.complete) {
    loaded.value += 1;
  } else {
    img.onload = () => { loaded.value += 1 };
  }

  return img;
};

const assets = {{ASSETS}};

export const useAssets = () => {
  return {
    assets,
    loaded,
    total,
    isReady,
  };
};