add skyscraper chains

src/components/ChainTiers.vue

@@ -38,7 +38,7 @@ const calculateColBreak = () => (props.colBreak ? 'hide-item' : '');
 
 <style lang="scss">
 .border {
-  border: 0.1rem solid $burnt-dark;
+  border: 0.2rem solid $burnt-dark;
 }
 
 .title-font {

src/pages/data/icons.ts

@@ -8,6 +8,8 @@ import bananaSurpriseIcon from 'assets/annoIcons/Banana_Surprise.webp';
 import bankersLampsIcon from 'assets/annoIcons/Bankers_Lamps.webp';
 import bearIcon from 'assets/annoIcons/Bear_Hunting_Cabin.webp';
 import beefIcon from 'assets/annoIcons/Beef.webp';
+import billiardsIcon from 'assets/annoIcons/Billiard_Tables.webp';
+import biscuitsIcon from 'assets/annoIcons/Biscuits.webp';
 import blackMuscovyIcon from 'assets/annoIcons/Black_Muscovy.webp';
 import bootsIcon from 'assets/annoIcons/Icon_leather_shoes_0.webp';
 import bowlerHatsIcon from 'assets/annoIcons/Bowler_hats.webp';
@@ -39,6 +41,7 @@ import cocoaIcon from 'assets/annoIcons/Cocoa.webp';
 import coconutOilIcon from 'assets/annoIcons/Coconut_Oil.webp';
 import coffeeBeansIcon from 'assets/annoIcons/Coffee_beans.webp';
 import coffeeIcon from 'assets/annoIcons/Coffee.webp';
+import cognacIcon from 'assets/annoIcons/Cognac.webp';
 import concreteFactory from 'assets/annoIcons/Reinforced_concrete.webp';
 import copperIcon from 'assets/annoIcons/Copper.webp';
 import cornIcon from 'assets/annoIcons/Corn.webp';
@@ -52,6 +55,7 @@ import dryHouseIcon from 'assets/annoIcons/Icon_dried_meat_0.webp';
 import dynamiteIcon from 'assets/annoIcons/Dynamite.webp';
 import eclairIcon from 'assets/annoIcons/Eclair.webp';
 import electricityIcon from 'assets/electricityBorder.webp';
+import elevatorIcon from 'assets/annoIcons/Elevators.webp';
 import embroidererIcon from 'assets/annoIcons/Icon_traditional_clothing_0.webp';
 import enbesaIcon from 'assets/annoIcons/Icon_session_land_of_lions_0.png';
 import enbesaSunriseIcon from 'assets/annoIcons/Enbesa_Sunrise.webp';
@@ -165,12 +169,15 @@ import toastersIcon from 'assets/annoIcons/Toasters.webp';
 import tobaccoIcon from 'assets/annoIcons/Tobacco.webp';
 import toothpasteIcon from 'assets/annoIcons/Toothpaste.webp';
 import tortillasIcon from 'assets/annoIcons/Tortilla.webp';
+import toysIcon from 'assets/annoIcons/Toys.webp';
 import tractorIcon from 'assets/annoIcons/TractorBarn.webp';
 import trifleTowerIcon from 'assets/annoIcons/Trifle_Tower.webp';
+import typewritersIcon from 'assets/annoIcons/Typewriters.webp';
 import vaccumCleanersIcon from 'assets/annoIcons/Vacuum_Cleaners.webp';
 import vanityScreensIcon from 'assets/annoIcons/Vanity_Screens.webp';
 import venisonEnCrouteIcon from 'assets/annoIcons/Venison_en_Croute.webp';
 import venisonTartareIcon from 'assets/annoIcons/Venison_Tartare.webp';
+import violinsIcon from 'assets/annoIcons/Violins.webp';
 import wansaWood from 'assets/annoIcons/Icon_wansa_wood_0.webp';
 import watIcon from 'assets/annoIcons/Icon_wat_stew_0.webp';
 import weaponsIcon from 'assets/annoIcons/Weapons.webp';
@@ -193,6 +200,8 @@ export {
   bankersLampsIcon,
   bearIcon,
   beefIcon,
+  billiardsIcon,
+  biscuitsIcon,
   blackMuscovyIcon,
   bootsIcon,
   bowlerHatsIcon,
@@ -224,6 +233,7 @@ export {
   coconutOilIcon,
   coffeeBeansIcon,
   coffeeIcon,
+  cognacIcon,
   concreteFactory,
   copperIcon,
   cornIcon,
@@ -237,6 +247,7 @@ export {
   dynamiteIcon,
   eclairIcon,
   electricityIcon,
+  elevatorIcon,
   embroidererIcon,
   enbesaIcon,
   enbesaSunriseIcon,
@@ -350,12 +361,15 @@ export {
   tobaccoIcon,
   toothpasteIcon,
   tortillasIcon,
+  toysIcon,
   tractorIcon,
   trifleTowerIcon,
+  typewritersIcon,
   vaccumCleanersIcon,
   vanityScreensIcon,
   venisonEnCrouteIcon,
   venisonTartareIcon,
+  violinsIcon,
   wansaWood,
   watIcon,
   weaponsIcon,

src/pages/data/production-chains-expansions.ts

@@ -3,6 +3,30 @@ import { TieredProductionChain } from './models';
 import * as icons from './icons';
 
 export const productionChainsExpansions: TieredProductionChain[] = [
+  {
+    colBreak: false,
+    tierName: 'Building Materials',
+    productionChains: [
+      {
+        productionChain: 'elevators',
+        mermaidDefinition: endent`
+      flowchart LR
+      Iron(<img src='${icons.ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+      Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+      Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+      Wood(<img src='${icons.woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+      Marquetry(<img src='${icons.marquetryIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+      SteamMotor(<img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
+      Elevator(<img src='${icons.elevatorIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+      style SteamMotor stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
+      style Elevator stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
+      Iron & Coal --> Steel --> Elevator
+      Wood --> Marquetry --> Elevator
+      SteamMotor --> Elevator
+      `
+      }
+    ]
+  },
   {
     colBreak: false,
     tierName: 'Chemical Plant',
@@ -30,6 +54,24 @@ export const productionChainsExpansions: TieredProductionChain[] = [
         Sand & Resin & Ethanol --> Lacquer
         `
       },
+      {
+        productionChain: 'celluloid',
+        chainMultiplier: '2',
+        mermaidDefinition: endent`
+        flowchart TB
+        Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        CamphorWax(<img src='${icons.camphorWaxIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Ethanol(<img src='${icons.ethanolIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Celluloid(<img src='${icons.celluloidIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Cotton & CamphorWax & Ethanol --> Celluloid
+        `
+      }
+    ]
+  },
+  {
+    colBreak: false,
+    tierName: 'Skyscrapers',
+    productionChains: [
       {
         productionChain: 'chewingGum',
         mermaidDefinition: endent`
@@ -44,15 +86,95 @@ export const productionChainsExpansions: TieredProductionChain[] = [
         `
       },
       {
-        productionChain: 'celluloid',
-        chainMultiplier: '2',
+        productionChain: 'typewriters',
         mermaidDefinition: endent`
-        flowchart TB
-        Cotton(<img src='${icons.cottonIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
-        CamphorWax(<img src='${icons.camphorWaxIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Ethanol(<img src='${icons.ethanolIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Celluloid(<img src='${icons.celluloidIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
-        Cotton & CamphorWax & Ethanol --> Celluloid
+        flowchart LR
+        Iron(<img src='${icons.ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Copper(<img src='${icons.copperIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Zinc(<img src='${icons.zincIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Brass(<img src='${icons.brassIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        Lacquer(<img src='${icons.lacquerIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Typewriters(<img src='${icons.typewritersIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        style Typewriters stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
+        Iron & Coal --> Steel --> Typewriters
+        Copper & Zinc --> Brass --> Typewriters
+        Lacquer --> Typewriters
+        `
+      },
+      {
+        productionChain: 'violins',
+        chainMultiplier: '4',
+        mermaidDefinition: endent`
+        flowchart LR
+        Iron(<span class='icon-flex-row'><img src='${icons.ironIcon}' 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>)
+        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>)
+        Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' 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>)
+        CherryWood(<span class='icon-flex-row'><img src='${icons.cherryWoodIcon}' 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>)
+        Lacquer(<span class='icon-flex-row'><img src='${icons.lacquerIcon}' 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>)
+        Violins(<img src='${icons.violinsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Iron & Coal --> Steel --> Violins
+        CherryWood --> Violins
+        Lacquer --> Violins
+        `
+      },
+      {
+        productionChain: 'biscuits',
+        mermaidDefinition: endent`
+        flowchart LR
+        Pigs(<img src='${icons.pigsIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        Tallow(<img src='${icons.tallowIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        Grain(<img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
+        Flour(<img src='${icons.flourIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Citrus(<img src='${icons.citrusIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        Biscuits(<img src='${icons.biscuitsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        style Biscuits stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
+        Pigs --> Tallow --> Biscuits
+        Grain --> Flour --> Biscuits
+        Citrus --> Biscuits
+        `
+      },
+      {
+        productionChain: 'cognac',
+        mermaidDefinition: endent`
+        flowchart LR
+        Vineyard(<img src='${icons.grapesIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
+        CherryWood(<span class='icon-flex-row'><img src='${icons.cherryWoodIcon}' 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>)
+        SugarCane(<span class='icon-flex-row'><img src='${icons.sugarCaneIcon}' 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>)
+        Sugar(<span class='icon-flex-row'><img src='${icons.sugarIcon}' 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>)
+        Cognac(<img src='${icons.cognacIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        SugarCane --> Sugar
+        Vineyard & CherryWood & Sugar --> Cognac
+        `
+      },
+      {
+        productionChain: 'billiardsTable',
+        chainMultiplier: '4',
+        mermaidDefinition: endent`
+        flowchart LR
+        Alpaca(<span class='icon-flex-row'><img src='${icons.alpacaWoolIcon}' 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>)
+        Felt(<span class='icon-flex-row'><img src='${icons.feltIcon}' 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>)
+        CherryWood(<span class='icon-flex-row'><img src='${icons.cherryWoodIcon}' 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>)
+        Celluloid(<span class='icon-flex-row'><img src='${icons.celluloidIcon}' 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>)
+        Billiards(<img src='${icons.billiardsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        CherryWood --> Billiards
+        Alpaca --> Felt --> Billiards
+        Celluloid --> Billiards
+        `
+      },
+      {
+        productionChain: 'toys',
+        chainMultiplier: '4',
+        mermaidDefinition: endent`
+        flowchart LR
+        Alpaca(<span class='icon-flex-row'><img src='${icons.alpacaWoolIcon}' 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>)
+        Felt(<span class='icon-flex-row'><img src='${icons.feltIcon}' 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>)
+        Celluloid(<span class='icon-flex-row'><img src='${icons.celluloidIcon}' 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>)
+        Lacquer(<span class='icon-flex-row'><img src='${icons.lacquerIcon}' 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>)
+        Toys(<img src='${icons.toysIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
+        Alpaca --> Felt --> Toys
+        Celluloid & Lacquer --> Toys
         `
       }
     ]
@@ -348,6 +470,7 @@ export const productionChainsExpansions: TieredProductionChain[] = [
       }
     ]
   },
+  { colBreak: true, tierName: 'skip' },
   {
     colBreak: false,
     tierName: 'Iron Tower',