The $map you give to the widget should look like this in the simplest case:
<<set $map = {
"3x3": "Home",
"4x5": "Dungeon",
"2x1": "???",
}>>
If you want pure text, you probably want to add "text-align: center;" to the map-hex CSS rules.
You generally wouldn't - and shouldn't - put the raw game-relevant data into the map display widget, but first filter the relevant portions of the map to return something that represents it visually. For this example, I'll use a few images: A tree and a grassy hexagon. The remainder can be done with characters and numbers. I'll display a tree (along with a number if it's more than one) for each hex where there are any trees and link the whole hex to a passage named "Hex (X)x(Y)", which then can be used to dynamically link wherever they need to be.
The structure of the map itself is mostly the same:
<<set $map = {
"3x3": {trees: 0, hasSpell: true},
"4x5": {trees: 2, hasSpell: false},
"2x1": {trees: 1, hasSpell: false},
"5x2": {trees: 0, hasSpell: true},
}>>
I'd create a JavaScript function which would take the content of each hex cell and return the HTML structure needed to display it. Essentially, it creates three spans (with classes "tree", "treeAmount" and "spell") if the corresponding values are large enough respectively true. The "tree" span has the image of the tree linked, the "treeAmount" the number of trees if it is larger than 1. The remainder will be done via CSS.
setup.mapToDisplay = function(map) {
return Object.keys(map || {})
.reduce((val, key) => {
var result = "";
var hex = map[key];
if(hex.trees > 0) {
result += "<span class='tree'><img src='https://i.imgur.com/dQWof0s.png' /></span>";
if(hex.trees > 1) {
result += "<span class='treeAmount'>" + hex.trees + "</span>";
}
}
if(hex.hasSpell) {
result += "<span class='spell'></span>";
}
val[key] = result;
return val;
}, {});
};
Our map call looks slightly differently now.
<<Map 50px 7 7 setup.mapToDisplay($map)>>
And we have to write the CSS for the three new spans as well as add the background to the "map-hex" element and make the location text visible again, so the CSS is the one which changed most. In full.
div.map {
display: inline-grid;
grid-auto-columns: calc(var(--size) * 1.732);
grid-auto-rows: calc(var(--size) * 1.5);
padding-bottom: calc(var(--size) * 0.5);
padding-right: calc(var(--size) * 1.732 / 2);
border: 2px solid white;
}
map-hex {
box-sizing: border-box;
cursor: pointer;
position: relative;
width: calc(var(--size) * 1.732);
height: calc(var(--size) * 2);
padding: calc(var(--size) * 0.5) 0;
background-image: url(https://i.imgur.com/PJdtzK4.png);
background-size: cover;
grid-area: var(--y) / var(--x);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
map-hex span.loc {
position: absolute;
display: block;
bottom: calc(var(--size) * 0.5 - 1em);
text-align: center;
line-height: 1em;
left: 0;
right: 0;
font-size: 80%;
color: white;
font-weight: bold;
z-index: -1;
}
map-hex span.tree {
position: absolute;
top: calc(var(--size) / 4);
left: calc(var(--size) / 2);
}
map-hex span.tree img {
width: calc(var(--size) * 0.7);
}
map-hex span.treeAmount:before {
content: "\d7";
}
map-hex span.treeAmount {
position: absolute;
left: var(--size);
bottom: calc(var(--size) / 2);
color: cyan;
text-shadow: -2px -2px 1px black, 2px -2px 1px black, -2px 2px 1px black, 2px 2px 1px black;
}
map-hex span.spell:before {
content: "\2606";
}
map-hex span.spell {
position: absolute;
left: calc(var(--size) * 0.5);
top: calc(var(--size) * 0.7);
color: purple;
font-size: 200%;
text-shadow: -2px -2px 1px violet, 2px -2px 1px violet, -2px 2px 1px violet, 2px 2px 1px violet;
}
You'll note I use "var(--size)" and "calc()" a lot. This way, the map stays somewhat scalable. Feel free to play with the values therein to position things however you like.
What's left is the "click on the map to get to the hex passage" part you wanted. It'd do it as "click" event handlers for the map cells, created at the same time the map is and in the same widget. This adds a total of four lines to the code.
<<widget "Map">>
<<set _size = $args[0]>>
<<set _x = $args[1]>>
<<set _y = $args[2]>>
<<set _map = $args[3] || {}>>
<<set _mapId = "map_" + Math.floor(Math.random() * 0x10000).toString(16)>>
<<if _size && _x && _y && _x > 0 && _y > 0>>
<<= "<html><div class='map' id='" + _mapId + "' style='--size: " + _size + "'>"
+ Array.from({length: _x}).map((u, col) =>
Array.from({length: _y}).map((u, row) => {
var cell = (col + 1) + "x" + (row + 1);
return "<map-hex style='--x: " + (col+1) + "; --y: " + (row+1) + ";' data-row='" + (row+1) + "' data-col='" + (col+1) + "' data-cell='" + cell + "'>" + (_map[cell] ? _map[cell] : "") + "<span class='loc'>" + cell + "</span></map-hex>"}
).join("")).join("")
+ "</div></html>">>
<<script>>
var mapId = State.temporary.mapId;
jQuery(function() {
var map = jQuery("#" + mapId);
var size = map.get(0).style.getPropertyValue("--size").trim();
map.children("map-hex")
.on("click", function() {
var target = this.getAttribute("data-cell").trim();
Engine.play("Hex " + target);
})
.filter((i, el) => 1 - Number(el.style.getPropertyValue("--y")) % 2)
.css("margin-left", "calc(" + size + " * 1.732 / 2)");
});
<</script>>
<</if>>
<</widget>>
