stuffs
This commit is contained in:
Durvenson
parent
be224859df
commit
80b5af08d4
4 changed files with 221 additions and 1 deletions
|
|
@ -8,7 +8,6 @@ html {
|
||||||
button {
|
button {
|
||||||
font-family: MedievalSharp, arial;
|
font-family: MedievalSharp, arial;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
margin: 4px;
|
|
||||||
background-color: #222288FF;
|
background-color: #222288FF;
|
||||||
border: solid 5px #888844FF;
|
border: solid 5px #888844FF;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
|
|
||||||
92
grid/index.css
Normal file
92
grid/index.css
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap");
|
||||||
|
html {
|
||||||
|
background-color: #111111;
|
||||||
|
color: #DDDDDD;
|
||||||
|
font-family: Balsamiq Sans, cursive;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#left {
|
||||||
|
position: fixed;
|
||||||
|
width: 200px;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
background-color: #333333;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
#right {
|
||||||
|
position: fixed;
|
||||||
|
width: 200px;
|
||||||
|
height: 100%;
|
||||||
|
right: 0;
|
||||||
|
background-color: #333333;
|
||||||
|
z-index: 10;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
h2, #coords, #coords2 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#map {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
#map2 {
|
||||||
|
position: absolute;
|
||||||
|
width: 1400px;
|
||||||
|
height: 450px;
|
||||||
|
background-color: #224488;
|
||||||
|
z-index: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#coords {
|
||||||
|
background-color: #882211;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
z-index: 7;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#mainheader {
|
||||||
|
position: fixed;
|
||||||
|
width: calc(100% - 600px);
|
||||||
|
background-color: #444444;
|
||||||
|
left: 300px;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
#blocks {
|
||||||
|
position: absolute;
|
||||||
|
background-color: #224488;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
font-family: Balsamiq Sans, cursive;
|
||||||
|
font-size: 20px;
|
||||||
|
margin: 4px;
|
||||||
|
background-color: #222222AA;
|
||||||
|
border: solid 5px #111111AA;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: #DDDDDD;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 6;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 0px;
|
||||||
|
border-radius: 0;
|
||||||
|
font-size: 10px;
|
||||||
|
background-color: #FFF;
|
||||||
|
}
|
||||||
|
.dirt {
|
||||||
|
background-color: #884411;
|
||||||
|
}
|
||||||
|
.grass {
|
||||||
|
background-color: #118822;
|
||||||
|
}
|
||||||
|
.stone {
|
||||||
|
background-color: #444444;
|
||||||
|
}
|
||||||
34
grid/index.html
Normal file
34
grid/index.html
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>
|
||||||
|
Tech Demo
|
||||||
|
</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="index.css">
|
||||||
|
</link>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="left">
|
||||||
|
<h2>
|
||||||
|
Instructions
|
||||||
|
</h2>
|
||||||
|
Watch the demonstration. You can also click on squares to change their color.
|
||||||
|
</div>
|
||||||
|
<div id="right">
|
||||||
|
<h2>
|
||||||
|
Changelog
|
||||||
|
</h2>
|
||||||
|
7/31/2020: Tech demo released.
|
||||||
|
</div>
|
||||||
|
<h1 id="mainheader">
|
||||||
|
Grid Tech Demo
|
||||||
|
</h1>
|
||||||
|
<div id="map">
|
||||||
|
<div id="map2">
|
||||||
|
<div id="blocks">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="index.js">
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
95
grid/index.js
Normal file
95
grid/index.js
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
function color(x,y,color) {
|
||||||
|
if (!(gridcolors[x] == null)) {
|
||||||
|
if (!(gridcolors[x][y] == null)) {
|
||||||
|
if (!(color == null)) {
|
||||||
|
gridcolors[x][y] = color;
|
||||||
|
} else {
|
||||||
|
gridcolors[x][y] = (gridcolors[x][y] + 1) % 5;
|
||||||
|
color = gridcolors[x][y];
|
||||||
|
}
|
||||||
|
document.getElementsByClassName(x + "," + y)[0].style.backgroundColor = gridcolorchoices[color];
|
||||||
|
for (j = 0; j < empires.length; j++) {
|
||||||
|
if (empires[j][x]) {
|
||||||
|
if (empires[j][x][y]) {
|
||||||
|
empires[j][x][y] = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ((empires[color][x] == null)) {
|
||||||
|
empires[color][x] = []
|
||||||
|
}
|
||||||
|
empires[color][x][y] = true
|
||||||
|
} else {
|
||||||
|
if (!(color == null)) {
|
||||||
|
gridcolors[x][y] = color;
|
||||||
|
} else {
|
||||||
|
if (gridcolors[x][y] == null) {
|
||||||
|
gridcolors[x][y] = 0
|
||||||
|
}
|
||||||
|
gridcolors[x][y] = (gridcolors[x][y] + 1) % 5;
|
||||||
|
color = gridcolors[x][y];
|
||||||
|
}
|
||||||
|
document.getElementsByClassName(x + "," + y)[0].style.backgroundColor = gridcolorchoices[color];
|
||||||
|
for (j = 0; j < empires.length; j++) {
|
||||||
|
if (empires[j][x]) {
|
||||||
|
if (empires[j][x][y]) {
|
||||||
|
empires[j][x][y] = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ((empires[color][x] == null)) {
|
||||||
|
empires[color][x] = []
|
||||||
|
}
|
||||||
|
empires[color][x][y] = true
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
gridcolors[x] = [];
|
||||||
|
if (!(color == null)) {
|
||||||
|
gridcolors[x][y] = color;
|
||||||
|
} else {
|
||||||
|
gridcolors[x][y] = 1;
|
||||||
|
color = 1;
|
||||||
|
}
|
||||||
|
document.getElementsByClassName(x + "," + y)[0].style.backgroundColor = gridcolorchoices[color];
|
||||||
|
for (j = 0; j < empires.length; j++) {
|
||||||
|
if (empires[j][x]) {
|
||||||
|
if (empires[j][x][y]) {
|
||||||
|
empires[j][x][y] = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if ((empires[color][x] == null)) {
|
||||||
|
empires[color][x] = []
|
||||||
|
}
|
||||||
|
empires[color][x][y] = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var map = document.getElementById("map");
|
||||||
|
var map2 = document.getElementById("map2");
|
||||||
|
var mapwidth = map.clientWidth;
|
||||||
|
var mapheight = map.clientHeight;
|
||||||
|
var gridwidth = 0;
|
||||||
|
var gridheight = 0;
|
||||||
|
var gridcolors = [];
|
||||||
|
var gridcolorchoices = ["#FFF","#000","#00F","#0F0","#F00"];
|
||||||
|
var empires = [[],[],[],[],[]];
|
||||||
|
map2.style.left = "calc(50% - 700px)";
|
||||||
|
map2.style.top = "calc(50% - 225px)";
|
||||||
|
for (i = 0; i < 252; i++) {
|
||||||
|
document.getElementById("blocks").innerHTML = document.getElementById("blocks").innerHTML + '<button class="block ' + ((i % 28) * 50) + ',' + (Math.floor(i / 28) * 50) +'" id="' + i + '"onclick="color(' + + ((i % 28) * 50) + ',' + (Math.floor(i / 28) * 50) + ');" tabindex="-1"></button>'
|
||||||
|
if (i == 0) {
|
||||||
|
color((i % 28) * 50,Math.floor(i / 28) * 50,1)
|
||||||
|
}
|
||||||
|
if (i == 27) {
|
||||||
|
color((i % 28) * 50,Math.floor(i / 28) * 50,2)
|
||||||
|
}
|
||||||
|
if (i == 224) {
|
||||||
|
color((i % 28) * 50,Math.floor(i / 28) * 50,3)
|
||||||
|
}
|
||||||
|
if (i == 251) {
|
||||||
|
color((i % 28) * 50,Math.floor(i / 28) * 50,4)
|
||||||
|
}
|
||||||
|
document.getElementById(i).style.left = (i % 28) * 50;
|
||||||
|
document.getElementById(i).style.top = Math.floor(i / 28) * 50;
|
||||||
|
}
|
||||||
|
var test = setInterval(update,16);
|
||||||
Loading…
Reference in a new issue