From f73241afb8d80ac942935eb0769c03568b5eb4e7 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 6 Apr 2024 10:46:56 -0700
Subject: Sight line logic; I think it works but this conditional is gnarly
---
index.js | 69 ++++++++++++++++++---------------------------------------------
style.css | 14 +++++++++----
2 files changed, 29 insertions(+), 54 deletions(-)
diff --git a/index.js b/index.js
index 11dddd8..fc9f884 100644
--- a/index.js
+++ b/index.js
@@ -584,7 +584,7 @@ const Counter = new function() {
this.endMove = function(el) {
let { troopNumber, troopAllegiance } = el.dataset;
- let trace = container.querySelector(traceSelector(troopNumber, troopAllegiance));
+ let trace = grid.querySelector(traceSelector(troopNumber, troopAllegiance));
if (trace) {
trace.remove();
@@ -719,29 +719,21 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
});
group.addEventListener('click', e => {
- console.log('group click fires');
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) {
- let selected = RecordSheet.getSelected(),
- { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,
- { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset;
-
- console.log('selected', selected);
- console.log(cl.contains('counter'), sTn == tTn, sTa == tTa);
+ let { troopNumber: sTn, troopAllegiance: sTa} = selected.dataset,
+ { troopNumber: tTn, troopAllegiance: tTa} = e.target.dataset,
+ sightLineInLockedPosition = !sl.classList.contains('active'),
+ targetIsCounterOrCloneOfSelected = cl.contains('counter') && sTn == tTn && sTa == tTa;
- if (!sl.classList.contains('active') && (cl.contains('counter') && sTn == tTn && sTa == tTa)) {
+ if (sightLineInLockedPosition && targetIsCounterOrCloneOfSelected) {
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')})"]`),
@@ -752,41 +744,18 @@ POINTS.forEach((row, index) => row.forEach(([x, y]) => {
sl.setAttributeNS(null, 'y1', y);
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'))) {
- RecordSheet.select(e.target);
- Counter.select(e.target);
+ } else if (targetIsCounterOrCloneOfSelected || targetIsSomeOtherUnitCounter) {
+ if (targetIsSomeOtherUnitCounter) {
+ RecordSheet.select(e.target);
+ Counter.select(e.target);
+ }
+
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 => {
diff --git a/style.css b/style.css
index 4a06a9c..7af36b9 100644
--- a/style.css
+++ b/style.css
@@ -232,6 +232,12 @@ g#points g use.counter {
r: 5px;
}
+g#points g use.counter.selected {
+ stroke: orange;
+ stroke-width: 2px;
+ r: 6px;
+}
+
g#points g.hover use[href="#point"] {
opacity: 1;
fill: orange;
@@ -242,8 +248,8 @@ g#points g.hover use.counter {
}
g#points g.hover use.counter:not(.clone) {
- stroke: orange;
- stroke-width: 2px;
+ /* stroke: orange; */
+ /* stroke-width: 2px; */
}
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;
-}
+} */
/* g#counters use {
r: 5px;
--
cgit v1.2.3