import { Level, Palette, RawLevel, Upgrade } from "./types";
import _palette from "./palette.json";
import _rawLevelsList from "./levels.json";
import _appVersion from "./version.json";
import { rawUpgrades } from "./rawUpgrades";
const palette = _palette as Palette;
const rawLevelsList = _rawLevelsList as RawLevel[];
export const appVersion = _appVersion as string;
const randomPatterns = [
``,
``,
``,
``,
``,
``,
``,
``,
``,
``,
``,
];
let attributed = 0;
let levelIconHTMLCanvas = document.createElement("canvas");
const levelIconHTMLCanvasCtx = levelIconHTMLCanvas.getContext("2d", {
antialias: false,
alpha: true,
}) as CanvasRenderingContext2D;
function levelIconHTML(
bricks: string[],
levelSize: number,
levelName: string,
color: string,
) {
const size = 40;
const c = levelIconHTMLCanvas;
const ctx = levelIconHTMLCanvasCtx;
c.width = size;
c.height = size;
if (color) {
ctx.fillStyle = color;
ctx.fillRect(0, 0, size, size);
} else {
ctx.clearRect(0, 0, size, size);
}
const pxSize = size / levelSize;
for (let x = 0; x < levelSize; x++) {
for (let y = 0; y < levelSize; y++) {
const c = bricks[y * levelSize + x];
if (c) {
ctx.fillStyle = c;
ctx.fillRect(
Math.floor(pxSize * x),
Math.floor(pxSize * y),
Math.ceil(pxSize),
Math.ceil(pxSize),
);
}
}
}
// I don't think many blind people will benefit for this but it's nice to have something to put in "alt"
return `})
`;
}
export const icons = {};
export const allLevels = rawLevelsList
.map((level) => {
const bricks = level.bricks.split("").map((c) => palette[c]);
const icon = levelIconHTML(bricks, level.size, level.name, level.color);
icons[level.name] = icon;
let svg = level.svg;
if (!level.color && !svg) {
svg = randomPatterns[attributed % randomPatterns.length];
attributed++;
}
return {
...level,
bricks,
icon,
svg,
};
})
.filter((l) => !l.name.startsWith("icon:")) as Level[];
export const upgrades = rawUpgrades.map((u) => ({
...u,
icon: icons["icon:" + u.id],
})) as Upgrade[];