mirror of
https://github.com/dtomlinson91/anno-production-chain-renderer.git
synced 2025-12-22 14:25:45 +00:00
add latest
This commit is contained in:
@@ -20,6 +20,6 @@ defineProps<{
|
||||
|
||||
<style lang="scss">
|
||||
.border {
|
||||
border: 0.1rem solid #2e3f4e;
|
||||
border: 0.1rem solid $off-black;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -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="
|
||||
productionChains.buildingMaterials[0].productionChain
|
||||
"
|
||||
:mermaid-definition="
|
||||
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"
|
||||
v-for="chain in tier.productionChains"
|
||||
:key="chain.productionChain"
|
||||
:production-chain="chain.productionChain"
|
||||
:mermaid-definition="chain.mermaidDefinition"
|
||||
></ProductionChain>
|
||||
</ChainTiers>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import { ref, watchEffect } from 'vue';
|
||||
import mermaid from 'mermaid';
|
||||
|
||||
// HTML Refs
|
||||
// DOM Refs
|
||||
const diagram = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// Props
|
||||
|
||||
9
src/components/models.ts
Normal file
9
src/components/models.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
export interface TieredProductionChain {
|
||||
tierName: string;
|
||||
productionChains: ProductionChain[];
|
||||
}
|
||||
|
||||
export interface ProductionChain {
|
||||
productionChain: string;
|
||||
mermaidDefinition: string;
|
||||
}
|
||||
@@ -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,66 +33,136 @@ 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 = {
|
||||
buildingMaterials: [
|
||||
{
|
||||
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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'bricks',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
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>)`
|
||||
}
|
||||
],
|
||||
farmersWorkers: [
|
||||
{
|
||||
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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'schnapps',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'sausages',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'bread',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'soap',
|
||||
mermaidDefinition: `flowchart LR; Pigs(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Soap(<img src='${soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
|
||||
},
|
||||
{
|
||||
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: [
|
||||
{
|
||||
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: [
|
||||
{
|
||||
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>)`
|
||||
}
|
||||
]
|
||||
};
|
||||
export const productionChains: TieredProductionChain[] = [
|
||||
{
|
||||
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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'bricks',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
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`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'schnapps',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'sausages',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'bread',
|
||||
mermaidDefinition: `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>)`
|
||||
},
|
||||
{
|
||||
productionChain: 'soap',
|
||||
mermaidDefinition: `flowchart LR; Pigs(<img src='${pigsIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Tallow(<img src='${tallowIcon}' class='icon-size' /><span class='ratio-count'>2</span>) --> Soap(<img src='${soapIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
|
||||
},
|
||||
{
|
||||
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`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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`
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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>)`
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user