From ab877ff35b3952e0a9d10e86485ea8dac7de6d98 Mon Sep 17 00:00:00 2001 From: BRNSystems <70092437+BRNSystems@users.noreply.github.com> Date: Sun, 16 Jan 2022 17:19:45 +0100 Subject: [PATCH] convert flexbox to table | colorize boards --- index.css | 63 ++++++++++++++++++++++++++++++++++++------------------ index.html | 46 +++++++++++++++++++++++++-------------- index.js | 20 ++++++++--------- 3 files changed, 82 insertions(+), 47 deletions(-) diff --git a/index.css b/index.css index d273674..579b0aa 100644 --- a/index.css +++ b/index.css @@ -1,17 +1,15 @@ -table, -th, -td { +.playfields, +.cellx{ border: 1px solid white; border-collapse: collapse; } td > div{ color: white; } -tr, -td{ +.cellx{ text-align: center; height: 100%; - padding: 0.4%; + padding: 0.78%; } #playfield { width: 100%; @@ -19,20 +17,14 @@ td{ } #localdiv, #remotediv { - width: 70%; - height: 70%; - float: center; - padding-top: 1%; - padding-bottom: 1%; + width: 100%; + height: 100%; } #localauxdiv, #remoteauxdiv { - width: 25%; - height: 25%; + width: 100%; + height: 100%; float: center; - padding-top: 1%; - padding-bottom: 1%; - padding-left: 1%; } #local, #remote { @@ -48,10 +40,39 @@ td{ table-layout: fixed; object-fit: contain; } -#playfield { - display: flex; - flex-wrap: wrap; -} body{ - background-color: black; + background-color: #666; +} +#maingrids{ + width: 100%; + height: 100%; +} +.mainboards{ + width: 68%; + height: 100%; + display: inline-block; +} +.auxboards{ + width: 30%; + height: 100%; + display: inline-block; + padding-left: 1%; +} +#locals, +#remotes{ + height: 50%; + table-layout: fixed; + object-fit: contain; +} +.localcellx{ + background-color: #00ff00; +} +.remotecellx{ + background-color: #ff0000; +} +.localauxcellx{ + background-color: #00cc00; +} +.remoteauxcellx{ + background-color: #cc0000; } \ No newline at end of file diff --git a/index.html b/index.html index d2510db..09ee8bc 100644 --- a/index.html +++ b/index.html @@ -11,22 +11,36 @@
-
- -
-
-
- -
-
-
- -
-
-
- -
-
+ + + + + + + + + +
+
+ +
+
+ 		+
+ +
+
+
+
+ +
+
+ 		+
+ +
+
+
\ No newline at end of file diff --git a/index.js b/index.js index 3d94484..c4eb31d 100644 --- a/index.js +++ b/index.js @@ -29,16 +29,16 @@ function writeauxgrid(){ function inittable(){ for (let i = 0; i < w; i++) { - //create columns + //create rows $('#local').append(''); $('#remote').append(''); for (let j = 0; j < h; j++) { //create cells - $('#lt' + i).append(''); - $('#rt' + i).append(''); + $('#lt' + i).append(''); + $('#rt' + i).append(''); //add divs to cells - $('#lcx' + i + '-' + j).append('
'); - $('#rcx' + i + '-' + j).append('
'); + $('#lcx' + i + '-' + j).append('
'); + $('#rcx' + i + '-' + j).append('
'); //add arrays to grids lgrid[i] = new Array(h); rgrid[i] = new Array(h); @@ -49,16 +49,16 @@ function inittable(){ function initauxtable(){ for (let i = 0; i < waux; i++) { - //create columns + //create rows $('#localaux').append(''); $('#remoteaux').append(''); for (let j = 0; j < haux; j++) { //create cells - $('#lax' + i).append(''); - $('#rax' + i).append(''); + $('#lax' + i).append(''); + $('#rax' + i).append(''); //add divs to cells - $('#lacx' + i + '-' + j).append('
'); - $('#racx' + i + '-' + j).append('
'); + $('#lacx' + i + '-' + j).append('
'); + $('#racx' + i + '-' + j).append('
'); //add arrays to grids lauxgrid[i] = new Array(haux); rauxgrid[i] = new Array(haux);