From 75a0c37ea5e5a9fa395690984c373536e8efccfa Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 27 Apr 2024 13:10:43 -0700
Subject: Some cleanup
---
src/index.js | 165 ++++++++++--------------------------------
src/modules/game.js | 15 ++--
src/modules/game/counter.js | 3 +-
src/modules/game/firingArc.js | 3 +-
src/modules/game/sightLine.js | 3 +-
src/modules/recordSheet.js | 32 ++++++++
6 files changed, 78 insertions(+), 143 deletions(-)
create mode 100644 src/modules/recordSheet.js
(limited to 'src')
diff --git a/src/index.js b/src/index.js
index b16e00b..fa99fec 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,143 +1,69 @@
import * as panzoom from './modules/panzoom.js';
import * as game from './modules/game.js';
+import * as recordSheet from './modules/recordSheet.js';
-const RecordSheet = {
- unSelect: function () {
- let selected = this.getSelected();
+globalThis.svgns = "http://www.w3.org/2000/svg";
- if (selected) {
- selected.classList.remove('selected');
- }
+const mapPlaceholder = document.querySelector('.map-placeholder'),
+ distanceOutput = document.getElementById('status'),
+ proneToggle = document.getElementById('toggle-prone-counter');
- document.getElementById('toggle-prone-counter').checked = false;
- },
-
- getSelected: function () {
- return document.querySelector('.soldier-record.selected');
- },
-
- select: function (data) {
- this.unSelect();
- document.querySelector(`#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`).classList.add('selected');
- document.getElementById('toggle-prone-counter').checked = data.prone;
- },
-
- endMove: function() {
- const selected = this.getSelected();
-
- if (selected) {
- selected.classList.toggle('movement-ended');
- }
-
- this.unSelect();
- }
-};
-
-const mapPlaceholder = document.querySelector('.map-placeholder');
document.querySelector('object').addEventListener('load', function () {
mapPlaceholder.remove();
this.style.opacity = 1;
});
+document
+ .querySelector('#content input[type="checkbox"].visible')
+ .addEventListener('input', function () {
+ let divs = document.querySelectorAll('#content div');
+
+ divs.forEach(d => {
+ if (this.checked) {
+ d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
+ } else {
+ d.style.display = 'none';
+ }
+ });
+ });
+
window.addEventListener('load', () => {
const svg = document.querySelector('object').contentDocument.querySelector('svg');
game.start(svg);
panzoom.start(svg);
- const svgns = "http://www.w3.org/2000/svg",
- recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible');
-
-
- const distanceOutput = document.getElementById('status');
-
- game.setDistanceCallback(count => {
- const output = {
- count: '-',
- display: 'none'
- }
-
- if (count) {
- output.count = count;
- output.display = 'block';
- }
-
- distanceOutput.querySelector('#hex-count').textContent = output.count;
- distanceOutput.style.display = output.display;
+ game.setDistanceCallback((count = '-') => {
+ distanceOutput.querySelector('#hex-count').textContent = count;
+ distanceOutput.style.display = count === '-' ? 'none' : 'block';
});
- const proneToggle = document.getElementById('toggle-prone-counter');
-
game.setProneFlagCallback(checked => proneToggle.checked = checked);
- game.setSelectCallback(data => RecordSheet.select(data));
-
- // Object.values(settingsPanel.querySelectorAll('fieldset')).forEach(fieldset => {
- // const identityMtx = [1, 0, 0, 1, 0, 0];
- // const target = document.getElementById(fieldset.name);
- // const transform = getComputedStyle(target).transform.match(/-?\d+\.?\d*/g) || identityMtx;
- // const inputs = fieldset.querySelectorAll('input');
-
- // if (transform) {
- // const [a, b, c, d, e, f] = transform.map(n => parseFloat(n));
-
- // // a c e
- // // b d f
-
- // const scaleX = Math.sqrt(a**2 + c**2);
- // const scaleY = Math.sqrt(b**2 + d**2);
-
- // let values = {
- // scaleX: Math.round(scaleX * 1000) / 1000,
- // scaleY: Math.round(scaleY * 1000) / 1000,
- // translateX: e,
- // translateY: f,
- // rotate: Math.round(radToDeg((Math.acos(a / scaleX) + Math.asin(b / scaleY)) / 2) * 10) / 10
- // }
-
- // inputs.forEach(input => input.value = values[input.name]);
- // }
-
- // inputs.forEach(input => {
- // input.addEventListener('pointerenter', e => e.target.focus());
-
- // input.addEventListener('input', e => {
- // let { translateX, translateY, rotate, scaleX, scaleY } =
- // Object.values(inputs).reduce((acc, input) => {
- // acc[input.name] = input.value;
- // return acc;
- // }, {});
-
- // let transform = `translate(${translateX}px, ${translateY}px) rotate(${rotate}deg) scale(${scaleX}, ${scaleY})`;
- // target.style.transform = transform;
- // });
-
- // input.addEventListener('pointerleave', () => document.activeElement.blur());
- // });
- // });
+ game.setSelectCallback(data => recordSheet.select(data));
document.querySelectorAll('.soldier-record').forEach(el =>
- el.addEventListener('click', e => {
+ el.addEventListener('click', () => {
if (el.classList.contains('selected')) {
el.classList.remove('selected');
game.unSelect();
- RecordSheet.unSelect();
+ recordSheet.unSelect();
} else {
game.select(el);
}
})
);
- document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => {
- RecordSheet.endMove();
+ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
+ recordSheet.endMove();
game.endMove();
}));
document.querySelectorAll('.end-turn').forEach(el =>
el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
- let dataSelector = `[data-allegiance="${allegiance}"]`,
+ const dataSelector = `[data-allegiance="${allegiance}"]`,
records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
turnCounter = document.getElementById('turn-count'),
- { textContent: count, dataset: { update }} = turnCounter;
+ { dataset: { update }} = turnCounter;
el.setAttribute('disabled', '');
@@ -145,7 +71,7 @@ window.addEventListener('load', () => {
.querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
.removeAttribute('disabled');
- if (update == '1') {
+ if (update === '1') {
turnCounter.children.namedItem('count').textContent++
turnCounter.dataset.update = '0';
} else {
@@ -162,32 +88,17 @@ window.addEventListener('load', () => {
);
document.querySelectorAll('.set-firing-arc').forEach(el =>
- el.addEventListener('click', () => game.setFiringArc(el.dataset.size))
+ el.addEventListener('click', game.setFiringArc)
);
- document.querySelector('.set-grenade').addEventListener('click', () => game.setGrenade());
-
- recordSheetVisibility.addEventListener('input', e => {
- let divs = document.querySelectorAll('#content div');
-
- divs.forEach(d => {
- if (recordSheetVisibility.checked) {
- d.style.display = d.id == 'record-sheet' ? 'flex' : 'block';
- } else {
- d.style.display = 'none';
- }
- });
- });
+ document.querySelector('.set-grenade').addEventListener('click', game.setGrenade);
- document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el => el.addEventListener('input', e => {
- game.toggleFiringArcVisibility(el.dataset.allegiance);
- }));
-
- document.getElementById('toggle-prone-counter').addEventListener('input', function (e) {
- let selected = RecordSheet.getSelected();
+ document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
+ el.addEventListener('input', game.toggleFiringArcVisibility)
+ );
- if (selected) {
- game.toggleProne();
- }
+ document.getElementById('toggle-prone-counter').addEventListener('input', function () {
+ const selected = recordSheet.getSelected();
+ selected && game.toggleProne();
});
});
diff --git a/src/modules/game.js b/src/modules/game.js
index 5bc1fe3..e66f126 100644
--- a/src/modules/game.js
+++ b/src/modules/game.js
@@ -2,8 +2,6 @@ import * as firingArc from './game/firingArc.js';
import * as sightLine from './game/sightLine.js';
import * as counterMod from './game/counter.js';
-const svgns = "http://www.w3.org/2000/svg";
-
function getCellContents(cell) {
return cell.querySelectorAll('*:not(use[href="#hex"])');
}
@@ -111,9 +109,7 @@ function drawSightLine(sourceCell, targetCell) {
distanceCallback && distanceCallback(hexes.length - 1);
}
-let svg, distanceCallback, proneFlagCallback, selectCallback;
-
-let board,
+let svg, distanceCallback, proneFlagCallback, selectCallback,
placing = [];
export function setDistanceCallback(callback) {
@@ -130,7 +126,6 @@ export function setSelectCallback(callback) {
export function start(el) {
svg = el;
- board = svg.querySelector('.board');
getCells(svg).forEach(cell => {
cell.addEventListener('click', e => {
@@ -332,16 +327,16 @@ export function toggleProne() {
}
}
-export function toggleFiringArcVisibility(allegiance) {
- firingArc.toggleVisibility(svg, allegiance);
+export function toggleFiringArcVisibility() {
+ firingArc.toggleVisibility(svg, this.dataset.allegiance);
}
-export function setFiringArc(size) {
+export function setFiringArc() {
const counter = getSelected(),
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
if (isOnBoard(counter)) {
- firingArc.set(svg, size, counter, getCellPosition(counter.parentElement));
+ firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
}
}
diff --git a/src/modules/game/counter.js b/src/modules/game/counter.js
index ff9b0f4..0d75fc6 100644
--- a/src/modules/game/counter.js
+++ b/src/modules/game/counter.js
@@ -1,5 +1,4 @@
-const svgns = "http://www.w3.org/2000/svg",
- selectedClass = 'selected';
+const selectedClass = 'selected';
function dataSelector({ dataset: { allegiance, number }}) {
return `[data-number="${number}"][data-allegiance="${allegiance}"]`;
diff --git a/src/modules/game/firingArc.js b/src/modules/game/firingArc.js
index db122a0..817bc44 100644
--- a/src/modules/game/firingArc.js
+++ b/src/modules/game/firingArc.js
@@ -4,8 +4,7 @@
// cancels out, leaving us with a unitless ratio of sqrt(3) / (3 / 2), or
// 2 * sqrt(3) / 3.
-const svgns = "http://www.w3.org/2000/svg",
- horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
+const horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
arcSize = {
'small': Math.atan(horzToVertDistRatio / 6),
diff --git a/src/modules/game/sightLine.js b/src/modules/game/sightLine.js
index 2da99d4..6b94514 100644
--- a/src/modules/game/sightLine.js
+++ b/src/modules/game/sightLine.js
@@ -1,5 +1,4 @@
-const svgns = "http://www.w3.org/2000/svg",
- targetClassName = 'sight-line-target',
+const targetClassName = 'sight-line-target',
activeClassName = 'active';
function evenr_to_axial(x, y) {
diff --git a/src/modules/recordSheet.js b/src/modules/recordSheet.js
new file mode 100644
index 0000000..99af18f
--- /dev/null
+++ b/src/modules/recordSheet.js
@@ -0,0 +1,32 @@
+export function unSelect() {
+ const selected = getSelected();
+
+ if (selected) {
+ selected.classList.remove('selected');
+ }
+
+ document.getElementById('toggle-prone-counter').checked = false;
+}
+
+export function getSelected() {
+ return document.querySelector('.soldier-record.selected');
+}
+
+export function select(data) {
+ const selector =
+ `#record-sheet .soldier-record[data-number="${data.number}"][data-allegiance="${data.allegiance}"]`
+
+ unSelect();
+ document.querySelector(selector).classList.add('selected');
+ document.getElementById('toggle-prone-counter').checked = data.prone;
+}
+
+export function endMove() {
+ const selected = getSelected();
+
+ if (selected) {
+ selected.classList.toggle('movement-ended');
+ }
+
+ unSelect();
+}
--
cgit v1.2.3