dtomlinson/anno-production-chain-renderer
1
0
Fork 0
mirror of https://github.com/dtomlinson91/anno-production-chain-renderer.git synced 2025-12-22 14:25:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

add latest

Browse Source
This commit is contained in:
Daniel Tomlinson
2022-09-30 13:44:43 +01:00
parent ed6b122eb8
commit 7a5a5e0e9d
9 changed files with 91 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/boot/mermaid.ts Normal file
View File

@@ -0,0 +1,16 @@
import { onMounted } from 'vue';
import mermaid from 'mermaid';
function initialiseMermaid() {
onMounted(() => {
mermaid.initialize({
startOnLoad: false,
logLevel: 'fatal',
securityLevel: 'loose',
theme: 'neutral',
flowchart: { htmlLabels: true }
});
});
}
export { mermaid, initialiseMermaid };

2
src/components/ProductionChain.vue
View File

@@ -5,7 +5,7 @@
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import mermaid from 'mermaid';
import { mermaid } from 'boot/mermaid';
// DOM Refs
const diagram = ref<HTMLInputElement | null>(null);

2
src/pages/AnnoBase.vue
View File

@@ -35,7 +35,7 @@
import { productionChainsBase } from './data/production-chains-base';
// Mermaid
import { initialiseMermaid } from 'composables/mermaid';
import { initialiseMermaid } from 'boot/mermaid';
// Components
import ChainTiers from 'components/ChainTiers.vue';

2
src/pages/AnnoExpansions.vue
View File

@@ -31,7 +31,7 @@
import { productionChainsExpansions } from './data/production-chains-expansions';
// Mermaid
import { initialiseMermaid } from 'composables/mermaid';
import { initialiseMermaid } from 'boot/mermaid';
// Components
import ChainTiers from 'components/ChainTiers.vue';

50
src/pages/data/production-chains-base.ts
View File

@@ -1,4 +1,5 @@
import { TieredProductionChain } from './models';
import endent from 'endent';
// Icons
// Regions
@@ -167,19 +168,39 @@ export const productionChainsBase: TieredProductionChain[] = [
productionChains: [
{
productionChain: 'coalRatio',
mermaidDefinition: `flowchart LR; Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)`
mermaidDefinition: endent`
flowchart LR
Coal(<img src='${coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Charcoal(<img src='${charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
Coal --> Charcoal
`
},
{
productionChain: 'goldRatio',
mermaidDefinition: `flowchart LR; ArcticFur(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldFur(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)`
mermaidDefinition: endent`
flowchart LR
ArcticGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
NewWorldGold(<span class='icon-flex-row'><img src='${goldOreIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${newWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
ArcticGold --> NewWorldGold
`
},
{
productionChain: 'furRatio',
mermaidDefinition: `flowchart LR; ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)`
mermaidDefinition: `
flowchart LR
ArcticFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${arcticIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
OldWorldFur(<span class='icon-flex-row'><img src='${fursIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>4</span></span></span>)
ArcticFur --> OldWorldFur
`
},
{
productionChain: 'clayRatio',
mermaidDefinition: `flowchart LR; EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>) --> OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)`
mermaidDefinition: `
flowchart LR
EnbesaClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${enbesaIcon}' class='electricity-icon' /></span><span class='ratio-count'>1</span></span></span>)
OldWorldClay(<span class='icon-flex-row'><img src='${clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${oldWorldIcon}' class='electricity-icon' /></span><span class='ratio-count'>2</span></span></span>)
EnbesaClay --> OldWorldClay
`
}
]
},
@@ -189,15 +210,30 @@ export const productionChainsBase: TieredProductionChain[] = [
productionChains: [
{
productionChain: 'oilPowerPlant',
mermaidDefinition: `flowchart LR; OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>) --> OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
mermaidDefinition: `
flowchart LR
OilWell(<img src='${oilWellIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
OilWell --> OilPowerPlant
`
},
{
productionChain: 'oilTanker',
mermaidDefinition: `flowchart LR; OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>) --> OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)`
mermaidDefinition: `
flowchart LR
OilTanker(<img src='${oilTankerIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
OilPowerPlant(<img src='${oilPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>2-3</span>)
OilTanker --> OilPowerPlant
`
},
{
productionChain: 'gasPowerPlant',
mermaidDefinition: `flowchart LR; Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>) --> GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)`
mermaidDefinition: `
flowchart LR
Gas(<img src='${gasIcon}' class='icon-size' /><span class='ratio-count'>6</span>)
GasPlant(<img src='${gasPowerPlantIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Gas --> GasPlant
`
}
]
},