deal roles

client/modules/GameStateRenderer.js

@@ -61,6 +61,25 @@ export class GameStateRenderer {
             cardEl.classList.add('lobby-card')
         }
     }
+
+    renderGameHeader() {
+        let title = document.createElement("h1");
+        title.innerText = "Game";
+        document.querySelector('#game-title h1')?.remove();
+        document.getElementById("game-title").appendChild(title);
+    }
+
+    renderPlayerRole() {
+        let name = document.querySelector('#role-name');
+        name.innerText = this.gameState.client.gameRole;
+        if (this.gameState.client.alignment === globals.ALIGNMENT.GOOD) {
+            name.classList.add('good');
+        } else {
+            name.classList.add('evil');
+        }
+        name.setAttribute("title", this.gameState.client.gameRole);
+        document.querySelector('#role-description').innerText = this.gameState.client.gameRoleDescription;
+    }
 }
 
 function renderClient(client, container) {

client/modules/Templates.js

@@ -24,5 +24,22 @@ export const templates = {
     START_GAME_PROMPT:
     "<div id='start-game-prompt'>" +
         "<button id='start-game-button'>Start Game</button>" +
+    "</div>",
+    GAME:
+    "<div id='person-name'></div>" +
+    "<div id='game-header'>" +
+        "<div>" +
+            "<label for='game-timer'>Timer</label>" +
+            "<div id='game-timer'></div>" +
+        "</div>" +
+        "<div>" +
+            "<label for='alive-count'>Players Left</label>" +
+            "<div id='alive-count'></div>" +
+        "</div>" +
+    "</div>" +
+    "<div id='game-role'>" +
+        "<h4 id='role-name'></h4>" +
+        "<img alt='role' id='role-image'/>" +
+        "<p id='role-description'></p>" +
     "</div>"
 }