update layout

This commit is contained in:
2023-12-12 01:01:39 +00:00
parent 65d8fddd36
commit b9ee9779ae
12 changed files with 246 additions and 99 deletions

View File

@@ -1,16 +1,16 @@
<template>
<q-list separator class="big-font text-left">
<slot></slot>
<InfoCardItem
v-for="item in infoCardItemData"
:key="item.icon"
v-bind="item"
></InfoCardItem>
<InfoCardItemWorldIcon
v-for="item in infoCardItemWorldData"
:key="item.icon"
v-bind="item"
></InfoCardItemWorldIcon>
<InfoCardItem
v-for="item in infoCardItemData"
:key="item.icon"
v-bind="item"
></InfoCardItem>
</q-list>
</template>

View File

@@ -88,7 +88,7 @@ $column: 3;
}
.masonry-container {
height: 4500px;
height: 4400px;
.masonry-col {
width: 1000px;

View File

@@ -10,7 +10,10 @@
:col-break="false"
class="masonry-col item"
>
<InfoCard>
<InfoCard
:info-card-item-data="miscItemData"
:info-card-item-world-data="miscItemWorldData"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
@@ -48,6 +51,9 @@ import InfoCardItem from 'components/InfoCard/InfoCardItem.vue';
// Production Chain Data
import { productionChainsMisc } from './data/production-chains-misc';
// Info Card Data
import { miscItemData, miscItemWorldData } from 'src/pages/data/info-card';
// Icons
import * as icons from './data/icons';
@@ -82,7 +88,7 @@ $column: 3;
}
.masonry-container {
height: 4150px;
height: 4510px;
.masonry-col {
width: 1000px;
@@ -93,6 +99,6 @@ $column: 3;
}
.custom-width {
width: 3200px;
width: 3150px;
}
</style>

View File

@@ -9,7 +9,10 @@
:col-break="false"
class="masonry-col item"
>
<InfoCard>
<InfoCard
:info-card-item-data="season1ItemData"
:info-card-item-world-data="season1ItemWorldData"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
@@ -47,6 +50,12 @@ import InfoCardItem from 'components/InfoCard/InfoCardItem.vue';
// Production Chain Data
import { productionChainsSeason1 } from './data/production-chains-season-1';
// Info Card Data
import {
season1ItemData,
season1ItemWorldData
} from 'src/pages/data/info-card';
// Icons
import * as icons from './data/icons';
@@ -81,7 +90,7 @@ $column: 2;
}
.masonry-container {
height: 1430px;
height: 1450px;
.masonry-col {
width: 1000px;

View File

@@ -10,7 +10,10 @@
:col-break="false"
class="masonry-col item"
>
<InfoCard>
<InfoCard
:info-card-item-data="season2ItemData"
:info-card-item-world-data="season2ItemWorldData"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
@@ -48,6 +51,12 @@ import InfoCardItem from 'components/InfoCard/InfoCardItem.vue';
// Production Chain Data
import { productionChainsSeason2 } from './data/production-chains-season-2';
// Info Card Data
import {
season2ItemData,
season2ItemWorldData
} from 'src/pages/data/info-card';
// Icons
import * as icons from './data/icons';

View File

@@ -11,7 +11,10 @@
:col-break="false"
class="masonry-col item"
>
<InfoCard>
<InfoCard
:info-card-item-data="season3ItemData"
:info-card-item-world-data="season3ItemWorldData"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
@@ -49,6 +52,12 @@ import InfoCardItem from 'components/InfoCard/InfoCardItem.vue';
// Production Chain Data
import { productionChainsSeason3 } from './data/production-chains-season-3';
// Info Card Data
import {
season3ItemData,
season3ItemWorldData
} from 'src/pages/data/info-card';
// Icons
import * as icons from './data/icons';

View File

@@ -10,7 +10,10 @@
:col-break="false"
class="masonry-col item"
>
<InfoCard>
<InfoCard
:info-card-item-data="season4ItemData"
:info-card-item-world-data="season4ItemWorldData"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
@@ -48,6 +51,12 @@ import InfoCardItem from 'components/InfoCard/InfoCardItem.vue';
// Production Chain Data
import { productionChainsSeason4 } from './data/production-chains-season-4';
// Info Card Data
import {
season4ItemData,
season4ItemWorldData
} from 'src/pages/data/info-card';
// Icons
import * as icons from './data/icons';
@@ -82,7 +91,7 @@ $column: 3;
}
.masonry-container {
height: 5280px;
height: 5900px;
.masonry-col {
width: 1000px;

View File

@@ -75,35 +75,137 @@ export const baseItemData: InfoCardItem[] = [
id: 'electricity',
icon: icons.electricityIcon,
text: 'Building requires electricity.'
},
{
id: 'fullChain',
icon: fullChainMultiplierIcon,
text: 'The multiplier for a full chain. To scale chain to 100% multiply together (for every item in the chain): ',
additionalText: ' number of buildings × efficiency % × multiplier'
}
];
export const baseItemWorldData: InfoCardItemWorldIcon[] = [
{
id: 'furs',
id: 'baseFurs',
icon: icons.fursIcon,
textPre: 'Furs use Old World',
textPost: 'production rates.',
worldIcon: icons.oldWorldIcon
},
{
id: 'gold',
icon: icons.goldOreIcon,
textPre: 'Gold mines use New World',
textPost: 'production rates.',
worldIcon: icons.newWorldIcon
}
];
// Misc
export const miscItemData: InfoCardItem[] = [];
export const miscItemWorldData: InfoCardItemWorldIcon[] = [];
export const miscItemData: InfoCardItem[] = [
{
id: 'electricity',
icon: icons.electricityIcon,
text: 'Building requires electricity.'
},
{
id: 'fullChain',
icon: fullChainMultiplierIcon,
text: 'The multiplier for a full chain. To scale chain to 100% multiply together (for every item in the chain): ',
additionalText: ' number of buildings × efficiency % × multiplier'
}
];
export const miscItemWorldData: InfoCardItemWorldIcon[] = [
{
id: 'clay',
icon: icons.clayIcon,
textPre: 'Enbesa',
textPost: ' production chains use Clay Collectors.',
worldIcon: icons.enbesaIcon
}
];
// S1
export const season1ItemData: InfoCardItem[] = [];
export const season1ItemData: InfoCardItem[] = [
{
id: 'fullChain',
icon: fullChainMultiplierIcon,
text: 'The multiplier for a full chain. To scale chain to 100% multiply together (for every item in the chain): ',
additionalText: ' number of buildings × efficiency % × multiplier'
}
];
export const season1ItemWorldData: InfoCardItemWorldIcon[] = [];
// S2
export const season2ItemData: InfoCardItem[] = [];
export const season2ItemWorldData: InfoCardItemWorldIcon[] = [];
export const season2ItemData: InfoCardItem[] = [
{
id: 'electricity',
icon: icons.electricityIcon,
text: 'Building requires electricity.'
},
{
id: 'fullChain',
icon: fullChainMultiplierIcon,
text: 'The multiplier for a full chain. To scale chain to 100% multiply together (for every item in the chain): ',
additionalText: ' number of buildings × efficiency % × multiplier'
}
];
export const season2ItemWorldData: InfoCardItemWorldIcon[] = [
{
id: 'clay',
icon: icons.clayIcon,
textPre: 'Enbesa',
textPost: ' production chains use Clay Collectors.',
worldIcon: icons.enbesaIcon
}
];
// S3
export const season3ItemData: InfoCardItem[] = [];
export const season3ItemData: InfoCardItem[] = [
{
id: 'electricity',
icon: icons.electricityIcon,
text: 'Building requires electricity.'
},
{
id: 'fullChain',
icon: fullChainMultiplierIcon,
text: 'The multiplier for a full chain. To scale chain to 100% multiply together (for every item in the chain): ',
additionalText: ' number of buildings × efficiency % × multiplier'
}
];
export const season3ItemWorldData: InfoCardItemWorldIcon[] = [];
// S4
export const season4ItemData: InfoCardItem[] = [];
export const season4ItemWorldData: InfoCardItemWorldIcon[] = [];
export const season4ItemData: InfoCardItem[] = [
{
id: 'airship',
icon: icons.airshipIcon,
text: 'Airship drop chain ratios are the same for Old World & New World.'
},
{
id: 'charcoal',
icon: icons.charcoalKilnIcon,
text: '2 Charcoal Kilns can be replaced with 1 Coal Mine.'
},
{
id: 'electricity',
icon: icons.electricityIcon,
text: 'Building requires electricity.'
},
{
id: 'fullChain',
icon: fullChainMultiplierIcon,
text: 'The multiplier for a full chain. To scale chain to 100% multiply together (for every item in the chain): ',
additionalText: ' number of buildings × efficiency % × multiplier'
}
];
export const season4ItemWorldData: InfoCardItemWorldIcon[] = [
{
id: 'hacienda',
icon: icons.haciendaIcon,
textPre: 'Hacienda chains use New World',
textPost: 'buildings.',
worldIcon: icons.newWorldIcon
}
];

View File

@@ -200,13 +200,14 @@ export const productionChainsBase: TieredProductionChain[] = [
},
{
productionChain: 'steamCarriages',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
SteamMotors(<img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
SteamCarriages(<img src='${icons.steamCarriagesIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
Wood(<img src='${icons.woodIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Caoutchouc(<img src='${icons.caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
Coaches(<img src='${icons.coachMakersIcon}' class='icon-size' /><span class='ratio-count'>8</span>)
SteamMotors(<span class='icon-flex-row'><img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>150%</span><span class='ratio-count'>2</span></span></span>); style SteamMotors stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;
SteamCarriages(<img src='${icons.steamCarriagesIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
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>)
Caoutchouc(<img src='${icons.caoutchoucIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
Coaches(<img src='${icons.coachMakersIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
SteamCarriages
style SteamMotors stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
style SteamCarriages stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7

View File

@@ -253,9 +253,9 @@ export const productionChainsMisc: TieredProductionChain[] = [
productionChain: 'siloss3',
mermaidDefinition: endent`
flowchart LR
Dung(<img src='${icons.dungIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Dung(<span class='icon-flex-row'><img src='${icons.dungIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span><img src='${icons.alpacaWoolIcon}' class='electricity-icon' /></span><span class='ratio-count'>3</span></span></span>)
Fertiliser(<img src='${icons.fertiliserIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Silo(<img src='${icons.siloIcon}' class='icon-size' /><span class='ratio-count'>5</span>)
Silo(<img src='${icons.siloIcon}' class='icon-size' /><span class='ratio-count'>10</span>)
Dung --> Fertiliser --> Silo
`
}
@@ -333,15 +333,16 @@ export const productionChainsMisc: TieredProductionChain[] = [
productionChains: [
{
productionChain: 'steamMotors',
chainMultiplier: '3',
mermaidDefinition: endent`
flowchart LR
Coal(<img src='${icons.coalIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Iron(<img src='${icons.ironIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Steel(<img src='${icons.steelIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
SteamMotors(<img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>3</span>)
Copper(<img src='${icons.copperIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
Zinc(<img src='${icons.zincIcon}' class='icon-size' /><span class='ratio-count'>2</span>)
Brass(<img src='${icons.brassIcon}' class='icon-size' /><span class='ratio-count'>4</span>)
SteamMotors(<img src='${icons.steamMotorsIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Coal(<span class='icon-flex-row'><img src='${icons.coalIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>33.33%</span><span class='ratio-count'>1</span></span></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'>33.33%</span><span class='ratio-count'>1</span></span></span>)
Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66.67%</span><span class='ratio-count'>1</span></span></span>)
Copper(<span class='icon-flex-row'><img src='${icons.copperIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66.67%</span><span class='ratio-count'>1</span></span></span>)
Zinc(<span class='icon-flex-row'><img src='${icons.zincIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66.67%</span><span class='ratio-count'>1</span></span></span>)
Brass(<span class='icon-flex-row'><img src='${icons.brassIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>66.67%</span><span class='ratio-count'>2</span></span></span>)
style SteamMotors stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7
Coal & Iron --> Steel --> SteamMotors
Copper & Zinc --> Brass --> SteamMotors

View File

@@ -169,6 +169,7 @@ export const productionChainsSeason2: TieredProductionChain[] = [
},
{ colBreak: true, tierName: 'skip' },
{ colBreak: true, tierName: 'skip' },
{ colBreak: true, tierName: 'skip' },
{
colBreak: false,
tierName: 'Advanced Chains (Scholars)',

View File

@@ -76,7 +76,7 @@ export const productionChainsSeason4: TieredProductionChain[] = [
productionChain: 'firestation',
chainMultiplier: '24',
mermaidDefinition: endent`
flowchart LR;
flowchart TB;
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'>4.17%</span><span class='ratio-count'>1</span></span></span>)
Steel(<span class='icon-flex-row'><img src='${icons.steelIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>8.33%</span><span class='ratio-count'>1</span></span></span>)
Charcoal(<span class='icon-flex-row'><img src='${icons.charcoalKilnIcon}' class='icon-size' /><span class='icon-flex-col q-pl-sm'><span class='efficiency-perc'>8.33%</span><span class='ratio-count'>1</span></span></span>)
@@ -248,6 +248,66 @@ export const productionChainsSeason4: TieredProductionChain[] = [
}
]
},
{
colBreak: false,
tierName: 'Hacienda',
productionChains: [
{
productionChain: 'hotSauce',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
Spices(<span class='icon-flex-row icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.spicesIcon}' 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>)
HotSauce(<img src='${icons.hotSauceIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Spices --> HotSauce
`
},
{
productionChain: 'atole',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
SugarCane(<span class='icon-flex-row'><img src='${icons.sugarCaneIcon}' 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>)
Atole(<img src='${icons.atoleIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Corn & SugarCane --> Atole
`
},
{
productionChain: 'haciendaRum',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
SugarCane(<img src='${icons.sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
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>)
Rum(<img src='${icons.rumIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
SugarCane & Wood --> Rum
`
},
{
productionChain: 'haciendaSchnapps',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
Potato(<span class='icon-flex-row icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.potatoIcon}' 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>)
Schnapps(<span class='icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span></span>)
Potato --> Schnapps
`
},
{
productionChain: 'haciendaBeer',
mermaidDefinition: endent`
flowchart LR
Grain(<span class='icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>1</span></span>)
Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Beer(<span class='icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.breweryIcon}' class='icon-size' /><span class='ratio-count'>1</span></span>)
Grain & Corn --> Beer
`
}
]
},
{ colBreak: true, tierName: 'skip' },
{ colBreak: true, tierName: 'skip' },
{
colBreak: false,
tierName: 'Supply Factories | Airships',
@@ -329,65 +389,5 @@ export const productionChainsSeason4: TieredProductionChain[] = [
`
}
]
},
{ colBreak: true, tierName: 'skip' },
{ colBreak: true, tierName: 'skip' },
{
colBreak: false,
tierName: 'Hacienda',
productionChains: [
{
productionChain: 'hotSauce',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
Spices(<span class='icon-flex-row icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.spicesIcon}' 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>)
HotSauce(<img src='${icons.hotSauceIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Spices --> HotSauce
`
},
{
productionChain: 'atole',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
SugarCane(<span class='icon-flex-row'><img src='${icons.sugarCaneIcon}' 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>)
Atole(<img src='${icons.atoleIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Corn & SugarCane --> Atole
`
},
{
productionChain: 'haciendaRum',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
SugarCane(<img src='${icons.sugarCaneIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
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>)
Rum(<img src='${icons.rumIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
SugarCane & Wood --> Rum
`
},
{
productionChain: 'haciendaSchnapps',
chainMultiplier: '2',
mermaidDefinition: endent`
flowchart LR
Potato(<span class='icon-flex-row icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.potatoIcon}' 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>)
Schnapps(<span class='icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.schnappsIcon}' class='icon-size' /><span class='ratio-count'>1</span></span>)
Potato --> Schnapps
`
},
{
productionChain: 'haciendaBeer',
mermaidDefinition: endent`
flowchart LR
Grain(<span class='icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.grainIcon}' class='icon-size' /><span class='ratio-count'>1</span></span>)
Corn(<img src='${icons.cornIcon}' class='icon-size' /><span class='ratio-count'>1</span>)
Beer(<span class='icon-regional-container'><img src='${icons.newWorldIcon}' class='icon-regional' /><img src='${icons.breweryIcon}' class='icon-size' /><span class='ratio-count'>1</span></span>)
Grain & Corn --> Beer
`
}
]
}
];