add latest

src/components/InfoCard/InfoCardItem.vue

@@ -4,7 +4,8 @@
       <q-img :src="icon" class="info-icon"></q-img>
     </q-item-section>
     <q-item-section>
-      <span>{{ text }}</span>
+      <q-item-label>{{ text }}</q-item-label>
+      <q-item-label>{{ additionalText }}</q-item-label>
     </q-item-section>
   </q-item>
 </template>
@@ -14,5 +15,6 @@
 defineProps<{
   icon: string;
   text: string;
+  additionalText?: string;
 }>();
 </script>

src/components/InfoCardBase.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script setup lang="ts">
-import InfoCardItem from './info_card/InfoCardItem.vue';
-import InfoCardItemWorld from './info_card/InfoCardItemWorld.vue';
+import InfoCardItem from './InfoCard/InfoCardItem.vue';
+import InfoCardItemWorld from './InfoCard/InfoCardItemWorld.vue';
 import { itemData, worldItemData } from 'src/pages/data/info-card';
 </script>
 

src/components/ProductionChain.vue

@@ -1,4 +1,11 @@
 <template>
+  <div
+    v-if="chainMultiplier"
+    class="text-right absolute chain-multiplier q-pr-lg q-pt-md"
+  >
+    <q-img src="~assets/productionChainMultiplier.svg" width="60px"></q-img>
+    {{ chainMultiplier }}
+  </div>
   <div ref="diagram"></div>
   <q-separator inset class="q-mb-sm" />
 </template>
@@ -14,6 +21,7 @@ const diagram = ref<HTMLInputElement | null>(null);
 const props = defineProps<{
   productionChain: string;
   mermaidDefinition: string;
+  chainMultiplier?: string;
 }>();
 
 watchEffect(() => {
@@ -66,4 +74,10 @@ watchEffect(() => {
   display: flex;
   flex-direction: column;
 }
+
+.chain-multiplier {
+  font-size: 2.5rem;
+  font-weight: bold;
+  right: 0;
+}
 </style>