From 3c97b2668f40083781a5d5fa6e1821213a67ee77 Mon Sep 17 00:00:00 2001 From: Jordan Eldredge Date: Thu, 25 Apr 2019 07:29:25 -0700 Subject: [PATCH] Type getSpriteUrisFromImg --- js/skinParser.js | 20 +++----------------- js/skinParserUtils.ts | 23 +++++++++++++++++++++++ js/skinSprites.ts | 19 ++++++++++++++++++- 3 files changed, 44 insertions(+), 18 deletions(-) diff --git a/js/skinParser.js b/js/skinParser.js index 05aeeb72..b580c5f8 100644 --- a/js/skinParser.js +++ b/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) { diff --git a/js/skinParserUtils.ts b/js/skinParserUtils.ts index ac4f4bc6..e2c1bb8a 100644 --- a/js/skinParserUtils.ts +++ b/js/skinParserUtils.ts @@ -1,3 +1,5 @@ +import { Sprite } from "./skinSprites"; + function fallbackGetImgFromBlob(blob: Blob): Promise { 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; +} diff --git a/js/skinSprites.ts b/js/skinSprites.ts index dee16745..56c9a664 100644 --- a/js/skinSprites.ts +++ b/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;