initial info card move

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>

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;

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[] = [

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;
 }

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

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>)