Mercurial

comparison mrjunejune/src/public/dog-game.js @ 241:9c2eec61a152

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[assets] Generate site images as WebP with Bazel
author MrJuneJune <me@mrjunejune.com>
date Mon, 03 Aug 2026 11:26:30 -0700
parents c345083cd8a7
children 30c2196d03d4
comparison
equal deleted inserted replaced
240:c345083cd8a7 241:9c2eec61a152
1 // Dog frames 1 // Dog frames
2 const imagesSrc = [ 2 const imagesSrc = [
3 "/public/sprite_shiba0.png", 3 "/public/sprite_shiba0.webp",
4 "/public/sprite_shiba1.png", 4 "/public/sprite_shiba1.webp",
5 "/public/sprite_shiba2.png", 5 "/public/sprite_shiba2.webp",
6 "/public/sprite_shiba3.png", 6 "/public/sprite_shiba3.webp",
7 ]; 7 ];
8 const images =imagesSrc.map((src, index) => { 8 const images =imagesSrc.map((src, index) => {
9 const img = new Image(); 9 const img = new Image();
10 img.src = src; 10 img.src = src;
11 img.onload = () => { 11 img.onload = () => {
15 return img 15 return img
16 }); 16 });
17 17
18 // Load treat image 18 // Load treat image
19 const treatImage = new Image(); 19 const treatImage = new Image();
20 treatImage.src = "/public/dog-treat.png"; 20 treatImage.src = "/public/dog-treat.webp";
21 21
22 // Load star images for background 22 // Load star images for background
23 const lightStarColors = ["#315a91", "#8f3f63", "#34705f", "#76519b"]; 23 const lightStarColors = ["#315a91", "#8f3f63", "#34705f", "#76519b"];
24 let starImages = [ 24 let starImages = [
25 { src: "/public/start-large.png", img: new Image(), lightImg: null }, 25 { src: "/public/start-large.webp", img: new Image(), lightImg: null },
26 { src: "/public/start-small-1.png", img: new Image(), lightImg: null }, 26 { src: "/public/start-small-1.webp", img: new Image(), lightImg: null },
27 { src: "/public/start-small-2.png", img: new Image(), lightImg: null }, 27 { src: "/public/start-small-2.webp", img: new Image(), lightImg: null },
28 { src: "/public/start-small-3.png", img: new Image(), lightImg: null } 28 { src: "/public/start-small-3.webp", img: new Image(), lightImg: null }
29 ]; 29 ];
30 starImages.forEach((star, index) => { 30 starImages.forEach((star, index) => {
31 star.img.onload = () => { 31 star.img.onload = () => {
32 const tinted = document.createElement("canvas"); 32 const tinted = document.createElement("canvas");
33 tinted.width = star.img.naturalWidth; 33 tinted.width = star.img.naturalWidth;