show initiative token

4 files changed, 38 insertions, 0 deletions

diff --git a/land-and-freedom.css b/land-and-freedom.css
index afa3a6f..b3ee0a8 100644
--- a/land-and-freedom.css
+++ b/land-and-freedom.css
@@ -729,6 +729,19 @@ main {
   background-image: url("images/bonus/bonus_1_on.png");
 }
 
+.initiative_token {
+  width: 47px;
+  height: 47px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-right: auto;
+  background-image: url("images/initiative_clockwise.png");
+}
+
+.initiative_token[data-year="2"] {
+  background-image: url("images/initiative_counter_clockwise.png");
+}
+
 .medallion {
   width: 47px;
   height: 47px;
diff --git a/land-and-freedom.scss b/land-and-freedom.scss
index ec183e5..4447e4c 100644
--- a/land-and-freedom.scss
+++ b/land-and-freedom.scss
@@ -354,6 +354,19 @@ main {
   }
 }
 
+.initiative_token {
+  width: 47px;
+  height: 47px;
+  background-size: cover;
+  background-repeat: no-repeat;
+  margin-right: auto;
+  background-image: url('images/initiative_clockwise.png');
+}
+
+.initiative_token[data-year='2'] {
+  background-image: url('images/initiative_counter_clockwise.png');
+}
+
 .medallion {
   width: 47px;
   height: 47px;
diff --git a/play.js b/play.js
index aeea368..356e5a0 100644
--- a/play.js
+++ b/play.js
@@ -67,6 +67,7 @@ const ui = {
     bonuses: [],
     tokens_on_front: {},
     glory: [],
+    initiative_token: undefined,
     medallions: [],
     spaces: [],
     standees: [],
@@ -239,6 +240,8 @@ function on_init() {
         e.setAttribute('data-card-id', '' + data.cards[c].id);
         register_action(e, 'card', c);
     }
+    let e = (ui.initiative_token = document.createElement('div'));
+    e.className = 'initiative_token';
     data.fronts.forEach((front) => {
         ui.tokens_on_front[front.id] = {};
         FACTIONS.forEach((faction_id) => {
@@ -312,6 +315,8 @@ function on_update() {
             ui.roles[f].medallions.appendChild(ui.medallions[m]);
         }
     }
+    ui.roles[view.initiative].medallions.appendChild(ui.initiative_token);
+    ui.initiative_token.setAttribute('data-year', view.year);
     for (let faction_id of FACTIONS) {
         ui.tableaus[faction_id].replaceChildren();
         for (let c of view.tableaus[faction_id]) {
diff --git a/play.ts b/play.ts
index 83c0f19..af7f825 100644
--- a/play.ts
+++ b/play.ts
@@ -83,6 +83,7 @@ const ui = {
   tokens_on_front: {},
   // front_values: {},
   glory: [],
+  initiative_token: undefined,
   medallions: [],
   spaces: [],
   standees: [],
@@ -306,6 +307,10 @@ function on_init() {
     register_action(e, 'card', c);
   }
 
+  // create initiative marker
+  let e = (ui.initiative_token = document.createElement('div'));
+  e.className = 'initiative_token';
+
   // create tokens to add to fronts
   data.fronts.forEach((front) => {
     ui.tokens_on_front[front.id] = {};
@@ -408,6 +413,8 @@ function on_update() {
       ui.roles[f].medallions.appendChild(ui.medallions[m]);
     }
   }
+  ui.roles[view.initiative].medallions.appendChild(ui.initiative_token);
+  ui.initiative_token.setAttribute('data-year', view.year);
 
   for (let faction_id of FACTIONS) {
     ui.tableaus[faction_id].replaceChildren();