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

DEBUG: map-center crosshair

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-08-08 13:46:10 -07:00
parent 0b27586a7f
commit 9e5e82ca17
4 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
node_modules/pan-zoom/src/modules/pan.js generated vendored
View File

@ -76,11 +76,7 @@ export default function (svg, el, e) {
svg.addEventListener( svg.addEventListener(
'pointerup', 'pointerup',
() => { () => svg.removeEventListener('pointermove', pointerMove),
svg.removeEventListener('pointermove', pointerMove);
const t1Rect = t1.getBoundingClientRect();
console.log('trooper1 DOM x,y', t1Rect.x, t1Rect.y);
},
{ once: true } { once: true }
); );
} }

9
public/assets/css/style.css
View File

@ -1,3 +1,12 @@
.horz, .vert {
border: 1px solid black;
position: absolute;
padding: 0;
margin: 0;
box-sizing: border-box;
pointer-events: none;
}
body { body {
margin: 0; margin: 0;
display: flex; display: flex;

5
public/index.html
View File

@ -344,6 +344,11 @@
<input type="file" accept="image/svg+xml" /> <input type="file" accept="image/svg+xml" />
<div class="horz"></div>
<div class="horz"></div>
<div class="vert"></div>
<div class="vert"></div>
<script src="index.js"></script> <script src="index.js"></script>
<script src="soldier_record_block.js"></script> <script src="soldier_record_block.js"></script>
</body> </body>

17
src/index.js
View File

@ -84,6 +84,23 @@ async function buildScenario(req) {
// recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits()); // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits());
recordSheet.start(null, scenarioUnits); recordSheet.start(null, scenarioUnits);
const mapRect = mapResourceEl.getBoundingClientRect();
console.log('map viewport center', mapRect.width / 2, mapRect.height / 2, mapRect);
const [horz1, horz2] = document.querySelectorAll('.horz');
const [vert1, vert2] = document.querySelectorAll('.vert');
const hw = mapRect.width / 2 - 0.5;
const hh = mapRect.height - 1;
horz1.setAttributeNS(null, 'style', `top: ${0}px; left: ${mapRect.left}px; width: ${hw}px; height: ${hh}px;`);
horz2.setAttributeNS(null, 'style', `bottom: ${1}px; right: ${window.innerWidth - mapRect.right}px; width: ${hw}px; height: ${hh}px`);
const vw = mapRect.width;
const vh = mapRect.height / 2 - 1;
vert1.setAttributeNS(null, 'style', `top: ${0}px; left: ${0}px; width: ${vw}px; height: ${vh}px`);
vert2.setAttributeNS(null, 'style', `bottom: ${1}px; right: ${window.innerWidth - mapRect.right}px; width: ${vw}px; height: ${vh}px`);
//const [_, trooper] = gameboard.getUnits(); //const [_, trooper] = gameboard.getUnits();
//Observable.notify('select', trooper); //Observable.notify('select', trooper);
//gameboard.setCounter('prone'); //gameboard.setCounter('prone');