1 files changed, 22 insertions, 0 deletions

diff --git a/play.ts b/play.ts
index 2dd8407..18dfe36 100644
--- a/play.ts
+++ b/play.ts
@@ -49,6 +49,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: {
@@ -66,6 +67,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: {
@@ -248,6 +259,17 @@ function on_init() {
   if (on_init_once) return;
   on_init_once = true;
 
+  // Reorder tableaus and roles based on player order
+  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';
+  }
+
   // Create blank_markers
   for (let t = 0; t < TRACK_COUNT; ++t) {
     for (let s = 0; s < TRACK_LENGTH; ++s) {