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

Merge pull request 'Updated map und grid' (#1) from shy/in-c4:c4-design into main
All checks were successful
deployment / deployment (push) Successful in 18s
Details

Browse source 
Reviewed-on: #1
This commit is contained in:
snoopy 2024-04-30 19:54:18 +02:00
commit 2ec7600fa4
7 changed files with 112 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

60
static/c4.css Normal file
View file

@ -0,0 +1,60 @@
body {
color: #f0f0f0;
background-color: #333;
}
h1, h1 a {
color: #fcbb06; /* C4 Yellow */
}
.result {
background-color: #202020;
border-color: #4d4d4d;
}
.result:focus {
background-color: #202020;
border-color: #fcbb06;
outline-color: #fcbb06;
}
.result a {
color: #fcbb06;
}
.note {
background-color: #333;
font-size: smaller;
}
.btn.green {
color: #020;
background-color: #6f3;
}
.btn.green:hover ,.btn.green:focus {
background-color: #3f0;
}
.btn.red {
color: #200;
background-color: #f36;
}
.btn.red:hover, .btn.red:focus {
background-color: #f03;
}
@keyframes blinker {
0% { opacity: 1; }
40% { opacity: 1; }
90% { opacity: 0; }
100% { opacity: 1; }
}
#mapgrid {
outline: 2px solid #fcbb06;
background: #fcbb0680;
animation: blinker 1s infinite;
}

1
static/form.html
View file

@ -3,6 +3,7 @@
<head>
<title>in?</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="c4.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="form.js"></script>
<script src="shared.js"></script>

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];

1
static/index.html
View file

@ -3,6 +3,7 @@
<head>
<title>in?</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="c4.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="index.js"></script>
<script src="shared.js"></script>

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;
}