Initial commit

ui/static/game.css

@@ -0,0 +1,68 @@
+#names {
+    display: flex;
+    justify-content: space-evenly;
+    padding: 0 10vw;
+    font-size: 1.5rem;
+}
+
+.my-name {
+    font-weight: bold;
+}
+
+.name.organiser::before {
+    content: "👑";
+    margin-right: .75rem;
+}
+
+.name.organiser {
+    color: gold;
+}
+
+.name {
+    animation-name: appear;
+    animation-duration: .5s;
+    display: inline-block;
+}
+
+#question {
+    flex-basis: 50%;
+    display: flex;
+    justify-content: flex-start;
+    padding-top: 10vh;
+    flex-direction: column;
+    align-items: center;
+}
+
+#question > h1 {
+    font-size: 3rem;
+}
+
+#question .answer {
+    font-size: 2rem;
+}
+
+/*body.organiser #question > .answers {
+    display: none;
+}*/
+
+#controls {
+    display: none;
+}
+
+body.organiser #controls {
+    display: flex;
+    padding-right: 20vw;
+    justify-content: flex-end;
+}
+
+@keyframes appear {
+    from {
+        transform: scale(2, 2);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1, 1);
+        opacity: 1;
+    }
+}

ui/static/home.css

@@ -0,0 +1,18 @@
+main {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+section {
+    border: 2px solid black;
+    margin: 2rem;
+    padding: 1rem;
+}
+
+#join, #play, #new {
+    display: flex;
+    flex-direction: column;
+}

ui/static/home.js

@@ -0,0 +1,7 @@
+document.addEventListener("DOMContentLoaded", () => {
+	const joinForm = document.getElementById("join");
+	joinForm.addEventListener("submit", (e) => {
+		const code = joinForm.querySelector("input[name=\"code\"]").value;
+		joinForm.action = "/play/" + encodeURIComponent(code);
+	});
+});

ui/static/style.css

@@ -0,0 +1,30 @@
+html {
+    height: 100%;
+}
+
+body {
+    min-height: 100%;
+    margin: 0;
+}
+
+body {
+    display: grid;
+    grid-template-rows: 10vh auto;
+    grid-template-columns: auto;
+    grid-template-areas:
+    "header"
+    "main";
+}
+
+header {
+    grid-area: header;
+    display: flex;
+    justify-content: center;
+}
+
+main {
+    grid-area: main;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+}