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 {
|
||||
font-family: MedievalSharp, arial;
|
||||
font-size: 20px;
|
||||
margin: 4px;
|
||||
background-color: #222288FF;
|
||||
border: solid 5px #888844FF;
|
||||
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