ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add some building walls

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:27 -07:00
parent 446d5ffe6d
commit 56261eb321
1 changed files with 42 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -14,9 +14,21 @@
opacity: 0.33; opacity: 0.33;
} }
rect#map {
fill: gainsboro;
opacity: 0;
}
image { image {
transform: scale(3.41) rotate(-0.15deg); transform: scale(3.41) rotate(-0.15deg);
opacity: 0.33; /* opacity: 0.33; */
}
.wall {
fill: none;
stroke: red;
stroke-width: 7px;
opacity: 0.7;
} }
</style> </style>
</head> </head>
@ -33,11 +45,38 @@
<line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" /> <line x1="0" y1="-0.25in" x2="34in" y2="-0.25in" stroke="url(#inch-mark)" />
<line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" /> <line x1="-0.25in" y1="0" x2="-0.25in" y2="22in" stroke="url(#vert)" />
<rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
<image href="map1.png" height="6.428in" width="9.971in" /> <image href="map1.png" height="6.428in" width="9.971in" />
<rect id="map" x="0" y="0" width="34in" height="22in" />
<rect class="wall" x="3.77in" y="1.49in" width="4.3in" height="7.33in" />
<line class="wall" x1="5.93in" y1="1.49in" x2="5.93in" y2="4.41in" />
<line class="wall" x1="5.93in" y1="5.36in" x2="5.93in" y2="8.82in" />
<line class="wall" x1="6.98in" y1="3.59in" x2="6.98in" y2="5.36in" />
<line class="wall" x1="5.93in" y1="3.59in" x2="8.07in" y2="3.59in" />
<line class="wall" x1="5.93in" y1="5.36in" x2="8.07in" y2="5.36in" />
<line class="wall" x1="5.93in" y1="7.51in" x2="8.07in" y2="7.51in" />
<line class="wall" x1="3.77in" y1="4.41in" x2="5.93in" y2="4.41in" />
<line class="wall" x1="3.77in" y1="7.51in" x2="5.09in" y2="7.51in" />
</svg> </svg>
<script> <script>
var rect = document.querySelector('rect#map');
var toFixed = n => Number.parseFloat(n).toFixed(2);
rect.addEventListener('mousemove', e => {
var rect = e.target.getBoundingClientRect();
// console.log(rect)
var x = e.clientX - rect.left; // x position within the element
var y = e.clientY - rect.top; // y position within the element
// console.log("Left? : " + x + " ; Top? : " + y + ".");
// console.log(x/rect.width, y/rect.height);
console.log(
'x: ' + toFixed(x / rect.width * e.target.width.baseVal.valueInSpecifiedUnits) + '"',
'y: ' + toFixed(y / rect.height * e.target.height.baseVal.valueInSpecifiedUnits) + '"'
);
});
var svgns = "http://www.w3.org/2000/svg", var svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg'); svg = document.querySelector('svg');
@ -67,7 +106,7 @@
circle.setAttributeNS(null, 'cx', `${cx}in`); circle.setAttributeNS(null, 'cx', `${cx}in`);
circle.setAttributeNS(null, 'cy', `${cy}in`); circle.setAttributeNS(null, 'cy', `${cy}in`);
circle.setAttributeNS(null, 'r', '0.1in'); circle.setAttributeNS(null, 'r', '0.07in');
svg.appendChild(circle); svg.appendChild(circle);
})); }));
</script> </script>