mirror of
https://github.com/dtomlinson91/anno-production-chain-renderer.git
synced 2025-12-22 06:15:45 +00:00
update README.md
This commit is contained in:
240
README.md
240
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
|
||||||
|
|
||||||
<https://dtomlinson91.github.io/anno-production-chain-renderer>
|
<https://dtomlinson91.github.io/anno-production-chain-renderer>
|
||||||
|
|
||||||
## 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
|
```bash
|
||||||
|
git clone https://github.com/dtomlinson91/anno-production-chain-renderer.git
|
||||||
yarn
|
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
|
```bash
|
||||||
quasar dev
|
quasar dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lint the files
|
Open <http://localhost:9000/anno-production-chain-renderer/#/> in your browser.
|
||||||
|
|
||||||
```bash
|
## Edit existing chain
|
||||||
yarn lint
|
|
||||||
# or
|
To make changes to an existing chain edit the ratio/efficiency in either:
|
||||||
npm run lint
|
|
||||||
|
- `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(<span class='icon-flex-row'><img src='${icons.clayIcon}' 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>)
|
||||||
|
Bricks(<img src='${icons.bricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
Clay --> Bricks
|
||||||
|
`
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
### Format the files
|
### Edit number of buildings
|
||||||
|
|
||||||
```bash
|
For example to change the number of brick factories from 1 to 2:
|
||||||
yarn format
|
|
||||||
# or
|
Change
|
||||||
npm run format
|
|
||||||
|
```
|
||||||
|
Bricks(<img src='${icons.bricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
```
|
```
|
||||||
|
|
||||||
### Build the app for production
|
to
|
||||||
|
|
||||||
```bash
|
```
|
||||||
quasar build
|
Bricks(<img src='${icons.bricksIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
|
||||||
```
|
```
|
||||||
|
|
||||||
### 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(<span class='icon-flex-row'><img src='${icons.clayIcon}' 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>)
|
||||||
|
```
|
||||||
|
|
||||||
|
to
|
||||||
|
|
||||||
|
```
|
||||||
|
Clay(<span class='icon-flex-row'><img src='${icons.clayIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>75%</span><span class='ratio-count'>1</span></span></span>)
|
||||||
|
```
|
||||||
|
|
||||||
|
### 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(<img src='${icons.bricksIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
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(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
SewingMachines(<img src='${icons.sewingMachinesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
Iron(<span class='icon-flex-row'><img src='${icons.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
|
||||||
|
Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' 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>)
|
||||||
|
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(<img src='${icons.nameIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
```
|
||||||
|
|
||||||
|
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 `<span class='ratio-count'>1</span>`.
|
||||||
|
|
||||||
|
### Reduced efficiency building
|
||||||
|
|
||||||
|
To define a building with reduced efficiency:
|
||||||
|
|
||||||
|
```
|
||||||
|
Name(<span class='icon-flex-row'><img src='${icons.nameIcon}' 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>)
|
||||||
|
```
|
||||||
|
|
||||||
|
In addition to the changes above:
|
||||||
|
|
||||||
|
- Change the efficiency percentage in `<span class='efficiency-perc'>50%</span>`.
|
||||||
|
|
||||||
|
### 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(<img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
SewingMachines(<img src='${icons.sewingMachinesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
|
||||||
|
Iron(<span class='icon-flex-row'><img src='${icons.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
|
||||||
|
Wood(<span class='icon-flex-row'><img src='${icons.woodIcon}' 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>)
|
||||||
|
Charcoal & Iron --> Steel --> SewingMachines
|
||||||
|
Wood --> SewingMachines
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user