Add hex game pieces and auto hex grid calculation (#2127)

This commit is contained in:
96LawDawg 2024-06-15 08:55:48 -05:00 committed by GitHub
parent e5ded18646
commit 66e090fbb2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 178 additions and 0 deletions

View File

@ -0,0 +1,8 @@
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<title>Hex Flat</title>
<style>
tspan { white-space:pre }
.shp0 { fill: #primaryColor; stroke: #borderColor; stroke-width:#borderWidth; }
</style>
<polygon id="Layer" class="shp0" points="100,50 75,93.33 25,93.33 0,50 25,6.67 75,6.67"/>
</svg>

After

Width:  |  Height:  |  Size: 376 B

View File

@ -0,0 +1,8 @@
<svg version="1.2" baseProfile="tiny-ps" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
<title>Hex Flat</title>
<style>
tspan { white-space:pre }
.shp0 { fill: #primaryColor; stroke: #borderColor; stroke-width:#borderWidth; }
</style>
<polygon id="Layer" class="shp0" points="50,0 93.3,25 93.3,75 50,100 6.7,75 6.7,25"/>
</svg>

After

Width:  |  Height:  |  Size: 372 B

View File

@ -793,6 +793,116 @@ function populateAddWidgetOverlay() {
borderWidth: 1
});
//Sixth row (hexagons)
addPieceToAddWidgetOverlay(new BasicWidget('HexFlat'), {
x: 390,
y: 600,
width: 50,
height: 50,
color: VTTblue,
image: "i/game-pieces/2D/Hex-Flat.svg",
svgReplaces: {
"#primaryColor": "color",
"#borderColor": "borderColor",
"#borderWidth": "borderWidth"
},
borderColor: "#000000",
borderWidth: 2,
hexType: "flat"
});
addPieceToAddWidgetOverlay(new BasicWidget('HexPoint'), {
x: 465,
y: 600,
width: 50,
height: 50,
color: VTTblue,
image: "i/game-pieces/2D/Hex-Point.svg",
svgReplaces: {
"#primaryColor": "color",
"#borderColor": "borderColor",
"#borderWidth": "borderWidth"
},
borderColor: "#000000",
borderWidth: 2,
hexType: "point"
});
//This is added only to provide a visual background for the actual piece "HexFlatImage" since the css there does not show on the overlay
addPieceToAddWidgetOverlay(new BasicWidget('HexFlatImageBack'), {
x: 530,
y: 590,
width: 70,
height: 70,
color: VTTblue,
image: "i/icons/hexagon_horizontal.svg",
svgReplaces: {
"currentColor": "color"
}
});
addPieceToAddWidgetOverlay(new BasicWidget('HexFlatImage'), {
x: 540,
y: 600,
width: 50,
height: 50,
imageColor: '#ffffff',
image: "i/icons/zoom_in.svg",
svgReplaces: {
"currentColor": "imageColor"
},
css: {
"default": {
"background-color": "${PROPERTY color}",
"background-image": "url('${PROPERTY image}')",
"background-size": "75% 75%",
"background-repeat": "no repeat",
"background-position": "center center",
"clip-path": "polygon(25% 6.67%, 75% 6.67%, 100% 50%, 75% 93.33%, 25% 93.33%, 0% 50%)"
}
},
hexType: "flat"
});
//This is added only to provide a visual background for the actual piece "HexPointImage" since the css there does not show on the overlay
addPieceToAddWidgetOverlay(new BasicWidget('HexFlatImageBack'), {
x: 605,
y: 590,
width: 70,
height: 70,
color: VTTblue,
image: "i/icons/hexagon_vertical.svg",
svgReplaces: {
"currentColor": "color"
}
});
addPieceToAddWidgetOverlay(new BasicWidget('HexPointImage'), {
x: 615,
y: 600,
width: 50,
height: 50,
imageColor: '#ffffff',
image: "i/icons/zoom_out.svg",
svgReplaces: {
"currentColor": "imageColor"
},
css: {
"default": {
"background-color": "${PROPERTY color}",
"background-image": "url('${PROPERTY image}')",
"background-size": "75% 75%",
"background-repeat": "no repeat",
"background-position": "center center",
"clip-path": "polygon(93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%, 50% 0%)"
}
},
hexType: "point"
});
//Poker chips
addWidgetToAddWidgetOverlay(new BasicWidget('EmptyPoker2DSVG'), {

View File

@ -551,6 +551,44 @@ const jeCommands = [
jeSetAndSelect(w.get('width'));
}
},
{
id: 'je_hexGrid',
name: 'calculated hex grid',
context: '^[^ ]* ↦ grid',
call: async function() {
const w = widgets.get(jeStateNow.id);
let hexType = w.get('hexType');
let isFlat = hexType === 'flat';
let hexSide = isFlat ? w.get('height') : w.get('width');
let long = hexSide;
let short = parseFloat((long * Math.sqrt(3) / 2).toFixed(2));
let long15 = long * 1.5;
let long75 = long * 0.75;
let shortHalf = short / 2;
let xHex = isFlat ? long15 : short;
let yHex = isFlat ? short : long15;
let offsetXHex = isFlat ? long75 : shortHalf;
let offsetYHex = isFlat ? shortHalf : long75;
jeStateNow.grid.push(
{
"x": '###SELECT ME###',
"y": yHex,
"offsetX": offsetXHex,
"offsetY": offsetYHex
},
{
"x": xHex,
"y": yHex,
"offsetX": 0,
"offsetY": 0
}
);
jeSetAndSelect(xHex);
}
},
{
id: 'je_imageTemplate',
name: 'image template',
@ -1305,6 +1343,20 @@ function jeAddGridCommand(key, value) {
});
}
function jeAddHexGridCommand(key, value) {
jeCommands.push({
id: 'hexGrid_' + key,
name: key,
context: '^[^ ]* ↦ grid ↦ [0-9]+',
show: _=>!(key in jeStateNow.hexGrid[+jeContext[2]]),
call: async function() {
jeStateNow.hexGrid[+jeContext[2]][key] = '###SELECT ME###';
jeSetAndSelect(value);
}
});
}
function jeAddLimitCommand(key, value) {
jeCommands.push({
id: 'limit_' + key,