The icons are not included in the bundle

[uablrek]

This is more of a feature request than an issue, mapgen2 may work as intended, but the symptoms when map-icons.png is not present are really weird

Recreate

cd /path/to/your/mapgen2
./build.sh
mkdir /tmp/mapgen2
cp -r build embed.html /tmp/mapgen2
cd /tmp/mapgen2
/opt/google/chrome/chrome --new-window file://$PWD/embed.html

The map shows without icons, but any action zooms the map to the upper left corner(!?).

If map-icons.png is copied to /tmp/mapgen2, everything works (hit F5 to re-read).

I am pretty sure there is a way to include map-icons.png but I don't know esbuild well (not at all yet actually).

Background

I want to write a hex-based game (only in the idea/investigation phase yet) and plan to decorate hexes with in a similar way as the icons. Since I can fix the grid, I think it can look really good, e.g. take neighbors into account to form a more natural coast line.

[uablrek]

It turned out to be simple, and explained here.

hack

Apply this patch:

diff --git a/mapgen2.js b/mapgen2.js
index 1b885e8..c7f3f48 100644
--- a/mapgen2.js
+++ b/mapgen2.js
@@ -132,7 +132,9 @@ function requestAnimationFrameHandler() {
 const mapIconsConfig = {left: 9, top: 4, filename: "map-icons.png"};
 mapIconsConfig.image = new Image();
 mapIconsConfig.image.onload = draw;
-mapIconsConfig.image.src = mapIconsConfig.filename;
+import url from './map-icons.png'
+mapIconsConfig.image.src = url
+//mapIconsConfig.image.src = mapIconsConfig.filename;
 
 let _lastUiState = {};
 function draw() {

and build with:

 esbuild --bundle mapgen2.js --minify --outfile=build/_bundle.js --loader:.png=dataurl

The size of build/_bundle.js more than doubled to 112.5kb.

[redblobgames]

Thanks for figuring this out!

I normally don't put assets in my js bundles, but I think for some projects it could make sense to bundle everything together into the embed.html file so that it's all one file.