Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/src/index.js
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-27 13:10:43 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-27 13:10:43 -0700
commit75a0c37ea5e5a9fa395690984c373536e8efccfa (patch)
tree808eeee44b89638b0583ba2375388c53be882c2f /src/index.js
parentb88945ced695e8478076c5f53a198fd405f7db96 (diff)
Some cleanup
Diffstat (limited to 'src/index.js')
-rw-r--r--src/index.js165
1 files changed, 38 insertions, 127 deletions
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();
});
});