| index : btroops | |
| Virtual board game-aid for BattleTroops, an infantry combat simulator wargame published by FASA in 1989. |
| aboutsummaryrefslogtreecommitdiff |
diff options
| author | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-27 14:31:32 -0700 |
|---|---|---|
| committer | Catalin Mititiuc <Catalin.Mititiuc@gmail.com> | 2024-03-27 14:31:32 -0700 |
| commit | 6c940cf89aae3c610c8f8406da7b5810466a75cc (patch) | |
| tree | 083183068454e9a09e1de2c2e87323f0c687d6bd /index.js | |
| parent | 1add30fc6ebf8b17753368a33ecbd8117c4ef50a (diff) | |
Increase map to 2 map sheets; fix some layout/styles
Diffstat (limited to 'index.js')
| -rw-r--r-- | index.js | 119 |
1 files changed, 28 insertions, 91 deletions
@@ -71,7 +71,7 @@ const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT svg.viewBox.baseVal; const COLUMN_COUNT = 33, - ROW_COUNT = 25, + ROW_COUNT = 51, HORZ_POINT_DISTANCE = 1.005, VERT_POINT_DISTANCE = Math.sqrt(3) * HORZ_POINT_DISTANCE / 2, ALTERNATING_OFFSET = HORZ_POINT_DISTANCE / 2, @@ -368,29 +368,27 @@ document.querySelectorAll('.clear-firing-arcs').forEach(el => ) ); -// document.getElementById('debug-view-box').addEventListener('wheel', e => { svg.addEventListener('wheel', e => { e.preventDefault(); - let el = document.querySelector('svg'); - // let vb = document.getElementById('debug-view-box'); + // const pt = svg.createSVGPoint(); + const pt = new DOMPoint(e.clientX, e.clientY); - let boundingRect = el.getBoundingClientRect(); - // let boundingRect = vb.getBoundingClientRect(); - let pointerX = e.clientX - boundingRect.left; - let pointerY = e.clientY - boundingRect.top; + // pt.x = e.clientX; + // pt.y = e.clientY; - let { x, y, width, height } = el.viewBox.baseVal; - // let [x, y, width, height] = [vb.x, vb.y, vb.width, vb.height].map(v => v.baseVal.value); + const svgP = pt.matrixTransform(svg.getScreenCTM().inverse()); + + let { x, y, width, height } = svg.viewBox.baseVal; let widthDelta = width * 0.25; let heightDelta = height * 0.25; - let xChange = pointerX / boundingRect.width * widthDelta; - let widthChange = (1 - (pointerX / boundingRect.width)) * widthDelta; + let xChange = (svgP.x - x) / width * widthDelta; + let yChange = (svgP.y - y) / height * heightDelta; - let yChange = pointerY / boundingRect.height * heightDelta; - let heightChange = (1 - (pointerY / boundingRect.height)) * heightDelta; + let widthChange = (1 - ((svgP.x - x) / width)) * widthDelta; + let heightChange = (1 - ((svgP.y - y) / height)) * heightDelta; let newX = e.deltaY < 0 ? x + xChange : x - xChange; let newWidth = e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange; @@ -400,86 +398,25 @@ svg.addEventListener('wheel', e => { console.log('VIEWBOX_X', 'VIEWBOX_Y', VIEWBOX_X, VIEWBOX_Y); console.log('VIEWBOX_WIDTH', 'VIEWBOX_HEIGHT', VIEWBOX_WIDTH, VIEWBOX_HEIGHT); - // console.log('VIEWBOX_WIDTH - newX', VIEWBOX_WIDTH - newX); - - let myNewX, myNewY, myNewWidth, myNewHeight; - - myNewX = newX < VIEWBOX_X ? VIEWBOX_X : newX; - myNewY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; - myNewWidth = newWidth + newX > VIEWBOX_WIDTH ? VIEWBOX_WIDTH - newX : newWidth; - // myNewHeight = newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight; - myNewHeight = newHeight; - - console.log('newWidth + newX', newWidth + newX) - - if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) { - // console.log("left and right sides would both exceed margins") - newWidth = VIEWBOX_WIDTH; - newX = VIEWBOX_X; - } else if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X) { - // console.log("right side only would exceed margin") - // console.log('newWidth + newX', newWidth + newX) - // console.log('VIEWBOX_WIDTH - 100', VIEWBOX_WIDTH - 100) - let diff = newWidth + newX - VIEWBOX_WIDTH - VIEWBOX_X; - console.log('diff', diff); - newX = newX - diff; - } - if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y && newY < VIEWBOX_Y) { - newHeight = VIEWBOX_HEIGHT; - newY = VIEWBOX_Y; - } else if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y) { - let diff = newHeight + newY - VIEWBOX_HEIGHT - VIEWBOX_Y; - newY = newY - diff; - } - - newX = newX < VIEWBOX_X ? VIEWBOX_X : newX; - newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; - - // console.log('newX', 'newY', newX, newY); - // console.log('newWidth', 'newHeight', newWidth, newHeight); - - // console.log('myNewX', 'myNewY', myNewX, myNewY); - // console.log('myNewWidth', 'myNewHeight', myNewWidth, myNewHeight); - - // console.log('newWidth + newX', newWidth + newX); - - // vb.setAttributeNS(null, 'x', newX); - // vb.setAttributeNS(null, 'y', newY); - // vb.setAttributeNS(null, 'width', newWidth); - // vb.setAttributeNS(null, 'height', newHeight); - - // let newViewBox = [ - // newX < VIEWBOX_X ? VIEWBOX_X : newX, - // newY < VIEWBOX_Y ? VIEWBOX_Y : newY, - // newWidth + newX > VIEWBOX_WIDTH ? VIEWBOX_WIDTH - newX : newWidth, - // newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight - // ] - - // newViewBoxX = newX < VIEWBOX_X ? VIEWBOX_X : newX; - // newViewBoxY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; - // newViewBoxWidth = newWidth + newX > VIEWBOX_WIDTH ? VIEWBOX_WIDTH - newX : newWidth; - // newViewBoxHeight = newHeight + newY > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT - newY: newHeight; - - // if (newWidth + newX > VIEWBOX_WIDTH) { - // newViewBoxWidth = VIEWBOX_WIDTH - newX; - // let newWidthRatio = newWidth / newViewBoxWidth; - // let widthRatio = VIEWBOX_WIDTH / VIEWBOX_HEIGHT; - // newViewBoxHeight = - // } else { - // newViewBoxWidth = newWidth; - // newViewBoxHeight = newHeight; + // if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X && newX < VIEWBOX_X) { + // newWidth = VIEWBOX_WIDTH; + // newX = VIEWBOX_X; + // } else if (newWidth + newX > VIEWBOX_WIDTH + VIEWBOX_X) { + // let diff = newWidth + newX - VIEWBOX_WIDTH - VIEWBOX_X; + // newX = newX - diff; // } + // if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y && newY < VIEWBOX_Y) { + // newHeight = VIEWBOX_HEIGHT; + // newY = VIEWBOX_Y; + // } else if (newHeight + newY > VIEWBOX_HEIGHT + VIEWBOX_Y) { + // let diff = newHeight + newY - VIEWBOX_HEIGHT - VIEWBOX_Y; + // newY = newY - diff; + // } - el.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`); - - // let vb = [ - // newViewBoxX, - // newViewBoxY, - // newViewBoxWidth, - // newViewBoxHeight, - // ].join(' '); + // newX = newX < VIEWBOX_X ? VIEWBOX_X : newX; + // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; - // el.setAttributeNS(null, 'viewBox', vb); + svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`); }, { passive: false });
\ No newline at end of file |