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)
|
fix link to homepage (loading into new tab)
|
||||||
doc this
|
doc this
|
||||||
|
|
||||||
doc div with background css
|
|
||||||
|
|
||||||
apply anno wiki theme
|
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
if (mermaidGraph.value != null) {
|
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>
|
<template>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<q-card flat bordered square class="col-2 bg-grey-3">
|
<ChainTiers title="Building Materials">
|
||||||
<q-card-section>
|
<ProductionChain
|
||||||
<div class="text-subtitle1 text-uppercase text-center">
|
:production-chain="
|
||||||
Building Materials
|
productionChains.buildingMaterials[0].productionChain
|
||||||
</div>
|
"
|
||||||
</q-card-section>
|
: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>
|
<ChainTiers title="Engineers">
|
||||||
<div ref="bricks"></div>
|
<ProductionChain
|
||||||
<div ref="steelBeams"></div>
|
:production-chain="productionChains.engineers[0].productionChain"
|
||||||
</q-card>
|
:mermaid-definition="productionChains.engineers[0].mermaidDefinition"
|
||||||
<q-card flat bordered square class="col-2 bg-grey-3">
|
></ProductionChain>
|
||||||
<q-card-section>
|
</ChainTiers>
|
||||||
<div class="text-subtitle1 text-uppercase text-center">
|
|
||||||
Farmers | Workers
|
|
||||||
</div>
|
|
||||||
</q-card-section>
|
|
||||||
|
|
||||||
<q-separator inset class="q-mb-sm" />
|
<ChainTiers title="Weapons">
|
||||||
|
<ProductionChain
|
||||||
<div ref="schnapps"></div>
|
:production-chain="productionChains.weapons[0].productionChain"
|
||||||
<div ref="workClothes"></div>
|
:mermaid-definition="productionChains.weapons[0].mermaidDefinition"
|
||||||
<div ref="sausages"></div>
|
></ProductionChain>
|
||||||
<div ref="bread"></div>
|
</ChainTiers>
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import mermaid from 'mermaid';
|
import { productionChains } from './production-chains';
|
||||||
import { onMounted, ref, watchEffect } from 'vue';
|
|
||||||
|
|
||||||
// Icons
|
// Components
|
||||||
import lightningIcon from '../assets/annoIcons/Lightning.png';
|
import ChainTiers from 'components/ChainTiers.vue';
|
||||||
|
import ProductionChain from 'components/ProductionChain.vue';
|
||||||
// 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;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss"></style>
|
||||||
.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>
|
|
||||||
|
|||||||
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 -->
|
<!-- 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-icon name="lab la-github" color="black" size="2.2rem"></q-icon>
|
||||||
</q-toolbar>
|
</q-toolbar>
|
||||||
@@ -50,6 +50,6 @@ function toggleLeftDrawer() {
|
|||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.border-black-bottom-med {
|
.border-black-bottom-med {
|
||||||
border-bottom: 0.15rem solid black;
|
border-bottom: 0.15rem solid #2e3f4e;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user