Sight line logic; I think it works but this conditional is gnarly
This commit is contained in:
parent
16672db15a
commit
f73241afb8
69
index.js
69
index.js
@ -584,7 +584,7 @@ const Counter = new function() {
|
|||||||
|
|
||||||
this.endMove = function(el) {
|
this.endMove = function(el) {
|
||||||
let { troopNumber, troopAllegiance } = el.dataset;
|
let { troopNumber, troopAllegiance } = el.dataset;
|
||||||
let trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
|
let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
|
||||||
|
|
||||||
if (trace) {
|
if (trace) {
|
||||||
trace.remove();
|
trace.remove();
|
||||||
@ -719,29 +719,21 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
group.addEventListener('click', e => {
|
group.addEventListener('click', e => {
|
||||||
console.log('group click fires');
|
|
||||||
let cl = e.target.classList,
|
let cl = e.target.classList,
|
||||||
sl = grid.querySelector('line.sight-line');
|
sl = grid.querySelector('line.sight-line'),
|
||||||
|
targetIsSomeOtherUnitCounter = cl.contains('counter') && !cl.contains('clone'),
|
||||||
|
selected = RecordSheet.getSelected();
|
||||||
|
|
||||||
|
// maybe we should start with, "are we clicking on a counter?"
|
||||||
|
|
||||||
// if you click on someone else's counter (but not their clone),
|
|
||||||
// then you're selecting another soldier, so you should clear the sightline
|
|
||||||
// if it's locked, and you click on an intermediate clone, nothing should change
|
|
||||||
// if it's locked and you click on your own counter or your last clone
|
|
||||||
// it should redraw from your counter to the locked target hex because in
|
|
||||||
// both cases your counter just moved
|
|
||||||
|
|
||||||
console.log('target', e.target);
|
|
||||||
|
|
||||||
if (sl) {
|
if (sl) {
|
||||||
let selected = RecordSheet.getSelected(),
|
let { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,
|
||||||
{ troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,
|
{ troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset,
|
||||||
{ troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset;
|
sightLineInLockedPosition = !sl.classList.contains('active'),
|
||||||
|
targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa;
|
||||||
|
|
||||||
console.log('selected', selected);
|
if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {
|
||||||
console.log(cl.contains('counter'), sTn == tTn, sTa == tTa);
|
|
||||||
|
|
||||||
if (!sl.classList.contains('active') && (cl.contains('counter') && sTn == tTn && sTa == tTa)) {
|
|
||||||
let counterParent = Counter.get(tTn, tTa).parentElement,
|
let counterParent = Counter.get(tTn, tTa).parentElement,
|
||||||
[x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),
|
[x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),
|
||||||
target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
|
target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
|
||||||
@ -752,41 +744,18 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
|
|||||||
sl.setAttributeNS(null, 'y1', y);
|
sl.setAttributeNS(null, 'y1', y);
|
||||||
|
|
||||||
SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
|
SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
|
||||||
} else if ((cl.contains('counter') && sTn == tTn && sTa == tTa) || (cl.contains('counter') && !cl.contains('clone'))) {
|
} else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) {
|
||||||
RecordSheet.select(e.target);
|
if (targetIsSomeOtherUnitCounter) {
|
||||||
Counter.select(e.target);
|
RecordSheet.select(e.target);
|
||||||
|
Counter.select(e.target);
|
||||||
|
}
|
||||||
|
|
||||||
SightLine.clear();
|
SightLine.clear();
|
||||||
}
|
}
|
||||||
|
} else if (targetIsSomeOtherUnitCounter) {
|
||||||
|
RecordSheet.select(e.target);
|
||||||
|
Counter.select(e.target);
|
||||||
}
|
}
|
||||||
|
|
||||||
// if (cl.contains('counter') && !cl.contains('clone') && !cl.contains('selected')) {
|
|
||||||
// RecordSheet.select(e.target);
|
|
||||||
// Counter.select(e.target);
|
|
||||||
// SightLine.clear();
|
|
||||||
// } else if (sl && !sl.classList.contains('active') && cl.contains('counter')) {
|
|
||||||
// let selected = RecordSheet.getSelected(),
|
|
||||||
// { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset;
|
|
||||||
|
|
||||||
// console.log('selected', selected);
|
|
||||||
|
|
||||||
// if (selected && selected.dataset.troopNumber == tTn && selected.dataset.troopAllegiance == tTa) {
|
|
||||||
// let counterParent = Counter.get(tTn, tTa).parentElement,
|
|
||||||
// [x, y] = counterParent.getAttribute('transform').match(/-?\d+\.?\d*/g),
|
|
||||||
// target = ptGrp.querySelector(`g[transform="translate(${sl.getAttribute('x2')} ${sl.getAttribute('y2')})"]`),
|
|
||||||
// { x: x1, y: y1 } = counterParent.dataset,
|
|
||||||
// { x: x2, y: y2 } = target.dataset;
|
|
||||||
|
|
||||||
// console.log('group', group);
|
|
||||||
|
|
||||||
// console.log('sl', sl);
|
|
||||||
// console.log('x1, y1, x2, y2', x1, y1, x2, y2);
|
|
||||||
|
|
||||||
// sl.setAttributeNS(null, 'x1', x);
|
|
||||||
// sl.setAttributeNS(null, 'y1', y);
|
|
||||||
|
|
||||||
// SightLine.drawHexes(...[x1, y1, x2, y2].map(n => parseInt(n)));
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
});
|
});
|
||||||
|
|
||||||
point.addEventListener('click', e => {
|
point.addEventListener('click', e => {
|
||||||
|
14
style.css
14
style.css
@ -232,6 +232,12 @@ g#points g use.counter {
|
|||||||
r: 5px;
|
r: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
g#points g use.counter.selected {
|
||||||
|
stroke: orange;
|
||||||
|
stroke-width: 2px;
|
||||||
|
r: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
g#points g.hover use[href="#point"] {
|
g#points g.hover use[href="#point"] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
fill: orange;
|
fill: orange;
|
||||||
@ -242,8 +248,8 @@ g#points g.hover use.counter {
|
|||||||
}
|
}
|
||||||
|
|
||||||
g#points g.hover use.counter:not(.clone) {
|
g#points g.hover use.counter:not(.clone) {
|
||||||
stroke: orange;
|
/* stroke: orange; */
|
||||||
stroke-width: 2px;
|
/* stroke-width: 2px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
g#points use.counter[data-troop-allegiance="davion"] {
|
g#points use.counter[data-troop-allegiance="davion"] {
|
||||||
@ -271,9 +277,9 @@ g#points use[data-troop-allegiance="liao"].clone {
|
|||||||
|
|
||||||
/* ======================================================= */
|
/* ======================================================= */
|
||||||
|
|
||||||
g#counters {
|
/* g#counters {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
} */
|
||||||
|
|
||||||
/* g#counters use {
|
/* g#counters use {
|
||||||
r: 5px;
|
r: 5px;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user