random player order and show ui relative to player order

6 files changed, 101 insertions, 35 deletions

diff --git a/play.html b/play.html
index 1ae119c..bcb36ac 100644
--- a/play.html
+++ b/play.html
@@ -96,21 +96,23 @@
 		</div>
 	</div>
 	<div id="selectable_cards"></div>
-	<div class="panel">
+	<div id="hand_area" class="panel">
 		<div id="hand_header" class="panel_header">Hand</div>
 		<div id="hand" class="panel_body"></div>
 	</div>
-	<div class="panel">
-		<div class="panel_header" data-faction-id="a">Anarchist</div>
-		<div id="tableau_a" class="panel_body"></div>
-	</div>
-	<div class="panel">
-		<div class="panel_header" data-faction-id="c">Communist</div>
-		<div id="tableau_c" class="panel_body"></div>
-	</div>
-	<div class="panel">
-		<div class="panel_header" data-faction-id="m">Moderate</div>
-		<div id="tableau_m" class="panel_body"></div>
+	<div id="player_areas">
+		<div id="player_area_Anarchist" class="panel">
+			<div class="panel_header" data-faction-id="a">Anarchist</div>
+			<div id="tableau_a" class="panel_body"></div>
+		</div>
+		<div id="player_area_Communist" class="panel">
+			<div class="panel_header" data-faction-id="c">Communist</div>
+			<div id="tableau_c" class="panel_body"></div>
+		</div>
+		<div id="player_area_Moderate" class="panel">
+			<div class="panel_header" data-faction-id="m">Moderate</div>
+			<div id="tableau_m" class="panel_body"></div>
+		</div>
 	</div>
 </main>
 
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;
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) {
diff --git a/rules.js b/rules.js
index 8f699b4..b735703 100644
--- a/rules.js
+++ b/rules.js
@@ -5,6 +5,7 @@ exports.action = action;
 exports.view = game_view;
 exports.setup = setup;
 const data_1 = require("./data");
+const OBSERVER = 'Observer';
 const states = {};
 let game = {};
 var view = {};
@@ -297,25 +298,27 @@ function resolve_active_and_proceed(checkpoint = false) {
     resolve_active_node(checkpoint);
     next();
 }
-function game_view(state, player) {
+function game_view(state, current) {
     game = state;
-    const faction_id = player_faction_map[player];
+    const faction = current === OBSERVER ? null : player_faction_map[current];
     view = {
         engine: game.engine,
         log: game.log,
         prompt: null,
         bag_of_glory: game.bag_of_glory,
         bonuses: game.bonuses,
+        current,
         current_events: game.current_events,
         fronts: game.fronts,
         glory: game.glory,
-        hand: game.hands[faction_id],
+        hand: faction === null ? [] : game.hands[faction],
         hero_points: game.hero_points,
         initiative: game.initiative,
         medallions: game.medallions,
         played_card: game.played_card,
+        player_order: current === OBSERVER ? game.player_order : get_player_order(faction).map((id) => faction_player_map[id]),
         selectable_cards: game.selectable_cards,
-        selected_cards: game.selected_cards[faction_id],
+        selected_cards: current === OBSERVER ? [] : game.selected_cards[faction],
         tableaus: game.tableaus,
         tracks: game.tracks,
         triggered_track_effects: game.triggered_track_effects,
@@ -325,7 +328,7 @@ function game_view(state, player) {
     if (game.state === 'game_over') {
         view.prompt = game.victory;
     }
-    else if (player !== game.active) {
+    else if (current !== game.active) {
         let inactive = states[game.state].inactive || game.state;
         view.prompt = `Waiting for ${game.active} to ${inactive}.`;
     }
@@ -400,6 +403,7 @@ function setup(seed, _scenario, _options) {
             pool: [],
         },
         played_card: null,
+        player_order: [data_1.MODERATE],
         selectable_cards: [],
         selected_cards: {
             a: [],
@@ -425,6 +429,8 @@ function setup(seed, _scenario, _options) {
         turn: 0,
         year: 0,
     };
+    game.player_order.push(exports.roles[random(2)]);
+    game.player_order.push(game.player_order[1] === data_1.ANARCHIST ? data_1.COMMUNIST : data_1.ANARCHIST);
     draw_medallions();
     start_year();
     return game;
@@ -2335,18 +2341,20 @@ function get_player_order(first_player = game.initiative) {
     return order;
 }
 function get_previous_faction(faction_id) {
-    const index = role_ids.indexOf(faction_id);
+    const index = game.player_order.indexOf(faction_player_map[faction_id]);
     if (index === 0) {
-        return role_ids[2];
+        return player_faction_map[game.player_order[2]];
     }
-    return role_ids[index - 1];
+    return player_faction_map[game.player_order[index - 1]];
 }
 function get_next_faction(faction_id) {
-    const index = role_ids.indexOf(faction_id);
+    console.log('get_next', faction_id);
+    const index = game.player_order.indexOf(faction_player_map[faction_id]);
+    console.log('index', index);
     if (index === 2) {
-        return role_ids[0];
+        return player_faction_map[game.player_order[0]];
     }
-    return role_ids[index + 1];
+    return player_faction_map[game.player_order[index + 1]];
 }
 function get_factions_with_most_hero_poins() {
     let most_hero_points = null;
diff --git a/rules.ts b/rules.ts
index 2ea5642..0692e79 100644
--- a/rules.ts
+++ b/rules.ts
@@ -79,6 +79,7 @@ import data, {
 //   inactive: string;
 //   prompt: () => void;
 // }
+const OBSERVER = 'Observer';
 
 const states = {} as States;
 let game = {} as Game; // = null
@@ -487,10 +488,10 @@ function resolve_active_and_proceed(checkpoint = false) {
 
 export { game_view as view };
 
-function game_view(state: Game, player: Player) {
+function game_view(state: Game, current: Player | 'Observer') {
   game = state;
 
-  const faction_id = player_faction_map[player];
+  const faction: FactionId | null = current === OBSERVER ? null : player_faction_map[current];
 
   view = {
     engine: game.engine, // TODO: remove
@@ -498,16 +499,18 @@ function game_view(state: Game, player: Player) {
     prompt: null,
     bag_of_glory: game.bag_of_glory,
     bonuses: game.bonuses,
+    current,
     current_events: game.current_events,
     fronts: game.fronts,
     glory: game.glory,
-    hand: game.hands[faction_id],
+    hand: faction === null ? [] : game.hands[faction],
     hero_points: game.hero_points,
     initiative: game.initiative,
     medallions: game.medallions,
     played_card: game.played_card,
+    player_order: current === OBSERVER ? game.player_order : get_player_order(faction).map((id) => faction_player_map[id]),
     selectable_cards: game.selectable_cards,
-    selected_cards: game.selected_cards[faction_id],
+    selected_cards: current === OBSERVER ? [] : game.selected_cards[faction],
     tableaus: game.tableaus,
     tracks: game.tracks,
     triggered_track_effects: game.triggered_track_effects,
@@ -517,7 +520,7 @@ function game_view(state: Game, player: Player) {
 
   if (game.state === 'game_over') {
     view.prompt = game.victory;
-  } else if (player !== game.active) {
+  } else if (current !== game.active) {
     let inactive = states[game.state].inactive || game.state;
     view.prompt = `Waiting for ${game.active} to ${inactive}.`;
   } else {
@@ -596,6 +599,7 @@ export function setup(seed: number, _scenario: string, _options: unknown) {
       pool: [],
     },
     played_card: null,
+    player_order: [MODERATE],
     selectable_cards: [],
     selected_cards: {
       a: [],
@@ -622,6 +626,13 @@ export function setup(seed: number, _scenario: string, _options: unknown) {
     year: 0,
   };
 
+  // Randomly choose second player
+  game.player_order.push(roles[random(2)]);
+  // Remaining role is 3rd player
+  game.player_order.push(
+    game.player_order[1] === ANARCHIST ? COMMUNIST : ANARCHIST
+  );
+
   draw_medallions();
 
   start_year();
@@ -2971,19 +2982,21 @@ function get_player_order(first_player = game.initiative): FactionId[] {
 }
 
 function get_previous_faction(faction_id: FactionId): FactionId {
-  const index = role_ids.indexOf(faction_id);
+  const index = game.player_order.indexOf(faction_player_map[faction_id]);
   if (index === 0) {
-    return role_ids[2];
+    return player_faction_map[game.player_order[2]];
   }
-  return role_ids[index - 1];
+  return player_faction_map[game.player_order[index - 1]];
 }
 
 function get_next_faction(faction_id: FactionId): FactionId {
-  const index = role_ids.indexOf(faction_id);
+  console.log('get_next', faction_id)
+  const index = game.player_order.indexOf(faction_player_map[faction_id]);
+  console.log('index', index);
   if (index === 2) {
-    return role_ids[0];
+    return player_faction_map[game.player_order[0]];
   }
-  return role_ids[index + 1];
+  return player_faction_map[game.player_order[index + 1]];
 }
 
 function get_factions_with_most_hero_poins(): FactionId[] {
diff --git a/types.d.ts b/types.d.ts
index 7c2e648..1f179cd 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -59,6 +59,7 @@ export interface Game {
   initiative: FactionId;
   medallions: Record<FactionId, number[]> & { pool: Array<number | null> };
   played_card: CardId | null;
+  player_order: Player[];
   selected_cards: Record<FactionId, CardId[]>;
   selectable_cards: CardId[]; // used for specific events
   tableaus: Record<FactionId, CardId[]>;
@@ -80,7 +81,7 @@ export interface View {
   prompt: string | null;
   actions?: any;
   victory?: string;
-
+  current: Player | 'Observer';
   selected_cards: CardId[];
   bag_of_glory: Game['bag_of_glory'];
   bonuses: Game['bonuses'];
@@ -92,6 +93,7 @@ export interface View {
   initiative: Game['initiative'];
   medallions: Game['medallions'];
   played_card: Game['played_card'];
+  player_order: Game['player_order'];
   selectable_cards: Game['selectable_cards'];
   tableaus: Game['tableaus'];
   tracks: number[];