diff --git a/public/matrix.css b/public/matrix.css new file mode 100644 index 0000000..a0c5339 --- /dev/null +++ b/public/matrix.css @@ -0,0 +1,40 @@ +@import "shared.css"; +body { + background-color: var(--main-bg-color); +} +.board { + display: flex; + flex-direction: column; +} +.row { + display: flex; + flex-direction: row; +} +.block { + background-color: red; + display: inline-block; + /*margin: 0.1em;*/ + position: absolute; + transition-duration: 1s; +} +.card { + background-color: var(--main-fg-color); + width: 100%; + height: 5em; + margin: 1em; + letter-spacing: 0.3em; + font-variant: small-caps; + /*outline: 1px solid red;*/ + display: flex; + align-items: center; + justify-content: center; +} +.highlight { + background-color: var(--main-hl-color); +} +.cat { + font-weight: bold; +} +.card.hidden { + visibility: hidden; +} \ No newline at end of file diff --git a/public/matrix.html b/public/matrix.html new file mode 100644 index 0000000..c1c20d6 --- /dev/null +++ b/public/matrix.html @@ -0,0 +1,50 @@ + + + +
+
+
cat 1
+
cat 2
+
cat 3
+
cat 4
+
cat 5
+
+
+
100
+
100
+
100
+
100
+
100
+
+
+
200
+
200
+
200
+
200
+
200
+
+
+
300
+
300
+
300
+
300
+
300
+
+
+
400
+
400
+
400
+
400
+
400
+
+
+
500
+
500
+
500
+
500
+
500
+
+
+ + + diff --git a/public/matrix.js b/public/matrix.js new file mode 100644 index 0000000..b4a3e90 --- /dev/null +++ b/public/matrix.js @@ -0,0 +1,23 @@ +"use strict" + +function setup() { + let highlighted + document.addEventListener("click", (event) => { + const card = event.target + if (!card.classList.contains("card") || card.classList.contains("cat")) { + return + } + if (card === highlighted) { + highlighted = null + card.classList.add("hidden") + return + } + if (highlighted) { + highlighted.classList.remove("highlight") + } + highlighted = card + card.classList.add("highlight") + }) +} + +setup() diff --git a/public/monitor.css b/public/monitor.css index 23d74cb..2be28d9 100644 --- a/public/monitor.css +++ b/public/monitor.css @@ -1,28 +1,22 @@ -:root { - --citrus: #c2d72f; - --bleue: #0093ff; - --marine: #20dfb2; - --main-bg-color: var(--marine); - --main-fg-color: var(--bleue); - --transparent: #0f0; -} +@import "shared.css"; body { - font-family: "Arial Rounded MT Bold", sans-serif; background-color: black; margin: 0px auto; overflow: hidden; - color: black; } -* { - margin: 0; - padding: 0; -} -#info { - background-color: var(--main-bg-color); - padding: 1em 0 0 1em; +.container { + display: flex; width: 1280px; height: 720px; outline: 10px solid gold; + background-color: var(--main-bg-color); + padding: 1em 0 0 1em; +} +#players { + width: 350px; +} +iframe { + flex-grow: 1; } .player { width: 336px; diff --git a/public/monitor.html b/public/monitor.html index 8b551b3..aeac6f4 100644 --- a/public/monitor.html +++ b/public/monitor.html @@ -2,8 +2,11 @@ -
- +
+
+ +
+
diff --git a/public/monitor.js b/public/monitor.js index 844476d..ef58d13 100644 --- a/public/monitor.js +++ b/public/monitor.js @@ -59,7 +59,7 @@ function test_prettynum() { } test_prettynum() -const player_list = q("#info") +const player_list = q("#players") function redraw_clients(me, clients) { if (!me) { return diff --git a/public/shared.css b/public/shared.css new file mode 100644 index 0000000..70d3a57 --- /dev/null +++ b/public/shared.css @@ -0,0 +1,18 @@ +:root { + --citrus: #c2d72f; + --bleue: #0093ff; + --marine: #20dfb2; + --horange: #ff6000; + --main-bg-color: var(--marine); + --main-fg-color: var(--bleue); + --main-hl-color: var(--horange); + --transparent: #0f0; +} +* { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-family: "Arial Rounded MT Bold", sans-serif; + color: black; +}