mirror of
https://github.com/dtomlinson91/anno-production-chain-renderer.git
synced 2025-12-22 06:15:45 +00:00
add latest
This commit is contained in:
@@ -13,9 +13,6 @@ loop over to import the images from json file?
|
||||
fix link to homepage (loading into new tab)
|
||||
doc this
|
||||
|
||||
doc div with background css
|
||||
|
||||
apply anno wiki theme
|
||||
|
||||
watchEffect(() => {
|
||||
if (mermaidGraph.value != null) {
|
||||
|
||||
BIN
src/assets/annoIcons/Beer.webp
Normal file
BIN
src/assets/annoIcons/Beer.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
src/assets/annoIcons/Hops.webp
Normal file
BIN
src/assets/annoIcons/Hops.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
src/assets/annoIcons/Malt.webp
Normal file
BIN
src/assets/annoIcons/Malt.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
BIN
src/assets/annoIcons/Soap.webp
Normal file
BIN
src/assets/annoIcons/Soap.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
src/assets/annoIcons/Tallow.webp
Normal file
BIN
src/assets/annoIcons/Tallow.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.9 KiB |
BIN
src/assets/annoIcons/Weapons.webp
Normal file
BIN
src/assets/annoIcons/Weapons.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
25
src/components/ChainTiers.vue
Normal file
25
src/components/ChainTiers.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<q-card flat bordered square class="col-2 bg-grey-3 q-ma-sm border">
|
||||
<q-card-section>
|
||||
<div class="text-subtitle1 text-uppercase text-center">
|
||||
{{ title }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
|
||||
<q-separator inset class="q-mb-sm" />
|
||||
|
||||
<slot></slot>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
title: string;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.border {
|
||||
border: 0.1rem solid #2e3f4e;
|
||||
}
|
||||
</style>
|
||||
@@ -1,262 +1,93 @@
|
||||
<template>
|
||||
<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>
|
||||
<ChainTiers title="Building Materials">
|
||||
<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>
|
||||
|
||||
<q-separator inset class="q-mb-sm" />
|
||||
<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>
|
||||
|
||||
<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
|
||||
</div>
|
||||
</q-card-section>
|
||||
<ChainTiers title="Engineers">
|
||||
<ProductionChain
|
||||
:production-chain="productionChains.engineers[0].productionChain"
|
||||
:mermaid-definition="productionChains.engineers[0].mermaidDefinition"
|
||||
></ProductionChain>
|
||||
</ChainTiers>
|
||||
|
||||
<q-separator inset class="q-mb-sm" />
|
||||
|
||||
<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>
|
||||
<ChainTiers title="Weapons">
|
||||
<ProductionChain
|
||||
:production-chain="productionChains.weapons[0].productionChain"
|
||||
:mermaid-definition="productionChains.weapons[0].mermaidDefinition"
|
||||
></ProductionChain>
|
||||
</ChainTiers>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import mermaid from 'mermaid';
|
||||
import { onMounted, ref, watchEffect } from 'vue';
|
||||
import { productionChains } from './production-chains';
|
||||
|
||||
// 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 ironIcon from '../assets/annoIcons/Iron.webp';
|
||||
import steelIcon from '../assets/annoIcons/Steel.webp';
|
||||
import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
|
||||
|
||||
// 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);
|
||||
|
||||
// Initalise mermaid
|
||||
onMounted(() => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
logLevel: 'fatal',
|
||||
securityLevel: 'loose',
|
||||
theme: 'neutral',
|
||||
flowchart: { htmlLabels: true }
|
||||
});
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
if (timber.value != null) {
|
||||
mermaid.render(
|
||||
'timber',
|
||||
`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>)`,
|
||||
(svgCode: string) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
timber.value!.innerHTML = svgCode;
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
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(
|
||||
'steelBeams',
|
||||
`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>)`,
|
||||
(svgCode: string) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
steelBeams.value!.innerHTML = svgCode;
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
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(
|
||||
'highWheeler',
|
||||
`flowchart LR; Iron(<img src='${ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>) & Coal(<img src='${coalIcon}' 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`,
|
||||
(svgCode: string) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
highWheeler.value!.innerHTML = svgCode;
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
// Components
|
||||
import ChainTiers from 'components/ChainTiers.vue';
|
||||
import ProductionChain from 'components/ProductionChain.vue';
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-size {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ratio-count {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.efficiency-perc {
|
||||
font-weight: bold;
|
||||
color: $green-9 !important;
|
||||
}
|
||||
|
||||
.electricity-container {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.electricity-icon {
|
||||
width: 22px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.icon-flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.icon-flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss"></style>
|
||||
|
||||
77
src/components/ProductionChain.vue
Normal file
77
src/components/ProductionChain.vue
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div ref="diagram"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import mermaid from 'mermaid';
|
||||
import { onMounted, ref, watchEffect } from 'vue';
|
||||
|
||||
// HTML Refs
|
||||
const diagram = ref<HTMLInputElement | null>(null);
|
||||
|
||||
// Props
|
||||
const props = defineProps<{
|
||||
productionChain: string;
|
||||
mermaidDefinition: string;
|
||||
}>();
|
||||
|
||||
// Mermaid
|
||||
onMounted(() => {
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
logLevel: 'fatal',
|
||||
securityLevel: 'loose',
|
||||
theme: 'neutral',
|
||||
flowchart: { htmlLabels: true }
|
||||
});
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
if (diagram.value != null) {
|
||||
mermaid.render(
|
||||
props.productionChain,
|
||||
props.mermaidDefinition,
|
||||
(svgCode: string) => {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
diagram.value!.innerHTML = svgCode;
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.icon-size {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ratio-count {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.efficiency-perc {
|
||||
font-weight: bold;
|
||||
color: $green-9 !important;
|
||||
}
|
||||
|
||||
.electricity-container {
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.electricity-icon {
|
||||
width: 22px;
|
||||
margin-bottom: -5px;
|
||||
}
|
||||
|
||||
.icon-flex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.icon-flex-col {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
@@ -1 +0,0 @@
|
||||
export {};
|
||||
93
src/components/production-chains.ts
Normal file
93
src/components/production-chains.ts
Normal file
@@ -0,0 +1,93 @@
|
||||
// Icons
|
||||
import lightningIcon from '../assets/annoIcons/Lightning.png';
|
||||
|
||||
// Building Materials
|
||||
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 ironIcon from '../assets/annoIcons/Iron.webp';
|
||||
import steelIcon from '../assets/annoIcons/Steel.webp';
|
||||
import steelBeamsIcon from '../assets/annoIcons/Steel_beams.webp';
|
||||
|
||||
// Farmers & Workers
|
||||
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 pigsIcon from '../assets/annoIcons/Pigs.webp';
|
||||
import tallowIcon from '../assets/annoIcons/Tallow.webp';
|
||||
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';
|
||||
|
||||
// Engineers
|
||||
import caoutchoucIcon from '../assets/annoIcons/Caoutchouc.webp';
|
||||
import highWheelerIcon from '../assets/annoIcons/High_wheeler.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>)`
|
||||
}
|
||||
]
|
||||
};
|
||||
@@ -12,7 +12,7 @@
|
||||
/>
|
||||
|
||||
<!-- TODO: add link to git -->
|
||||
<q-toolbar-title> Anno 1800 Production Chain Renderer </q-toolbar-title>
|
||||
<q-toolbar-title> Anno 1800 Production Chains </q-toolbar-title>
|
||||
|
||||
<q-icon name="lab la-github" color="black" size="2.2rem"></q-icon>
|
||||
</q-toolbar>
|
||||
@@ -50,6 +50,6 @@ function toggleLeftDrawer() {
|
||||
|
||||
<style lang="scss">
|
||||
.border-black-bottom-med {
|
||||
border-bottom: 0.15rem solid black;
|
||||
border-bottom: 0.15rem solid #2e3f4e;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user