| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-08 13:46:10 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <webdevcat@proton.me> | 2024-08-08 14:50:31 -0700 |
| commit | 9e5e82ca17040d3bed971bbb692eebc787db756f (patch) | |
| tree | 40aed82f80daa8d1a2fc2bd829a8a6e10a06caa3 | |
| parent | 0b27586a7f3c45016cab169661d914154a4d81ef (diff) | |
DEBUG: map-center crosshair
| -rw-r--r-- | node_modules/pan-zoom/src/modules/pan.js | 6 | ||||
| -rw-r--r-- | public/assets/css/style.css | 9 | ||||
| -rw-r--r-- | public/index.html | 5 | ||||
| -rw-r--r-- | src/index.js | 17 |
4 files changed, 32 insertions, 5 deletions
diff --git a/node_modules/pan-zoom/src/modules/pan.js b/node_modules/pan-zoom/src/modules/pan.js index 844524d..596d41a 100644 --- a/node_modules/pan-zoom/src/modules/pan.js +++ b/node_modules/pan-zoom/src/modules/pan.js @@ -76,11 +76,7 @@ export default function (svg, el, e) { svg.addEventListener( 'pointerup', - () => { - svg.removeEventListener('pointermove', pointerMove); - const t1Rect = t1.getBoundingClientRect(); - console.log('trooper1 DOM x,y', t1Rect.x, t1Rect.y); - }, + () => svg.removeEventListener('pointermove', pointerMove), { once: true } ); } diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 3f6cd88..a708375 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1,3 +1,12 @@ +.horz, .vert { + border: 1px solid black; + position: absolute; + padding: 0; + margin: 0; + box-sizing: border-box; + pointer-events: none; +} + body { margin: 0; display: flex; diff --git a/public/index.html b/public/index.html index 33d7085..4aeaaa0 100644 --- a/public/index.html +++ b/public/index.html @@ -344,6 +344,11 @@ <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="soldier_record_block.js"></script> </body> diff --git a/src/index.js b/src/index.js index 88cfced..a8e0c4b 100644 --- a/src/index.js +++ b/src/index.js @@ -84,6 +84,23 @@ async function buildScenario(req) { // recordSheet.start(svg.querySelector('.start-locations'), gameboard.getUnits()); 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(); //Observable.notify('select', trooper); //gameboard.setCounter('prone'); |