add latest

src/components/DiagramRenderer.vue

@@ -1,6 +1,19 @@
 <template>
-  <div>
-    <q-card flat bordered>
+  <div class="row">
+    <q-card flat bordered square class="col-2 bg-grey-3">
+      <q-card-section>
+        <div class="text-subtitle1 text-uppercase text-center">
+          Building Materials
+        </div>
+      </q-card-section>
+
+      <q-separator inset class="q-mb-sm" />
+
+      <div ref="timber"></div>
+      <div ref="bricks"></div>
+      <div ref="steelBeams"></div>
+    </q-card>
+    <q-card flat bordered square class="col-2 bg-grey-3">
       <q-card-section>
         <div class="text-subtitle1 text-uppercase text-center">
           Farmers | Workers
@@ -9,8 +22,18 @@
 
       <q-separator inset class="q-mb-sm" />
 
-      <div ref="timber"></div>
-      <div ref="steelBeams"></div>
+      <div ref="schnapps"></div>
+      <div ref="workClothes"></div>
+      <div ref="sausages"></div>
+      <div ref="bread"></div>
+    </q-card>
+    <q-card flat bordered square class="col-2 bg-grey-3">
+      <q-card-section>
+        <div class="text-subtitle1 text-uppercase text-center">Engineers</div>
+      </q-card-section>
+
+      <q-separator inset class="q-mb-sm" />
+
       <div ref="highWheeler"></div>
     </q-card>
   </div>
@@ -21,23 +44,46 @@ import mermaid from 'mermaid';
 import { onMounted, ref, watchEffect } from 'vue';
 
 // Icons
+import lightningIcon from '../assets/annoIcons/Lightning.png';
+
+// Building Materials Icons
 import woodIcon from '../assets/annoIcons/Wood.webp';
 import timberIcon from '../assets/annoIcons/Timber.webp';
+import clayIcon from '../assets/annoIcons/Clay.webp';
+import bricksIcon from '../assets/annoIcons/Bricks.webp';
 import charcoalKilnIcon from '../assets/annoIcons/Charcoal_kiln.webp';
 import coalIcon from '../assets/annoIcons/Coal.webp';
-import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
-import highWheelerIcon from '../assets/annoIcons/High_wheeler.webp';
 import ironIcon from '../assets/annoIcons/Iron.webp';
 import steelIcon from '../assets/annoIcons/Steel.webp';
 import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
-import lightningIcon from '../assets/annoIcons/Lightning.png';
 
-// variables
+// Farmers & Workers Icons
+import potatoIcon from '../assets/annoIcons/Potato.webp';
+import schnappsIcon from '../assets/annoIcons/Schnapps.webp';
+import woolIcon from '../assets/annoIcons/Wool.webp';
+import workClothesIcon from '../assets/annoIcons/Work_clothes.webp';
+import pigIcon from '../assets/annoIcons/Pigs.webp';
+import sausageIcon from '../assets/annoIcons/Sausages.webp';
+import grainIcon from '../assets/annoIcons/Grain.webp';
+import flourIcon from '../assets/annoIcons/Flour.webp';
+import breadIcon from '../assets/annoIcons/Bread.webp';
+
+//
+import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
+import highWheelerIcon from '../assets/annoIcons/High_wheeler.webp';
+
+// HTML Refs
 const timber = ref<HTMLInputElement | null>(null);
 const steelBeams = ref<HTMLInputElement | null>(null);
+const schnapps = ref<HTMLInputElement | null>(null);
+const workClothes = ref<HTMLInputElement | null>(null);
+const bricks = ref<HTMLInputElement | null>(null);
+const sausages = ref<HTMLInputElement | null>(null);
+const bread = ref<HTMLInputElement | null>(null);
+
 const highWheeler = ref<HTMLInputElement | null>(null);
 
-// load mermaid graph
+// Initalise mermaid
 onMounted(() => {
   mermaid.initialize({
     startOnLoad: false,
@@ -61,6 +107,19 @@ watchEffect(() => {
   }
 });
 
+watchEffect(() => {
+  if (bricks.value != null) {
+    mermaid.render(
+      'bricks',
+      `flowchart LR; Clay(<img src='${clayIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Bricks(<img src='${bricksIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        bricks.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
 watchEffect(() => {
   if (steelBeams.value != null) {
     mermaid.render(
@@ -74,6 +133,84 @@ watchEffect(() => {
   }
 });
 
+watchEffect(() => {
+  if (schnapps.value != null) {
+    mermaid.render(
+      'schnapps',
+      `flowchart LR; Potato(<img src='${potatoIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Schnapps(<img src='${schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        schnapps.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
+watchEffect(() => {
+  if (workClothes.value != null) {
+    mermaid.render(
+      'workClothes',
+      `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        workClothes.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
+watchEffect(() => {
+  if (workClothes.value != null) {
+    mermaid.render(
+      'workClothes',
+      `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        workClothes.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
+watchEffect(() => {
+  if (workClothes.value != null) {
+    mermaid.render(
+      'workClothes',
+      `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WorkClothes(<img src='${workClothesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        workClothes.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
+watchEffect(() => {
+  if (sausages.value != null) {
+    mermaid.render(
+      'sausages',
+      `flowchart LR; Pig(<img src='${pigIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sausages(<img src='${sausageIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        sausages.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
+watchEffect(() => {
+  if (bread.value != null) {
+    mermaid.render(
+      'bread',
+      `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Flour(<img src='${flourIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Bread(<img src='${breadIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`,
+      (svgCode: string) => {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        bread.value!.innerHTML = svgCode;
+      }
+    );
+  }
+});
+
 watchEffect(() => {
   if (highWheeler.value != null) {
     mermaid.render(

src/pages/IndexPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page class="row items-center justify-evenly full-height">
+  <q-page>
     <diagram-renderer />
   </q-page>
 </template>