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

Rename element class 'board' to 'gameboard'

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-28 16:46:25 -07:00
parent 4ce55ea0cd
commit 3e521e2f64
5 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/map.css
View File

@ -199,7 +199,7 @@ g.selected use {
fill: red; fill: red;
} }
.board, .gameboard { .gameboard {
transform: translate(19px, 31px) scale(4); transform: translate(19px, 31px) scale(4);
} }

3
public/map1.svg
View File

@ -45,7 +45,7 @@
<image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/> <image id="map3" class="map-scans" href="scans/map3.jpg" width="2284" height="1518"/>
</g> </g>
<g class="board"> <g class="gameboard">
<g id="firing-arcs"> <g id="firing-arcs">
<g id="shapes"/> <g id="shapes"/>
<g id="lines"/> <g id="lines"/>
@ -1858,4 +1858,5 @@
</g> </g>
</g> </g>
</g> </g>
<script href="map.js"></script>
</svg> </svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 81 KiB

13
src/map.js
View File

@ -1,18 +1,21 @@
const svgns = "http://www.w3.org/2000/svg"; const svgns = "http://www.w3.org/2000/svg";
const dataset = document.currentScript.dataset;
const svg = document.querySelector('svg'); const svg = document.querySelector('svg');
const cellTemplate = svg.querySelector('#hex');
const gb = svg.querySelector('.gameboard'); const gb = svg.querySelector('.gameboard');
const bg = svg.querySelector('#background'); const bg = svg.querySelector('#background');
const imageMaps = svg.querySelector('#image-maps'); const imageMaps = svg.querySelector('#image-maps');
const grid = gb.querySelector('.grid');
const dataset = document.currentScript.dataset;
if ('cols' in dataset && 'rows' in dataset) { if ('cols' in dataset && 'rows' in dataset) {
const cellTemplate = svg.querySelector('#hex');
const grid = gb.querySelector('.grid');
createCells(grid, dataset, cellTemplate.id); createCells(grid, dataset, cellTemplate.id);
setElAttrs(bg, calcComputedBboxFor(imageMaps));
svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));
} }
setElAttrs(bg, calcComputedBboxFor(imageMaps));
svg.setAttribute('viewBox', formatForViewBox(calcComputedBboxFor(gb)));
function setElAttrs(el, attrs) { function setElAttrs(el, attrs) {
for (key in attrs) { for (key in attrs) {
el.setAttributeNS(null, key, attrs[key]); el.setAttributeNS(null, key, attrs[key]);

2
src/modules/game/soldier.js
View File

@ -77,7 +77,7 @@ export function place(svg, selected, cell) {
trace.dataset.allegiance = selected.dataset.allegiance; trace.dataset.allegiance = selected.dataset.allegiance;
trace.classList.add('move-trace'); trace.classList.add('move-trace');
svg.querySelector('.board').prepend(trace); svg.querySelector('.gameboard').prepend(trace);
} else { } else {
points = `${trace.getAttribute('points')} ${current.x},${current.y}`; points = `${trace.getAttribute('points')} ${current.x},${current.y}`;
} }

2
src/modules/gameboard.js
View File

@ -105,7 +105,7 @@ function drawSightLine(sourceCell, targetCell) {
const hexes = svg.querySelectorAll(selector); const hexes = svg.querySelectorAll(selector);
sightLine.setHexes(hexes); sightLine.setHexes(hexes);
const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell)); const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
svg.querySelector('.board').appendChild(line); svg.querySelector('.gameboard').appendChild(line);
distanceCallback && distanceCallback(hexes.length - 1); distanceCallback && distanceCallback(hexes.length - 1);
} }