ChocoWindow/examples/six-window-example/six-window-sample.html at main · codergal6502/ChocoWindow · GitHub

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/pngjs@7.0.0/browser.js"></script>
    <script type="module">
        import { ChocoWinWindow, ChocoColor, ChocoCoordinates, ChocoWinTileSet, ChocoWinTilesetCorners, ChocoWinSettings, TileTransformationTypes, ChocoWinPngJsPixelReaderFactory, ChocoWinPngJsPixelWriterFactory } from './ChocoWindow.js';

        // You'll notice console warnings about scale misalignments if you don't set this to
        // true. In this sample, the purple window's dimensions are not a multiple of the
        // scale.
        ChocoWinSettings.ignoreScaleMisalignmentErrors = true;

        const fakeUuid = () => {
            fakeUuid.i = (fakeUuid.i ?? -1) + 1;
            return `00000000-0000-0000-0000-${String(fakeUuid.i).padStart(12, '0')}`;
        }

        window.onload = async (event) => {
            const readerFactory = new ChocoWinPngJsPixelReaderFactory(png.PNG);
            const writerFactory = new ChocoWinPngJsPixelWriterFactory(png.PNG);

            let blob = await fetch("window.png")
                .then(r => r.blob());

            let dataUrl = await new Promise(resolve => {
                let reader = new FileReader();
                reader.onload = () => resolve(reader.result);
                reader.readAsDataURL(blob);
            });

            const winTileSet = new ChocoWinTileSet({
                sourceFileUrl: dataUrl,
                tileSize: 20,
                regions: [
                    { priority: 10, tiles: [[{ y: 0, x: 0 }]], bufferTop: 0, bufferLeft: 0 },
                    { priority: 10, tiles: [[{ y: 0, x: 40 }]], bufferTop: 0, bufferRight: 0 },
                    { priority: 10, tiles: [[{ y: 40, x: 0 }]], bufferBottom: 0, bufferLeft: 0 },
                    { priority: 10, tiles: [[{ y: 40, x: 40 }]], bufferBottom: 0, bufferRight: 0 },
                    { priority: 20, tiles: [[{ y: 0, x: 20 }]], bufferTop: 0, bufferLeft: 20, bufferRight: 20 },
                    { priority: 20, tiles: [[{ y: 20, x: 0 }]], bufferLeft: 0, bufferTop: 20, bufferBottom: 20 },
                    { priority: 20, tiles: [[{ y: 20, x: 40 }]], bufferRight: 0, bufferTop: 20, bufferBottom: 20 },
                    { priority: 20, tiles: [[{ y: 40, x: 20 }]], bufferBottom: 0, bufferLeft: 20, bufferRight: 20 },
                    { priority: 20, tiles: [[{ y: 20, x: 20 }]], bufferTop: 20, bufferBottom: 20, bufferLeft: 20, bufferRight: 20 },
                ],
                substitutableColors: [{ r: 0, g: 0, b: 0 }, { r: 255, g: 255, b: 255 }, { r: 255, g: 102, b: 163 }]
            });

            const generateWindows = () => {
                // Use sparse arrays or method chaining for color substitution.
                const blue = new ChocoWinWindow({
                    winTileSet: winTileSet,
                    readerFactory: readerFactory,
                    tileScale: 1,
                    x: 20,
                    y: 20,
                    w: 400,
                    h: 300,
                    colorSubstitutions: [null, { r: 245, g: 169, b: 184 }, { r: 91, g: 206, b: 250 }]
                })

                const pink = new ChocoWinWindow({
                    winTileSet: winTileSet,
                    readerFactory: readerFactory,
                    tileScale: 2,
                    x: 540,
                    y: 20,
                    w: 640,
                    h: 240,
                    colorSubstitutions: [null, { r: 91, g: 206, b: 250 }, { r: 245, g: 169, b: 184 }]
                })

                const purple = new ChocoWinWindow({
                    winTileSet: winTileSet,
                    readerFactory: readerFactory,
                    tileScale: 3,
                    x: 20,
                    y: 500,
                    w: 610,
                    h: 380
                }).substituteColor(2, { r: 156, g: 89, b: 209 }).substituteColor(1, { r: 252, g: 244, b: 52 });

                const yellow = new ChocoWinWindow({
                    winTileSet: winTileSet,
                    readerFactory: readerFactory,
                    tileScale: 2,
                    x: 660,
                    y: 500,
                    w: 520,
                    h: 380
                }).substituteColor(2, { r: 252, g: 244, b: 52 }).substituteColor(1, { r: 156, g: 89, b: 209 });

                const white = new ChocoWinWindow({
                    winTileSet: winTileSet,
                    readerFactory: readerFactory,
                    tileScale: 2,
                    x: 200,
                    y: 100,
                    w: 500,
                    h: 480,
                }).substituteColor(2, { r: 255, g: 255, b: 255 }).substituteColor(1, { r: 50, g: 50, b: 50 });

                const black = new ChocoWinWindow({
                    winTileSet: winTileSet,
                    readerFactory: readerFactory,
                    tileScale: 2,
                    x: 470,
                    y: 200,
                    w: 500,
                    h: 480
                }).substituteColor(2, { r: 0, g: 0, b: 0 });
                // todo: entirely abandon that canvas writer. it'll never work and pngjs is good enough! Plus that simplified the code
                // todo: rename e.g. ChocoColor to ChocoColor, etc.
                // const wins = [pink, black];
                const wins = [blue, pink, purple, yellow, white, black];

                return wins;
            };

            const wins = generateWindows(0);

            Promise.all(wins.map((w) => w.isReady())).then(() => {
                const writer = writerFactory.build(1200, 900);
                wins.forEach((w) => { w.drawTo(writer); });

                const img = document.createElement("img");
                img.style.border = "2px dashed #FF9955";
                img.setAttribute("src", writer.makeDataUrl());

                document.body.append(img);
            });
        }
    </script>
</head>

<body></body>

</html>