Increase map to 2 map sheets; fix some layout/styles
This commit is contained in:
Catalin Mititiuc
parent
1add30fc6e
commit
6c940cf89a
@ -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;
|
||||
}
|
||||
|
||||
|
||||
10
index.html
10
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">
|
||||
|
||||
119
index.js
119
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 });
|
||||
47
style.css
47
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user