ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Some cleanup

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-04-27 13:10:43 -07:00
parent b88945ced6
commit 75a0c37ea5
7 changed files with 78 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
public/index.html
View File

@ -100,49 +100,6 @@
<input type="checkbox" data-allegiance="liao" /> <input type="checkbox" data-allegiance="liao" />
</div> </div>
<div id="panel">
<fieldset name="point">
<legend>hex</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="points">
<legend>grid</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.1" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.1" value="1" /></label>
</div>
</fieldset>
<fieldset name="map2">
<legend>map2</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
</div>
</fieldset>
<fieldset name="map3">
<legend>map3</legend>
<div>
<label>translateX <input name="translateX" type="number" step="0.1" value="0" /></label>
<label>translateY <input name="translateY" type="number" step="0.1" value="0" /></label>
<label>rotate <input name="rotate" type="number" step="0.1" value="0" /></label>
<label>scaleX <input name="scaleX" type="number" step="0.001" value="1" /></label>
<label>scaleY <input name="scaleY" type="number" step="0.001" value="1" /></label>
</div>
</fieldset>
</div>
<div class="map-placeholder"> <div class="map-placeholder">
Loading... Loading...
</div> </div>

165
src/index.js
View File

@ -1,143 +1,69 @@
import * as panzoom from './modules/panzoom.js'; import * as panzoom from './modules/panzoom.js';
import * as game from './modules/game.js'; import * as game from './modules/game.js';
import * as recordSheet from './modules/recordSheet.js';
const RecordSheet = { globalThis.svgns = "http://www.w3.org/2000/svg";
unSelect: function () {
let selected = this.getSelected();
if (selected) { const mapPlaceholder = document.querySelector('.map-placeholder'),
selected.classList.remove('selected'); 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 () { document.querySelector('object').addEventListener('load', function () {
mapPlaceholder.remove(); mapPlaceholder.remove();
this.style.opacity = 1; 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', () => { window.addEventListener('load', () => {
const svg = document.querySelector('object').contentDocument.querySelector('svg'); const svg = document.querySelector('object').contentDocument.querySelector('svg');
game.start(svg); game.start(svg);
panzoom.start(svg); panzoom.start(svg);
const svgns = "http://www.w3.org/2000/svg", game.setDistanceCallback((count = '-') => {
recordSheetVisibility = document.querySelector('#content input[type="checkbox"].visible'); distanceOutput.querySelector('#hex-count').textContent = count;
distanceOutput.style.display = count === '-' ? 'none' : 'block';
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;
}); });
const proneToggle = document.getElementById('toggle-prone-counter');
game.setProneFlagCallback(checked => proneToggle.checked = checked); game.setProneFlagCallback(checked => proneToggle.checked = checked);
game.setSelectCallback(data => RecordSheet.select(data)); 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());
// });
// });
document.querySelectorAll('.soldier-record').forEach(el => document.querySelectorAll('.soldier-record').forEach(el =>
el.addEventListener('click', e => { el.addEventListener('click', () => {
if (el.classList.contains('selected')) { if (el.classList.contains('selected')) {
el.classList.remove('selected'); el.classList.remove('selected');
game.unSelect(); game.unSelect();
RecordSheet.unSelect(); recordSheet.unSelect();
} else { } else {
game.select(el); game.select(el);
} }
}) })
); );
document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', e => { document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click', () => {
RecordSheet.endMove(); recordSheet.endMove();
game.endMove(); game.endMove();
})); }));
document.querySelectorAll('.end-turn').forEach(el => document.querySelectorAll('.end-turn').forEach(el =>
el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => { el.addEventListener('click', ({ target: { dataset: { allegiance }}}) => {
let dataSelector = `[data-allegiance="${allegiance}"]`, const dataSelector = `[data-allegiance="${allegiance}"]`,
records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)), records = Array.from(document.querySelectorAll(`.soldier-record${dataSelector}`)),
turnCounter = document.getElementById('turn-count'), turnCounter = document.getElementById('turn-count'),
{ textContent: count, dataset: { update }} = turnCounter; { dataset: { update }} = turnCounter;
el.setAttribute('disabled', ''); el.setAttribute('disabled', '');
@ -145,7 +71,7 @@ window.addEventListener('load', () => {
.querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`) .querySelector(`button.end-turn:not([data-allegiance="${allegiance}"])`)
.removeAttribute('disabled'); .removeAttribute('disabled');
if (update == '1') { if (update === '1') {
turnCounter.children.namedItem('count').textContent++ turnCounter.children.namedItem('count').textContent++
turnCounter.dataset.update = '0'; turnCounter.dataset.update = '0';
} else { } else {
@ -162,32 +88,17 @@ window.addEventListener('load', () => {
); );
document.querySelectorAll('.set-firing-arc').forEach(el => 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()); document.querySelector('.set-grenade').addEventListener('click', game.setGrenade);
recordSheetVisibility.addEventListener('input', e => { document.querySelectorAll('#toggle-firing-arc-vis input').forEach(el =>
let divs = document.querySelectorAll('#content div'); el.addEventListener('input', game.toggleFiringArcVisibility)
);
divs.forEach(d => { document.getElementById('toggle-prone-counter').addEventListener('input', function () {
if (recordSheetVisibility.checked) { const selected = recordSheet.getSelected();
d.style.display = d.id == 'record-sheet' ? 'flex' : 'block'; selected && game.toggleProne();
} else {
d.style.display = 'none';
}
});
});
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();
if (selected) {
game.toggleProne();
}
}); });
}); });

15
src/modules/game.js
View File

@ -2,8 +2,6 @@ import * as firingArc from './game/firingArc.js';
import * as sightLine from './game/sightLine.js'; import * as sightLine from './game/sightLine.js';
import * as counterMod from './game/counter.js'; import * as counterMod from './game/counter.js';
const svgns = "http://www.w3.org/2000/svg";
function getCellContents(cell) { function getCellContents(cell) {
return cell.querySelectorAll('*:not(use[href="#hex"])'); return cell.querySelectorAll('*:not(use[href="#hex"])');
} }
@ -111,9 +109,7 @@ function drawSightLine(sourceCell, targetCell) {
distanceCallback && distanceCallback(hexes.length - 1); distanceCallback && distanceCallback(hexes.length - 1);
} }
let svg, distanceCallback, proneFlagCallback, selectCallback; let svg, distanceCallback, proneFlagCallback, selectCallback,
let board,
placing = []; placing = [];
export function setDistanceCallback(callback) { export function setDistanceCallback(callback) {
@ -130,7 +126,6 @@ export function setSelectCallback(callback) {
export function start(el) { export function start(el) {
svg = el; svg = el;
board = svg.querySelector('.board');
getCells(svg).forEach(cell => { getCells(svg).forEach(cell => {
cell.addEventListener('click', e => { cell.addEventListener('click', e => {
@ -332,16 +327,16 @@ export function toggleProne() {
} }
} }
export function toggleFiringArcVisibility(allegiance) { export function toggleFiringArcVisibility() {
firingArc.toggleVisibility(svg, allegiance); firingArc.toggleVisibility(svg, this.dataset.allegiance);
} }
export function setFiringArc(size) { export function setFiringArc() {
const counter = getSelected(), const counter = getSelected(),
isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x'); isOnBoard = counter => counter && counter.parentElement.hasAttribute('data-x');
if (isOnBoard(counter)) { if (isOnBoard(counter)) {
firingArc.set(svg, size, counter, getCellPosition(counter.parentElement)); firingArc.set(svg, this.dataset.size, counter, getCellPosition(counter.parentElement));
} }
} }

3
src/modules/game/counter.js
View File

@ -1,5 +1,4 @@
const svgns = "http://www.w3.org/2000/svg", const selectedClass = 'selected';
selectedClass = 'selected';
function dataSelector({ dataset: { allegiance, number }}) { function dataSelector({ dataset: { allegiance, number }}) {
return `[data-number="${number}"][data-allegiance="${allegiance}"]`; return `[data-number="${number}"][data-allegiance="${allegiance}"]`;

3
src/modules/game/firingArc.js
View File

@ -4,8 +4,7 @@
// cancels out, leaving us with a unitless ratio of sqrt(3) / (3 / 2), or // cancels out, leaving us with a unitless ratio of sqrt(3) / (3 / 2), or
// 2 * sqrt(3) / 3. // 2 * sqrt(3) / 3.
const svgns = "http://www.w3.org/2000/svg", const horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
horzToVertDistRatio = 2 * Math.sqrt(3) / 3,
arcSize = { arcSize = {
'small': Math.atan(horzToVertDistRatio / 6), 'small': Math.atan(horzToVertDistRatio / 6),

3
src/modules/game/sightLine.js
View File

@ -1,5 +1,4 @@
const svgns = "http://www.w3.org/2000/svg", const targetClassName = 'sight-line-target',
targetClassName = 'sight-line-target',
activeClassName = 'active'; activeClassName = 'active';
function evenr_to_axial(x, y) { function evenr_to_axial(x, y) {

32
src/modules/recordSheet.js Normal file
View File

@ -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();
}