From ade861767b9961590ba31ca6ba30be1ca8346ea1 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 28 Jun 2024 11:01:33 -0700
Subject: WIP: get sightline working after cube coords update
---
src/modules/game/sight_line.js | 57 ++++++++----------------------------------
src/modules/game/soldier.js | 5 ++--
src/modules/gameboard.js | 29 ++++++++++-----------
3 files changed, 28 insertions(+), 63 deletions(-)
(limited to 'src')
diff --git a/src/modules/game/sight_line.js b/src/modules/game/sight_line.js
index 411faa8..476c607 100644
--- a/src/modules/game/sight_line.js
+++ b/src/modules/game/sight_line.js
@@ -1,34 +1,11 @@
const targetClassName = 'sight-line-target',
activeClassName = 'active';
-function evenr_to_axial(x, y) {
- return { q: x - (y + (y & 1)) / 2, r: y };
+function cubeDistance(a, b) {
+ return Math.max(Math.abs(a.q - b.q), Math.abs(a.r - b.r), Math.abs(a.s - b.s));
}
-function axial_to_evenr(q, r) {
- return { x: q + (r + (r & 1)) / 2, y: r };
-}
-
-function axial_distance(q1, r1, q2, r2) {
- return (Math.abs(q1 - q2) + Math.abs(q1 + r1 - q2 - r2) + Math.abs(r1 - r2)) / 2;
-}
-
-function offset_distance(x1, y1, x2, y2) {
- const { q: q1, r: r1 } = evenr_to_axial(x1, y1),
- { q: q2, r: r2 } = evenr_to_axial(x2, y2);
-
- return axial_distance(q1, r1, q2, r2);
-}
-
-function cube_to_axial(q, r, _) {
- return { q, r };
-}
-
-function axial_to_cube(q, r) {
- return { q, r, s: -q - r };
-}
-
-function cube_round(q, r, s) {
+function cubeRound({ q, r, s }) {
let rQ = Math.round(q),
rR = Math.round(r),
rS = Math.round(s);
@@ -48,20 +25,12 @@ function cube_round(q, r, s) {
return { q: rQ, r: rR, s: rS };
}
-function axial_round(q, r) {
- const cube = axial_to_cube(q, r),
- round = cube_round(cube.q, cube.r, cube.s),
- axial = cube_to_axial(round.q, round.r, round.s);
-
- return { q: axial.q, r: axial.r };
-}
-
function lerp(a, b, t) {
return a + (b - a) * t;
}
-function axial_lerp(q1, r1, q2, r2, t) {
- return { q: lerp(q1, q2, t), r: lerp(r1, r2, t) };
+function cubeLerp(a, b, t) {
+ return { q: lerp(a.q, b.q, t), r: lerp(a.r, b.r, t), s: lerp(a.s, b.s, t) };
}
function lock(sightLine, cell) {
@@ -95,18 +64,12 @@ export function create({ x: x1, y: y1 }, { x: x2, y: y2 }) {
return line;
}
-export function calcIndexes(x1, y1, x2, y2) {
- const axial1 = evenr_to_axial(x1, y1),
- axial2 = evenr_to_axial(x2, y2),
- n = offset_distance(x1, y1, x2, y2),
- results = [];
-
- for (let i = 0; i <= n; i++) {
- const lerp = axial_lerp(axial1.q, axial1.r, axial2.q, axial2.r, 1.0 / n * i),
- round = axial_round(lerp.q, lerp.r),
- { x, y } = axial_to_evenr(round.q, round.r);
+export function calcIndexes(a, b) {
+ const N = cubeDistance(a, b);
+ const results = [];
- results.push([x, y]);
+ for (let i = 0; i <= N; i++) {
+ results.push(cubeRound(cubeLerp(a, b, 1.0 / N * i)));
}
return results;
diff --git a/src/modules/game/soldier.js b/src/modules/game/soldier.js
index 2a89426..12adf6b 100644
--- a/src/modules/game/soldier.js
+++ b/src/modules/game/soldier.js
@@ -66,8 +66,9 @@ function createTrace(previous, current, selected) {
export function createCounter(selected) {
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', `#t-${selected.dataset.number}`);
+ use.setAttributeNS(null, 'href', `counters.svg#rifle`);
+ use.classList.add('primary-weapon');
g.classList.add('counter');
g.dataset.allegiance = selected.dataset.allegiance;
g.dataset.number = selected.dataset.number;
diff --git a/src/modules/gameboard.js b/src/modules/gameboard.js
index afb582b..66b493b 100644
--- a/src/modules/gameboard.js
+++ b/src/modules/gameboard.js
@@ -51,16 +51,9 @@ function isClone(counter) {
}
function getCellPosition(cell) {
- let pt = new DOMPoint(0, 0),
- transform = getComputedStyle(cell).transform.match(/-?\d+\.?\d*/g),
- mtx = new DOMMatrix(transform);
- pt = pt.matrixTransform(mtx);
+ const [x, y] = cell.getAttributeNS(null, 'transform').match(/-?\d+\.?\d*/g);
- transform = getComputedStyle(cell.parentElement).transform.match(/-?\d+\.?\d*/g);
- mtx = new DOMMatrix(transform);
- pt = pt.matrixTransform(mtx);
-
- return pt;
+ return { x, y };
}
function getCell(x, y) {
@@ -108,11 +101,14 @@ function updateSightLine(cell) {
}
function drawSightLine(sourceCell, targetCell) {
- const { dataset: { x: sX }, parentElement: { dataset: { y: sY }}} = sourceCell,
- { dataset: { x: tX }, parentElement: { dataset: { y: tY }}} = targetCell;
-
- const selector = sightLine.calcIndexes(+sX, +sY, +tX, +tY)
- .map(([x, y]) => `g.grid g[data-y="${y}"] g[data-x="${x}"] use[href="#hex"]`)
+ 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 = svg.querySelectorAll(selector);
@@ -297,6 +293,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"]'));
+ ///////////
+
Observable.subscribe('select', select);
Observable.subscribe('endmove', endMove);
console.log('gameboard.js loaded');
--
cgit v1.2.3