Improve map saturation and readability

Thrillberg · Oct 14, 2023 · b45098c · b45098c
1 parent a08e5e0
commit b45098c
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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 },