client wip

6 files changed, 360 insertions, 630 deletions

diff --git a/play.html b/play.html
index a4649eb..85491ad 100644
--- a/play.html
+++ b/play.html
@@ -59,9 +59,6 @@
 			<div class="role_medallions"></div>
 			<div class="role_info"></div>
 		</div>
-		<div id="turn_info">
-			<div id="turn_info_card" class="card"></div>
-		</div>
 	</div>
 	<div id="log"></div>
 </aside>
diff --git a/play.js b/play.js
index 971c8e3..0e74c1d 100644
--- a/play.js
+++ b/play.js
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const BONUSES_COUNT = 2;
 const CARD_COUNT = 109;
 const GLORY_COUNT = 9;
-const medallionS_COUNT = 9;
+const MEDALLIONS_COUNT = 9;
 const STANDEES_COUNT = 5;
 const TRACK_COUNT = 5;
 const TRACK_LENGTH = 11;
@@ -122,7 +122,7 @@ const LAYOUT_GLORY = [
     [885, 771],
     [922, 771],
 ];
-const LAYOUT_medallionS = [
+const LAYOUT_MEDALLIONS = [
     [364, 556],
     [415, 556],
     [466, 556],
@@ -275,7 +275,7 @@ function on_init() {
         e.style.left = LAYOUT_GLORY[g][0] + 'px';
         e.style.top = LAYOUT_GLORY[g][1] + 'px';
     }
-    for (let m = 0; m < medallionS_COUNT; ++m) {
+    for (let m = 0; m < MEDALLIONS_COUNT; ++m) {
         let e = (ui.medallions[m] = document.createElement('div'));
         e.className = 'medallion';
         e.setAttribute('data-medallion-id', '' + m);
@@ -347,11 +347,11 @@ function on_update() {
     }
     place_cards(ui.hand, view.hand);
     ui.player_area_tabs.hand_tab.replaceChildren(`Hand (${view.hand.length})`);
-    // place_cards(ui.player_area_cards.deck, view.deck);
+    place_cards(ui.player_area_cards.deck, view.deck);
     ui.player_area_tabs.deck_tab.replaceChildren(`Deck (${view.deck.length})`);
-    // place_cards(ui.player_area_cards.discard, view.discard);
+    place_cards(ui.player_area_cards.discard, view.discard);
     ui.player_area_tabs.discard_tab.replaceChildren(`Discard (${view.discard.length})`);
-    // place_cards(ui.player_area_cards.trash, view.trash);
+    place_cards(ui.player_area_cards.trash, view.trash);
     ui.player_area_tabs.trash_tab.replaceChildren(`Trash (${view.trash.length})`);
     place_cards(ui.selectable_cards, view.selectable_cards);
     for (let faction_id of FACTIONS) {
@@ -373,8 +373,8 @@ function on_update() {
     for (let i = 0; i < view.medallions.pool.length; ++i) {
         if (view.medallions.pool[i] !== null) {
             const id = view.medallions.pool[i];
-            ui.medallions[id].style.left = LAYOUT_medallionS[i][0] + 'px';
-            ui.medallions[id].style.top = LAYOUT_medallionS[i][1] + 'px';
+            ui.medallions[id].style.left = LAYOUT_MEDALLIONS[i][0] + 'px';
+            ui.medallions[id].style.top = LAYOUT_MEDALLIONS[i][1] + 'px';
             ui.medallions_container.appendChild(ui.medallions[id]);
         }
     }
diff --git a/play2.css b/play2.css
index bd161e6..0a92960 100644
--- a/play2.css
+++ b/play2.css
@@ -23,6 +23,14 @@ main {
 	position: absolute;
 }
 
+.card {
+	background-size: 100% 100%;
+	width: 206px;
+	height: 281px;
+	border-radius: 10px;
+	box-shadow: 0 0 0 1px black, 1px 1px 4px #0006;
+}
+
 .track {
 	position: absolute;
 	background-color: #fff4;
@@ -42,6 +50,10 @@ main {
 	gap: 4px;
 }
 
+.front div {
+	margin-right: -30px;
+}
+
 .token {
 	background-color: #fff4;
 	border: 3px solid black;
@@ -79,27 +91,20 @@ main {
 	border-color: #ddd #888 #888 #ddd;
 }
 
-.standee_0 { background-image: url(images/tokens75/standee_0.png); }
-.standee_1 { background-image: url(images/tokens75/standee_1.png); }
-.standee_2 { background-image: url(images/tokens75/standee_2.png); }
-.standee_3 { background-image: url(images/tokens75/standee_3.png); }
-.standee_4 { background-image: url(images/tokens75/standee_4.png); }
+.player {
+	border-color: pink darkred darkred pink;
+}
 
-.medallion_0 { background-image: url(images/tokens75/medallion_0.png); }
-.medallion_1 { background-image: url(images/tokens75/medallion_1.png); }
-.medallion_2 { background-image: url(images/tokens75/medallion_2.png); }
-.medallion_3 { background-image: url(images/tokens75/medallion_3.png); }
-.medallion_4 { background-image: url(images/tokens75/medallion_4.png); }
-.medallion_5 { background-image: url(images/tokens75/medallion_5.png); }
-.medallion_6 { background-image: url(images/tokens75/medallion_6.png); }
-.medallion_7 { background-image: url(images/tokens75/medallion_7.png); }
-.medallion_8 { background-image: url(images/tokens75/medallion_8.png); }
-.medallion_9 { background-image: url(images/tokens75/medallion_9.png); }
+.token.front_plus,
+.token.front_minus {
+	background-color: tan;
+	border-color: tan brown brown tan;
+}
 
-.bonus_morale.off { background-image: url(images/tokens75/bonus_morale_off.png); }
-.bonus_morale.on { background-image: url(images/tokens75/bonus_morale_on.png); }
-.bonus_teamwork.off { background-image: url(images/tokens75/bonus_teamwork_off.png); }
-.bonus_teamwork.on { background-image: url(images/tokens75/bonus_teamwork_on.png); }
+.front_minus + .front_minus,
+.front_plus + .front_plus {
+	Xmargin-left: -30px;
+}
 
 .token.medallion {
 	background-color: tan;
@@ -117,6 +122,32 @@ main {
 	height: 70px;
 }
 
+.glory_container {
+	position: absolute;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	align-items: center;
+	min-width: 60px;
+	height: 60px;
+	gap: 9px;
+	padding: 0px 4px;
+}
+
+.current_events {
+	position: absolute;
+	width: 208px;
+	height: 282px;
+}
+
+.action {
+	box-shadow: 0 0 0 3px white;
+}
+
+.selected {
+	box-shadow: 0 0 0 3px yellow;
+}
+
 /* PANELS */
 
 .panel {
@@ -138,499 +169,158 @@ main {
   padding: 12px;
 }
 
-.card {
-  background-size: 100% 100%;
-  width: 206px;
-  height: 281px;
-  xborder-radius: 5px;
-  box-shadow: 0 0 0 1px #333;
-}
-
-.card.event {
-  position: absolute;
-}
-
-.faction_token[data-faction-id=a] {
-  background-image: url("images/factions/anarchists.png");
-}
-
-.faction_token[data-faction-id=c] {
-  background-image: url("images/factions/communists.png");
-}
-
-.faction_token[data-faction-id=m] {
-  background-image: url("images/factions/moderates.png");
-}
-
-.initiative_token {
-  background-image: url("images/initiative_clockwise.png");
-}
-
-.initiative_token[data-year="2"] {
-  background-image: url("images/initiative_counter_clockwise.png");
-}
-
-
-.medallion[data-medallion-id="1"] {
-  background-image: url("images/medallions/medallion_1.png");
-}
-
-.medallion[data-medallion-id="2"] {
-  background-image: url("images/medallions/medallion_2.png");
-}
-
-.medallion[data-medallion-id="3"] {
-  background-image: url("images/medallions/medallion_3.png");
-}
-
-.medallion[data-medallion-id="4"] {
-  background-image: url("images/medallions/medallion_4.png");
-}
-
-.medallion[data-medallion-id="5"] {
-  background-image: url("images/medallions/medallion_5.png");
-}
-
-.medallion[data-medallion-id="6"] {
-  background-image: url("images/medallions/medallion_6.png");
-}
-
-.medallion[data-medallion-id="7"] {
-  background-image: url("images/medallions/medallion_7.png");
-}
-
-.medallion[data-medallion-id="8"] {
-  background-image: url("images/medallions/medallion_8.png");
-}
-
-.card[data-card-id="1"] {
-  background-image: url("images/cards75/card_1.png");
-}
+/* IMAGES */
 
-.card[data-card-id="2"] {
-  background-image: url("images/cards75/card_2.png");
-}
-
-.card[data-card-id="3"] {
-  background-image: url("images/cards75/card_3.png");
-}
-
-.card[data-card-id="4"] {
-  background-image: url("images/cards75/card_4.png");
-}
-
-.card[data-card-id="5"] {
-  background-image: url("images/cards75/card_5.png");
-}
-
-.card[data-card-id="6"] {
-  background-image: url("images/cards75/card_6.png");
-}
-
-.card[data-card-id="7"] {
-  background-image: url("images/cards75/card_7.png");
-}
-
-.card[data-card-id="8"] {
-  background-image: url("images/cards75/card_8.png");
-}
-
-.card[data-card-id="9"] {
-  background-image: url("images/cards75/card_9.png");
-}
-
-.card[data-card-id="10"] {
-  background-image: url("images/cards75/card_10.png");
-}
-
-.card[data-card-id="11"] {
-  background-image: url("images/cards75/card_11.png");
-}
-
-.card[data-card-id="12"] {
-  background-image: url("images/cards75/card_12.png");
-}
-
-.card[data-card-id="13"] {
-  background-image: url("images/cards75/card_13.png");
-}
-
-.card[data-card-id="14"] {
-  background-image: url("images/cards75/card_14.png");
-}
-
-.card[data-card-id="15"] {
-  background-image: url("images/cards75/card_15.png");
-}
-
-.card[data-card-id="16"] {
-  background-image: url("images/cards75/card_16.png");
-}
-
-.card[data-card-id="17"] {
-  background-image: url("images/cards75/card_17.png");
-}
-
-.card[data-card-id="18"] {
-  background-image: url("images/cards75/card_18.png");
-}
-
-.card[data-card-id="19"] {
-  background-image: url("images/cards75/card_19.png");
-}
-
-.card[data-card-id="20"] {
-  background-image: url("images/cards75/card_20.png");
-}
-
-.card[data-card-id="21"] {
-  background-image: url("images/cards75/card_21.png");
-}
-
-.card[data-card-id="22"] {
-  background-image: url("images/cards75/card_22.png");
-}
-
-.card[data-card-id="23"] {
-  background-image: url("images/cards75/card_23.png");
-}
-
-.card[data-card-id="24"] {
-  background-image: url("images/cards75/card_24.png");
-}
-
-.card[data-card-id="25"] {
-  background-image: url("images/cards75/card_25.png");
-}
-
-.card[data-card-id="26"] {
-  background-image: url("images/cards75/card_26.png");
-}
-
-.card[data-card-id="27"] {
-  background-image: url("images/cards75/card_27.png");
-}
-
-.card[data-card-id="28"] {
-  background-image: url("images/cards75/card_28.png");
-}
-
-.card[data-card-id="29"] {
-  background-image: url("images/cards75/card_29.png");
-}
-
-.card[data-card-id="30"] {
-  background-image: url("images/cards75/card_30.png");
-}
-
-.card[data-card-id="31"] {
-  background-image: url("images/cards75/card_31.png");
-}
-
-.card[data-card-id="32"] {
-  background-image: url("images/cards75/card_32.png");
-}
-
-.card[data-card-id="33"] {
-  background-image: url("images/cards75/card_33.png");
-}
-
-.card[data-card-id="34"] {
-  background-image: url("images/cards75/card_34.png");
-}
-
-.card[data-card-id="35"] {
-  background-image: url("images/cards75/card_35.png");
-}
-
-.card[data-card-id="36"] {
-  background-image: url("images/cards75/card_36.png");
-}
-
-.card[data-card-id="37"] {
-  background-image: url("images/cards75/card_37.png");
-}
-
-.card[data-card-id="38"] {
-  background-image: url("images/cards75/card_38.png");
-}
-
-.card[data-card-id="39"] {
-  background-image: url("images/cards75/card_39.png");
-}
+.front_plus { background-image: url(images/tokens75/front_plus.png); }
+.front_minus { background-image: url(images/tokens75/front_minus.png); }
 
-.card[data-card-id="40"] {
-  background-image: url("images/cards75/card_40.png");
-}
-
-.card[data-card-id="41"] {
-  background-image: url("images/cards75/card_41.png");
-}
-
-.card[data-card-id="42"] {
-  background-image: url("images/cards75/card_42.png");
-}
-
-.card[data-card-id="43"] {
-  background-image: url("images/cards75/card_43.png");
-}
-
-.card[data-card-id="44"] {
-  background-image: url("images/cards75/card_44.png");
-}
-
-.card[data-card-id="45"] {
-  background-image: url("images/cards75/card_45.png");
-}
-
-.card[data-card-id="46"] {
-  background-image: url("images/cards75/card_46.png");
-}
-
-.card[data-card-id="47"] {
-  background-image: url("images/cards75/card_47.png");
-}
-
-.card[data-card-id="48"] {
-  background-image: url("images/cards75/card_48.png");
-}
-
-.card[data-card-id="49"] {
-  background-image: url("images/cards75/card_49.png");
-}
-
-.card[data-card-id="50"] {
-  background-image: url("images/cards75/card_50.png");
-}
-
-.card[data-card-id="51"] {
-  background-image: url("images/cards75/card_51.png");
-}
-
-.card[data-card-id="52"] {
-  background-image: url("images/cards75/card_52.png");
-}
-
-.card[data-card-id="53"] {
-  background-image: url("images/cards75/card_53.png");
-}
-
-.card[data-card-id="54"] {
-  background-image: url("images/cards75/card_54.png");
-}
-
-.card[data-card-id="55"] {
-  background-image: url("images/cards75/card_55.png");
-}
-
-.card[data-card-id="56"] {
-  background-image: url("images/cards75/card_56.png");
-}
-
-.card[data-card-id="57"] {
-  background-image: url("images/cards75/card_57.png");
-}
-
-.card[data-card-id="58"] {
-  background-image: url("images/cards75/card_58.png");
-}
-
-.card[data-card-id="59"] {
-  background-image: url("images/cards75/card_59.png");
-}
-
-.card[data-card-id="60"] {
-  background-image: url("images/cards75/card_60.png");
-}
-
-.card[data-card-id="61"] {
-  background-image: url("images/cards75/card_61.png");
-}
-
-.card[data-card-id="62"] {
-  background-image: url("images/cards75/card_62.png");
-}
-
-.card[data-card-id="63"] {
-  background-image: url("images/cards75/card_63.png");
-}
-
-.card[data-card-id="64"] {
-  background-image: url("images/cards75/card_64.png");
-}
-
-.card[data-card-id="65"] {
-  background-image: url("images/cards75/card_65.png");
-}
-
-.card[data-card-id="66"] {
-  background-image: url("images/cards75/card_66.png");
-}
-
-.card[data-card-id="67"] {
-  background-image: url("images/cards75/card_67.png");
-}
-
-.card[data-card-id="68"] {
-  background-image: url("images/cards75/card_68.png");
-}
-
-.card[data-card-id="69"] {
-  background-image: url("images/cards75/card_69.png");
-}
-
-.card[data-card-id="70"] {
-  background-image: url("images/cards75/card_70.png");
-}
-
-.card[data-card-id="71"] {
-  background-image: url("images/cards75/card_71.png");
-}
-
-.card[data-card-id="72"] {
-  background-image: url("images/cards75/card_72.png");
-}
-
-.card[data-card-id="73"] {
-  background-image: url("images/cards75/card_73.png");
-}
-
-.card[data-card-id="74"] {
-  background-image: url("images/cards75/card_74.png");
-}
-
-.card[data-card-id="75"] {
-  background-image: url("images/cards75/card_75.png");
-}
-
-.card[data-card-id="76"] {
-  background-image: url("images/cards75/card_76.png");
-}
-
-.card[data-card-id="77"] {
-  background-image: url("images/cards75/card_77.png");
-}
-
-.card[data-card-id="78"] {
-  background-image: url("images/cards75/card_78.png");
-}
-
-.card[data-card-id="79"] {
-  background-image: url("images/cards75/card_79.png");
-}
-
-.card[data-card-id="80"] {
-  background-image: url("images/cards75/card_80.png");
-}
-
-.card[data-card-id="81"] {
-  background-image: url("images/cards75/card_81.png");
-}
-
-.card[data-card-id="82"] {
-  background-image: url("images/cards75/card_82.png");
-}
-
-.card[data-card-id="83"] {
-  background-image: url("images/cards75/card_83.png");
-}
-
-.card[data-card-id="84"] {
-  background-image: url("images/cards75/card_84.png");
-}
-
-.card[data-card-id="85"] {
-  background-image: url("images/cards75/card_85.png");
-}
-
-.card[data-card-id="86"] {
-  background-image: url("images/cards75/card_86.png");
-}
-
-.card[data-card-id="87"] {
-  background-image: url("images/cards75/card_87.png");
-}
-
-.card[data-card-id="88"] {
-  background-image: url("images/cards75/card_88.png");
-}
-
-.card[data-card-id="89"] {
-  background-image: url("images/cards75/card_89.png");
-}
-
-.card[data-card-id="90"] {
-  background-image: url("images/cards75/card_90.png");
-}
-
-.card[data-card-id="91"] {
-  background-image: url("images/cards75/card_91.png");
-}
-
-.card[data-card-id="92"] {
-  background-image: url("images/cards75/card_92.png");
-}
-
-.card[data-card-id="93"] {
-  background-image: url("images/cards75/card_93.png");
-}
-
-.card[data-card-id="94"] {
-  background-image: url("images/cards75/card_94.png");
-}
-
-.card[data-card-id="95"] {
-  background-image: url("images/cards75/card_95.png");
-}
-
-.card[data-card-id="96"] {
-  background-image: url("images/cards75/card_96.png");
-}
-
-.card[data-card-id="97"] {
-  background-image: url("images/cards75/card_97.png");
-}
-
-.card[data-card-id="98"] {
-  background-image: url("images/cards75/card_98.png");
-}
-
-.card[data-card-id="99"] {
-  background-image: url("images/cards75/card_99.png");
-}
-
-.card[data-card-id="100"] {
-  background-image: url("images/cards75/card_100.png");
-}
-
-.card[data-card-id="101"] {
-  background-image: url("images/cards75/card_101.png");
-}
-
-.card[data-card-id="102"] {
-  background-image: url("images/cards75/card_102.png");
-}
-
-.card[data-card-id="103"] {
-  background-image: url("images/cards75/card_103.png");
-}
-
-.card[data-card-id="104"] {
-  background-image: url("images/cards75/card_104.png");
-}
+.standee_0 { background-image: url(images/tokens75/standee_0.png); }
+.standee_1 { background-image: url(images/tokens75/standee_1.png); }
+.standee_2 { background-image: url(images/tokens75/standee_2.png); }
+.standee_3 { background-image: url(images/tokens75/standee_3.png); }
+.standee_4 { background-image: url(images/tokens75/standee_4.png); }
 
-.card[data-card-id="105"] {
-  background-image: url("images/cards75/card_105.png");
-}
+.medallion_0 { background-image: url(images/tokens75/medallion_0.png); }
+.medallion_1 { background-image: url(images/tokens75/medallion_1.png); }
+.medallion_2 { background-image: url(images/tokens75/medallion_2.png); }
+.medallion_3 { background-image: url(images/tokens75/medallion_3.png); }
+.medallion_4 { background-image: url(images/tokens75/medallion_4.png); }
+.medallion_5 { background-image: url(images/tokens75/medallion_5.png); }
+.medallion_6 { background-image: url(images/tokens75/medallion_6.png); }
+.medallion_7 { background-image: url(images/tokens75/medallion_7.png); }
+.medallion_8 { background-image: url(images/tokens75/medallion_8.png); }
+.medallion_9 { background-image: url(images/tokens75/medallion_9.png); }
 
-.card[data-card-id="106"] {
-  background-image: url("images/cards75/card_106.png");
-}
+.bonus_morale { background-image: url(images/tokens75/bonus_morale_on.png); }
+.bonus_morale.off { background-image: url(images/tokens75/bonus_morale_off.png); }
+.bonus_teamwork { background-image: url(images/tokens75/bonus_teamwork_on.png); }
+.bonus_teamwork.off { background-image: url(images/tokens75/bonus_teamwork_off.png); }
 
-.card[data-card-id="107"] {
-  background-image: url("images/cards75/card_107.png");
-}
+.player.anarchist { background-image: url(images/tokens75/player_anarchist.png); }
+.player.communist { background-image: url(images/tokens75/player_communist.png); }
+.player.moderate { background-image: url(images/tokens75/player_moderate.png); }
+
+.initiative.cw { background-image: url("images/tokens75/initiative_cw.png"); }
+.initiative.ccw { background-image: url("images/tokens75/initiative_ccw.png"); }
+
+.card_1 { background-image: url(images/cards75/card_1.avif); }
+.card_2 { background-image: url(images/cards75/card_2.avif); }
+.card_3 { background-image: url(images/cards75/card_3.avif); }
+.card_4 { background-image: url(images/cards75/card_4.avif); }
+.card_5 { background-image: url(images/cards75/card_5.avif); }
+.card_6 { background-image: url(images/cards75/card_6.avif); }
+.card_7 { background-image: url(images/cards75/card_7.avif); }
+.card_8 { background-image: url(images/cards75/card_8.avif); }
+.card_9 { background-image: url(images/cards75/card_9.avif); }
+.card_10 { background-image: url(images/cards75/card_10.avif); }
+.card_11 { background-image: url(images/cards75/card_11.avif); }
+.card_12 { background-image: url(images/cards75/card_12.avif); }
+.card_13 { background-image: url(images/cards75/card_13.avif); }
+.card_14 { background-image: url(images/cards75/card_14.avif); }
+.card_15 { background-image: url(images/cards75/card_15.avif); }
+.card_16 { background-image: url(images/cards75/card_16.avif); }
+.card_17 { background-image: url(images/cards75/card_17.avif); }
+.card_18 { background-image: url(images/cards75/card_18.avif); }
+.card_19 { background-image: url(images/cards75/card_19.avif); }
+.card_20 { background-image: url(images/cards75/card_20.avif); }
+.card_21 { background-image: url(images/cards75/card_21.avif); }
+.card_22 { background-image: url(images/cards75/card_22.avif); }
+.card_23 { background-image: url(images/cards75/card_23.avif); }
+.card_24 { background-image: url(images/cards75/card_24.avif); }
+.card_25 { background-image: url(images/cards75/card_25.avif); }
+.card_26 { background-image: url(images/cards75/card_26.avif); }
+.card_27 { background-image: url(images/cards75/card_27.avif); }
+.card_28 { background-image: url(images/cards75/card_28.avif); }
+.card_29 { background-image: url(images/cards75/card_29.avif); }
+.card_30 { background-image: url(images/cards75/card_30.avif); }
+.card_31 { background-image: url(images/cards75/card_31.avif); }
+.card_32 { background-image: url(images/cards75/card_32.avif); }
+.card_33 { background-image: url(images/cards75/card_33.avif); }
+.card_34 { background-image: url(images/cards75/card_34.avif); }
+.card_35 { background-image: url(images/cards75/card_35.avif); }
+.card_36 { background-image: url(images/cards75/card_36.avif); }
+.card_37 { background-image: url(images/cards75/card_37.avif); }
+.card_38 { background-image: url(images/cards75/card_38.avif); }
+.card_39 { background-image: url(images/cards75/card_39.avif); }
+.card_40 { background-image: url(images/cards75/card_40.avif); }
+.card_41 { background-image: url(images/cards75/card_41.avif); }
+.card_42 { background-image: url(images/cards75/card_42.avif); }
+.card_43 { background-image: url(images/cards75/card_43.avif); }
+.card_44 { background-image: url(images/cards75/card_44.avif); }
+.card_45 { background-image: url(images/cards75/card_45.avif); }
+.card_46 { background-image: url(images/cards75/card_46.avif); }
+.card_47 { background-image: url(images/cards75/card_47.avif); }
+.card_48 { background-image: url(images/cards75/card_48.avif); }
+.card_49 { background-image: url(images/cards75/card_49.avif); }
+.card_50 { background-image: url(images/cards75/card_50.avif); }
+.card_51 { background-image: url(images/cards75/card_51.avif); }
+.card_52 { background-image: url(images/cards75/card_52.avif); }
+.card_53 { background-image: url(images/cards75/card_53.avif); }
+.card_54 { background-image: url(images/cards75/card_54.avif); }
+.card_55 { background-image: url(images/cards75/card_55.avif); }
+.card_56 { background-image: url(images/cards75/card_56.avif); }
+.card_57 { background-image: url(images/cards75/card_57.avif); }
+.card_58 { background-image: url(images/cards75/card_58.avif); }
+.card_59 { background-image: url(images/cards75/card_59.avif); }
+.card_60 { background-image: url(images/cards75/card_60.avif); }
+.card_61 { background-image: url(images/cards75/card_61.avif); }
+.card_62 { background-image: url(images/cards75/card_62.avif); }
+.card_63 { background-image: url(images/cards75/card_63.avif); }
+.card_64 { background-image: url(images/cards75/card_64.avif); }
+.card_65 { background-image: url(images/cards75/card_65.avif); }
+.card_66 { background-image: url(images/cards75/card_66.avif); }
+.card_67 { background-image: url(images/cards75/card_67.avif); }
+.card_68 { background-image: url(images/cards75/card_68.avif); }
+.card_69 { background-image: url(images/cards75/card_69.avif); }
+.card_70 { background-image: url(images/cards75/card_70.avif); }
+.card_71 { background-image: url(images/cards75/card_71.avif); }
+.card_72 { background-image: url(images/cards75/card_72.avif); }
+.card_73 { background-image: url(images/cards75/card_73.avif); }
+.card_74 { background-image: url(images/cards75/card_74.avif); }
+.card_75 { background-image: url(images/cards75/card_75.avif); }
+.card_76 { background-image: url(images/cards75/card_76.avif); }
+.card_77 { background-image: url(images/cards75/card_77.avif); }
+.card_78 { background-image: url(images/cards75/card_78.avif); }
+.card_79 { background-image: url(images/cards75/card_79.avif); }
+.card_80 { background-image: url(images/cards75/card_80.avif); }
+.card_81 { background-image: url(images/cards75/card_81.avif); }
+.card_82 { background-image: url(images/cards75/card_82.avif); }
+.card_83 { background-image: url(images/cards75/card_83.avif); }
+.card_84 { background-image: url(images/cards75/card_84.avif); }
+.card_85 { background-image: url(images/cards75/card_85.avif); }
+.card_86 { background-image: url(images/cards75/card_86.avif); }
+.card_87 { background-image: url(images/cards75/card_87.avif); }
+.card_88 { background-image: url(images/cards75/card_88.avif); }
+.card_89 { background-image: url(images/cards75/card_89.avif); }
+.card_90 { background-image: url(images/cards75/card_90.avif); }
+.card_91 { background-image: url(images/cards75/card_91.avif); }
+.card_92 { background-image: url(images/cards75/card_92.avif); }
+.card_93 { background-image: url(images/cards75/card_93.avif); }
+.card_94 { background-image: url(images/cards75/card_94.avif); }
+.card_95 { background-image: url(images/cards75/card_95.avif); }
+.card_96 { background-image: url(images/cards75/card_96.avif); }
+.card_97 { background-image: url(images/cards75/card_97.avif); }
+.card_98 { background-image: url(images/cards75/card_98.avif); }
+.card_99 { background-image: url(images/cards75/card_99.avif); }
+.card_100 { background-image: url(images/cards75/card_100.avif); }
+.card_101 { background-image: url(images/cards75/card_101.avif); }
+.card_102 { background-image: url(images/cards75/card_102.avif); }
+.card_103 { background-image: url(images/cards75/card_103.avif); }
+.card_104 { background-image: url(images/cards75/card_104.avif); }
+.card_105 { background-image: url(images/cards75/card_105.avif); }
+.card_106 { background-image: url(images/cards75/card_106.avif); }
+.card_107 { background-image: url(images/cards75/card_107.avif); }
+.card_108 { background-image: url(images/cards75/card_108.avif); }
+.card_109 { background-image: url(images/cards75/card_109.avif); }
+.card_110 { background-image: url(images/cards75/card_110.avif); }
+.card_111 { background-image: url(images/cards75/card_111.avif); }
+.card_112 { background-image: url(images/cards75/card_112.avif); }
+.card_113 { background-image: url(images/cards75/card_113.avif); }
+.card_114 { background-image: url(images/cards75/card_114.avif); }
+.card_115 { background-image: url(images/cards75/card_115.avif); }
+.card_116 { background-image: url(images/cards75/card_116.avif); }
+.card_117 { background-image: url(images/cards75/card_117.avif); }
+.card_118 { background-image: url(images/cards75/card_118.avif); }
+.card_119 { background-image: url(images/cards75/card_119.avif); }
+.card_120 { background-image: url(images/cards75/card_120.avif); }
 
-.card[data-card-id="108"] {
-  background-image: url("images/cards75/card_108.png");
-}
diff --git a/play2.js b/play2.js
index 184390c..17e9ac0 100644
--- a/play2.js
+++ b/play2.js
@@ -11,6 +11,7 @@ const ui = {
 	},
 
 	// spaces
+	tracks_x: [],
 	tracks: [],
 	fronts: [],
 
@@ -80,6 +81,7 @@ function build_track(t, action_name, track_name, a, b) {
 	let e
 
 	ui.tracks[t] = []
+	ui.tracks_x[t] = []
 	for (let s = a; s <= b; ++s) {
 		const bm = t * 11 + s
 
@@ -90,12 +92,13 @@ function build_track(t, action_name, track_name, a, b) {
 		register_action(e, "blank_marker", bm)
 		ui.map.appendChild(e)
 
+		ui.tracks_x[t][s] = Math.round(x) + 4 + "px"
 		e = ui.tracks[t][s] = document.createElement("div")
 		e.className = "track"
 		e.style.top = y + "px"
-		e.style.left = (x|0) + "px"
+		e.style.left = Math.round(x) + "px"
 		register_action(e, action_name, s);
-		//ui.map.appendChild(e)
+		ui.map.appendChild(e)
 
 		x += 60.5
 	}
@@ -103,10 +106,9 @@ function build_track(t, action_name, track_name, a, b) {
 	e = (ui.standees[t] = document.createElement("div"))
 	e.className = "token standee standee_" + t
 	e.style.top = y - 10 + "px"
-	e.style.left = boxes[track_name][0] + 5 + "px"
+	e.style.left = boxes[track_name][0] + 4 + "px"
 	register_action(e, "standee", t)
 	ui.map.appendChild(ui.standees[t])
-
 }
 
 function build_bonus(b, box_name, cname) {
@@ -119,7 +121,7 @@ function build_bonus(b, box_name, cname) {
 	ui.map.appendChild(e)
 }
 
-function build_front(i, box_name) {
+function build_front(i, action_id, box_name) {
 	let e = ui.fronts[i] = document.createElement("div")
 	let [x, y, w, h] = boxes[box_name]
 	e.className = "front"
@@ -127,17 +129,13 @@ function build_front(i, box_name) {
 	e.style.left = Math.round(x-3) + "px"
 	e.style.width = Math.round(w - 6) + "px"
 	e.style.height = Math.round(h - 6) + "px"
-	register_action(e, "front", i)
+	register_action(e, "front", action_id)
 	ui.map.appendChild(e)
-
-	for (let i = 0; i < 5; ++i) {
-		let m = document.createElement("div")
-		m.className = "token square front_plus"
-		e.appendChild(m)
-	}
 }
 
 function on_init() {
+	var i, e
+
 	if (on_init_once)
 		return
 	on_init_once = true
@@ -148,16 +146,16 @@ function on_init() {
 	build_track(SOVIET_SUPPORT, "tr_soviet_support", "SovietSupport", 0, 10)
 	build_track(FOREIGN_AID, "tr_foreign_aid", "ForeignAid", 0, 10)
 
-	build_bonus(0, "Bonus1", "bonus_morale on")
-	build_bonus(1, "Bonus2", "bonus_teamwork off")
+	build_bonus(0, "Bonus1", "bonus_morale")
+	build_bonus(1, "Bonus2", "bonus_teamwork")
 
-	build_front(0, "Aragon")
-	build_front(1, "Madrid")
-	build_front(2, "Northern")
-	build_front(3, "Southern")
+	build_front(0, "a", "Aragon")
+	build_front(1, "m", "Madrid")
+	build_front(2, "n", "Northern")
+	build_front(3, "s", "Southern")
 
 	ui.medallion_container = []
-	for (let i = 0; i < 5; ++i) {
+	for (i = 0; i < 5; ++i) {
 		ui.medallion_container[i] = document.createElement("div")
 		ui.medallion_container[i].classList = "medallion_container"
 		ui.medallion_container[i].style.top = boxes["Medallion"+(i+1)][1] + "px"
@@ -165,43 +163,40 @@ function on_init() {
 		ui.map.appendChild(ui.medallion_container[i])
 	}
 
-	for (let m = 0; m < 9; ++m) {
-		let e = (ui.medallions[m] = document.createElement("div"))
-		e.className = "token medallion medallion_" + m
-		register_action(e, "medallion", m)
-		if (m < 5)
-			ui.medallion_container[m].appendChild(ui.medallions[m])
+	ui.glory_container = []
+	for (i = 0; i < 4; ++i) {
+		e = (ui.glory_container[i] = document.createElement("div"))
+		e.className = "glory_container"
+		e.style.left = boxes["Glory" + (i+1)][0] + "px"
+		e.style.top = boxes["Glory" + (i+1)][1] + "px"
+		ui.map.appendChild(e)
+	}
+
+	// TODO: current year deck
+
+	ui.current_events = []
+	for (i = 0; i < 4; ++i) {
+		e = (ui.current_events[i] = document.createElement("div"))
+		e.className = "current_events"
+		e.style.left = boxes["CurrentEvent" + (i+1)][0] - 10 + "px"
+		e.style.top = boxes["CurrentEvent" + (i+1)][1] - 10 + "px"
+		ui.map.appendChild(e)
 	}
 
-	for (let c = 1; c < CARD_COUNT; ++c) {
-		let e = (ui.cards[c] = document.createElement("div"))
-		e.className = "card"
-		e.setAttribute("data-card-id", "" + data.cards[c].id)
-		register_action(e, "card", c)
+	for (i = 0; i < 9; ++i) {
+		e = (ui.medallions[i] = document.createElement("div"))
+		e.className = "token medallion medallion_" + i
+		register_action(e, "medallion", i)
 	}
 
-	for (let g = 0; g < GLORY_COUNT; ++g) {
-		let e = (ui.glory[g] = document.createElement("div"))
-		e.className = "token player"
-		ui.glory_container.appendChild(ui.glory[g])
-		e.style.left = LAYOUT_GLORY[g][0] + "px"
-		e.style.top = LAYOUT_GLORY[g][1] + "px"
+	for (i = 1; i <= 120; ++i) {
+		e = (ui.cards[i] = document.createElement("div"))
+		e.className = "card card_" + i
+		register_action(e, "card", i)
 	}
 
-	let e = (ui.initiative_token = document.createElement("div"))
+	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) => {
-			let e = (ui.tokens_on_front[front.id][faction_id] = document.createElement("div"))
-			e.className = "faction_token"
-			e.setAttribute("data-faction-id", faction_id)
-		})
-	})
-	Object.keys(ui.fronts).forEach((front_id) => {
-		register_action(ui.fronts[front_id].front, "front", front_id)
-	})
 }
 
 function place_cards(e, cards) {
@@ -215,9 +210,107 @@ function place_cards(e, cards) {
 	}
 }
 
+function update_front(container, front) {
+	var i, n, e, cn
+	container.replaceChildren()
+
+	if (front.value < 0) {
+		n = -front.value
+		cn = "token front_minus"
+	} else {
+		n = -front.value
+		cn = "token front_plus"
+	}
+	for (i = 0; i < n; ++i) {
+		let e = document.createElement("div")
+		e.className = cn
+		container.appendChild(e)
+	}
+}
+
 function on_update() {
-	console.log("on_update", view)
+	var i, e
+
+	console.log("on_update", JSON.stringify(view,))
 	on_init()
+
+	place_cards(ui.hand, view.hand)
+	place_cards(ui.tableaus.a, [ 115, ...view.tableaus.a])
+	place_cards(ui.tableaus.c, [ 116, ...view.tableaus.c])
+	place_cards(ui.tableaus.m, [ 117, ...view.tableaus.m])
+
+	// TODO: current year deck
+	ui.bonuses[0].classList.toggle("off", !view.bonuses[0])
+	ui.bonuses[1].classList.toggle("off", !view.bonuses[1])
+
+	for (i = 0; i < 4; ++i) {
+		if (i < view.current_events.length)
+			place_cards(ui.current_events[i], [view.current_events[i]])
+		else
+			place_cards(ui.current_events[i], [])
+	}
+
+	for (i = 0; i < 5; ++i)
+		ui.standees[i].style.left = ui.tracks_x[i][view.tracks[i]]
+
+	for (i = 0; i < 5; ++i) {
+		ui.medallion_container[i].replaceChildren()
+		if (i < view.medallions.pool.length)
+			ui.medallion_container[i].appendChild(ui.medallions[i])
+	}
+		
+	update_front(ui.fronts[0], view.fronts.a)
+	update_front(ui.fronts[1], view.fronts.m)
+	update_front(ui.fronts[2], view.fronts.n)
+	update_front(ui.fronts[3], view.fronts.s)
+
+	action_button("add_to_front", "+1 to a Front")
+	action_button("d_liberty", "Decrease Liberty")
+	action_button("soviet_support", "Soviet Support")
+	action_button("collectivization", "Collectivization")
+	action_button("d_collectivization", "Decrease Collectivization")
+	action_button("d_foreign_aid", "Decrease Foreign Aid")
+	action_button("d_government", "Decrease Government")
+	action_button("d_soviet_support", "Decrease Soviet Support")
+	action_button("foreign_aid", "Foreign Aid")
+	action_button("government", "Government")
+	action_button("liberty", "Liberty")
+	action_button("government_to_center", "Government towards center")
+	action_button("teamwork_on", "Teamwork Bonus On")
+	action_button("Anarchist", "Anarchist")
+	action_button("Communist", "Communist")
+	action_button("Moderate", "Moderate")
+	action_button("gain_hp", "Gain Hero Points")
+	action_button("lose_hp", "Lose Hero Points")
+	action_button("draw_card", "Draw a card")
+	action_button("draw_cards", "Draw cards")
+	action_button("play_to_tableau", "Play card to Tableau")
+	action_button("play_for_event", "Play card for Event")
+	action_button("use_ap", "Use Action Points")
+	action_button("use_morale_bonus", "Use Morale Bonus")
+	action_button("move_track", "Move a Track")
+	action_button("turn_on_bonus", "Turn on a Bonus")
+	action_button("add_glory", "Add to Bag of Glory")
+	action_button("draw_glory", "Draw from Bag of Glory")
+	action_button("up", "Up")
+	action_button("down", "Down")
+	action_button("next", "Next")
+	action_button("remove_blank_marker", "Remove Blank marker")
+	action_button("confirm", "Confirm")
+	action_button("yes", "Yes")
+	action_button("no", "No")
+	action_button("skip", "Skip")
+	action_button("spend_hp", "Spend Hero Points")
+	action_button("use_momentum", "Play second card (Momentum)")
+	action_button("done", "Done")
+	action_button("end_turn", "End turn")
+	action_button("undo", "Undo")
+
+	for (let e of action_register)
+		e.classList.toggle("action", is_action(e.my_action, e.my_id))
+}
+
+function on_update_OLD() {
 	for (let key of Object.keys(view.hero_points)) {
 		ui.roles[key].hero_points.replaceChildren(`Hero Points: ${view.hero_points[key]}`)
 	}
@@ -296,46 +389,5 @@ function on_update() {
 		e.classList.toggle("action", is_action(e.my_action, e.my_id))
 	ui.year.replaceChildren(`Year ${view.year}`)
 
-	action_button("add_to_front", "+1 to a Front")
-	action_button("d_liberty", "Decrease Liberty")
-	action_button("soviet_support", "Soviet Support")
-	action_button("collectivization", "Collectivization")
-	action_button("d_collectivization", "Decrease Collectivization")
-	action_button("d_foreign_aid", "Decrease Foreign Aid")
-	action_button("d_government", "Decrease Government")
-	action_button("d_soviet_support", "Decrease Soviet Support")
-	action_button("foreign_aid", "Foreign Aid")
-	action_button("government", "Government")
-	action_button("liberty", "Liberty")
-	action_button("government_to_center", "Government towards center")
-	action_button("teamwork_on", "Teamwork Bonus On")
-	action_button("Anarchist", "Anarchist")
-	action_button("Communist", "Communist")
-	action_button("Moderate", "Moderate")
-	action_button("gain_hp", "Gain Hero Points")
-	action_button("lose_hp", "Lose Hero Points")
-	action_button("draw_card", "Draw a card")
-	action_button("draw_cards", "Draw cards")
-	action_button("play_to_tableau", "Play card to Tableau")
-	action_button("play_for_event", "Play card for Event")
-	action_button("use_ap", "Use Action Points")
-	action_button("use_morale_bonus", "Use Morale Bonus")
-	action_button("move_track", "Move a Track")
-	action_button("turn_on_bonus", "Turn on a Bonus")
-	action_button("add_glory", "Add to Bag of Glory")
-	action_button("draw_glory", "Draw from Bag of Glory")
-	action_button("up", "Up")
-	action_button("down", "Down")
-	action_button("next", "Next")
-	action_button("remove_blank_marker", "Remove Blank marker")
-	action_button("confirm", "Confirm")
-	action_button("yes", "Yes")
-	action_button("no", "No")
-	action_button("skip", "Skip")
-	action_button("spend_hp", "Spend Hero Points")
-	action_button("use_momentum", "Play second card (Momentum)")
-	action_button("done", "Done")
-	action_button("end_turn", "End turn")
-	action_button("undo", "Undo")
 
 }
diff --git a/rules.js b/rules.js
index 4ede666..f2e83e8 100644
--- a/rules.js
+++ b/rules.js
@@ -343,30 +343,19 @@ function game_view(state, current) {
     const faction = current === OBSERVER ? null : player_faction_map[current];
     view = {
         active: game.active,
-        engine: game.engine,
         log: game.log,
         prompt: null,
-        state: game.state,
-        bag_of_glory: game.bag_of_glory,
         bag_of_glory_count: game.bag_of_glory.length,
         bonuses: game.bonuses,
-        current,
-        current_player_faction: faction,
         current_events: game.current_events,
         first_player: game.first_player,
         fronts: game.fronts,
         glory: game.glory,
         hand: faction === null ? [] : game.hands[faction],
-        discard: faction === null ? [] : game.discard[faction],
-        trash: faction === null ? [] : game.trash[faction],
-        deck: faction === null ? [] : list_deck(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_in_game(faction).map((id) => faction_player_map[id]),
         selectable_cards: game.selectable_cards,
         selected_cards: current === OBSERVER ? [] : game.selected_cards[faction],
         tableaus: game.tableaus,
diff --git a/rules.ts b/rules.ts
index 98b10b9..2775617 100644
--- a/rules.ts
+++ b/rules.ts
@@ -513,31 +513,33 @@ function game_view(state: Game, current: Player | 'Observer') {
 
   view = {
     active: game.active,
-    engine: game.engine, // TODO: remove
+    // engine: game.engine, // TODO: remove
     log: game.log,
     prompt: null,
-    state: game.state,
-    bag_of_glory: game.bag_of_glory,
+    // state: game.state,
+    // bag_of_glory: game.bag_of_glory,
     bag_of_glory_count: game.bag_of_glory.length,
     bonuses: game.bonuses,
-    current,
-    current_player_faction: faction,
+    // current,
+    // current_player_faction: faction,
     current_events: game.current_events,
     first_player: game.first_player,
     fronts: game.fronts,
     glory: game.glory,
     hand: faction === null ? [] : game.hands[faction],
-    discard: faction === null ? [] : game.discard[faction],
-    trash: faction === null ? [] : game.trash[faction],
-    deck: faction === null ? [] : list_deck(faction),
+    // discard: faction === null ? [] : game.discard[faction],
+    // trash: faction === null ? [] : game.trash[faction],
+    // deck: faction === null ? [] : list_deck(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_in_game(faction).map((id) => faction_player_map[id]),
+	*/
     selectable_cards: game.selectable_cards,
     selected_cards: current === OBSERVER ? [] : game.selected_cards[faction],
     tableaus: game.tableaus,