diff --git a/docs/boilerplate_production_chains.md b/docs/boilerplate_production_chains.md index a4204f2..b982050 100644 --- a/docs/boilerplate_production_chains.md +++ b/docs/boilerplate_production_chains.md @@ -21,7 +21,7 @@ NAME(1) +NAME(1) ``` ``` diff --git a/docs/scaling_down_greater_than_one.md b/docs/scaling_down_greater_than_one.md index 08fa966..5d24ec8 100644 --- a/docs/scaling_down_greater_than_one.md +++ b/docs/scaling_down_greater_than_one.md @@ -1,19 +1,27 @@ Telephones - filament +Find the LCD of all the %'s + +``` +LCD(1/3,2/3) = 3 + 4 4/3 = 1.3 -= 2 +1.3 -> 2 1.3/2 = 0.66 2 @ 0.66 Go other way -2/0.66 = 1.3 -1.3/3 = 4 +2 * 0.66 = 1.3 +1.3 * 3 = 4 +``` --- Not this: because 2 @ 0.33 = 1 @ 0.66 + +``` 4 4/3 = 1.3 @@ -21,3 +29,4 @@ Not this: because 2 @ 0.33 = 1 @ 0.66 r 0.66 0.66/2 = 2 @ 33% +``` diff --git a/docs/todo.md b/docs/todo.md new file mode 100644 index 0000000..d4b112f --- /dev/null +++ b/docs/todo.md @@ -0,0 +1,4 @@ +# todo + +- Add scss mixins and functions to the vue composition api section +- Difference between import and use in scss diff --git a/docs/todo.todo b/docs/todo.todo index e0f26dc..0aca223 100644 --- a/docs/todo.todo +++ b/docs/todo.todo @@ -1,4 +1,5 @@ + Archive: ✘ push to gh pages @cancelled(22-09-25 22:01) @project(ToDo) ✔ document div with background instead of img @done(22-09-25 21:08) @project(ToDo) diff --git a/quasar.config.js b/quasar.config.js index fecd351..55a0377 100644 --- a/quasar.config.js +++ b/quasar.config.js @@ -9,6 +9,7 @@ // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js const { configure } = require('quasar/wrappers'); +const path = require('path'); module.exports = configure(function (/* ctx */) { return { @@ -53,6 +54,10 @@ module.exports = configure(function (/* ctx */) { node: 'node16', }, + alias: { + composables: path.join(__dirname, './src/composables'), + }, + vueRouterMode: 'hash', // available values: 'hash', 'history' // vueRouterBase, // vueDevtools, diff --git a/src/boot/mermaid.ts b/src/boot/mermaid.ts deleted file mode 100644 index 4e00b14..0000000 --- a/src/boot/mermaid.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { boot } from 'quasar/wrappers'; -import mermaid from 'mermaid'; - -// "async" is optional; -// more info on params: https://v2.quasar.dev/quasar-cli/boot-files -export default boot(async (/* { app, router, ... } */) => { - mermaid.initialize({ startOnLoad: true }); -}); diff --git a/src/components/ChainTiers.vue b/src/components/ChainTiers.vue index cadedbd..83112af 100644 --- a/src/components/ChainTiers.vue +++ b/src/components/ChainTiers.vue @@ -38,7 +38,7 @@ const calculateColBreak = () => (props.colBreak ? 'hide-item' : ''); diff --git a/src/components/InfoCard.vue b/src/components/InfoCard.vue deleted file mode 100644 index bd235c9..0000000 --- a/src/components/InfoCard.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/src/components/InfoCardBase.vue b/src/components/InfoCardBase.vue new file mode 100644 index 0000000..de26fc4 --- /dev/null +++ b/src/components/InfoCardBase.vue @@ -0,0 +1,77 @@ + + + + + diff --git a/src/composables/mermaid.ts b/src/composables/mermaid.ts new file mode 100644 index 0000000..68604ea --- /dev/null +++ b/src/composables/mermaid.ts @@ -0,0 +1,14 @@ +import { onMounted } from 'vue'; +import mermaid from 'mermaid'; + +export function initialiseMermaid() { + onMounted(() => { + mermaid.initialize({ + startOnLoad: false, + logLevel: 'fatal', + securityLevel: 'loose', + theme: 'neutral', + flowchart: { htmlLabels: true } + }); + }); +} diff --git a/src/css/app.scss b/src/css/app.scss index 9fe2668..5d18b38 100644 --- a/src/css/app.scss +++ b/src/css/app.scss @@ -1,5 +1,6 @@ // app global css in SCSS form @import 'src/css/rubik-font.scss'; +@import 'src/css/mermaid.scss'; @font-face { font-family: Soleil; diff --git a/src/css/mermaid.scss b/src/css/mermaid.scss new file mode 100644 index 0000000..501c875 --- /dev/null +++ b/src/css/mermaid.scss @@ -0,0 +1,7 @@ +.top-padding { + padding-top: 100px; +} + +rect.label-container { + fill: $burnt !important; +} diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 7b1300c..a711be6 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -1,7 +1,7 @@ + + + + diff --git a/src/pages/AnnoExpansions.vue b/src/pages/AnnoExpansions.vue new file mode 100644 index 0000000..586e50c --- /dev/null +++ b/src/pages/AnnoExpansions.vue @@ -0,0 +1,70 @@ + + + + + diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue deleted file mode 100644 index 9b07f4b..0000000 --- a/src/pages/IndexPage.vue +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/src/components/models.ts b/src/pages/data/models.ts similarity index 100% rename from src/components/models.ts rename to src/pages/data/models.ts diff --git a/src/components/production-chains.ts b/src/pages/data/production-chains-base.ts similarity index 79% rename from src/components/production-chains.ts rename to src/pages/data/production-chains-base.ts index 6b2237a..7da1dc6 100644 --- a/src/components/production-chains.ts +++ b/src/pages/data/production-chains-base.ts @@ -1,13 +1,11 @@ import { TieredProductionChain } from './models'; // Icons -import lightningIcon from 'assets/annoIcons/Lightning.png'; - // Regions -import oldWorldIcon from '../assets/annoIcons/Icon_session_moderate_0.webp'; -import enbesaIcon from '../assets/annoIcons/Icon_session_land_of_lions_0.webp'; -import newWorldIcon from '../assets/annoIcons/Icon_session_southamerica_0.webp'; -import arcticIcon from '../assets/annoIcons/Icon_session_passage_0.webp'; +import oldWorldIcon from 'assets/annoIcons/Icon_session_moderate_0.webp'; +import enbesaIcon from 'assets/annoIcons/Icon_session_land_of_lions_0.webp'; +import newWorldIcon from 'assets/annoIcons/Icon_session_southamerica_0.webp'; +import arcticIcon from 'assets/annoIcons/Icon_session_passage_0.webp'; // Building Materials import woodIcon from 'assets/annoIcons/Wood.webp'; @@ -22,7 +20,7 @@ import steelBeamsIcon from 'assets/annoIcons/Steel_beams.webp'; import sandIcon from 'assets/annoIcons/Quartz_sand.webp'; import glassIcon from 'assets/annoIcons/Glass.webp'; import windowMakersIcon from 'assets/annoIcons/Windows.webp'; -import cementIcon from 'assets/annoIcons/Cement.webp'; +import limestoneIcon from 'assets/annoIcons/Cement.webp'; import concreteFactory from 'assets/annoIcons/Reinforced_concrete.webp'; import teffIcon from 'assets/annoIcons/Icon_teff_grass_0.webp'; import mudBricksIcon from 'assets/annoIcons/Icon_mud_bricks_0.webp'; @@ -90,7 +88,7 @@ import coffeeBeansIcon from 'assets/annoIcons/Coffee_beans.webp'; import coffeeIcon from 'assets/annoIcons/Coffee.webp'; import feltIcon from 'assets/annoIcons/Felt.webp'; import bowlerHatsIcon from 'assets/annoIcons/Bowler_hats.webp'; -import woodVeneersIcon from 'assets/annoIcons/Wood_veneers.webp'; +import marquetryIcon from 'assets/annoIcons/Wood_veneers.webp'; import tobaccoIcon from 'assets/annoIcons/Tobacco.webp'; import cigarIcon from 'assets/annoIcons/Cigars.webp'; import sugarIcon from 'assets/annoIcons/Sugar.webp'; @@ -154,18 +152,15 @@ import steamMotorsIcon from 'assets/annoIcons/Steam_motors.webp'; import coachMakersIcon from 'assets/annoIcons/Chassis.webp'; import steamCarriagesIcon from 'assets/annoIcons/Steam_carriages.webp'; -// Fuel +// Electricity/Fuel/Silo import oilWellIcon from 'assets/annoIcons/OilWell.webp'; import oilPowerPlantIcon from 'assets/annoIcons/Oil_Power_Plant.webp'; import oilTankerIcon from 'assets/annoIcons/Oil_tanker.webp'; import gasIcon from 'assets/annoIcons/Arctic_Gas.webp'; import gasPowerPlantIcon from 'assets/annoIcons/Icon_electric_works_gas_0.webp'; -import fuelIcon from '../assets/annoIcons/Fuel.webp'; -import tractorIcon from '../assets/annoIcons/TractorBarn.webp'; -import siloIcon from 'assets/annoIcons/Silo.webp'; // Production Chains -export const productionChains: TieredProductionChain[] = [ +export const productionChainsBase: TieredProductionChain[] = [ { colBreak: false, tierName: 'Region Ratios', @@ -185,20 +180,12 @@ export const productionChains: TieredProductionChain[] = [ { productionChain: 'clayRatio', mermaidDefinition: `flowchart LR; EnbesaClay(1) --> OldWorldClay(2)` - }, - { - productionChain: 'tractorGrain', - mermaidDefinition: `flowchart LR; TractorGrain(1) --> Grain(4)` - }, - { - productionChain: 'siloPig', - mermaidDefinition: `flowchart LR; SiloPig(1) --> Pig(2.66)` } ] }, { colBreak: false, - tierName: 'Fuel', + tierName: 'Electricity', productionChains: [ { productionChain: 'oilPowerPlant', @@ -211,14 +198,6 @@ export const productionChains: TieredProductionChain[] = [ { productionChain: 'gasPowerPlant', mermaidDefinition: `flowchart LR; Gas(6) --> GasPlant(1)` - }, - { - productionChain: 'tractor', - mermaidDefinition: `flowchart LR; OilWell(1) --> Fuel(1) --> Tractor(20)` - }, - { - productionChain: 'silos', - mermaidDefinition: `flowchart TB; Grain(1); Corn(1); Teff(1); Silo(5); Grain --> Silo; Corn --> Silo; Teff --> Silo` } ] }, @@ -244,7 +223,7 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'concrete', - mermaidDefinition: `flowchart LR; Charcoal(1) & Iron(50%1) --> Steel(1) --> Concrete(2); Cement(1) --> Concrete` + mermaidDefinition: `flowchart LR; Iron(25%1) & Coal(25%1) --> Steel(50%1) --> Concrete(1); Limestone(50%1) --> Concrete` }, { productionChain: 'mudBricks', @@ -302,7 +281,7 @@ export const productionChains: TieredProductionChain[] = [ productionChains: [ { productionChain: 'cannedFood', - mermaidDefinition: `flowchart LR; Beef(4) --> ArtisnalKitchen(4) --> Cannery(3); NAME(4) --> ArtisnalKitchen; Iron(50%1) --> Cannery` + mermaidDefinition: `flowchart LR; Beef(66%2) & RedPepper(66%2) --> ArtisnalKitchen(66%2) --> Cannery(1); Iron(16%1) --> Cannery` }, { productionChain: 'sewingMachines', @@ -328,15 +307,15 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'glasses', - mermaidDefinition: `flowchart LR; Copper(1) & Zinc(1) --> Brass(2) --> Glasses(3); Sand(1) --> Glass(1) --> Glasses` + mermaidDefinition: `flowchart LR; Sand(33%1) --> Glass(33%1) --> Glasses(1); Copper(33%1) & Zinc(33%1) --> Brass(66%1) --> Glasses` }, { productionChain: 'pocketWatches', - mermaidDefinition: `flowchart LR; GoldOre(10) & Coal(1) --> Gold(4) --> PocketWatches(3); style PocketWatches stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Sand(2) --> Glass(2) --> PocketWatches` + mermaidDefinition: `flowchart LR; GoldOre(83%4) & Coal(33%1) --> Gold(66%2) --> PocketWatches(1); Sand(66%1) --> Glass(66%1) --> PocketWatches; style PocketWatches stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;` }, { productionChain: 'lightBulb', - mermaidDefinition: `flowchart LR; Charcoal(1) --> Filament(2) --> LightBulb(2); Sand(1) --> GlassMakers(1) --> LightBulb` + mermaidDefinition: `flowchart LR; Charcoal(50%1) --> Filament(1) --> LightBulb(1); Sand(50%1) --> Glass(50%1) --> LightBulb` } ] }, @@ -354,7 +333,7 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'gramophone', - mermaidDefinition: `flowchart LR; Wood(25%1) --> WoodVeneers(1) --> Gramophone(1); style Gramophone stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Copper(50%1) & Zinc(50%1) --> Brass(1) --> Gramophone` + mermaidDefinition: `flowchart LR; Wood(25%1) --> Marquetry(1) --> Gramophone(1); style Gramophone stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; Copper(50%1) & Zinc(50%1) --> Brass(1) --> Gramophone` } ] }, @@ -396,7 +375,7 @@ export const productionChains: TieredProductionChain[] = [ productionChains: [ { productionChain: 'finery', - mermaidDefinition: `flowchart LR; Linseed(2) --> Linen(1) --> Embroidery(2)` + mermaidDefinition: `flowchart LR; Linseed(1) --> Linen(50%1) --> Embroidery(1)` }, { productionChain: 'driedMeat', @@ -404,7 +383,7 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'hibiscusTea', - mermaidDefinition: `flowchart LR; HibiscusFarm(2) --> HibiscusTea(3)` + mermaidDefinition: `flowchart LR; HibiscusFarm(66%1) --> HibiscusTea(1)` } ] }, @@ -426,15 +405,15 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'pipes', - mermaidDefinition: `flowchart LR; Clay(50%1) & Tobacco(4) --> Pipes(3)` + mermaidDefinition: `flowchart LR; Clay(16%1) & Tobacco(66%2) --> Pipes(1)` }, { productionChain: 'luminer', - mermaidDefinition: `flowchart LR; Wood(50%1) --> Paper(50%1) --> Luminer(2); Indigo(2) --> Luminer` + mermaidDefinition: `flowchart LR; Wood(25%1) --> Paper(25%1) --> Luminer(1); IndigoIcon(1) --> Luminer` }, { productionChain: 'lanterns', - mermaidDefinition: `flowchart LR; Sand(1) --> Glass(1) --> Lanterns(2); Cotton(2) & Apiary(1) --> Candles(1) --> Lanterns` + mermaidDefinition: `flowchart LR; Sand(50%1) --> Glass(50%1) --> Lanterns(1); Cotton(1) & Apiary(50%1) --> Candles(50%1) --> Lanterns` } ] }, @@ -452,7 +431,7 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'telephones', - mermaidDefinition: `flowchart LR; Coal(33%1) --> Filament(66%1) --> Telephones(1); Wood(33%1) --> WoodVeneer(66%1) --> Telephones; style Telephones stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; style Filament stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;; style WoodVeneer stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;;` + mermaidDefinition: `flowchart LR; Coal(33%1) --> Filament(66%2) --> Telephones(1); Wood(33%1) --> Marquetry(66%2) --> Telephones; style Telephones stroke:#0675BD,stroke-width:5px,stroke-dasharray: 7 7;` } ] }, @@ -530,7 +509,7 @@ export const productionChains: TieredProductionChain[] = [ }, { productionChain: 'cigars', - mermaidDefinition: `flowchart LR; Wood(50%1) --> WoodVeneers(2) --> Cigars(1); Tobacco(4) --> Cigars` + mermaidDefinition: `flowchart LR; Wood(50%1) --> Marquetry(2) --> Cigars(1); Tobacco(4) --> Cigars` }, { productionChain: 'chocolate', diff --git a/src/pages/data/production-chains-expansions.ts b/src/pages/data/production-chains-expansions.ts new file mode 100644 index 0000000..2086611 --- /dev/null +++ b/src/pages/data/production-chains-expansions.ts @@ -0,0 +1,46 @@ +import { TieredProductionChain } from './models'; + +// Farmers & Workers +import grainIcon from 'assets/annoIcons/Grain.webp'; +import teffIcon from 'assets/annoIcons/Icon_teff_grass_0.webp'; +import pigIcon from 'assets/annoIcons/Pigs.webp'; + +// Jornaleros & Obreros +import cornIcon from 'assets/annoIcons/Corn.webp'; + +// Electricity/Fuel/Silo +import oilWellIcon from 'assets/annoIcons/OilWell.webp'; +import fuelIcon from 'assets/annoIcons/Fuel.webp'; +import tractorIcon from 'assets/annoIcons/TractorBarn.webp'; +import siloIcon from 'assets/annoIcons/Silo.webp'; + +export const productionChainsExpansions: TieredProductionChain[] = [ + { + colBreak: false, + tierName: 'Region Ratios', + productionChains: [ + { + productionChain: 'tractorGrain', + mermaidDefinition: `flowchart LR; TractorGrain(1) --> Grain(4)` + }, + { + productionChain: 'siloPig', + mermaidDefinition: `flowchart LR; SiloPig(1) --> Pig(2.66)` + } + ] + }, + { + colBreak: false, + tierName: 'Fuel | Silo', + productionChains: [ + { + productionChain: 'tractor', + mermaidDefinition: `flowchart LR; OilWell(1) --> Fuel(1) --> Tractor(20)` + }, + { + productionChain: 'silos', + mermaidDefinition: `flowchart TB; Grain(1); Corn(1); Teff(1); Silo(5); Grain --> Silo; Corn --> Silo; Teff --> Silo` + } + ] + } +]; diff --git a/src/router/routes.ts b/src/router/routes.ts index 2d34fc1..7d2727c 100644 --- a/src/router/routes.ts +++ b/src/router/routes.ts @@ -4,15 +4,21 @@ const routes: RouteRecordRaw[] = [ { path: '/', component: () => import('layouts/MainLayout.vue'), - children: [{ path: '', component: () => import('pages/IndexPage.vue') }], + children: [ + { path: '', component: () => import('pages/AnnoBase.vue') }, + { + path: '/expansions', + component: () => import('pages/AnnoExpansions.vue') + } + ] }, // Always leave this as last one, // but you can also remove it { path: '/:catchAll(.*)*', - component: () => import('pages/ErrorNotFound.vue'), - }, + component: () => import('pages/ErrorNotFound.vue') + } ]; export default routes; diff --git a/tsconfig.json b/tsconfig.json index ee0d9cf..e82a378 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@quasar/app-vite/tsconfig-preset", "compilerOptions": { - "baseUrl": "." + "baseUrl": ".", + "paths": { "composables/*": ["./src/composables/*"] } } -} \ No newline at end of file +}