Web Dev Solutions

Catalin Mititiuc

From 5e2a62bb7aa58889e19665fd7c55ff1185ccfbe0 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 6 Apr 2024 12:09:08 -0700 Subject: Make counter's firing arc visible on mouseover --- index.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) (limited to 'index.js') diff --git a/index.js b/index.js index e9914cf..e52bf71 100644 --- a/index.js +++ b/index.js @@ -375,7 +375,6 @@ const Counter = new function() { }, clickClone = function() { - console.log('clone counter click fires'); let { troopNumber, troopAllegiance, x, y } = this.dataset, [xAttr, yAttr] = this.parentElement.getAttribute('transform').match(/-?\d+\.?\d*/g); @@ -404,7 +403,27 @@ const Counter = new function() { }, pointerOver = function() { - // console.log('pointer over counter', this); + let { troopNumber, troopAllegiance } = this.dataset; + cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`); + + if (cp) { + cp.style.display = 'none'; + } + }, + + pointerOut = function() { + let { troopNumber, troopAllegiance } = this.dataset; + cp = document.getElementById(`clip-path-${troopAllegiance}-${troopNumber}`); + + if (cp) { + let isVisible = + document + .getElementById('toggle-firing-arc-vis') + .querySelector(`input[data-allegiance="${troopAllegiance}"]`) + .checked; + + cp.style.display = isVisible ? 'none' : ''; + } }, click = function() { @@ -545,7 +564,6 @@ const Counter = new function() { } trace.setAttributeNS(null, 'points', points); - counter.addEventListener('pointerover', pointerOver); counter.addEventListener('click', clickClone); } else { counter = document.createElementNS(svgns, 'use'), @@ -561,6 +579,7 @@ const Counter = new function() { counter.style.pointerEvents = 'auto'; counter.addEventListener('pointerover', pointerOver); + counter.addEventListener('pointerout', pointerOut); counter.addEventListener('click', click); counter.addEventListener('dblclick', dblClick); } -- cgit v1.2.3