Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-07-01 16:30:15 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-07-01 16:30:15 -0700
commitce6cd0be50975f565e52454cfb37e142eac51fc9 (patch)
tree1085acaf1b29ca82a3865c8727e57dac885ddc67
parente199c0d75a18b08e8c97247b384dd66a304eb97e (diff)
WIP: split hexes and building structure into different layers
Diffstat
-rw-r--r--public/assets/css/map.css2
-rw-r--r--public/assets/css/radial.css21
-rw-r--r--public/assets/images/radial.svg3
-rw-r--r--public/assets/images/scenario_template.svg6
-rw-r--r--src/index.js2
-rw-r--r--src/modules/gameboard.js53
-rw-r--r--src/radial.js40
7 files changed, 74 insertions, 53 deletions
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 535e5b4..4c3c9a2 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -15,7 +15,7 @@ text {
}
use[href="#hex"] {
- opacity: 0.25;
+ opacity: 0;
fill: transparent;
fill-opacity: 0.5;
stroke-width: 0.5px;
diff --git a/public/assets/css/radial.css b/public/assets/css/radial.css
index 2f03cb2..9b84d8a 100644
--- a/public/assets/css/radial.css
+++ b/public/assets/css/radial.css
@@ -47,7 +47,7 @@ use[href="#hex"] {
display: inline;
opacity: 1;
fill: #ffffff;
- fill-opacity: 0.5;
+ /* fill-opacity: 0.5; */
/* fill: url(#asterisk); */
stroke: none;
}
@@ -72,6 +72,14 @@ use[href="#hex"] {
display: none;
}
+[data-view-elevation="-1"] [class*="elevation"] {
+ display: none;
+}
+
+[data-view-elevation="-1"] #background {
+ fill: #333;
+}
+
[data-view-elevation="-1"] .building .elevation-basement {
display: inline;
}
@@ -84,14 +92,21 @@ use[href="#hex"] {
display: inline;
}
-[data-view-elevation="2"] .building .elevation-2 {
+[data-view-elevation="2"] .building .elevation-2,
+[data-view-elevation="2"] .building .elevation-1:last-child {
display: inline;
}
-[data-view-elevation="3"] .building .elevation-3 {
+[data-view-elevation="3"] .building .elevation-3,
+[data-view-elevation="3"] .building .elevation-1:last-child,
+[data-view-elevation="3"] .building .elevation-2:last-child {
display: inline;
}
+#dots {
+ pointer-events: none;
+}
+
/*
[data-view-elevation="-1"] .building > *,
[data-view-elevation="-1"] .building > .structure > * {
diff --git a/public/assets/images/radial.svg b/public/assets/images/radial.svg
index f2abd15..775f0f2 100644
--- a/public/assets/images/radial.svg
+++ b/public/assets/images/radial.svg
@@ -23,6 +23,9 @@
<use x="8.66" y="15" transform="rotate(60 8.66 15)" href="#ast-line"/>
</pattern>
+ <image id="counter-prone" href="counter_prone.jpg" width="10"/>
+ <image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
+
<g id="building8" class="building">
<path id="building8-floor" class="floor" d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z" />
<path id="building8-outer-wall" class="outer-wall" d="m -90.93,-112.5 h 51.96 l 8.66,15 h 95.26 l 8.66,-15 h 43.3 v 15 l -25.98,45 v 60 h 34.64 v 75 h -43.3 v -30 H 12.99 l -25.98,45 h -103.92 v -90 h 25.98 z m 77.94,30 v 15 h 69.28 v -15 m -86.6,37.5 v 7.5 m 0,-60 V -75 M 73.61,-112.5 V -75 M -90.93,-37.5 H 90.93 m 0,45 H -90.93 m 173.2,45 v -15 h 43.3 m -112.58,0 h -43.3 v 60 m 43.3,-45 v -45 m -69.28,30 h -60.62 m 60.62,30 h -60.62 m 60.62,-60 v 90" />
diff --git a/public/assets/images/scenario_template.svg b/public/assets/images/scenario_template.svg
index 20798a9..1b14c39 100644
--- a/public/assets/images/scenario_template.svg
+++ b/public/assets/images/scenario_template.svg
@@ -47,9 +47,9 @@
<image id="counter-grenade" href="counter_grenade.jpg" width="10"/>
</defs>
- <g class="gameboard">
+ <g class="gameboard" data-view-elevation="0">
<rect id="background"/>
-
+ <g class="buildings"/>
<rect id="dots" fill="url(#asterisk)"/>
<g id="firing-arcs">
@@ -57,6 +57,6 @@
<g id="lines"/>
</g>
- <g class="grid" data-view-elevation="0"/>
+ <g class="grid"/>
</g>
</svg>
diff --git a/src/index.js b/src/index.js
index bc4fd8f..bb299be 100644
--- a/src/index.js
+++ b/src/index.js
@@ -210,7 +210,7 @@ document.querySelector('#roll-dice').addEventListener('click', () => {
document.querySelectorAll('[name="select-elevation"]').forEach(el => {
el.addEventListener('change', function (e) {
- document.querySelector('object').contentDocument.querySelector('.grid').dataset.viewElevation = this.value;
+ document.querySelector('object').contentDocument.querySelector('.gameboard').dataset.viewElevation = this.value;
});
});
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 1cdec7b..45b2cb5 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -23,7 +23,6 @@ function getCellOccupant(cell) {
}
function getCells(svg) {
- // return svg.querySelectorAll('g.grid > g[data-y] > g[data-x]');
return svg.querySelectorAll('[data-q][data-r][data-s][data-t]');
}
@@ -86,35 +85,49 @@ function clearSightLine() {
Observable.notify('distance');
}
-function updateSightLine(cell) {
- const CURRENT_ELEVATION_LEVEL = 0;
- const { q: sq, r: sr, s: ss } = cell.dataset;
- const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
+function getSightLineHexes(source, target) {
+ const { q: sq, r: sr, s: ss } = source.dataset;
+ const { q: tq, r: tr, s: ts } = target.dataset;
const sourceIndex = { q: +sq, r: +sr, s: +ss };
const targetIndex = { q: +tq, r: +tr, s: +ts };
- const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
- .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
+ const selector = sightLine
+ .calcIndexes(sourceIndex, targetIndex)
+ .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"] use[href="#hex"]`)
.join(', ');
- const hexes = svg.querySelectorAll(selector);
+ return svg.querySelectorAll(selector);
+}
+
+function updateSightLine(cell) {
+ // const CURRENT_ELEVATION_LEVEL = 0;
+ // const { q: sq, r: sr, s: ss } = cell.dataset;
+ // const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
+ // const sourceIndex = { q: +sq, r: +sr, s: +ss };
+ // const targetIndex = { q: +tq, r: +tr, s: +ts };
+
+ // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
+ // .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
+ // .join(', ');
+
+ const hexes = getSightLineHexes(cell, sightLine.getLockTarget());
sightLine.setHexes(hexes);
sightLine.update(getCellPosition(cell));
Observable.notify('distance', hexes.length - 1);
}
function drawSightLine(sourceCell, targetCell) {
- const CURRENT_ELEVATION_LEVEL = 0;
- const { q: sq, r: sr, s: ss } = sourceCell.dataset;
- const { q: tq, r: tr, s: ts } = targetCell.dataset;
- const sourceIndex = { q: +sq, r: +sr, s: +ss };
- const targetIndex = { q: +tq, r: +tr, s: +ts };
+ // const CURRENT_ELEVATION_LEVEL = 0;
+ // const { q: sq, r: sr, s: ss } = sourceCell.dataset;
+ // const { q: tq, r: tr, s: ts } = targetCell.dataset;
+ // const sourceIndex = { q: +sq, r: +sr, s: +ss };
+ // const targetIndex = { q: +tq, r: +tr, s: +ts };
- const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
- .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
- .join(', ');
+ // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
+ // .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
+ // .join(', ');
- const hexes = svg.querySelectorAll(selector);
+ const hexes = getSightLineHexes(sourceCell, targetCell);
sightLine.setHexes(hexes);
const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
svg.querySelector('.gameboard').appendChild(line);
@@ -175,7 +188,6 @@ function selectOffBoard() {
}
function select(data) {
- console.log('select', data);
const counter = data && (soldier.getCounter(svg, data) || soldier.createCounter(data));
const isSelected = counter?.classList.contains(soldier.getSelectedClass());
@@ -223,7 +235,6 @@ export function start(el) {
placing.push(toPlace);
getLockedSightLine(svg) ? updateSightLine(toPlace.parentElement) : drawSightLine(toPlace.parentElement, cell);
} else {
- // deselect();
Observable.notify('select');
}
} else if (!occupant.classList.contains('clone')) {
@@ -242,7 +253,7 @@ export function start(el) {
} else if (!toPlace && occupant) {
Observable.notify('select', occupant);
} else {
- console.log('removing cell contents');
+ console.log('removing cell contents', cell);
getCellContents(cell).forEach(el => el.remove());
}
@@ -331,7 +342,7 @@ export function toggleFiringArcVisibility() {
export function setFiringArc() {
const counter = getSelected(),
- isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
+ isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-q');
if (isOnBoard(counter)) {
firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
diff --git a/src/radial.js b/src/radial.js
index 2c261bf..ef65e02 100644
--- a/src/radial.js
+++ b/src/radial.js
@@ -414,9 +414,12 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
const { x, y } = radialToScreenCoords({ q: origin.q + pq, r: origin.r + pr, s: origin.s + ps });
const transform = origin.transform || ((x, y) => `translate(${x}, ${y})`);
const buildingStructure = document.createElementNS(xmlns, 'g');
- buildingStructure.classList.add('structure');
+ buildingStructure.classList.add('building');
+ buildingStructure.classList.add(building.type);
buildingStructure.setAttributeNS(null, 'transform', transform(x, y));
- buildingContainer.appendChild(buildingStructure);
+
+ const [mapsheet] = container.classList;
+ document.querySelector(`.buildings .${mapsheet}`).appendChild(buildingStructure);
building.elevationLevels.forEach(elevationLevel => {
const hexContainer = document.createElementNS(xmlns, 'g');
@@ -468,9 +471,13 @@ function drawBuildings(buildings, container, { q: pq, r: pr, s: ps }, furniture)
function drawMapsheet(gameboard, mapsheet, position) {
const container = document.createElementNS(xmlns, 'g');
- container.id = mapsheet.id;
+ container.classList.add(mapsheet.id);
gameboard.appendChild(container);
+ const buildingContainer = document.createElementNS(xmlns, 'g');
+ buildingContainer.classList.add(mapsheet.id);
+ document.querySelector('.buildings').appendChild(buildingContainer);
+
const gridContainer = document.createElementNS(xmlns, 'g');
gridContainer.classList.add('elevation-0');
@@ -498,7 +505,6 @@ function drawMapsheet(gameboard, mapsheet, position) {
container.appendChild(gridContainer);
return new Map([...grid, ...buildingHexes]);
- // return { id, grid, buildings };
}
const horzMapVect = function(coords) {
@@ -558,27 +564,22 @@ let sheets = [];
// sheets = [[mapsheet1]];
// sheets = [[mapsheet2]];
-// sheets = [[mapsheet2, mapsheet3]];
+sheets = [[mapsheet2], [mapsheet3]];
// sheets = [[mapsheet2], [mapsheet1], [mapsheet3]];
// drawMapsheet(grid, mapsheet2, vectorAdd({ q: 0, r: 0, s: 0 }, { q: 1, r: -2, s: 1 }, 6));
-sheets = [
- [mapsheet2, mapsheet1],
- [mapsheet3, mapsheet4]
-];
+// sheets = [
+// [mapsheet2, mapsheet1],
+// [mapsheet3, mapsheet4]
+// ];
// drawBuildings([{
// type: 'building2',
// elevationLevels: range(-1, 2),
// grid: new Map(buildingHexes.bld2),
// position: coords => coords
-// }], gameboard, { q: 0, r: 0, s: 0 });
-
-// const map1building2furniture = document.querySelector('defs .mapsheet2 .building2 .furniture');
-// document.querySelector('.gameboard .building2 .structure').appendChild(map1building2furniture);
-
-// console.log(mapsheet2);
+// }], grid, { q: 0, r: 0, s: 0 });
let finalGrid = new Map();
@@ -593,18 +594,10 @@ findScalar(findMult(sheets)).forEach(([vscalar, row]) => {
}
ms = drawMapsheet(grid, ms, horzMapVect(vertMapVect({ q: 0, r: 0, s: 0 })));
- // console.log(ms);
finalGrid = new Map([...finalGrid, ...ms]);
})
});
-const origin = document.querySelector('[transform="translate(0, 0)"]');
-// console.log(origin);
-
-// console.log([...finalGrid.entries()].find(([k, v]) => v === origin));
-
-console.log(finalGrid.get('0,0,0,0'));
-
const circle = document.createElementNS(xmlns, 'circle');
circle.setAttributeNS(null, 'r', 5);
circle.setAttributeNS(null, 'fill', 'green');
@@ -627,4 +620,3 @@ function addGroup(container, className) {
container.appendChild(g);
return g;
}
-