forked from GitHub/virtualtabletop
Add hex game pieces and auto hex grid calculation (#2127)
This commit is contained in:
parent
e5ded18646
commit
66e090fbb2
8
assets/game-pieces/2D/Hex-Flat.svg
Normal file
8
assets/game-pieces/2D/Hex-Flat.svg
Normal 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 |
8
assets/game-pieces/2D/Hex-Point.svg
Normal file
8
assets/game-pieces/2D/Hex-Point.svg
Normal 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 |
@ -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'), {
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user