From 88870bf08cc812e021e01b7cb25391dcfa6c6707 Mon Sep 17 00:00:00 2001 From: Daniel Tomlinson Date: Sat, 1 Oct 2022 19:38:48 +0100 Subject: [PATCH] update README.md --- README.md | 240 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 219 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index e0747fa..79ce53a 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,243 @@ -# Anno 1800 Production Chain Renderer (anno-production-chain-renderer) +# Anno 1800 Production Chain Renderer -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 -## Install the dependencies +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 -# or -npm install ``` -### Start the app in development mode (hot-code reloading, error reporting, etc.) +Install Quasar CLI + +```bash +yarn global add @quasar/cli +``` + +Start the app in development mode (hot-code reloading, error reporting, etc.) ```bash quasar dev ``` -### Lint the files +Open in your browser. -```bash -yarn lint -# or -npm run lint +## 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 + ` +} ``` -### Format the files +### Edit number of buildings -```bash -yarn format -# or -npm run format +For example to change the number of brick factories from 1 to 2: + +Change + +``` +Bricks(1) ``` -### Build the app for production +to -```bash -quasar build +``` +Bricks(2) ``` -### Customize the configuration +### Edit efficiency -See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js). +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 +```