ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-14 13:12:21 -07:00
parent 97cc1f012a
commit 0aef8a6401
3 changed files with 125 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
public/map.css
View File

@ -12,7 +12,7 @@ text {
use[href="#hex"] { use[href="#hex"] {
opacity: 1; opacity: 1;
fill: teal; fill: transparent;
fill-opacity: 0.2; fill-opacity: 0.2;
stroke-width: 0.5px; stroke-width: 0.5px;
} }
@ -58,11 +58,11 @@ polyline.move-trace {
r: inherit; r: inherit;
} }
g.troop-counter-template, g.troop-counter-template use { g.troop-counter, g.troop-counter use {
r: inherit; r: inherit;
} }
g.troop-counter, g.troop-counter use { g.troop-counter-template, g.troop-counter-template use {
r: inherit; r: inherit;
} }
@ -165,13 +165,29 @@ polygon.firing-arc[data-troop-allegiance="liao"] {
stroke-opacity: inherit; stroke-opacity: inherit;
} }
use[href="#davion-1"] { use[href*="#t-"] {
r: 5px; r: 5px;
}
use[data-allegiance="liao"] {
fill: green;
}
use[data-allegiance="davion"] {
fill: red; fill: red;
} }
use[href="#davion-1"]:hover { /* Counter is off the grid */
transform: scale(2); use[href*="#t-"][data-x]:hover {
--scale: 1.5;
}
g.start-locations g:first-child {
--i: -2;
}
g.start-locations g:last-child {
--i: 52;
} }
/* Inradius and circumradius values come from the hexagon */ /* Inradius and circumradius values come from the hexagon */
@ -183,29 +199,31 @@ use[href="#davion-1"]:hover {
transform: translate(19px, 31px) scale(4); transform: translate(19px, 31px) scale(4);
} }
g[data-y] { g[data-y], g.start-locations > g {
--translateX: 0; --translateX: 0;
transform: translate(var(--translateX), calc(var(--y-step) * var(--i))); transform: translate(var(--translateX), calc(var(--y-step) * var(--i)));
} }
g[data-y]:nth-child(odd) { g[data-y]:nth-child(even) {
--translateX: calc(var(--inradius)); --translateX: calc(var(--inradius));
} }
g[data-x]:hover { [data-x] use[href="#hex"] {
--scale: 0.97; --scale: 1;
transform: scale(var(--scale));
} }
g[data-x]:hover use[href="#hex"] { [data-x]:hover use[href="#hex"] {
--scale: 0.97;
fill: orange; fill: orange;
stroke: orangered; stroke: orangered;
} }
g[data-x]:hover use[href="#davion-1"] { [data-x]:hover use[href*="#t-"] {
transform: scale(1.5); transform: scale(1.5);
} }
g[data-x] { [data-x] {
--scale: 1; --scale: 1;
transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale)); transform: translateX(calc(var(--x-step) * var(--i))) scale(var(--scale));
} }
@ -262,36 +280,36 @@ g[data-y="48"] { --i: 48; }
g[data-y="49"] { --i: 49; } g[data-y="49"] { --i: 49; }
g[data-y="50"] { --i: 50; } g[data-y="50"] { --i: 50; }
g[data-x="0"] { --i: 0; } [data-x="0"] { --i: 0; }
g[data-x="1"] { --i: 1; } [data-x="1"] { --i: 1; }
g[data-x="2"] { --i: 2; } [data-x="2"] { --i: 2; }
g[data-x="3"] { --i: 3; } [data-x="3"] { --i: 3; }
g[data-x="4"] { --i: 4; } [data-x="4"] { --i: 4; }
g[data-x="5"] { --i: 5; } [data-x="5"] { --i: 5; }
g[data-x="6"] { --i: 6; } [data-x="6"] { --i: 6; }
g[data-x="7"] { --i: 7; } [data-x="7"] { --i: 7; }
g[data-x="8"] { --i: 8; } [data-x="8"] { --i: 8; }
g[data-x="9"] { --i: 9; } [data-x="9"] { --i: 9; }
g[data-x="10"] { --i: 10; } [data-x="10"] { --i: 10; }
g[data-x="11"] { --i: 11; } [data-x="11"] { --i: 11; }
g[data-x="12"] { --i: 12; } [data-x="12"] { --i: 12; }
g[data-x="13"] { --i: 13; } [data-x="13"] { --i: 13; }
g[data-x="14"] { --i: 14; } [data-x="14"] { --i: 14; }
g[data-x="15"] { --i: 15; } [data-x="15"] { --i: 15; }
g[data-x="16"] { --i: 16; } [data-x="16"] { --i: 16; }
g[data-x="17"] { --i: 17; } [data-x="17"] { --i: 17; }
g[data-x="18"] { --i: 18; } [data-x="18"] { --i: 18; }
g[data-x="19"] { --i: 19; } [data-x="19"] { --i: 19; }
g[data-x="20"] { --i: 20; } [data-x="20"] { --i: 20; }
g[data-x="21"] { --i: 21; } [data-x="21"] { --i: 21; }
g[data-x="22"] { --i: 22; } [data-x="22"] { --i: 22; }
g[data-x="23"] { --i: 23; } [data-x="23"] { --i: 23; }
g[data-x="24"] { --i: 24; } [data-x="24"] { --i: 24; }
g[data-x="25"] { --i: 25; } [data-x="25"] { --i: 25; }
g[data-x="26"] { --i: 26; } [data-x="26"] { --i: 26; }
g[data-x="27"] { --i: 27; } [data-x="27"] { --i: 27; }
g[data-x="28"] { --i: 28; } [data-x="28"] { --i: 28; }
g[data-x="29"] { --i: 29; } [data-x="29"] { --i: 29; }
g[data-x="30"] { --i: 30; } [data-x="30"] { --i: 30; }
g[data-x="31"] { --i: 31; } [data-x="31"] { --i: 31; }
g[data-x="32"] { --i: 32; } [data-x="32"] { --i: 32; }

40
public/map.svg
View File

@ -16,22 +16,6 @@
<g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g> <g id="t-6" class="troop-counter-template"><use href="#counter-base"/><text>6</text></g>
<g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g> <g id="t-7" class="troop-counter-template"><use href="#counter-base"/><text>7</text></g>
<g id="davion-1" class="troop-counter"><use href="#t-1"/></g>
<g id="davion-2" class="troop-counter"><use href="#t-2"/></g>
<g id="davion-3" class="troop-counter"><use href="#t-3"/></g>
<g id="davion-4" class="troop-counter"><use href="#t-4"/></g>
<g id="davion-5" class="troop-counter"><use href="#t-5"/></g>
<g id="davion-6" class="troop-counter"><use href="#t-6"/></g>
<g id="davion-7" class="troop-counter"><use href="#t-7"/></g>
<g id="liao-1" class="troop-counter"><use href="#t-1"/></g>
<g id="liao-2" class="troop-counter"><use href="#t-2"/></g>
<g id="liao-3" class="troop-counter"><use href="#t-3"/></g>
<g id="liao-4" class="troop-counter"><use href="#t-4"/></g>
<g id="liao-5" class="troop-counter"><use href="#t-5"/></g>
<g id="liao-6" class="troop-counter"><use href="#t-6"/></g>
<g id="liao-7" class="troop-counter"><use href="#t-7"/></g>
<image id="counter-prone" href="counter_prone.jpg" width="10px"/> <image id="counter-prone" href="counter_prone.jpg" width="10px"/>
<image id="numbers" href="rendered_numbers.png" width="182" height="22"/> <image id="numbers" href="rendered_numbers.png" width="182" height="22"/>
@ -60,9 +44,29 @@
</g> </g>
<g class="grid"> <g class="grid">
<g class="start-locations">
<g>
<!-- <use data-x="13" href="#t-1" href="#t-1" data-allegiance="liao" data-number="1"/> -->
<use data-x="14" href="#t-2" data-allegiance="liao" data-number="2"/>
<use data-x="15" href="#t-3" data-allegiance="liao" data-number="3"/>
<use data-x="16" href="#t-4" data-allegiance="liao" data-number="4"/>
<use data-x="17" href="#t-5" data-allegiance="liao" data-number="5"/>
<use data-x="18" href="#t-6" data-allegiance="liao" data-number="6"/>
<use data-x="19" href="#t-7" data-allegiance="liao" data-number="7"/>
</g>
<g>
<!-- <use data-x="13" href="#t-1" href="#t-1" data-allegiance="davion" data-number="1"/> -->
<use data-x="14" href="#t-2" data-allegiance="davion" data-number="2"/>
<use data-x="15" href="#t-3" data-allegiance="davion" data-number="3"/>
<use data-x="16" href="#t-4" data-allegiance="davion" data-number="4"/>
<use data-x="17" href="#t-5" data-allegiance="davion" data-number="5"/>
<use data-x="18" href="#t-6" data-allegiance="davion" data-number="6"/>
<use data-x="19" href="#t-7" data-allegiance="davion" data-number="7"/>
</g>
</g>
<g data-y="0"> <g data-y="0">
<g data-x="0"><use href="#hex"/></g> <g data-x="0"><use href="#hex"/><use href="#t-1" data-allegiance="liao" data-number="1"/></g>
<g data-x="1"><use href="#hex"/></g> <g data-x="1"><use href="#hex"/><use href="#t-1" data-allegiance="davion" data-number="1"/></g>
<g data-x="2"><use href="#hex"/></g> <g data-x="2"><use href="#hex"/></g>
<g data-x="3"><use href="#hex"/></g> <g data-x="3"><use href="#hex"/></g>
<g data-x="4"><use href="#hex"/></g> <g data-x="4"><use href="#hex"/></g>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 77 KiB

49
src/index.js
View File

@ -144,7 +144,45 @@ const PanZoom = new function () {
pan(svg, e); pan(svg, e);
}, { passive: false }); }, { passive: false });
};
};
const Grid = new function () {
this.setUp = function (cells) {
cells.forEach(cell => cell.addEventListener('click', e => {
let { dataset: { x }, parentElement: { dataset: { y }}} = cell;
console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`);
}));
};
};
const Counter = new function () {
this.setUp = function (counters) {
counters.forEach(counter => counter.addEventListener('click', e => {
e.stopPropagation();
const { allegiance: allegiance, number: n } = counter.dataset,
al = allegiance.charAt(0).toUpperCase() + allegiance.slice(1);
console.log(`${al} troop #${n} clicked.`);
}));
};
};
const Board = new function () {
function getCells (svg) {
return svg.querySelectorAll('g[data-x]');
} }
function getCounters (svg) {
return svg.querySelectorAll('use[href*="#t-"]');
}
this.setUp = function (svg) {
Grid.setUp(getCells(svg));
Counter.setUp(getCounters(svg));
};
}; };
window.addEventListener('load', () => { window.addEventListener('load', () => {
@ -159,16 +197,7 @@ window.addEventListener('load', () => {
recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible'); recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
PanZoom.start(svg); PanZoom.start(svg);
Board.setUp(svg);
let cells = svg.querySelectorAll('g[data-x]');
cells.forEach(cell => {
cell.addEventListener('click', e => {
let { dataset: { x }, parentElement: { dataset: { y }}} = cell;
console.log(`Cell at index { x: ${x}, y: ${y} } clicked.`);
}
)});
const q = s => document.querySelector(s), const q = s => document.querySelector(s),
qA = s => document.querySelectorAll(s); qA = s => document.querySelectorAll(s);