Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-27 14:31:32 -0700
committerCatalin Mititiuc <Catalin.Mititiuc@gmail.com>2024-03-27 14:31:32 -0700
commit6c940cf89aae3c610c8f8406da7b5810466a75cc (patch)
tree083183068454e9a09e1de2c2e87323f0c687d6bd
parent1add30fc6ebf8b17753368a33ecbd8117c4ef50a (diff)
Increase map to 2 map sheets; fix some layout/styles
Diffstat
-rw-r--r--damage_block.css7
-rw-r--r--index.html10
-rw-r--r--index.js119
-rw-r--r--style.css47
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 @@
</p>
</template>
- <svg viewbox="-100 -100 3450 2400" xmlns="http://www.w3.org/2000/svg">
+ <svg viewbox="-100 -100 3400 4500" xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern id="inch-mark" x="0" y="0" width="2in" height="2in" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="1in" height="2in" fill="black" />
@@ -124,10 +124,12 @@
<line class="ruler" x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
<line class="ruler" x1="-0.25in" y1="0" x2="-0.25in" y2="23in" stroke="url(#vert)" />
<!-- <image id="img1" href="map1.png" height="6.428in" width="9.971in" /> -->
- <image id="img2" href="scans/map1.jpg" width="2284" height="1518" />
+ <!-- <image id="img2" href="scans/map1.jpg" width="2284" height="1518" /> -->
+ <image class="map-scans" href="scans/map2.jpg" width="2284" height="1518" />
+ <image class="map-scans" href="scans/map3.jpg" width="2284" height="1518" x="0" y="1550" />
<g id="firing-arcs"></g>
- <rect id="map" x="0" y="0" width="34in" height="23in" />
- <!-- <rect id="debug-view-box" x="-100" y="-100" width="3450" height="2400" /> -->
+ <rect id="map" x="0" y="0" width="33in" height="45in" />
+ <!-- <rect id="debug-view-box" x="-100" y="-100" width="3400" height="4500" /> -->
</svg>
<div id="content">
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}`);
-
- // 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
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;