Set max width for game header, fixed bug in flipping card on every state change

static/game.js

@@ -4,6 +4,7 @@ const socket = io();
 let clock;
 let currentGame = null;
 let cardFlippedOver = false;
+let cardDealt = false;
 
 // respond to the game state received from the server
 socket.on('state', function(game) {
@@ -81,7 +82,10 @@ function renderGame() {
         "</div>";
 
     // initially flip the card over for a reveal, allow it to be flipped on click/tap
-    flipCard();
+    if (!cardDealt) {
+        flipCard();
+        cardDealt = true;
+    }
     document.getElementById("game-card").addEventListener("click", flipCard);
 
     let killedBtn = document.createElement("button");

static/styles.css

@@ -393,6 +393,7 @@ label {
 #players-remaining {
     font-size: 1.7em;
     color: gray;
+    width: 4em;
     margin-bottom: 0.5em;
 }
 
@@ -410,5 +411,6 @@ label {
 .game-header {
     display: flex;
     margin: 0 auto;
+    max-width: 35em;
     justify-content: space-evenly;
 }