1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
// const URLS = [
// "/src/imgs/bg2.png",
// "/src/imgs/topbar.png",
// ];
import { allChars, alphabet } from "./consts";
import { toKebabCase } from "./helpers";
export const IMGS = {
bg: {} as HTMLImageElement,
topbar: {} as HTMLImageElement,
playerUp: {} as HTMLImageElement,
playerLeft: {} as HTMLImageElement,
playerRight: {} as HTMLImageElement,
bigCircleDown: {} as HTMLImageElement,
bigCircleDownToRight1: {} as HTMLImageElement,
bigCircleDownToRight2: {} as HTMLImageElement,
bigCircleDownToRight3: {} as HTMLImageElement,
bigCircleRight: {} as HTMLImageElement,
bigCircleRightToUp1: {} as HTMLImageElement,
bigCircleRightToUp2: {} as HTMLImageElement,
bigCircleRightToUp3: {} as HTMLImageElement,
bigCircleUp: {} as HTMLImageElement,
bigCircleUpToLeft1: {} as HTMLImageElement,
bigCircleUpToLeft2: {} as HTMLImageElement,
bigCircleUpToLeft3: {} as HTMLImageElement,
bigCircleLeft: {} as HTMLImageElement,
bigCircleLeftToDown1: {} as HTMLImageElement,
bigCircleLeftToDown2: {} as HTMLImageElement,
bigCircleLeftToDown3: {} as HTMLImageElement,
bigStrangeUp0: {} as HTMLImageElement,
bigStrangeUp1: {} as HTMLImageElement,
simpleDown: {} as HTMLImageElement,
simpleRot1: {} as HTMLImageElement,
simpleRot2: {} as HTMLImageElement,
simpleRot3: {} as HTMLImageElement,
simpleRot4: {} as HTMLImageElement,
simpleUp: {} as HTMLImageElement, // po 4 klatki na sprite
redRight: {} as HTMLImageElement,
redRightToDown: {} as HTMLImageElement,
redRightToUp: {} as HTMLImageElement,
redDown: {} as HTMLImageElement,
redDownToLeft: {} as HTMLImageElement,
redDownToRight: {} as HTMLImageElement,
redLeft: {} as HTMLImageElement,
redLeftToUp: {} as HTMLImageElement,
redLeftToDown: {} as HTMLImageElement,
redUp: {} as HTMLImageElement,
redUpToRight: {} as HTMLImageElement,
redUpToLeft: {} as HTMLImageElement,
greenUp: {} as HTMLImageElement,
greenUpToRight: {} as HTMLImageElement,
greenUpToLeft: {} as HTMLImageElement,
greenRight: {} as HTMLImageElement,
greenRightToDown: {} as HTMLImageElement,
greenDown: {} as HTMLImageElement,
greenDownToLeft: {} as HTMLImageElement,
greenLeft: {} as HTMLImageElement,
greenLeftToUp: {} as HTMLImageElement,
whiteDown: {} as HTMLImageElement,
whiteTurnLeft: {} as HTMLImageElement,
whiteTurnRight: {} as HTMLImageElement,
whiteStrangeLeft: {} as HTMLImageElement,
whiteStrangeRight: {} as HTMLImageElement,
planeIcon: {} as HTMLImageElement,
rollIcon: {} as HTMLImageElement,
startScreen0: {} as HTMLImageElement,
startScreen1: {} as HTMLImageElement,
startScreen2: {} as HTMLImageElement,
startScreen3: {} as HTMLImageElement,
startScreen4: {} as HTMLImageElement,
font: {
white: {} as any,
yellow: {} as any,
blue: {} as any,
red: {} as any,
green: {} as any,
purple: {} as any,
small: {
white: {} as any,
},
' ': {} as HTMLImageElement,
},
selector: {} as HTMLImageElement,
empty: {} as HTMLImageElement,
};
// window.IMGS = IMGS;
export default async function loadAllImages() {
for (const key in IMGS) {
if (["empty", "font"].includes(key)) continue;
IMGS[key as keyof typeof IMGS] = await asyncImageLoader("/src/imgs/" + toKebabCase(key) + ".png") as any
}
for (const color of ['yellow', 'white', 'blue', 'red', 'green', 'purple']) {
// for (const color of ['white']) {
for (const char of allChars) {
(((IMGS.font as any)[color] as any)[char]) = await asyncImageLoader("/src/imgs/font/" + color + "/" + encodeURIComponent(char) + ".png") as any
}
}
IMGS.font[' '] = await asyncImageLoader("/src/imgs/font/ .png")
IMGS.font.white[' '] = await asyncImageLoader("/src/imgs/font/ .png")
IMGS.font.yellow[' '] = await asyncImageLoader("/src/imgs/font/ .png")
IMGS.font.blue[' '] = await asyncImageLoader("/src/imgs/font/ .png")
IMGS.font.red[' '] = await asyncImageLoader("/src/imgs/font/ .png")
IMGS.font.green[' '] = await asyncImageLoader("/src/imgs/font/ .png")
IMGS.font.purple[' '] = await asyncImageLoader("/src/imgs/font/ .png")
// Only numbers
for (const c of allChars.filter(ch => !alphabet.includes(ch))) {
IMGS.font.small.white[c] = await asyncImageLoader("/src/imgs/font/small/white/" + c + ".png");
}
}
async function asyncImageLoader(url: string): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const image = new Image()
image.src = url
image.onload = () => resolve(image)
image.onerror = () => { console.log("img did not load", url); reject() }
})
}
|
