diff --git a/cartoonKingdoms/index.css b/cartoonKingdoms/index.css
index 189fae1..684fc69 100644
--- a/cartoonKingdoms/index.css
+++ b/cartoonKingdoms/index.css
@@ -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;
diff --git a/grid/index.css b/grid/index.css
new file mode 100644
index 0000000..bb63fab
--- /dev/null
+++ b/grid/index.css
@@ -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;
+}
\ No newline at end of file
diff --git a/grid/index.html b/grid/index.html
new file mode 100644
index 0000000..7d2d0f4
--- /dev/null
+++ b/grid/index.html
@@ -0,0 +1,34 @@
+
+
+
+ Tech Demo
+
+
+
+
+
+
+
+ Instructions
+
+ Watch the demonstration. You can also click on squares to change their color.
+
+
+
+ Changelog
+
+ 7/31/2020: Tech demo released.
+
+
+ Grid Tech Demo
+
+
+
+
+
\ No newline at end of file
diff --git a/grid/index.js b/grid/index.js
new file mode 100644
index 0000000..6e8e133
--- /dev/null
+++ b/grid/index.js
@@ -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 + ''
+ 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);
\ No newline at end of file