From 42428e3643e0a2ebbff766b8c823ef423d5386ee Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Tue, 26 Mar 2024 11:45:37 -0700 Subject: [PATCH] WIP: zoom --- index.html | 215 ++++++++++++++++++++++++++++++++++------------------- index.js | 96 ++++++++++++++---------- style.css | 19 ++++- 3 files changed, 213 insertions(+), 117 deletions(-) diff --git a/index.html b/index.html index db842b4..0e68a73 100644 --- a/index.html +++ b/index.html @@ -101,6 +101,10 @@

+
+ debug margin +
+ @@ -127,90 +131,151 @@ + + -
- Set firing arc: - - - -
- -
+
- -

- Davion - -
- -

-
- 1 - Rifle - 4L - 1-27 - 28-75 -
-
- 2 - SMG - 3L - 1-15 - 16-25 -
-
- 3 - Blazer - 4L - 1-17 - 18-105 -
+ Set firing arc: + + +
-
- -

- Liao - -
- -

-
- 1 - Rifle - 4L - 1-27 - 28-75 + +
+
+ +

+ Davion + +
+ +

+
+ 1 + Rifle + 4L + 1-27 + 28-75 +
+
+ 2 + Rifle + 4L + 1-27 + 28-75 +
+
+ 3 + SMG + 3L + 1-15 + 16-25 +
+
+ 4 + SMG + 3L + 1-15 + 16-25 +
+
+ 5 + SMG + 3L + 1-15 + 16-25 +
+
+ 6 + SMG + 3L + 1-15 + 16-25 +
+
+ 7 + Blazer + 4L + 1-17 + 18-105 +
-
- 2 - SMG - 3L - 1-15 - 16-25 -
-
- 3 - Blazer - 4L - 1-17 - 18-105 +
+ +

+ Liao + +
+ +

+
+ 1 + Rifle + 4L + 1-27 + 28-75 +
+
+ 2 + Rifle + 4L + 1-27 + 28-75 +
+
+ 3 + SMG + 3L + 1-15 + 16-25 +
+
+ 4 + SMG + 3L + 1-15 + 16-25 +
+
+ 5 + SMG + 3L + 1-15 + 16-25 +
+
+ 6 + SMG + 3L + 1-15 + 16-25 +
+
+ 7 + Blazer + 4L + 1-17 + 18-105 +
+ \ No newline at end of file diff --git a/index.js b/index.js index 93072c8..dfab442 100644 --- a/index.js +++ b/index.js @@ -1,42 +1,3 @@ -class SoldierRecordBlock extends HTMLDivElement { - constructor() { - super(); - - let template = document.getElementById('soldier-record-block'); - let templateContent = template.content; - - const shadowRoot = this.attachShadow({ mode: "open" }); - shadowRoot.appendChild(templateContent.cloneNode(true)); - - this.shadowRoot - .querySelectorAll('p:has(input[type="number"]), .physical-status-track') - .forEach(el => el.addEventListener('click', e => e.stopPropagation())) - ; - } -} - -customElements.define( - 'damage-block', - class extends HTMLSpanElement { - constructor() { - super(); - - let template = document.getElementById('damage-block'); - let templateContent = template.content; - - const shadowRoot = this.attachShadow({ mode: "open" }); - shadowRoot.appendChild(templateContent.cloneNode(true)); - } - }, - { extends: 'span' } -); - -customElements.define( - 'soldier-record-block', - SoldierRecordBlock, - { extends: 'div'} -); - function isEven(n) { return n % 2 === 0; } @@ -106,6 +67,9 @@ let svgns = "http://www.w3.org/2000/svg", svg = document.querySelector('svg'), map = document.querySelector('rect#map'); +const { x: VIEWBOX_X, y: VIEWBOX_Y, width: VIEWBOX_WIDTH, height: VIEWBOX_HEIGHT } = + svg.viewBox.baseVal; + const COLUMN_COUNT = 33, ROW_COUNT = 25, HORZ_POINT_DISTANCE = 1.005, @@ -402,4 +366,56 @@ document.querySelectorAll('.clear-firing-arcs').forEach(el => .querySelectorAll(`.firing-arc[data-troop-allegiance="${allegiance}"]`) .forEach(el => el.remove()) ) -); \ No newline at end of file +); + +svg.addEventListener('wheel', e => { + e.preventDefault(); + + // let el = document.querySelector('svg'); + let el = document.getElementById('view-box'); + + let boundingRect = el.getBoundingClientRect(); + let pointerX = e.clientX - boundingRect.left; + let pointerY = e.clientY - boundingRect.top; + + // let { x, y, width, height } = el.viewBox.baseVal; + let { x, y, width, height } = el; + [x, y, width, height] = [x, y, width, height].map(el => el.baseVal.value); + + console.log( + 'horz pointer ratio, vert pointer ratio', + pointerX / boundingRect.width, pointerY / boundingRect.height + ); + + let widthDelta = width * 0.1; + let heightDelta = height * 0.1; + + let xChange = pointerX / boundingRect.width * widthDelta; + let widthChange = (1 - (pointerX / boundingRect.width)) * widthDelta; + + let yChange = pointerY / boundingRect.height * heightDelta; + let heightChange = (1 - (pointerY / boundingRect.height)) * heightDelta; + + console.log('widthDelta', 'heightDelta', widthDelta, heightDelta); + console.log('x change', xChange); + console.log('width change', widthChange); + + // console.log('viewbox new ratio', (width * 0.98) / (height * 0.98)); + + // let vb = `${x} ${y} ${parseInt(width * 0.98)} ${parseInt(height * 0.98)}`; + + // el.setAttributeNS(null, 'viewBox', vb) + + let newX = e.deltaY < 0 ? x + xChange : x - xChange; + let newWidth = e.deltaY < 0 ? width - xChange - widthChange : width + xChange + widthChange; + + let newY = e.deltaY < 0 ? y + yChange : y - yChange; + let newHeight = e.deltaY < 0 ? height - yChange - heightChange : height + yChange + heightChange; + + el.setAttributeNS(null, 'x', newX < VIEWBOX_X ? VIEWBOX_X : newX); + el.setAttributeNS(null, 'width', newWidth > VIEWBOX_WIDTH ? VIEWBOX_WIDTH : newWidth); + + el.setAttributeNS(null, 'y', newY < VIEWBOX_Y ? VIEWBOX_Y : newY); + el.setAttributeNS(null, 'height', newHeight > VIEWBOX_HEIGHT ? VIEWBOX_HEIGHT : newHeight); + +}, { passive: false }); \ No newline at end of file diff --git a/style.css b/style.css index e91931d..25b4a91 100644 --- a/style.css +++ b/style.css @@ -1,9 +1,15 @@ svg { background-color: darkgray; + flex-basis: 100%; +} + +div#content { + flex-basis: 0; } body { margin: 0; + display: flex; } circle#point { @@ -78,6 +84,7 @@ line.ruler { .soldier-record { display: inline-block; + white-space: nowrap; } image#img1 { @@ -109,7 +116,8 @@ image#img2 { } #record-sheet { - display: flex; + /* display: flex; */ + display: none; } #record-sheet > div { @@ -129,5 +137,12 @@ img.logo { } div.soldier-record.selected { - background-color: goldenrod; + background-color: lightgray; +} + +rect#view-box { + stroke: red; + stroke-width: 20px; + fill: blue; + fill-opacity: 0.2; } \ No newline at end of file