Type getSpriteUrisFromImg

js/skinParser.js

@@ -64,20 +64,6 @@ async function genFileFromZip(zip, fileName, ext, mode) {
   };
 }
 
-function getSpriteUrisFromImg(img, sprites) {
-  const canvas = document.createElement("canvas");
-  const context = canvas.getContext("2d");
-  return sprites.reduce((images, sprite) => {
-    canvas.height = sprite.height;
-    canvas.width = sprite.width;
-
-    context.drawImage(img, -sprite.x, -sprite.y);
-    const image = canvas.toDataURL();
-    images[sprite.name] = image;
-    return images;
-  }, {});
-}
-
 async function genImgFromFilename(zip, fileName) {
   // Winamp only supports .bmp images, but WACUP set a precidence of supporting
   // .png as well to reduce size. Since we care about size as well, we follow
@@ -100,7 +86,7 @@ async function genSpriteUrisFromFilename(zip, fileName) {
   if (img == null) {
     return {};
   }
-  return getSpriteUrisFromImg(img, SKIN_SPRITES[fileName]);
+  return SkinParserUtils.getSpriteUrisFromImg(img, SKIN_SPRITES[fileName]);
 }
 
 async function getCursorFromFilename(zip, fileName) {
@@ -141,7 +127,7 @@ async function genVizColors(zip) {
 
 async function genImages(zip) {
   const imageObjs = await Promise.all(
-    Object.keys(SKIN_SPRITES).map(async fileName =>
+    Object.keys(SKIN_SPRITES).map(fileName =>
       genSpriteUrisFromFilename(zip, fileName)
     )
   );
@@ -205,7 +191,7 @@ async function genGenTextSprites(zip) {
   sprites.forEach(sprite => {
     letterWidths[sprite.name] = sprite.width;
   });
-  return [letterWidths, getSpriteUrisFromImg(img, sprites)];
+  return [letterWidths, SkinParserUtils.getSpriteUrisFromImg(img, sprites)];
 }
 
 async function genGenExColors(zip) {

js/skinParserUtils.ts

@@ -1,3 +1,5 @@
+import { Sprite } from "./skinSprites";
+
 function fallbackGetImgFromBlob(blob: Blob): Promise<HTMLImageElement> {
   return new Promise((resolve, reject) => {
     const img = new Image();
@@ -28,3 +30,24 @@ export function getImgFromBlob(
   }
   return fallbackGetImgFromBlob(blob);
 }
+
+export function getSpriteUrisFromImg(
+  img: HTMLImageElement | ImageBitmap,
+  sprites: Sprite[]
+): { [spriteName: string]: string } {
+  const canvas = document.createElement("canvas");
+  const context = canvas.getContext("2d");
+  if (context == null) {
+    throw new Error("Failed to get canvas context");
+  }
+  const images: { [spriteName: string]: string } = {};
+  sprites.forEach(sprite => {
+    canvas.height = sprite.height;
+    canvas.width = sprite.width;
+
+    context.drawImage(img, -sprite.x, -sprite.y);
+    const image = canvas.toDataURL();
+    images[sprite.name] = image;
+  });
+  return images;
+}

js/skinSprites.ts

@@ -1,4 +1,15 @@
 import { UTF8_ELLIPSIS } from "./constants";
+
+export type SpriteName = string;
+
+export interface Sprite {
+  name: SpriteName;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
 /* TODO: There are too many " " and "_" characters */
 export const FONT_LOOKUP: { [letter: string]: [number, number] } = {
   a: [0, 0],
@@ -91,7 +102,11 @@ for (const key in FONT_LOOKUP) {
   }
 }
 
-export default {
+interface SpriteMap {
+  [sheet: string]: Sprite[];
+}
+
+const sprites: SpriteMap = {
   BALANCE: [
     { name: "MAIN_BALANCE_BACKGROUND", x: 9, y: 0, width: 38, height: 420 },
     { name: "MAIN_BALANCE_THUMB", x: 15, y: 422, width: 14, height: 11 },
@@ -802,3 +817,5 @@ export default {
     },
   ],
 };
+
+export default sprites;