react frontend app (display screen, join)

tank-frontend/src/Controls.css

@@ -0,0 +1,63 @@
+kbd {
+    background: hsl(0, 0%, 96%);
+    padding: 10px;
+    display: block;
+    border-radius: 5px;
+    margin: 5px;
+    width: 1.6em;
+    height: 1.3em;
+    text-align: center;
+    box-shadow: 0 1px rgba(0, 0, 0, .21);
+    user-select: none;
+    color: black;
+}
+
+kbd.up {
+    margin-left: calc(1.6em + 35px);
+}
+
+kbd.space {
+    margin-top: calc(1.3em + 35px);
+    width: 14em;
+}
+
+kbd:active {
+    position: relative;
+    top: 2px;
+    background: hsl(0, 0%, 94%);
+    box-shadow: 0 1px rgba(0, 0, 0, .13) inset;
+}
+
+.controls {
+    display: flex;
+    color: lightgray;
+}
+
+.control {
+    margin: 0 1em;
+}
+
+.control h3 {
+    text-align: center;
+}
+
+.row {
+    display: flex;
+}
+
+.splash {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(transparent, red);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 500ms;
+}
+
+.was-killed .splash {
+    opacity: 1;
+    transition: opacity 120ms;
+}