From 9dff1c289df353f52bda272fc6a6425a8b4cc9f5 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 5 Apr 2024 13:21:26 -0700
Subject: WIP: put everything on the same hex in a group together; get rid of x
and y coordinates on counters completely
---
index.js | 107 ++++++++++++++++++++++++++++++++++++++++++++------------------
style.css | 55 ++++++++++++++++++++++++++++----
2 files changed, 126 insertions(+), 36 deletions(-)
diff --git a/index.js b/index.js
index 6de31fd..f4ed7fb 100644
--- a/index.js
+++ b/index.js
@@ -348,8 +348,10 @@ function ptGrpToSvgPt(x, y) {
return svgP;
}
+const grid = document.getElementById('grid');
+
const Counter = new function() {
- let container = cntrGrp,
+ let container = ptGrp,
selectedClass = 'selected',
dataSelector = function(troopNumber, allegiance) {
@@ -361,6 +363,10 @@ const Counter = new function() {
},
position = function(x, y) {
+ return `g[data-x="${x}"][data-y="${y}"]`;
+ },
+
+ counterPosition = function(x, y) {
return `use.counter[data-x="${x}"][data-x="${y}"]`;
},
@@ -370,19 +376,19 @@ const Counter = new function() {
clickClone = function() {
let { troopNumber, troopAllegiance, x, y } = this.dataset,
- xAttr = this.getAttribute('x'),
- yAttr = this.getAttribute('y');
+ [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g);
if (Counter.isSelected(troopNumber, troopAllegiance)) {
- let trace = container.querySelector(traceSelector(troopNumber, troopAllegiance)),
+ let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance)),
points = trace.getAttribute('points').split(' ');
if (`${xAttr},${yAttr}` == points.at(0)) {
let counter = Counter.get(troopNumber, troopAllegiance);
- counter.setAttributeNS(null, 'x', xAttr);
- counter.setAttributeNS(null, 'y', yAttr);
+ counter.setAttributeNS(null, 'x', 0);
+ counter.setAttributeNS(null, 'y', 0);
counter.dataset.x = x;
counter.dataset.y = y;
+ container.querySelector(`g[data-x="${x}"][data-y="${y}"]`).appendChild(counter);
Counter.removeClones(this);
trace.remove();
@@ -396,15 +402,19 @@ const Counter = new function() {
}
},
+ pointerOver = function() {
+ // console.log('pointer over counter', this);
+ },
+
click = function() {
if (this.classList.contains(selectedClass)) {
let { troopNumber, troopAllegiance } = this.dataset,
- trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
if (trace) {
let points = trace.getAttribute('points').split(' '),
[xAttr, yAttr] = points.at(-2).split(','),
- clone = container.querySelector(`${dataSelector(troopNumber, troopAllegiance)}[x="${xAttr}"][y="${yAttr}"].clone`);
+ clone = container.querySelector(`g[transform="translate(${xAttr} ${yAttr})"] ${dataSelector(troopNumber, troopAllegiance)}.clone`);
points.pop();
@@ -419,6 +429,8 @@ const Counter = new function() {
this.dataset.x = clone.dataset.x;
this.dataset.y = clone.dataset.y;
+ container.querySelector(`g[data-x="${this.dataset.x}"][data-y="${this.dataset.y}"]`).appendChild(this);
+
clone.remove();
}
}
@@ -427,7 +439,7 @@ const Counter = new function() {
dblClick = function() {
if (this.classList.contains(selectedClass)) {
let { troopNumber, troopAllegiance } = this.dataset,
- trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
if (!trace) {
Counter.remove(this);
@@ -441,7 +453,7 @@ const Counter = new function() {
};
this.getAt = function(x, y) {
- return container.querySelector(`${position(x, y)}:not(.clone)`);
+ return container.querySelector(`${counterPosition(x, y)}:not(.clone)`);
};
this.select = function({ dataset: { troopNumber, troopAllegiance }}) {
@@ -484,34 +496,45 @@ const Counter = new function() {
if (counterNodeList.length > 0) {
let counters = Array.from(counterNodeList),
original = counters.find(el => !el.classList.contains('clone')),
- trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+ trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
+
+ // let ptContainers = counters.map(c => ptGrp.querySelector(position(c.dataset.x, c.dataset.y)));
let current = {
x: point.dataset.x,
y: point.dataset.y,
- xAttr: point.getAttribute('x'),
- yAttr: point.getAttribute('y')
+ // xAttr: point.getAttribute('x'),
+ // yAttr: point.getAttribute('y'),
+ transform: container.querySelector(position(point.dataset.x, point.dataset.y)).getAttribute('transform')
},
previous = {
x: original.dataset.x,
y: original.dataset.y,
- xAttr: original.getAttribute('x'),
- yAttr: original.getAttribute('y')
+ // xAttr: original.getAttribute('x'),
+ // yAttr: original.getAttribute('y'),
+ transform: container.querySelector(position(original.dataset.x, original.dataset.y)).getAttribute('transform')
}
+ console.log(current.transform, previous.transform);
+
+ [current.xAttr, current.yAttr] = current.transform.match(/-?\d+\.?\d*/g);
+ [previous.xAttr, previous.yAttr] = previous.transform.match(/-?\d+\.?\d*/g);
+
counter = original.cloneNode();
- counter.setAttributeNS(null, 'x', previous.xAttr);
- counter.setAttributeNS(null, 'y', previous.yAttr);
+ counter.setAttributeNS(null, 'x', 0);
+ counter.setAttributeNS(null, 'y', 0);
counter.dataset.x = previous.x;
counter.dataset.y = previous.y;
counter.classList.remove(selectedClass);
counter.classList.add('clone');
- original.setAttributeNS(null, 'x', current.xAttr);
- original.setAttributeNS(null, 'y', current.yAttr);
+ original.setAttributeNS(null, 'x', 0);
+ original.setAttributeNS(null, 'y', 0);
original.dataset.x = current.x;
original.dataset.y = current.y;
+ container.querySelector(`g[data-x="${current.x}"][data-y="${current.y}"]`).appendChild(original);
+
if (!trace) {
trace = document.createElementNS(svgns, 'polyline');
points = `${previous.xAttr},${previous.yAttr} ${current.xAttr},${current.yAttr}`;
@@ -520,12 +543,14 @@ const Counter = new function() {
trace.dataset.troopAllegiance = troopAllegiance;
trace.classList.add('move-trace');
- container.prepend(trace);
+ grid.prepend(trace)
+ // container.prepend(trace);
} else {
points = `${trace.getAttribute('points')} ${current.xAttr},${current.yAttr}`;
}
trace.setAttributeNS(null, 'points', points);
+ counter.addEventListener('pointerover', pointerOver);
counter.addEventListener('click', clickClone);
} else {
counter = document.createElementNS(svgns, 'use'),
@@ -540,11 +565,14 @@ const Counter = new function() {
counter.dataset.y = point.dataset.y;
counter.style.pointerEvents = 'auto';
+ counter.addEventListener('pointerover', pointerOver);
counter.addEventListener('click', click);
counter.addEventListener('dblclick', dblClick);
}
- container.appendChild(counter);
+ container.querySelector(`g[data-x="${counter.dataset.x}"][data-y="${counter.dataset.y}"]`).appendChild(counter);
+
+ // container.appendChild(counter);
};
this.remove = function({ dataset: { troopNumber, troopAllegiance }}) {
@@ -619,17 +647,36 @@ const RecordSheet = new function() {
POINTS.forEach((row, index) => row.forEach(([x, y]) => {
var cx = x * INRADIUS * 2 + (isEven(index) ? INRADIUS : 0),
cy = y * 3 / 2 * CIRCUMRADIUS,
- point = document.createElementNS(svgns, 'use');
+ point = document.createElementNS(svgns, 'use'),
+ group = document.createElementNS(svgns, 'g');
cx = parseFloat(cx.toFixed(1));
cy = parseFloat(cy.toFixed(1));
point.setAttributeNS(null, 'href', `#point`);
- point.setAttributeNS(null, 'x', cx);
- point.setAttributeNS(null, 'y', cy);
+ // point.setAttributeNS(null, 'x', cx);
+ // point.setAttributeNS(null, 'y', cy);
+
+ point.setAttributeNS(null, 'x', 0);
+ point.setAttributeNS(null, 'y', 0);
+
point.dataset.x = x;
point.dataset.y = y;
+ group.setAttributeNS(null, 'transform', `translate(${cx} ${cy})`);
+ group.dataset.x = x;
+ group.dataset.y = y;
+
+ group.appendChild(point);
+
+ group.addEventListener('pointerover', e => {
+ group.classList.add('hover');
+ });
+
+ group.addEventListener('pointerout', e => {
+ group.classList.remove('hover');
+ });
+
point.addEventListener('click', e => {
let selectedSoldier = document.querySelector('.soldier-record.selected');
let existingOccupant =
@@ -643,7 +690,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (sl) {
sl.classList.add('active');
point.dispatchEvent(new MouseEvent('mouseout'));
- point.dispatchEvent(new MouseEvent('mouseover'));
+ point.dispatchEvent(new MouseEvent('pointerover'));
}
}
});
@@ -657,12 +704,12 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
if (sl.classList.contains('active')) {
point.dispatchEvent(new MouseEvent('mouseout'));
- point.dispatchEvent(new MouseEvent('mouseover'));
+ point.dispatchEvent(new MouseEvent('pointerover'));
}
}
});
- point.addEventListener('mouseover', e => {
+ point.addEventListener('pointerover', e => {
let selected = RecordSheet.getSelected();
if (selected) {
@@ -702,7 +749,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
let lineCoords = linedraw(...coords);
lineCoords.shift();
- let s = lineCoords.map(([x, y]) => `use[data-x="${x}"][data-y="${y}"]`).join(', ');
+ let s = lineCoords.map(([x, y]) => `use[href="#point"][data-x="${x}"][data-y="${y}"]`).join(', ');
ptGrp.querySelectorAll(s).forEach(p => p.classList.add('active'));
}
}
@@ -720,7 +767,7 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
}
});
- ptGrp.appendChild(point);
+ ptGrp.appendChild(group);
}));
document.querySelectorAll('.soldier-record').forEach(el =>
@@ -752,7 +799,7 @@ document.querySelector('#grid').addEventListener('click', e => {
if (sl) {
sl.classList.add('active');
point.dispatchEvent(new MouseEvent('mouseout'));
- point.dispatchEvent(new MouseEvent('mouseover'));
+ point.dispatchEvent(new MouseEvent('pointerover'));
}
});
diff --git a/style.css b/style.css
index 2e4cbd7..438ad62 100644
--- a/style.css
+++ b/style.css
@@ -228,11 +228,54 @@ g.troop-counter [href="#counter-prone"] {
transform: translate(-5px, 6px);
}
+g#points g use.counter {
+ r: 5px;
+}
+
+g#points g.hover use[href="#point"] {
+ opacity: 1;
+ fill: orange;
+}
+
+g#points g.hover use.counter {
+ stroke-width: 2px;
+ r: 7px;
+}
+
+g#points g.hover use.counter:not(.clone) {
+ stroke: orange;
+}
+
+g#points use.counter[data-troop-allegiance="davion"] {
+ fill: red;
+}
+
+g#points use.counter[data-troop-allegiance="liao"] {
+ fill: green;
+}
+
+g#points use.clone {
+ stroke: white;
+ stroke-width: 0.5px;
+ stroke-dasharray: 1;
+}
+
+g#points use[data-troop-allegiance="davion"].clone {
+ fill: rgb(255, 126, 126);
+}
+
+g#points use[data-troop-allegiance="liao"].clone {
+ fill: rgb(130, 190, 130);
+}
+
+
+/* ======================================================= */
+
g#counters {
pointer-events: none;
}
-g#counters use {
+/* g#counters use {
r: 5px;
}
@@ -240,17 +283,17 @@ g#counters use:hover {
stroke: orange;
stroke-width: 2px;
r: 8px;
-}
+} */
-g#counters use[data-troop-allegiance="davion"] {
+/* g#counters use[data-troop-allegiance="davion"] {
fill: red;
}
g#counters use[data-troop-allegiance="liao"] {
fill: green;
-}
+} */
-g#counters use.clone {
+/* g#counters use.clone {
stroke: white;
stroke-width: 0.5px;
stroke-dasharray: 1;
@@ -262,7 +305,7 @@ g#counters use[data-troop-allegiance="davion"].clone {
g#counters use[data-troop-allegiance="liao"].clone {
fill: rgb(130, 190, 130);
-}
+} */
text.counter, #troop-counter text {
font-size: 12px;
--
cgit v1.2.3