From d67599e83cbfe8b07fb8ce778ef762f9b960940d Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Wed, 5 Oct 2022 02:45:50 +0100
Subject: [PATCH] initial info card move

---
 src/components/InfoCard/InfoCardItemWorld.vue |  7 +++---
 src/components/ProductionChain.vue            | 12 +++++++++
 src/pages/data/info-card.ts                   | 25 ++++++++++++-------
 src/pages/data/models.ts                      |  3 ++-
 src/pages/data/production-chains-base.ts      |  2 +-
 .../data/production-chains-expansions.ts      |  2 +-
 6 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/components/InfoCard/InfoCardItemWorld.vue b/src/components/InfoCard/InfoCardItemWorld.vue
index b699916..3aece8b 100644
--- a/src/components/InfoCard/InfoCardItemWorld.vue
+++ b/src/components/InfoCard/InfoCardItemWorld.vue
@@ -5,9 +5,9 @@
     </q-item-section>
     <q-item-section>
       <span>
-        {{ text }}
+        {{ textPre }}
         <q-img :src="worldIcon" class="info-small-icon"></q-img>
-        production rates.
+        {{ textPost }}
       </span>
     </q-item-section>
   </q-item>
@@ -18,6 +18,7 @@
 defineProps<{
   icon: string;
   worldIcon: string;
-  text: string;
+  textPre: string;
+  textPost: string;
 }>();
 </script>
diff --git a/src/components/ProductionChain.vue b/src/components/ProductionChain.vue
index 2647c1b..2f7f9d8 100644
--- a/src/components/ProductionChain.vue
+++ b/src/components/ProductionChain.vue
@@ -68,6 +68,18 @@ watchEffect(() => {
   flex-direction: row;
 }
 
+.icon-regional-container {
+  margin-left: 45px;
+}
+
+.icon-regional {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  left: 0px;
+  top: 32px;
+}
+
 .icon-flex-col {
   display: flex;
   flex-direction: column;
diff --git a/src/pages/data/info-card.ts b/src/pages/data/info-card.ts
index b6a28b9..20e6bf1 100644
--- a/src/pages/data/info-card.ts
+++ b/src/pages/data/info-card.ts
@@ -2,25 +2,32 @@ import * as icons from './icons';
 import fullChainMultiplierIcon from 'assets/productionChainMultiplier.svg';
 import { InfoCardItem, InfoCardWorldItem } from './models';
 
+export const commonWorldItemData: InfoCardWorldItem[] = [
+  {
+    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,
-    text: 'Furs use Old World',
+    textPre: 'Furs use Old World',
+    textPost: 'production rates.',
     worldIcon: icons.oldWorldIcon
   },
   {
     id: 'clay',
     icon: icons.clayIcon,
-    text: 'Clay uses Old World',
-    worldIcon: icons.oldWorldIcon
+    textPre: 'Represents a Clay Mine. A clay collector includes Enbesa',
+    textPost: 'icon.',
+    worldIcon: icons.enbesaIcon
   },
-  {
-    id: 'gold',
-    icon: icons.goldOreIcon,
-    text: 'Gold mines use New World',
-    worldIcon: icons.newWorldIcon
-  }
+  ...commonWorldItemData
 ];
 
 export const itemDataBase: InfoCardItem[] = [
diff --git a/src/pages/data/models.ts b/src/pages/data/models.ts
index 46c6801..c648ca6 100644
--- a/src/pages/data/models.ts
+++ b/src/pages/data/models.ts
@@ -20,6 +20,7 @@ export interface InfoCardItem {
 export interface InfoCardWorldItem {
   id: string;
   icon: string;
-  text: string;
+  textPre: string;
+  textPost: string;
   worldIcon: string;
 }
diff --git a/src/pages/data/production-chains-base.ts b/src/pages/data/production-chains-base.ts
index 511ca88..fd420d7 100644
--- a/src/pages/data/production-chains-base.ts
+++ b/src/pages/data/production-chains-base.ts
@@ -145,7 +145,7 @@ export const productionChainsBase: TieredProductionChain[] = [
         productionChain: 'mudBricks',
         chainMultiplier: '4',
         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'>25%</span><span class='ratio-count'>1</span></span></span>)
+        flowchart LR; 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'>25%</span><span class='ratio-count'>1</span></span></span>)
         Teff(<img src='${icons.teffIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         MudBricks(<img src='${icons.mudBricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Clay & Teff --> MudBricks
diff --git a/src/pages/data/production-chains-expansions.ts b/src/pages/data/production-chains-expansions.ts
index 8d5d719..5b35f20 100644
--- a/src/pages/data/production-chains-expansions.ts
+++ b/src/pages/data/production-chains-expansions.ts
@@ -591,7 +591,7 @@ export const productionChainsExpansions: TieredProductionChain[] = [
         flowchart LR
         Copper(<span class='icon-flex-row'><img src='${icons.copperIcon}' 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>)
         Zinc(<span class='icon-flex-row'><img src='${icons.zincIcon}' 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>)
-        Brass(<img src='${icons.zincIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Brass(<img src='${icons.brassIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
         Sand(<span class='icon-flex-row'><img src='${icons.sandIcon}' 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>)
         Glass(<span class='icon-flex-row'><img src='${icons.glassIcon}' 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>)
         Coal(<span class='icon-flex-row'><img src='${icons.coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>25%</span><span class='ratio-count'>1</span></span></span>)