WIP: counters

author: Catalin Mititiuc <webdevcat@proton.me> 2024-07-02 15:19:17 -0700
committer: Catalin Mititiuc <webdevcat@proton.me> 2024-07-02 15:27:27 -0700
commit: 71724cc97967a876224d1a4b711843b17256cb0d (patch)
tree: bf39584668aa2cd8077a01719715663a8b0e3849 /src
parent: 624991870df0e804d64cf4d9359c63435513d61b (diff)
3 files changed, 17 insertions, 48 deletions
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index f9c67db..fc3d113 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -1,3 +1,5 @@
+import counters from './assets/images/counters.svg';
+
 const selectedClass = 'selected';
 
 function dataSelector({ dataset: { allegiance, number }}) {
@@ -53,15 +55,15 @@ function createTrace(previous, current, selected) {
   return trace;
 }
 
-export function createCounter(selected) {
+export function createCounter(selected, weapon = 'rifle') {
   const use = document.createElementNS(svgns, 'use');
   const g = document.createElementNS(svgns, 'g');
-  // use.setAttributeNS(null, 'href', `#t-${selected.dataset.number}`);
-  use.setAttributeNS(null, 'href', `counters.svg#rifle`);
+  use.setAttributeNS(null, 'href', `../../${counters}#${weapon}`);
   use.classList.add('primary-weapon');
   g.classList.add('counter');
   g.dataset.allegiance = selected.dataset.allegiance;
   g.dataset.number = selected.dataset.number;
+  g.dataset.squad = selected.dataset.squad;
   g.appendChild(use);
 
   return g;
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index 45b2cb5..a716ca8 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -3,7 +3,7 @@ import * as sightLine from './game/sight_line.js';
 import * as soldier from './game/soldier.js';
 import { Observable } from "./observable";
 
-let svg, selected,
+let svg,
   placing = [];
 
 function getCellContents(cell) {
@@ -100,16 +100,6 @@ function getSightLineHexes(source, target) {
 }
 
 function updateSightLine(cell) {
-  // const CURRENT_ELEVATION_LEVEL = 0;
-  // const { q: sq, r: sr, s: ss } = cell.dataset;
-  // const { q: tq, r: tr, s: ts } = sightLine.getLockTarget().dataset;
-  // const sourceIndex = { q: +sq, r: +sr, s: +ss };
-  // const targetIndex = { q: +tq, r: +tr, s: +ts };
-
-  // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
-  //   .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
-  //   .join(', ');
-
   const hexes = getSightLineHexes(cell, sightLine.getLockTarget());
   sightLine.setHexes(hexes);
   sightLine.update(getCellPosition(cell));
@@ -117,16 +107,6 @@ function updateSightLine(cell) {
 }
 
 function drawSightLine(sourceCell, targetCell) {
-  // const CURRENT_ELEVATION_LEVEL = 0;
-  // const { q: sq, r: sr, s: ss } = sourceCell.dataset;
-  // const { q: tq, r: tr, s: ts } = targetCell.dataset;
-  // const sourceIndex = { q: +sq, r: +sr, s: +ss };
-  // const targetIndex = { q: +tq, r: +tr, s: +ts };
-
-  // const selector = sightLine.calcIndexes(sourceIndex, targetIndex)
-  //   .map(({ q, r, s }) => `g[data-q="${q}"][data-r="${r}"][data-s="${s}"][data-t="${CURRENT_ELEVATION_LEVEL}"] use[href="#hex"]`)
-  //   .join(', ');
-
   const hexes = getSightLineHexes(sourceCell, targetCell);
   sightLine.setHexes(hexes);
   const line = sightLine.create(getCellPosition(sourceCell), getCellPosition(targetCell));
@@ -136,10 +116,12 @@ function drawSightLine(sourceCell, targetCell) {
 
 function moveBackOneStepInHistory(counter) {
   const trace = soldier.getTrace(svg, counter);
+
   counter.remove();
   counter = getCounterAtGridIndex(...counter.dataset.previous.split(','));
   counter.classList.remove('clone');
   counter.classList.add(soldier.getSelectedClass());
+
   if (!('previous' in counter.dataset)) {
     trace.remove();
   } else {
@@ -299,7 +281,7 @@ export function start(el) {
     cell.addEventListener('pointerout', () => {
       getActiveSightLine(svg) && clearSightLine();
 
-      let occupant = getCellOccupant(cell);
+      const occupant = getCellOccupant(cell);
 
       if (occupant) {
         firingArc.toggleCounterVisibility(svg, occupant, false);
@@ -308,9 +290,11 @@ export function start(el) {
   });
 
   // debug //
-  const c = soldier.createCounter({ dataset: { allegiance: 'attacker', number: 1, squad: 1 }});
-  soldier.place(svg, c, svg.querySelector('[data-q="0"][data-r="0"][data-s="0"][data-t="0"]'));
-  // soldier.place(svg, c, svg.querySelector('[data-q="-2"][data-r="-3"][data-s="5"][data-t="0"]'));
+  const attacker = { dataset: { allegiance: 'attacker', number: 1, squad: 1 }};
+  const defender = { dataset: { allegiance: 'defender', number: 1, squad: 2 }};
+
+  soldier.place(svg, soldier.createCounter(attacker, 'blazer'), getCell(0, 0, 0, 0));
+  soldier.place(svg, soldier.createCounter(defender, 'rifle'), getCell(-1, 0, 1, 0));
   ///////////
 
   Observable.subscribe('select', select);
diff --git a/src/modules/record_sheet.js b/src/modules/record_sheet.js
index 092870a..0f279d5 100644
--- a/src/modules/record_sheet.js
+++ b/src/modules/record_sheet.js
@@ -1,17 +1,5 @@
 import { Observable } from "./observable";
-// import counters from '../../public/assets/images/counters.svg';
-// console.log('counters', counters);
-
-// import svg from '../../public/assets/images/counters.svg';
-
-// const doc = new DOMParser().parseFromString(svg, 'image/svg+xml');
-// const rifle = document.importNode(doc.querySelector('#rifle'), true);
-// const smg = document.importNode(doc.querySelector('#smg'), true);
-
-// console.log('svg', counters);
-// console.log('doc', doc);
-// console.log('imported svg', rifle);
-// console.log('imported svg', smg);
+import counters from './assets/images/counters.svg';
 
 const weapons = {
   rifle: {
@@ -42,9 +30,7 @@ function createIcon(number) {
   icon.setAttributeNS(null, 'viewBox', '-6 -6 12 12');
   icon.setAttribute('xmlns', svgns);
 
-  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#counter-base`);
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg#counter-base`);
-  // use.setAttributeNS(null, 'href', `${counters}#counter-base`);
+  use.setAttributeNS(null, 'href', `./${counters}#counter-base`);
 
   text.textContent = number;
 
@@ -68,12 +54,9 @@ function createWeaponIcon(type) {
   icon.setAttribute('xmlns', svgns);
   icon.classList.add('weapon-icon');
 
-  // use.setAttributeNS(null, 'href', `assets/images/counters.svg?v=${cacheBuster}#${type}`);
-  // use.setAttributeNS(null, 'href', `${counters}#${type}`);
-  use.setAttributeNS(null, 'href', `assets/images/counters.svg#${type}`);
+  use.setAttributeNS(null, 'href', `${counters}#${type}`);
 
   icon.appendChild(use);
-  // icon.appendChild(document.importNode(doc.querySelector(`#${type}`), true));
 
   return icon;
 }
author	Catalin Mititiuc <webdevcat@proton.me>	2024-07-02 15:19:17 -0700
committer	Catalin Mititiuc <webdevcat@proton.me>	2024-07-02 15:27:27 -0700
commit	71724cc97967a876224d1a4b711843b17256cb0d (patch)
tree	bf39584668aa2cd8077a01719715663a8b0e3849 /src
parent	624991870df0e804d64cf4d9359c63435513d61b (diff)