Web Dev Solutions

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

- 2 - SMG - 3L - 1-15 - 16-25 -

- 3 - Blazer - 4L - 1-17 - 18-105 -

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

- 2 - SMG - 3L - 1-15 - 16-25 + + + \ 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 -- cgit v1.2.3