From 80b5af08d4302477d721027f9cff4494add0acde Mon Sep 17 00:00:00 2001 From: Durvenson Date: Fri, 31 Jul 2020 21:59:35 -0400 Subject: [PATCH] stuffs --- cartoonKingdoms/index.css | 1 - grid/index.css | 92 +++++++++++++++++++++++++++++++++++++ grid/index.html | 34 ++++++++++++++ grid/index.js | 95 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 221 insertions(+), 1 deletion(-) create mode 100644 grid/index.css create mode 100644 grid/index.html create mode 100644 grid/index.js 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. +
+ +

+ 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