From 575704624d3e5bd5b6acc755e7c83e966803057c Mon Sep 17 00:00:00 2001
From: Eric Tillberg <Thrillberg@users.noreply.github.com>
Date: Sat, 14 Oct 2023 13:12:11 -0400
Subject: [PATCH] Improve map saturation and readability

---
 app/javascript/src/components/Board.vue      |  3 +-
 app/javascript/src/components/Province.vue   | 63 +++++++++++++++++++-
 app/javascript/src/components/flags/Flag.vue | 10 ----
 cypress/e2e/standard_game.cy.js              |  6 +-
 4 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/app/javascript/src/components/Board.vue b/app/javascript/src/components/Board.vue
index 4daf1642..16d963c5 100644
--- a/app/javascript/src/components/Board.vue
+++ b/app/javascript/src/components/Board.vue
@@ -136,12 +136,11 @@ export default {
                   onForeignLand = true;
                 }
               }
-              const friendly = provinceUnits.friendly && onForeignLand;
               let armyNation = nation;
               if (armyNation === 'CN' && this.game.baseGame === 'imperialAsia') {
                 armyNation = 'CNAsia';
               }
-              armies.push({ nation: armyNation, friendly });
+              armies.push({ nation: armyNation, friendly: provinceUnits.friendly, onForeignLand });
             }
           }
         }
diff --git a/app/javascript/src/components/Province.vue b/app/javascript/src/components/Province.vue
index 1d30979a..c4c3ceff 100644
--- a/app/javascript/src/components/Province.vue
+++ b/app/javascript/src/components/Province.vue
@@ -5,7 +5,10 @@
     @mouseover="showFactory()"
     @mouseleave="hideFactory()"
   >
-    <component :is="province" />
+    <component
+      :is="province"
+      :style="!isValid ? {'filter': 'saturate(0.6)'} : {}"
+    />
     <text
       v-if="mounted && !isImpassable"
       :font-size="fontSize"
@@ -66,16 +69,60 @@
       width="21"
       height="11"
     />
+    <circle
+      v-for="(nation, index) in availableFleets()"
+      :key="nation + index + 'FBox'"
+      r="6.75"
+      :cx="flagX(index) + (adjustments?.flagFleetX || 0) + 10.5"
+      :cy="flagY(index) + (adjustments?.flagFleetY || 0) + 15.5"
+      fill="none"
+      :fill-opacity="0"
+      :stroke="nationColor ? nationColor : getNationColor()"
+      :stroke-width="1.75"
+    />
+    <circle
+      v-for="(nation, index) in availableFleets()"
+      :key="nation + index + 'FOutline'"
+      r="7.75"
+      :cx="flagX(index) + (adjustments?.flagFleetX || 0) + 10.5"
+      :cy="flagY(index) + (adjustments?.flagFleetY || 0) + 15.5"
+      fill="none"
+      :fill-opacity="0"
+      stroke="black"
+      :stroke-width="0.5"
+    />
     <Flag
       v-for="(army, index) in availableArmies()"
       :key="army.nation + index + 'A'"
       :nation="army.nation"
-      :friendly="army.friendly"
       :x="flagX(index) + (adjustments?.flagArmyX || 0)"
       :y="flagY(index) + (adjustments?.flagArmyY || 0)"
       width="13"
       height="8"
     />
+    <rect
+      v-for="(army, index) in availableArmies()"
+      :key="army.nation + index + 'ABox'"
+      width="13.5"
+      height="10"
+      :x="flagX(index) + (adjustments?.flagArmyX || 0) - 0.5"
+      :y="flagY(index) + (adjustments?.flagArmyY || 0) - 1"
+      fill="none"
+      :fill-opacity="0"
+      :stroke="nationColor ? nationColor : getNationColor(army)"
+      :stroke-width="1.75"
+    />
+    <rect
+      v-for="(army, index) in availableArmies()"
+      :key="army.nation + index + 'AOutline'"
+      width="15.5"
+      height="12"
+      :x="flagX(index) + (adjustments?.flagArmyX || 0) - 1.5"
+      :y="flagY(index) + (adjustments?.flagArmyY || 0) - 2"
+      fill="none"
+      stroke="black"
+      :stroke-width="0.5"
+    />
     <Flag
       v-for="(army, index) in importingArmies"
       :key="army.nation + index + 'A'"
@@ -230,6 +277,18 @@ export default {
     hideFactory() {
       this.tempFactory = '';
     },
+    getNationColor(army) {
+      // A hacky way to get the province's color when it is a home province of a nation
+      if (army?.friendly && army?.onForeignLand) {
+        return '#32CD32';
+      }
+
+      if (army?.onForeignLand) {
+        return 'red';
+      }
+
+      return this.$refs.province.children[0].children[0].attributes.fill.value;
+    },
   },
 };
 </script>
diff --git a/app/javascript/src/components/flags/Flag.vue b/app/javascript/src/components/flags/Flag.vue
index 8b0e5751..e2086980 100644
--- a/app/javascript/src/components/flags/Flag.vue
+++ b/app/javascript/src/components/flags/Flag.vue
@@ -10,15 +10,6 @@
       :fleet="fleet"
       :filter="activeFilter"
     />
-    <rect
-      v-if="friendly"
-      :x="x + 3"
-      :y="y + 2"
-      :width="7"
-      :height="4"
-      fill="white"
-      stroke="none"
-    />
   </g>
 </template>
 
@@ -32,7 +23,6 @@ export default {
     fleet: Boolean,
     height: { type: String, default: '' },
     nation: { type: String, default: '' },
-    friendly: Boolean,
     transform: { type: String, default: '' },
     width: { type: String, default: '' },
     x: { type: Number, default: 0 },
diff --git a/cypress/e2e/standard_game.cy.js b/cypress/e2e/standard_game.cy.js
index 6d6ceef3..ba2781ce 100644
--- a/cypress/e2e/standard_game.cy.js
+++ b/cypress/e2e/standard_game.cy.js
@@ -172,10 +172,10 @@ describe('Standard game', () => {
     cy.contains('Berlin').next().click();
     cy.contains('Munich').next().click();
     cy.contains('Fight').click();
-    cy.contains('Holland').click();
-    cy.contains('Belgium').click();
+    cy.contains('Holland').click({ force: true });
+    cy.contains('Belgium').click({ force: true });
     cy.contains('Fight').click();
-    cy.contains('Denmark').click();
+    cy.contains('Denmark').click({ force: true });
     cy.contains('Sweden').click();
     // RU
     cy.get('#investor').click();