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

WIP: put everything on the same hex in a group together; get rid of x and y coordinates on counters completely

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-05 13:21:26 -07:00
parent a618b160d0
commit 9dff1c289d
2 changed files with 126 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
index.js
View File

@ -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'));
}
});

55
style.css
View File

@ -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;