Changes map and update coordinate grid to c4 map

This commit is contained in:
snoopy 2024-04-30 01:56:38 +02:00
parent 703a210f1e
commit 111a0f6e45
4 changed files with 457 additions and 17 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 97 KiB

View file

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

View file

@ -1,12 +1,12 @@
function renderMap(xx, yy) { function renderMap(xx, yy) {
if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 && if (xx[0] > 0 && xx[0] < 37 && yy[0] > 0 && yy[0] < 18 &&
xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 && xx[1] > 0 && xx[1] < 37 && yy[1] > 0 && yy[1] < 18 &&
xx[1] >= xx[0] && yy[1] >= yy[0]) { xx[1] >= xx[0] && yy[1] >= yy[0]) {
let grid = document.getElementById('mapgrid'); let grid = document.getElementById('mapgrid');
grid.style.top = `${yy[0]*10}%`; grid.style.top = `${yy[0]*100/18}%`;
grid.style.left = `${100/31*xx[0]}%`; grid.style.left = `${100/37*xx[0]}%`;
grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`; grid.style.height = `${(yy[1] - yy[0] + 1) * 100/18}%`;
grid.style.width = `${100/31*(xx[1] - xx[0] + 1)}%`; grid.style.width = `${100/37*(xx[1] - xx[0] + 1)}%`;
} else { } else {
alert(`invalid coordinates x=${xx} y=${yy}`); alert(`invalid coordinates x=${xx} y=${yy}`);
} }
@ -26,8 +26,8 @@ function coordsToMap(coords_bl, coords_tr) {
let bl_x = parseInt(coords_bl.slice(1)); let bl_x = parseInt(coords_bl.slice(1));
let tr_x = parseInt(coords_tr.slice(1)); let tr_x = parseInt(coords_tr.slice(1));
bl_y = 8 - (bl_y.charCodeAt(0) - 65); bl_y = 16 - (bl_y.charCodeAt(0) - 65);
tr_y = 8 - (tr_y.charCodeAt(0) - 65); tr_y = 16 - (tr_y.charCodeAt(0) - 65);
renderMap([bl_x, tr_x], [tr_y, bl_y]); renderMap([bl_x, tr_x], [tr_y, bl_y]);
} }

View file

@ -172,9 +172,9 @@ textarea {
position: relative; position: relative;
border: 1px solid black; border: 1px solid black;
background: #fff; background: #fff;
max-width: 800px; max-width: 1480px;
max-height: 50vh; max-height: 50vh;
aspect-ratio: 31 / 10; aspect-ratio: 37 / 18;
margin: 0 auto; margin: 0 auto;
} }
@ -238,4 +238,4 @@ form #map {
max-width: 100%; max-width: 100%;
text-align: center; text-align: center;
margin: auto; margin: auto;
} }