mirror of
https://github.com/dtomlinson91/anno-production-chain-renderer.git
synced 2025-12-21 22:05:46 +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>
|
||||
|
||||
## 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 <http://localhost:9000/anno-production-chain-renderer/#/> 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(<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
|
||||
yarn format
|
||||
# or
|
||||
npm run format
|
||||
For example to change the number of brick factories from 1 to 2:
|
||||
|
||||
Change
|
||||
|
||||
```
|
||||
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