refactor info card

src/pages/AnnoExpansions.vue

@@ -11,7 +11,10 @@
         class="masonry-col item"
         :col-break="false"
       >
-        <InfoCard :item-data="itemDataExpansions"></InfoCard>
+        <InfoCard
+          :item-data="itemDataExpansions"
+          :item-world-data="worldItemDataExpansions"
+        ></InfoCard>
       </ChainTiers>
       <ChainTiers
         v-for="tier in productionChainsExpansions"
@@ -39,7 +42,10 @@
 import { productionChainsExpansions } from './data/production-chains-expansions';
 
 // Info Card Data
-import { itemDataExpansions } from 'src/pages/data/info-card';
+import {
+  itemDataExpansions,
+  worldItemDataExpansions
+} from 'src/pages/data/info-card';
 
 // Mermaid
 import { initialiseMermaid } from 'composables/mermaid';

src/pages/data/info-card.ts

@@ -2,35 +2,7 @@ import * as icons from './icons';
 import fullChainMultiplierIcon from 'assets/productionChainMultiplier.svg';
 import { InfoCardItem, InfoCardWorldItem } from './models';
 
-export const commonWorldItemData: InfoCardWorldItem[] = [
+export const commonItemData: InfoCardItem[] = [
-  {
-    id: 'gold',
-    icon: icons.goldOreIcon,
-    textPre: 'Gold mines use New World',
-    textPost: 'production rates.',
-    worldIcon: icons.newWorldIcon
-  }
-];
-
-export const worldItemDataBase: InfoCardWorldItem[] = [
-  {
-    id: 'furs',
-    icon: icons.fursIcon,
-    textPre: 'Furs use Old World',
-    textPost: 'production rates.',
-    worldIcon: icons.oldWorldIcon
-  },
-  {
-    id: 'clay',
-    icon: icons.clayIcon,
-    textPre: 'Represents a Clay Mine. A clay collector includes Enbesa',
-    textPost: 'icon.',
-    worldIcon: icons.enbesaIcon
-  },
-  ...commonWorldItemData
-];
-
-export const itemDataBase: InfoCardItem[] = [
   {
     id: 'charcoal',
     icon: icons.charcoalKilnIcon,
@@ -50,12 +22,39 @@ export const itemDataBase: InfoCardItem[] = [
   }
 ];
 
-export const itemDataExpansions: InfoCardItem[] = [
+const commonWorldItemData: InfoCardWorldItem[] = [
   {
-    id: 'fullChain',
+    id: 'gold',
-    icon: fullChainMultiplierIcon,
+    icon: icons.goldOreIcon,
-    text: 'Multiplier for a full chain. To scale chain to 100%:',
+    textPre: 'Gold mines use New World',
-    additionalText:
+    textPost: 'production rates.',
-      'multiply together number * efficiency * multiplier for each building in the chain.'
+    worldIcon: icons.newWorldIcon
   }
 ];
+
+export const itemDataBase: InfoCardItem[] = [...commonItemData];
+
+export const worldItemDataBase: InfoCardWorldItem[] = [
+  ...commonWorldItemData,
+  {
+    id: 'furs',
+    icon: icons.fursIcon,
+    textPre: 'Furs use Old World',
+    textPost: 'production rates.',
+    worldIcon: icons.oldWorldIcon
+  },
+  {
+    id: 'clay',
+    icon: icons.clayIcon,
+    textPre: 'Enbesa',
+    textPost:
+      ' production chains use Clay Collectors. All other chains use Clay Mines.',
+    worldIcon: icons.enbesaIcon
+  }
+];
+
+export const itemDataExpansions: InfoCardItem[] = [...commonItemData];
+
+export const worldItemDataExpansions: InfoCardWorldItem[] = [
+  ...commonWorldItemData
+];

src/pages/data/production-chains-base.ts

@@ -46,6 +46,54 @@ export const productionChainsBase: TieredProductionChain[] = [
       }
     ]
   },
+  {
+    colBreak: false,
+    tierName: 'Fuel | Silo',
+    productionChains: [
+      {
+        productionChain: 'tractorGrain',
+        mermaidDefinition: endent`
+        flowchart LR
+        TractorGrain(<span class='icon-flex-row'><img src='${icons.grainIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.tractorIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        TractorGrain --> Grain
+        `
+      },
+      {
+        productionChain: 'siloPig',
+        mermaidDefinition: endent`
+        flowchart LR
+        SiloPig(<span class='icon-flex-row'><img src='${icons.pigsIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.siloIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
+        Pig(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>2.66</span>)
+        SiloPig --> Pig
+        `
+      },
+      {
+        productionChain: 'tractor',
+        mermaidDefinition: endent`
+        flowchart LR
+        OilWell(<img src='${icons.oilWellIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Fuel(<img src='${icons.fuelIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Tractor(<img src='${icons.tractorIcon}' class='icon-size' /><span class='ratio-count'>20</span>)
+        OilWell --> Fuel --> Tractor
+        `
+      },
+      {
+        productionChain: 'silos',
+        mermaidDefinition: endent`
+        flowchart TB
+        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Teff(<img src='${icons.teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Silo(<img src='${icons.siloIcon}' class='icon-size' /><span class='ratio-count'>5</span>)
+        Grain --> Silo
+        Corn --> Silo
+        Teff --> Silo
+        `
+      }
+    ]
+  },
+
   {
     colBreak: false,
     tierName: 'Electricity',
@@ -546,7 +594,7 @@ export const productionChainsBase: TieredProductionChain[] = [
         chainMultiplier: '2',
         mermaidDefinition: endent`
         flowchart LR
-        Clay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
+        Clay(<span class='icon-flex-row icon-regional-container'><img src='${icons.enbesaIcon}' class='icon-regional' /><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>50%</span><span class='ratio-count'>1</span></span></span>)
         Indigo(<img src='${icons.indigoIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
         Ceramics(<img src='${icons.ceramicsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Clay & Indigo --> Ceramics
@@ -583,7 +631,7 @@ export const productionChainsBase: TieredProductionChain[] = [
         chainMultiplier: '6',
         mermaidDefinition: endent`
         flowchart LR
-        Clay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>16%</span><span class='ratio-count'>1</span></span></span>)
+        Clay(<span class='icon-flex-row icon-regional-container'><img src='${icons.enbesaIcon}' class='icon-regional' /><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>16%</span><span class='ratio-count'>1</span></span></span>)
         Tobacco(<span class='icon-flex-row'><img src='${icons.tobaccoIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>2</span></span></span>)
         Pipes(<img src='${icons.pipesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Clay & Tobacco --> Pipes
@@ -663,31 +711,7 @@ export const productionChainsBase: TieredProductionChain[] = [
       }
     ]
   },
-  {
+  { colBreak: true, tierName: 'blank', productionChains: [] },
-    colBreak: false,
-    tierName: 'Sails',
-    productionChains: [
-      {
-        productionChain: 'oldWorldSails',
-        mermaidDefinition: endent`
-        flowchart LR
-        Wool(<img src='${icons.woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Sailmakers(<img src='${icons.sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Wool --> Sailmakers
-        `
-      },
-      {
-        productionChain: 'newWorldSails',
-        mermaidDefinition: endent`
-        flowchart LR
-        Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        CottonMill(<img src='${icons.cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Sailmakers(<img src='${icons.sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Cotton --> CottonMill --> Sailmakers
-        `
-      }
-    ]
-  },
   {
     colBreak: false,
     tierName: 'Weapons',
@@ -850,5 +874,30 @@ export const productionChainsBase: TieredProductionChain[] = [
         `
       }
     ]
+  },
+  {
+    colBreak: false,
+    tierName: 'Sails',
+    productionChains: [
+      {
+        productionChain: 'oldWorldSails',
+        mermaidDefinition: endent`
+        flowchart LR
+        Wool(<img src='${icons.woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Sailmakers(<img src='${icons.sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Wool --> Sailmakers
+        `
+      },
+      {
+        productionChain: 'newWorldSails',
+        mermaidDefinition: endent`
+        flowchart LR
+        Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        CottonMill(<img src='${icons.cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Sailmakers(<img src='${icons.sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Cotton --> CottonMill --> Sailmakers
+        `
+      }
+    ]
   }
 ];

src/pages/data/production-chains-expansions.ts

@@ -3,59 +3,6 @@ import { TieredProductionChain } from './models';
 import * as icons from './icons';
 
 export const productionChainsExpansions: TieredProductionChain[] = [
-  {
-    colBreak: false,
-    tierName: 'Region Ratios',
-    productionChains: [
-      {
-        productionChain: 'tractorGrain',
-        mermaidDefinition: endent`
-        flowchart LR
-        TractorGrain(<span class='icon-flex-row'><img src='${icons.grainIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.tractorIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
-        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
-        TractorGrain --> Grain
-        `
-      },
-      {
-        productionChain: 'siloPig',
-        mermaidDefinition: endent`
-        flowchart LR
-        SiloPig(<span class='icon-flex-row'><img src='${icons.pigsIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.siloIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
-        Pig(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>2.66</span>)
-        SiloPig --> Pig
-        `
-      }
-    ]
-  },
-  {
-    colBreak: false,
-    tierName: 'Fuel | Silo',
-    productionChains: [
-      {
-        productionChain: 'tractor',
-        mermaidDefinition: endent`
-        flowchart LR
-        OilWell(<img src='${icons.oilWellIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Fuel(<img src='${icons.fuelIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Tractor(<img src='${icons.tractorIcon}' class='icon-size' /><span class='ratio-count'>20</span>)
-        OilWell --> Fuel --> Tractor
-        `
-      },
-      {
-        productionChain: 'silos',
-        mermaidDefinition: endent`
-        flowchart TB
-        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Teff(<img src='${icons.teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Silo(<img src='${icons.siloIcon}' class='icon-size' /><span class='ratio-count'>5</span>)
-        Grain --> Silo
-        Corn --> Silo
-        Teff --> Silo
-        `
-      }
-    ]
-  },
   {
     colBreak: false,
     tierName: 'Chemical Plant',