snoopy/in-c4
2
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated map und grid #1

Merged
snoopy merged 3 commits from :c4-design into main 2024-04-30 19:54:19 +02:00
Conversation 0 Commits 3 Files changed 7 +50 -65
4 changed files with 50 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6cdeb1a3da - Show all commits

97
static/80x80.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 97 KiB

After

Width:  |  Height:  |  Size: 96 KiB

4
static/form.js
View file

@ -136,14 +136,14 @@ function del() {
let clicks = {x: [], y: []};
function mapClick(e) {
let x = Math.floor(37 / e.target.width * e.layerX);
let x = Math.floor(36 / e.target.width * e.layerX);
let y = Math.floor(18 / e.target.height * e.layerY);
let humanPos = (x, y) => {
return `${String.fromCharCode(65 + 16 - y)}${x}`;
};
if (x > 0 && x < 37 && y > 0 && y < 18) {
if (x > 0 && x < 36 && y > 0 && y < 18) {
if (clicks.x.length > 1) {
clicks.x = [x];
clicks.y = [y];

8
static/shared.js
View file

@ -1,12 +1,12 @@
function renderMap(xx, yy) {
if (xx[0] > 0 && xx[0] < 37 && yy[0] > 0 && yy[0] < 18 &&
xx[1] > 0 && xx[1] < 37 && yy[1] > 0 && yy[1] < 18 &&
if (xx[0] > 0 && xx[0] < 36 && yy[0] > 0 && yy[0] < 18 &&
xx[1] > 0 && xx[1] < 36 && yy[1] > 0 && yy[1] < 18 &&
xx[1] >= xx[0] && yy[1] >= yy[0]) {
let grid = document.getElementById('mapgrid');
grid.style.top = `${yy[0]*100/18}%`;
grid.style.left = `${100/37*xx[0]}%`;
grid.style.left = `${100/36*xx[0]}%`;
grid.style.height = `${(yy[1] - yy[0] + 1) * 100/18}%`;
grid.style.width = `${100/37*(xx[1] - xx[0] + 1)}%`;
grid.style.width = `${100/36*(xx[1] - xx[0] + 1)}%`;
} else {
alert(`invalid coordinates x=${xx} y=${yy}`);
}

6
static/style.css
View file

@ -171,10 +171,10 @@ textarea {
#map {
position: relative;
border: 1px solid black;
background: #fff;
max-width: 1480px;
background: #4d4d4d;
max-width: 1440px;
max-height: 50vh;
aspect-ratio: 37 / 18;
aspect-ratio: 2 / 1;
margin: 0 auto;
}