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

set item coords via map, closes #3

Browse source
This commit is contained in:
jomo 2022-08-05 21:58:53 +02:00
parent 4bf4f754c9
commit 5aa8b8a37f
5 changed files with 2341 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2231
static/80x80.svg Normal file
View file

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

After

Width:  |  Height:  |  Size: 255 KiB

15
static/form.html
View file

@ -4,6 +4,7 @@
<title>in?</title> <title>in?</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="form.js"></script> <script src="form.js"></script>
<script src="shared.js"></script>
</head> </head>
<body> <body>
<h1><a href="../">in?</a></h1> <h1><a href="../">in?</a></h1>
@ -16,11 +17,15 @@
<option value=""></option> <option value=""></option>
</select> </select>
<label for="coords_bl">Bottom left coordinates</label> <b>Coordinates</b> (click on map)
<input id="coords_bl" type="text">
<div id="plan">
<label for="coords_tr">Top right coordinates</label> <img src="80x80.svg" onclick="mapClick(event)">
<input id="coords_tr" type="text"> <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> <label for="type">Type</label>
<input id="type" type="text"> <input id="type" type="text">

42
static/form.js
View file

@ -34,6 +34,8 @@ function fillForm() {
document.getElementById('content').value = item.content; document.getElementById('content').value = item.content;
document.getElementById('note').value = item.note; document.getElementById('note').value = item.note;
document.getElementById('hidden').checked = item.hidden; document.getElementById('hidden').checked = item.hidden;
coordsToMap(item.coords_bl, item.coords_tr);
} }
const saveBtn = document.getElementById('save'); 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
View 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]);
}

34
static/style.css
View file

@ -91,7 +91,7 @@ h2 {
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
font-size: 1.5em; font-size: 1.5em;
margin-bottom: 0.5em; margin: 0.5em 0;
cursor: pointer; cursor: pointer;
} }
@ -112,6 +112,12 @@ form label {
margin-bottom: 0.3em; 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 { input, textarea, select {
display: block; display: block;
width: 100%; width: 100%;
@ -134,3 +140,29 @@ input[type=checkbox] {
textarea { textarea {
min-height: 8em; 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;
}