dtomlinson/anno-production-chain-renderer
1
0
Fork 0
mirror of https://github.com/dtomlinson91/anno-production-chain-renderer.git synced 2025-12-22 14:25:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

add latest

Browse Source
This commit is contained in:
Daniel Tomlinson
2022-10-01 01:06:54 +01:00
parent 944167e608
commit f8e03e2ecc
11 changed files with 510 additions and 396 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/InfoCardBase.vue
View File

@@ -1,66 +1,23 @@
<template>
<q-list separator class="big-font text-left">
<q-item>
<q-item-section avatar>
<q-img
src="~assets/annoIcons/Furs.webp"
class="info-icon"
></q-img> </q-item-section
><q-item-section
><span
>Furs use Old World
<q-img
src="~assets/annoIcons/Icon_session_moderate_0.png"
class="info-small-icon"
></q-img>
production rates.
</span></q-item-section
>
</q-item>
<q-item>
<q-item-section avatar>
<q-img
src="~assets/annoIcons/Clay.webp"
class="info-icon"
></q-img></q-item-section
><q-item-section
><span
>Clay uses Old World
<q-img
src="~assets/annoIcons/Icon_session_moderate_0.png"
class="info-small-icon"
></q-img>
production rates.
</span></q-item-section
>
</q-item>
<q-item>
<q-item-section avatar>
<q-img
src="~assets/annoIcons/Gold_Ore.webp"
class="info-icon"
></q-img></q-item-section
><q-item-section
><span
>Gold mines use New World
<q-img
src="~assets/annoIcons/Icon_session_southamerica_0.png"
class="info-small-icon"
></q-img>
production rates.</span
></q-item-section
>
</q-item>
<q-item>
<q-item-section avatar>
<q-img src="~assets/electricityBorder.webp" class="info-icon"></q-img>
</q-item-section>
<q-item-section>Building has electricity</q-item-section>
</q-item>
<InfoCardItemWorld
v-for="item in worldItemData"
:key="item.icon"
v-bind="item"
></InfoCardItemWorld>
<InfoCardItem
v-for="item in itemData"
:key="item.icon"
v-bind="item"
></InfoCardItem>
</q-list>
</template>
<script setup lang="ts"></script>
<script setup lang="ts">
import InfoCardItem from './info_card/InfoCardItem.vue';
import InfoCardItemWorld from './info_card/InfoCardItemWorld.vue';
import { itemData, worldItemData } from 'src/pages/data/info-card';
</script>
<style lang="scss">
.big-font {

2
src/components/ProductionChain.vue
View File

@@ -5,7 +5,7 @@
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { mermaid } from 'boot/mermaid';
import { mermaid } from 'composables/mermaid';
// DOM Refs
const diagram = ref<HTMLInputElement | null>(null);

18
src/components/info_card/InfoCardItem.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<q-item>
<q-item-section avatar>
<q-img :src="icon" class="info-icon"></q-img>
</q-item-section>
<q-item-section>
<span>{{ text }}</span>
</q-item-section>
</q-item>
</template>
<script setup lang="ts">
// Props
defineProps<{
icon: string;
text: string;
}>();
</script>

23
src/components/info_card/InfoCardItemWorld.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<q-item>
<q-item-section avatar>
<q-img :src="icon" class="info-icon"></q-img>
</q-item-section>
<q-item-section>
<span>
{{ text }}
<q-img :src="worldIcon" class="info-small-icon"></q-img>
production rates.
</span>
</q-item-section>
</q-item>
</template>
<script setup lang="ts">
// Props
defineProps<{
icon: string;
worldIcon: string;
text: string;
}>();
</script>