ducklet/quiz
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add original matrix board to monitor

Browse source
This commit is contained in:
ducklet 2021-02-02 21:43:58 +01:00
parent 2f87ea925e
commit 878ce89bab
7 changed files with 148 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

40
public/matrix.css Normal file
View file

@ -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;
}

50
public/matrix.html Normal file
View file

@ -0,0 +1,50 @@
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="matrix.css" />
<body>
<div id="board">
<div class="row">
<div class="card cat">cat 1</div>
<div class="card cat">cat 2</div>
<div class="card cat">cat 3</div>
<div class="card cat">cat 4</div>
<div class="card cat">cat 5</div>
</div>
<div class="row">
<div class="card">100</div>
<div class="card">100</div>
<div class="card">100</div>
<div class="card">100</div>
<div class="card">100</div>
</div>
<div class="row">
<div class="card">200</div>
<div class="card">200</div>
<div class="card">200</div>
<div class="card">200</div>
<div class="card">200</div>
</div>
<div class="row">
<div class="card">300</div>
<div class="card">300</div>
<div class="card">300</div>
<div class="card">300</div>
<div class="card">300</div>
</div>
<div class="row">
<div class="card">400</div>
<div class="card">400</div>
<div class="card">400</div>
<div class="card">400</div>
<div class="card">400</div>
</div>
<div class="row">
<div class="card">500</div>
<div class="card">500</div>
<div class="card">500</div>
<div class="card">500</div>
<div class="card">500</div>
</div>
</div>
</body>
<script type="module" src="./matrix.js"></script>

23
public/matrix.js Normal file
View file

@ -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()

28
public/monitor.css
View file

@ -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;

5
public/monitor.html
View file

@ -2,9 +2,12 @@
<link rel="stylesheet" type="text/css" href="monitor.css" />
<body>
<div id="info">
<div class="container">
<div id="players">
<!-- players (see template#player) will be inserted here -->
</div>
<iframe src="matrix.html"></iframe>
</div>
</body>
<template id="player">

2
public/monitor.js
View file

@ -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

18
public/shared.css Normal file
View file

@ -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;
}