1 files changed, 19 insertions, 0 deletions
diff --git a/play.js b/play.js
index a99bb24..19ad4f0 100644
--- a/play.js
+++ b/play.js
@@ -36,6 +36,7 @@ const ui = {
     },
     glory_container: document.getElementById('glory'),
     hand: document.getElementById('hand'),
+    hand_area: document.getElementById('hand_area'),
     current_events: document.getElementById('current_events'),
     roles: {
         a: {
@@ -53,6 +54,16 @@ const ui = {
         pool: {
             hero_points: document.getElementById('pool_hero_points'),
         },
+        Anarchist: document.getElementById('role_Anarchist'),
+        Communist: document.getElementById('role_Communist'),
+        Moderate: document.getElementById('role_Moderate'),
+        container: document.getElementById('roles'),
+    },
+    player_areas: {
+        container: document.getElementById('player_areas'),
+        Anarchist: document.getElementById('player_area_Anarchist'),
+        Communist: document.getElementById('player_area_Communist'),
+        Moderate: document.getElementById('player_area_Moderate'),
     },
     selectable_cards: document.getElementById('selectable_cards'),
     tableaus: {
@@ -195,6 +206,14 @@ function on_init() {
     if (on_init_once)
         return;
     on_init_once = true;
+    for (const player of view.player_order) {
+        ui.player_areas.container.insertAdjacentElement('beforeend', ui.player_areas[player]);
+        ui.roles.container.insertAdjacentElement('beforeend', ui.roles[player]);
+    }
+    ui.roles.container.insertAdjacentElement('beforeend', ui.turn_info);
+    if (view.current === 'Observer') {
+        ui.hand_area.style.display = 'none';
+    }
     for (let t = 0; t < TRACK_COUNT; ++t) {
         for (let s = 0; s < TRACK_LENGTH; ++s) {
             const bm = t * 11 + s;