set item coords via map, closes #3
This commit is contained in:
jomo
parent
4bf4f754c9
commit
5aa8b8a37f
5 changed files with 2341 additions and 6 deletions
2231
static/80x80.svg
Normal file
2231
static/80x80.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 255 KiB |
|
|
@ -4,6 +4,7 @@
|
|||
<title>in?</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script src="form.js"></script>
|
||||
<script src="shared.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="../">in?</a></h1>
|
||||
|
|
@ -16,11 +17,15 @@
|
|||
<option value=""></option>
|
||||
</select>
|
||||
|
||||
<label for="coords_bl">Bottom left coordinates</label>
|
||||
<input id="coords_bl" type="text">
|
||||
<b>Coordinates</b> (click on map)
|
||||
|
||||
<label for="coords_tr">Top right coordinates</label>
|
||||
<input id="coords_tr" type="text">
|
||||
<div id="plan">
|
||||
<img src="80x80.svg" onclick="mapClick(event)">
|
||||
<div id="grid"></div>
|
||||
</div>
|
||||
|
||||
<label for="coords_bl">Bottom left</label><label for="coords_tr">Top right</label>
|
||||
<input id="coords_bl" type="text" oninput="formCoordsToMap()"><input id="coords_tr" type="text" oninput="formCoordsToMap()">
|
||||
|
||||
<label for="type">Type</label>
|
||||
<input id="type" type="text">
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ function fillForm() {
|
|||
document.getElementById('content').value = item.content;
|
||||
document.getElementById('note').value = item.note;
|
||||
document.getElementById('hidden').checked = item.hidden;
|
||||
|
||||
coordsToMap(item.coords_bl, item.coords_tr);
|
||||
}
|
||||
|
||||
const saveBtn = document.getElementById('save');
|
||||
|
|
@ -101,3 +103,43 @@ function del() {
|
|||
});
|
||||
}
|
||||
}
|
||||
|
||||
let clicks = {x: [], y: []};
|
||||
function mapClick(e) {
|
||||
let x = Math.floor(31 / e.target.width * e.layerX);
|
||||
let y = Math.floor(10 / e.target.height * e.layerY);
|
||||
|
||||
let humanPos = (x, y) => {
|
||||
return `${String.fromCharCode(65 + 8 - y)}${x}`;
|
||||
};
|
||||
|
||||
if (x > 0 && x < 31 && y > 0 && y < 9) {
|
||||
if (clicks.x.length > 1) {
|
||||
clicks.x = [x];
|
||||
clicks.y = [y];
|
||||
} else {
|
||||
clicks.x.push(x);
|
||||
clicks.y.push(y);
|
||||
}
|
||||
|
||||
if (clicks.x.length > 1) {
|
||||
clicks.x.sort((a,b) => a-b);
|
||||
clicks.y.sort((a,b) => a-b);
|
||||
renderMap(clicks.x, clicks.y);
|
||||
|
||||
let coords_bl = humanPos(clicks.x[0], clicks.y[1]);
|
||||
let coords_tr = humanPos(clicks.x[1], clicks.y[0]);
|
||||
|
||||
document.getElementById('coords_bl').value = coords_bl;
|
||||
document.getElementById('coords_tr').value = coords_tr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function formCoordsToMap() {
|
||||
const coords_bl = document.getElementById('coords_bl').value || '';
|
||||
const coords_tr = document.getElementById('coords_tr').value || '';
|
||||
if (coords_bl.length > 1 && coords_tr.length > 1) {
|
||||
coordsToMap(coords_bl, coords_tr);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
25
static/shared.js
Normal file
25
static/shared.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
function renderMap(xx, yy) {
|
||||
if (xx[0] > 0 && xx[0] < 31 && yy[0] > 0 && yy[0] < 9 &&
|
||||
xx[1] > 0 && xx[1] < 31 && yy[1] > 0 && yy[1] < 9 &&
|
||||
xx[1] >= xx[0] && yy[1] >= yy[0]) {
|
||||
let grid = document.getElementById('grid');
|
||||
grid.style.top = `${yy[0]*10}%`;
|
||||
grid.style.left = `${100/31*xx[0]}%`;
|
||||
grid.style.height = `${(yy[1] - yy[0] + 1) * 10}%`;
|
||||
grid.style.width = `${100/31*(xx[1] - xx[0] + 1)}%`;
|
||||
} else {
|
||||
alert(`invalid coordinates x=${xx} y=${yy}`);
|
||||
}
|
||||
}
|
||||
|
||||
function coordsToMap(coords_bl, coords_tr) {
|
||||
let bl_y = coords_bl[0];
|
||||
let tr_y = coords_tr[0];
|
||||
let bl_x = parseInt(coords_bl.slice(1));
|
||||
let tr_x = parseInt(coords_tr.slice(1));
|
||||
|
||||
bl_y = 8 - (bl_y.charCodeAt(0) - 65);
|
||||
tr_y = 8 - (tr_y.charCodeAt(0) - 65);
|
||||
|
||||
renderMap([bl_x, tr_x], [tr_y, bl_y]);
|
||||
}
|
||||
|
|
@ -91,7 +91,7 @@ h2 {
|
|||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
margin: 0.5em 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -112,6 +112,12 @@ form label {
|
|||
margin-bottom: 0.3em;
|
||||
}
|
||||
|
||||
form label[for=coords_bl], form label[for=coords_tr], #coords_bl, #coords_tr {
|
||||
display: inline-block;
|
||||
min-width: unset;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
input, textarea, select {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -134,3 +140,29 @@ input[type=checkbox] {
|
|||
textarea {
|
||||
min-height: 8em;
|
||||
}
|
||||
|
||||
#plan {
|
||||
position: relative;
|
||||
border: 1px solid black;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
#plan img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
form #plan {
|
||||
margin: 0.3em 0 1em 0;
|
||||
}
|
||||
|
||||
#grid {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
outline: 2px solid #f00;
|
||||
background: #ff08;
|
||||
}
|
||||
|
||||
#grid:not([style]) {
|
||||
outline: none;
|
||||
}
|
||||
Loading…
Reference in a new issue