Changes map and update coordinate grid to c4 map
This commit is contained in:
parent
703a210f1e
commit
111a0f6e45
4 changed files with 457 additions and 17 deletions
442
static/80x80.svg
442
static/80x80.svg
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 97 KiB |
|
@ -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];
|
||||||
|
|
|
@ -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]);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue