# Anno 1800 Production Chain Renderer A production chain diagram for Anno 1800. Based on the original diagram by `/u/toby_p` from Reddit. This uses Vue3 (Quasar) and [MermaidJS](https://mermaid-js.github.io/mermaid/#/) to render the diagrams. ## 🌎 Live view Browser extensions like [GoFullPage](https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl) can be used to take a full-screen screenshot. ## Contributions To make changes to the diagram follow the instructions below. You will need [yarn](https://yarnpkg.com) installed locally. ### Install dependencies Clone the repository and install dependencies. ```bash git clone https://github.com/dtomlinson91/anno-production-chain-renderer.git yarn ``` Install Quasar CLI ```bash yarn global add @quasar/cli ``` Start the app in development mode (hot-code reloading, error reporting, etc.) ```bash quasar dev ``` Open in your browser. ## Edit existing chain To make changes to an existing chain edit the ratio/efficiency in either: - `src/pages/data/production-chains-base.ts` for chains up to S4. - `src/pages/data/production-chains-expansions.ts` for chains after S4. Examples below use Bricks: ```typescript { productionChain: 'bricks', chainMultiplier: '2', mermaidDefinition: endent` flowchart LR Clay(50%1) Bricks(1) Clay --> Bricks ` } ``` ### Edit number of buildings For example to change the number of brick factories from 1 to 2: Change ``` Bricks(1) ``` to ``` Bricks(2) ``` ### Edit efficiency For example to change the efficiency of the clay mines from 50% to 75%: Change ``` Clay(50%1) ``` to ``` Clay(75%1) ``` ### Add/Remove electricity For example to add electricity to brick factory: Add: ``` style Bricks stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7 ``` before the Mermaid graph definition: ``` Bricks(1) style Bricks stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7 Clay --> Bricks ``` ## Add new chain ### Icons Download the icon files and add them to `src/assets/annoIcons` In `src/pages/data/icons.ts` for each icon: Import the icon: ```typescript import newIcon from 'assets/annoIcons/NewIcon.webp'; ``` Add the icon variable to the export: ```typescript export { ... mudBricksIcon, newIcon, newWorldIcon, ... } ``` ### Tier To add a new tier open `src/pages/data/production-chains-base.ts` and add a new object to `productionChainsBase`: ```typescript { colBreak: false, tierName: 'New Chain', productionChains: [] } ``` ### Production Chain To add a new production chain edit `productionChains` for the tier and add a new object for each chain. `chainMultiplier` is optional and can be left out. Include it if the chain has been scaled down. For example to add Sewing Machines to Artisans: ```typescript { productionChain: 'sewingMachines', chainMultiplier: '2', mermaidDefinition: endent` flowchart LR Charcoal(1) Steel(1) SewingMachines(1) Iron(50%1) Steel Wood(50%1) Charcoal & Iron --> Steel --> SewingMachines Wood --> SewingMachines ` } ``` for details on the `mermaidDefinition` see the section below. ## Mermaid definitions See the documentation for mermaid flowcharts [here](https://mermaid-js.github.io/mermaid/#/flowchart) for more information. A mermaid definition starts with ``` flowchart LR ``` You can use `TB` instead of `LB` if the diagram should be rendered top to bottom. ### Standard building To define a standard building (no efficiency modifier): ``` Name(1) ``` Change: - `Name` - Give the building a name in the chain. - `{icons.nameIcon}` - Change the icon to match the icon in `src/pages/data/icons.ts`. - Change the ratio count in `1`. ### Reduced efficiency building To define a building with reduced efficiency: ``` Name(50%1) ``` In addition to the changes above: - Change the efficiency percentage in `50%`. ### Electricity building To make a building electrified follow the instructions above under the header "Add/Remove electricity". ### Define graph To define the graph use the `Name` which you defined for each building: ``` Charcoal & Iron --> Steel --> SewingMachines Wood --> SewingMachines ``` ### Final Mermaid graph definition The final mermaid definition should look something like: ``` flowchart LR Charcoal(1) Steel(1) SewingMachines(1) Iron(50%1) Steel Wood(50%1) Charcoal & Iron --> Steel --> SewingMachines Wood --> SewingMachines ```