From 6c940cf89aae3c610c8f8406da7b5810466a75cc Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 27 Mar 2024 14:31:32 -0700 Subject: [PATCH] Increase map to 2 map sheets; fix some layout/styles --- damage_block.css | 7 ++- index.html | 10 ++-- index.js | 119 +++++++++++------------------------------------ style.css | 47 ++++++++++++------- 4 files changed, 68 insertions(+), 115 deletions(-) diff --git a/damage_block.css b/damage_block.css index c232c07..f050e36 100644 --- a/damage_block.css +++ b/damage_block.css @@ -1,5 +1,8 @@ -.damage-selector, .damage-effect-indicator { +.damage-selector, .damage-effect-indicator, label { width: 20px; +} + +.damage-selector, .damage-effect-indicator { height: 30px; } @@ -40,7 +43,7 @@ label input[type="radio"] { label { display: none; - margin: 0; + margin: 0 auto; padding: 0; } diff --git a/index.html b/index.html index 966b267..2691ed2 100644 --- a/index.html +++ b/index.html @@ -101,7 +101,7 @@

- + @@ -124,10 +124,12 @@ - + + + - - + +
diff --git a/index.js b/index.js index 398ea4c..faa9e9c 100644 --- a/index.js +++ b/index.js @@ -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}`); + // newX = newX < VIEWBOX_X ? VIEWBOX_X : newX; + // newY = newY < VIEWBOX_Y ? VIEWBOX_Y : newY; - // let vb = [ - // newViewBoxX, - // newViewBoxY, - // newViewBoxWidth, - // newViewBoxHeight, - // ].join(' '); - - // el.setAttributeNS(null, 'viewBox', vb); + svg.setAttributeNS(null, 'viewBox', `${newX} ${newY} ${newWidth} ${newHeight}`); }, { passive: false }); \ No newline at end of file diff --git a/style.css b/style.css index 5ea3cd0..9603e1a 100644 --- a/style.css +++ b/style.css @@ -1,14 +1,39 @@ +body { + margin: 0; + max-height: 100vh; + display: flex; + overflow: hidden; +} + svg { background-color: darkgray; flex-basis: 100%; + /* transform: rotate(-90deg); + transform-origin: center; */ + /* max-height: 50vh; */ + /* max-height: 100vw; */ } div#content { flex-basis: 0; + /* overflow: scroll; */ } -body { - margin: 0; +#record-sheet { + max-height: 100vh; + overflow: auto; + /* display: flex; */ + /* display: none; */ +} + +#record-sheet > div { + padding: 0 2px; +} + +#record-sheet > div > div { + border: 1px solid black; + margin: 2px 0; + padding: 2px; } circle#point { @@ -86,6 +111,7 @@ line.ruler { .soldier-record { display: inline-block; + position: relative; white-space: nowrap; } @@ -94,7 +120,7 @@ image#img1 { /* opacity: 0.33; */ } -image#img2 { +image.map-scans { transform: scale(1.39, 1.407) rotate(0.07deg); /* opacity: 0.33; */ } @@ -117,21 +143,6 @@ image#img2 { font-size: 30; } -#record-sheet { - display: flex; - /* display: none; */ -} - -#record-sheet > div { - padding: 0 2px; -} - -#record-sheet > div > div { - border: 1px solid black; - margin: 2px 0; - padding: 2px; -} - img.logo { width: 100px; margin: 0 auto;