add latest

src/components/ChainTiers.vue

@@ -20,6 +20,6 @@ defineProps<{
 
 <style lang="scss">
 .border {
-  border: 0.1rem solid #2e3f4e;
+  border: 0.1rem solid $off-black;
 }
 </style>

src/components/DiagramRenderer.vue

@@ -1,82 +1,15 @@
 <template>
   <div class="row">
-    <ChainTiers title="Building Materials">
+    <ChainTiers
+      v-for="tier in productionChains"
+      :key="tier.tierName"
+      :title="tier.tierName"
+    >
       <ProductionChain
-        :production-chain="
+        v-for="chain in tier.productionChains"
-          productionChains.buildingMaterials[0].productionChain
+        :key="chain.productionChain"
-        "
+        :production-chain="chain.productionChain"
-        :mermaid-definition="
+        :mermaid-definition="chain.mermaidDefinition"
-          productionChains.buildingMaterials[0].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="
-          productionChains.buildingMaterials[1].productionChain
-        "
-        :mermaid-definition="
-          productionChains.buildingMaterials[1].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="
-          productionChains.buildingMaterials[2].productionChain
-        "
-        :mermaid-definition="
-          productionChains.buildingMaterials[2].mermaidDefinition
-        "
-      ></ProductionChain>
-    </ChainTiers>
-
-    <ChainTiers title="Farmers | Workers">
-      <ProductionChain
-        :production-chain="productionChains.farmersWorkers[0].productionChain"
-        :mermaid-definition="
-          productionChains.farmersWorkers[0].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="productionChains.farmersWorkers[1].productionChain"
-        :mermaid-definition="
-          productionChains.farmersWorkers[1].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="productionChains.farmersWorkers[2].productionChain"
-        :mermaid-definition="
-          productionChains.farmersWorkers[2].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="productionChains.farmersWorkers[3].productionChain"
-        :mermaid-definition="
-          productionChains.farmersWorkers[3].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="productionChains.farmersWorkers[4].productionChain"
-        :mermaid-definition="
-          productionChains.farmersWorkers[4].mermaidDefinition
-        "
-      ></ProductionChain>
-      <ProductionChain
-        :production-chain="productionChains.farmersWorkers[5].productionChain"
-        :mermaid-definition="
-          productionChains.farmersWorkers[5].mermaidDefinition
-        "
-      ></ProductionChain>
-    </ChainTiers>
-
-    <ChainTiers title="Engineers">
-      <ProductionChain
-        :production-chain="productionChains.engineers[0].productionChain"
-        :mermaid-definition="productionChains.engineers[0].mermaidDefinition"
-      ></ProductionChain>
-    </ChainTiers>
-
-    <ChainTiers title="Weapons">
-      <ProductionChain
-        :production-chain="productionChains.weapons[0].productionChain"
-        :mermaid-definition="productionChains.weapons[0].mermaidDefinition"
       ></ProductionChain>
     </ChainTiers>
   </div>

src/components/ProductionChain.vue

@@ -6,7 +6,7 @@
 import { ref, watchEffect } from 'vue';
 import mermaid from 'mermaid';
 
-// HTML Refs
+// DOM Refs
 const diagram = ref<HTMLInputElement | null>(null);
 
 // Props

src/components/models.ts

@@ -0,0 +1,9 @@
+export interface TieredProductionChain {
+  tierName: string;
+  productionChains: ProductionChain[];
+}
+
+export interface ProductionChain {
+  productionChain: string;
+  mermaidDefinition: string;
+}

src/components/production-chains.ts

@@ -1,3 +1,5 @@
+import { TieredProductionChain } from './models';
+
 // Icons
 import lightningIcon from '../assets/annoIcons/Lightning.png';
 
@@ -11,6 +13,9 @@ import coalIcon from '../assets/annoIcons/Coal.webp';
 import ironIcon from '../assets/annoIcons/Iron.webp';
 import steelIcon from '../assets/annoIcons/Steel.webp';
 import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
+import sandIcon from '../assets/annoIcons/Quartz_sand.webp';
+import glassMakersIcon from '../assets/annoIcons/Glass.webp';
+import windowMakersIcon from '../assets/annoIcons/Windows.webp';
 
 // Farmers & Workers
 import potatoIcon from '../assets/annoIcons/Potato.webp';
@@ -28,17 +33,35 @@ import soapIcon from '../assets/annoIcons/Soap.webp';
 import breweryIcon from '../assets/annoIcons/Beer.webp';
 import malthouseIcon from '../assets/annoIcons/Malt.webp';
 import hopFarmIcon from '../assets/annoIcons/Hops.webp';
+import sailmakersIcon from '../assets/annoIcons/Sails.webp';
+
+// Artisans
+import beefIcon from '../assets/annoIcons/Beef.webp';
+import redPeppersIcon from '../assets/annoIcons/Red_peppers.webp';
+import artisnalKitchenIcon from '../assets/annoIcons/Goulash.webp';
+import cannedFoodIcon from '../assets/annoIcons/Canned_food.webp';
+import sewingMachinesIcon from '../assets/annoIcons/Sewing_machines.webp';
+import fursIcon from '../assets/annoIcons/Furs.webp';
+import furCoatsIcon from '../assets/annoIcons/Fur_Coats.webp';
+import sugarCaneIcon from '../assets/annoIcons/Sugar_cane.webp';
+import rumIcon from '../assets/annoIcons/Rum.webp';
 
 // Engineers
 import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
 import highWheelerIcon from '../assets/annoIcons/High_wheeler.webp';
 
+// Jornaleros
+import cottonIcon from '../assets/annoIcons/Cotton.webp';
+import cottonMillIcon from '../assets/annoIcons/Cotton_fabric.webp';
+
 // Weapons
 import weaponsIcon from '../assets/annoIcons/Weapons.webp';
 
 // Production Chains
-export const productionChains = {
+export const productionChains: TieredProductionChain[] = [
-  buildingMaterials: [
+  {
+    tierName: 'Building Materials',
+    productionChains: [
       {
         productionChain: 'timber',
         mermaidDefinition: `flowchart LR; Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)-->Timber(<img src='${timberIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
@@ -50,9 +73,16 @@ export const productionChains = {
       {
         productionChain: 'steelBeams',
         mermaidDefinition: `flowchart LR; CharcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66%</span><span class='ratio-count'>1</span></span></span>) --> SteelBeams(<img src='${steelBeamsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+      },
+      {
+        productionChain: 'windows',
+        mermaidDefinition: `flowchart LR; Sand(<img src='${sandIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> NAME(<img src='${glassMakersIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> WindowMakers(<img src='${windowMakersIcon}' class='icon-size' /><span class='ratio-count'>4</span>); Wood(<img src='${woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> WindowMakers`
       }
-  ],
+    ]
-  farmersWorkers: [
+  },
+  {
+    tierName: 'Farmers | Workers',
+    productionChains: [
       {
         productionChain: 'workClothes',
         mermaidDefinition: `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>)`
@@ -77,17 +107,62 @@ export const productionChains = {
         productionChain: 'beer',
         mermaidDefinition: `flowchart LR; Grain(<img src='${grainIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Malthouse(<img src='${malthouseIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Brewery(<img src='${breweryIcon}' class='icon-size' /><span class='ratio-count'>2</span>); HopFarm(<img src='${hopFarmIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> Brewery`
       }
-  ],
+    ]
-  engineers: [
+  },
+  {
+    tierName: 'Artisans',
+    productionChains: [
+      {
+        productionChain: 'cannedFood',
+        mermaidDefinition: `flowchart LR; Beef(<img src='${beefIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> ArtisnalKitchen(<img src='${artisnalKitchenIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> Cannery(<img src='${cannedFoodIcon}' class='icon-size' /><span class='ratio-count'>3</span>); NAME(<img src='${redPeppersIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> ArtisnalKitchen; Iron(<span class='icon-flex-row'><img src='${ironIcon}' 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>) --> Cannery`
+      },
+      {
+        productionChain: 'sewingMachines',
+        mermaidDefinition: `flowchart LR; Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> SewingMachines(<img src='${sewingMachinesIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Iron(<span class='icon-flex-row'><img src='${ironIcon}' 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>) --> Steel; Wood(<span class='icon-flex-row'><img src='${woodIcon}' 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>) --> SewingMachines`
+      },
+      {
+        productionChain: 'rum',
+        mermaidDefinition: `flowchart LR; SugarCane(<img src='${sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Wood(<span class='icon-flex-row'><img src='${woodIcon}' 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>) --> Rum(<img src='${rumIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+      },
+      {
+        productionChain: 'furs',
+        mermaidDefinition: `flowchart LR; Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> CottonMill(<img src='${cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> FurCoats(<img src='${furCoatsIcon}' class='icon-size' /><span class='ratio-count'>1</span>); Furs(<img src='${fursIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> FurCoats`
+      }
+    ]
+  },
+  {
+    tierName: 'Jornaleros | Obreros',
+    productionChains: []
+  },
+  {
+    tierName: 'Engineers',
+    productionChains: [
       {
         productionChain: 'highWheeler',
         mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Steel(<img src='${steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> HighWheeler(<span class='icon-flex-row'><img src='${highWheelerIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${lightningIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>); Caoutchouc(<img src='${caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>) --> HighWheeler`
       }
-  ],
+    ]
-  weapons: [
+  },
+  {
+    tierName: 'Weapons',
+    productionChains: [
       {
         productionChain: 'weapons',
         mermaidDefinition: `flowchart LR; charcoalKiln(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Iron(<span class='icon-flex-row'><img src='${ironIcon}' 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>) --> Steel(<span class='icon-flex-row'><img src='${steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33%</span><span class='ratio-count'>1</span></span></span>) --> Weapons(<img src='${weaponsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
       }
     ]
-};
+  },
+  {
+    tierName: 'Sails',
+    productionChains: [
+      {
+        productionChain: 'oldWorldSails',
+        mermaidDefinition: `flowchart LR; Wool(<img src='${woolIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sailmakers(<img src='${sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+      },
+      {
+        productionChain: 'newWorldSails',
+        mermaidDefinition: `flowchart LR; Cotton(<img src='${cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> CottonMill(<img src='${cottonMillIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Sailmakers(<img src='${sailmakersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
+      }
+    ]
+  }
+];

src/css/app.scss

@@ -7,5 +7,14 @@
 
 .font-soleil {
   font-family: Soleil;
-  color: #2d3e4f;
+  color: $off-black;
+}
+
+// https://quasar.dev/style/color-palette#adding-your-own-colors
+.text-off-black {
+  color: $off-black !important;
+}
+
+.bg-off-black {
+  background: $off-black !important;
 }

src/css/quasar.variables.scss

@@ -23,3 +23,5 @@ $positive: #21ba45;
 $negative: #c10015;
 $info: #31ccec;
 $warning: #f2c037;
+
+$off-black: #2e3f4e;

src/layouts/MainLayout.vue

@@ -8,13 +8,19 @@
           round
           icon="menu"
           aria-label="Menu"
+          color="off-black"
           @click="toggleLeftDrawer"
         />
 
-        <!-- TODO: add link to git -->
+        <q-toolbar-title class="text-off-black">
-        <q-toolbar-title> Anno 1800 Production Chains </q-toolbar-title>
+          Anno 1800 Production Chains
+        </q-toolbar-title>
 
-        <q-icon name="lab la-github" color="black" size="2.2rem"></q-icon>
+        <a
+          href="https://github.com/dtomlinson91/anno-production-chain-renderer"
+          class="no-link-border"
+          ><q-icon name="lab la-github" color="off-black" size="2.2rem"></q-icon
+        ></a>
       </q-toolbar>
     </q-header>
 
@@ -50,6 +56,10 @@ function toggleLeftDrawer() {
 
 <style lang="scss">
 .border-black-bottom-med {
-  border-bottom: 0.15rem solid #2e3f4e;
+  border-bottom: 0.15rem solid $off-black;
+}
+
+.no-link-border {
+  text-decoration: none;
 }
 </style>