mirror of
https://github.com/kihashi/stardew_community_checklist.git
synced 2025-10-19 08:03:17 +00:00
Migrate remaining components to SFC
This commit is contained in:
lachie-underhill
parent
1bdf115687
commit
1110f6228f
@ -38,9 +38,11 @@
|
||||
"@vue/tsconfig": "^0.4.0",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.42.0",
|
||||
"eslint-plugin-vue": "^9.11.0",
|
||||
"eslint-plugin-vue": "^9.14.1",
|
||||
"postcss": "^8.4.24",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-url": "^10.1.3",
|
||||
"prettier": "^2.8.8",
|
||||
"typescript": "^5.1.3",
|
||||
"vite": "^4.3.5"
|
||||
},
|
||||
|
||||
@ -1,57 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
|
||||
import faReddit from '@fortawesome/fontawesome-free-brands/faReddit'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { RouterLink } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Stardew Community Checklist</strong> by
|
||||
<a href="http://johncleaver.com">John Cleaver</a>. The source code is licensed
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>.
|
||||
<a href="https://johncleaver.com">John Cleaver</a>. The source code is licensed
|
||||
<a href="https://opensource.org/license/mit/">MIT</a>.
|
||||
</p>
|
||||
<p>
|
||||
<router-link to="/changelog">Changelog</router-link>
|
||||
<RouterLink to="/changelog">Changelog</RouterLink>
|
||||
</p>
|
||||
<p>
|
||||
Bundle and Item information is from the
|
||||
<a href="http://stardewvalleywiki.com/Stardew_Valley_Wiki">Stardew Valley Wiki</a> and is
|
||||
used under the
|
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
|
||||
<a href="https://stardewvalleywiki.com">Stardew Valley Wiki</a> and is used under the
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA 3.0 License</a>.
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://stardewvalley.net/">Stardew Valley</a> ©
|
||||
<a href="https://stardewvalley.net/">Stardew Valley</a> ©
|
||||
<a href="https://chucklefish.org/">Chucklefish LTD</a>. Developed by
|
||||
<a href="https://twitter.com/ConcernedApe">ConcernedApe</a>.
|
||||
</p>
|
||||
<p>
|
||||
<a :href="gh_address"><font-awesome-icon :icon="gh_icon" /></a>
|
||||
<a :href="reddit_address"><font-awesome-icon :icon="reddit_icon" /></a>
|
||||
</p>
|
||||
<div class="github-reddit">
|
||||
<a href="https://github.com/kihashi/stardew_community_checklist">
|
||||
<FontAwesomeIcon :icon="faGithub" />
|
||||
</a>
|
||||
<a href="https://www.reddit.com/r/stardewchecklist/">
|
||||
<FontAwesomeIcon :icon="faReddit" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
|
||||
import faReddit from '@fortawesome/fontawesome-free-brands/faReddit'
|
||||
export default {
|
||||
name: 'app-footer',
|
||||
components: {
|
||||
'font-awesome-icon': FontAwesomeIcon
|
||||
},
|
||||
computed: {
|
||||
gh_icon() {
|
||||
return faGithub
|
||||
},
|
||||
reddit_icon() {
|
||||
return faReddit
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
gh_address: 'https://github.com/kihashi/stardew_community_checklist',
|
||||
reddit_address: 'https://www.reddit.com/r/stardewchecklist/'
|
||||
}
|
||||
}
|
||||
<style scoped>
|
||||
.github-reddit {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ season: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="icon" v-bind:data-season="season.id">
|
||||
<span class="icon" v-bind:data-season="season">
|
||||
<mdicon name="flower" v-if="season === 'spring'" />
|
||||
<mdicon name="white-balance-sunny" v-if="season === 'summer'" />
|
||||
<mdicon name="leaf" v-if="season === 'fall'" />
|
||||
@ -7,21 +11,6 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'season-icon',
|
||||
props: {
|
||||
season: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return 'spring'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
position: relative;
|
||||
@ -31,8 +20,7 @@ export default {
|
||||
content: attr(data-season);
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
width: 100%;
|
||||
bottom: -1.85rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
background-color: #00d1b2;
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
defineProps<{ skill: string }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="icon" v-bind:data-skill="skill.id">
|
||||
<span class="icon" v-bind:data-skill="skill">
|
||||
<mdicon name="cow" v-if="skill === 'farming'" />
|
||||
<mdicon name="diamond" v-if="skill === 'mining'" />
|
||||
<mdicon name="mushroom" v-if="skill === 'foraging'" />
|
||||
@ -8,21 +12,6 @@
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'skill-icon',
|
||||
props: {
|
||||
skill: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return 'farming'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
position: relative;
|
||||
@ -32,8 +21,7 @@ export default {
|
||||
content: attr(data-skill);
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -0.85rem;
|
||||
width: 100%;
|
||||
bottom: -1.85rem;
|
||||
border-radius: 3px;
|
||||
font-size: 0.75rem;
|
||||
background-color: #209cee;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import ItemCard from '@/components/item_card/ItemCard.vue'
|
||||
import ItemTable from '@/components/item_table/ItemTable.vue'
|
||||
import { useGeneralStore } from '@/store'
|
||||
import ItemCard from '@/components/item-card/ItemCard.vue'
|
||||
import ItemTable from '@/components/item-table/ItemTable.vue'
|
||||
import { useGeneralStore, type Item } from '@/store'
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
@ -16,7 +16,10 @@ const bundleItems = computed(() =>
|
||||
bundle.value ? store.getBundleItemsInBundle(bundle.value.id) : []
|
||||
)
|
||||
const items = computed(() =>
|
||||
bundleItems.value.map((i) => store.getItemById(i.item_id)).filter((v, i, a) => a.indexOf(v) === i)
|
||||
bundleItems.value
|
||||
.map((i) => store.getItemById(i.item_id))
|
||||
.filter((item): item is Item => !!item)
|
||||
.filter((v, i, a) => a.indexOf(v) === i)
|
||||
)
|
||||
const room = computed(() => (bundle.value ? store.getRoomById(bundle.value.room) : undefined))
|
||||
|
||||
@ -68,7 +71,7 @@ const hideBundleItems = computed(() => store.HideSpoilers && store.BundleRewards
|
||||
v-else
|
||||
class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex"
|
||||
v-for="item in items"
|
||||
:key="item?.id"
|
||||
:key="item.id"
|
||||
>
|
||||
<item-card :item="item"></item-card>
|
||||
</div>
|
||||
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<section class="section">
|
||||
<section class="container">
|
||||
<h1 class="title">Changelog</h1>
|
||||
<version v-for="version in changelog.versions" :key="version.date" :version="version" />
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ChangeLogJson from '@/assets/game_data/changelog.json'
|
||||
import Version from '@/components/changelog/Version.vue'
|
||||
export default {
|
||||
name: 'changelog',
|
||||
components: {
|
||||
Version
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
changelog: ChangeLogJson
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
@ -1,3 +1,32 @@
|
||||
<script setup lang="ts">
|
||||
import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
version: {
|
||||
id: string
|
||||
date: string
|
||||
link: string
|
||||
changes: string[]
|
||||
}
|
||||
}>(),
|
||||
{
|
||||
version: () => ({
|
||||
id: 'Version 1.0',
|
||||
date: '2016-04-13',
|
||||
link: 'Version-1.0',
|
||||
changes: ['Initial Version']
|
||||
})
|
||||
}
|
||||
)
|
||||
|
||||
const releaseUrl = computed(
|
||||
() => 'https://github.com/kihashi/stardew_community_checklist/releases/tag/' + props.version.link
|
||||
)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card">
|
||||
<header class="card-header">
|
||||
@ -8,7 +37,7 @@
|
||||
<div class="card-content">
|
||||
<div class="content">
|
||||
<ul>
|
||||
<li v-for="change in version.changes" :key="change.date">
|
||||
<li v-for="change in version.changes" :key="change">
|
||||
{{ change }}
|
||||
</li>
|
||||
</ul>
|
||||
@ -17,9 +46,9 @@
|
||||
<div class="card-footer">
|
||||
<p class="card-footer-item has-text-centered-mobile">Release Date: {{ version.date }}</p>
|
||||
<p class="card-footer-item">
|
||||
<a :href="release_url" class="button">
|
||||
<a :href="releaseUrl" class="button">
|
||||
<span class="icon">
|
||||
<font-awesome-icon :icon="gh_icon" />
|
||||
<FontAwesomeIcon :icon="faGithub" />
|
||||
</span>
|
||||
<span>Release</span>
|
||||
</a>
|
||||
@ -28,35 +57,4 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import faGithub from '@fortawesome/fontawesome-free-brands/faGithub'
|
||||
|
||||
export default {
|
||||
name: 'version',
|
||||
props: {
|
||||
version: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
id: 'Version 1.0',
|
||||
date: '2016-04-13',
|
||||
link: 'Version-1.0',
|
||||
changes: ['Initial Version']
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
release_url() {
|
||||
return (
|
||||
'https://github.com/kihashi/stardew_community_checklist/releases/tag/' + this.version.link
|
||||
)
|
||||
},
|
||||
gh_icon() {
|
||||
return faGithub
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
20
src/components/item-card/SeasonList.vue
Normal file
20
src/components/item-card/SeasonList.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
import SeasonTag from './SeasonTag.vue'
|
||||
|
||||
withDefaults(defineProps<{ seasons: string[] }>(), {
|
||||
seasons: () => ['spring', 'summer', 'fall', 'winter']
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<span class="tags has-addons">
|
||||
<season-tag v-for="season in seasons" :key="season" :season="season" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.tags {
|
||||
justify-content: center;
|
||||
flex-wrap: no-wrap;
|
||||
}
|
||||
</style>
|
||||
13
src/components/item-card/SeasonTag.vue
Normal file
13
src/components/item-card/SeasonTag.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<span class="tag is-primary">
|
||||
<season-icon :season="season" class="is-small"></season-icon>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SeasonIcon from '@/components/SeasonIcon.vue'
|
||||
|
||||
defineProps<{ season: string }>()
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
18
src/components/item-card/SkillList.vue
Normal file
18
src/components/item-card/SkillList.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<span class="tags has-addons">
|
||||
<skill-tag v-for="skill in skills" :key="skill" :skill="skill" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SkillTag from './SkillTag.vue'
|
||||
|
||||
defineProps<{ skills: string[] }>()
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tags {
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
</style>
|
||||
13
src/components/item-card/SkillTag.vue
Normal file
13
src/components/item-card/SkillTag.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
<span class="tag is-info">
|
||||
<SkillIcon :skill="skill" class="is-small" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SkillIcon from '@/components/SkillIcon.vue'
|
||||
|
||||
defineProps<{ skill: string }>()
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
35
src/components/item-table/ItemTable.vue
Normal file
35
src/components/item-table/ItemTable.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<table class="table is-bordered is-striped is-narrow is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Source</th>
|
||||
<th v-if="showSeasonList">Seasons</th>
|
||||
<th v-if="showSkillList">Skills</th>
|
||||
<th>Bundles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<ItemTableRow v-for="item in items" :key="item.id" :item="item" />
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ItemTableRow from '@/components/item-table/ItemTableRow.vue'
|
||||
import { useGeneralStore, type Item } from '@/store'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
defineProps<{ items: Item[] }>()
|
||||
|
||||
const showSeasonList = computed(() => !(store.HideSpoilers && store.SeasonsSpoilers))
|
||||
const showSkillList = computed(() => !(store.HideSpoilers && store.SkillsSpoilers))
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
</style>
|
||||
39
src/components/item-table/ItemTableRow.vue
Normal file
39
src/components/item-table/ItemTableRow.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<script setup lang="ts">
|
||||
import SeasonList from '../item-card/SeasonList.vue'
|
||||
import SkillList from '../item-card/SkillList.vue'
|
||||
import BundleButton from '../item-card/BundleButton.vue'
|
||||
import { useGeneralStore, type Item } from '@/store'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
const showSeasonList = computed(() => !(store.HideSpoilers && store.SeasonsSpoilers))
|
||||
const showSkillList = computed(() => !(store.HideSpoilers && store.SkillsSpoilers))
|
||||
|
||||
defineProps<{ item: Item }>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.source }}
|
||||
</td>
|
||||
<td v-if="showSeasonList">
|
||||
<season-list :seasons="item.seasons" />
|
||||
</td>
|
||||
<td v-if="showSkillList">
|
||||
<skill-list :skills="item.skills" />
|
||||
</td>
|
||||
<td>
|
||||
<bundle-button
|
||||
v-for="bundleItem in store.getBundleItemsForItem(item.id)"
|
||||
:key="bundleItem.id"
|
||||
:bundle-item="bundleItem"
|
||||
:item="item"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<span class="tags has-addons">
|
||||
<season-tag v-for="season in seasons" :key="season.order" :season="season" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SeasonTag from './SeasonTag.vue'
|
||||
|
||||
export default {
|
||||
components: { SeasonTag },
|
||||
name: 'season-list',
|
||||
props: {
|
||||
seasons: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: function () {
|
||||
return [
|
||||
{
|
||||
id: 'spring',
|
||||
order: 0,
|
||||
name: 'Spring'
|
||||
},
|
||||
{
|
||||
id: 'summer',
|
||||
order: 1,
|
||||
name: 'Summer'
|
||||
},
|
||||
{
|
||||
id: 'fall',
|
||||
order: 2,
|
||||
name: 'Fall'
|
||||
},
|
||||
{
|
||||
id: 'winter',
|
||||
order: 3,
|
||||
name: 'Winter'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tags {
|
||||
justify-content: center;
|
||||
flex-wrap: no-wrap;
|
||||
}
|
||||
</style>
|
||||
@ -1,26 +0,0 @@
|
||||
<template>
|
||||
<span class="tag is-primary">
|
||||
<season-icon :season="season" class="is-small"></season-icon>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SeasonIcon from '@/components/SeasonIcon.vue'
|
||||
export default {
|
||||
name: 'season-tag',
|
||||
props: {
|
||||
season: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return 'spring'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SeasonIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<span class="tags has-addons">
|
||||
<skill-tag v-for="skill in skills" :key="skill.order" :skill="skill" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SkillTag from './SkillTag.vue'
|
||||
|
||||
export default {
|
||||
components: { SkillTag },
|
||||
name: 'skill-list',
|
||||
props: {
|
||||
skills: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.tags {
|
||||
justify-content: center;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
</style>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<span class="tag is-info">
|
||||
<skill-icon :skill="skill" class="is-small" />
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SkillIcon from '@/components/SkillIcon.vue'
|
||||
|
||||
export default {
|
||||
name: 'skill-tag',
|
||||
props: {
|
||||
skill: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: function () {
|
||||
return 'farming'
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SkillIcon
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -1,49 +0,0 @@
|
||||
<template>
|
||||
<table class="table is-bordered is-striped is-narrow is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Item</th>
|
||||
<th>Source</th>
|
||||
<th v-if="showSeasonList">Seasons</th>
|
||||
<th v-if="showSkillList">Skills</th>
|
||||
<th>Bundles</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<item-table-row v-for="item in items" :key="item.id" :item="item" />
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ItemTableRow from '@/components/item_table/ItemTableRow.vue'
|
||||
|
||||
export default {
|
||||
name: 'ItemTable',
|
||||
components: {
|
||||
ItemTableRow
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
props: {
|
||||
items: {
|
||||
type: Array
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
showSeasonList: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
|
||||
},
|
||||
showSkillList: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
table {
|
||||
table-layout: fixed;
|
||||
}
|
||||
</style>
|
||||
@ -1,121 +0,0 @@
|
||||
<template>
|
||||
<tr>
|
||||
<td>
|
||||
{{ item.name }}
|
||||
</td>
|
||||
<td>
|
||||
{{ item.source }}
|
||||
</td>
|
||||
<td v-if="showSeasonList">
|
||||
<season-list :seasons="item.seasons" />
|
||||
</td>
|
||||
<td v-if="showSkillList">
|
||||
<skill-list :skills="item.skills" />
|
||||
</td>
|
||||
<td>
|
||||
<bundle-button
|
||||
v-for="bundleItem in item.bundles"
|
||||
:key="bundleItem.id"
|
||||
:bundle-item="bundleItem"
|
||||
:item="item"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SeasonList from '../item_card/SeasonList.vue'
|
||||
import SkillList from '../item_card/SkillList.vue'
|
||||
import BundleButton from '../item_card/BundleButton.vue'
|
||||
export default {
|
||||
name: 'ItemTable',
|
||||
components: {
|
||||
BundleButton,
|
||||
SkillList,
|
||||
SeasonList
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
computed: {
|
||||
showItemDesc: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.ItemInfoSpoilers)
|
||||
},
|
||||
showSeasonList: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
|
||||
},
|
||||
showSkillList: function () {
|
||||
return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
|
||||
}
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {
|
||||
id: 22,
|
||||
name: 'Purple Mushroom',
|
||||
source:
|
||||
'Can be found in the mines or in the farm cave if you selected the mushroom perk.',
|
||||
seasons: [
|
||||
{
|
||||
id: 'spring',
|
||||
order: 0,
|
||||
name: 'Spring'
|
||||
},
|
||||
{
|
||||
id: 'summer',
|
||||
order: 1,
|
||||
name: 'Summer'
|
||||
},
|
||||
{
|
||||
id: 'fall',
|
||||
order: 2,
|
||||
name: 'Fall'
|
||||
},
|
||||
{
|
||||
id: 'winter',
|
||||
order: 3,
|
||||
name: 'Winter'
|
||||
}
|
||||
],
|
||||
skills: [
|
||||
{
|
||||
id: 'mining',
|
||||
order: 1,
|
||||
name: 'Mining'
|
||||
},
|
||||
{
|
||||
id: 'foraging',
|
||||
order: 2,
|
||||
name: 'Foraging'
|
||||
}
|
||||
],
|
||||
bundles: [
|
||||
{
|
||||
count: 1,
|
||||
bundle: {
|
||||
id: 5,
|
||||
name: 'Exotic Foraging Bundle',
|
||||
room: 0,
|
||||
reward: "Autumn's Bounty (5)"
|
||||
},
|
||||
id: 24
|
||||
},
|
||||
{
|
||||
count: 1,
|
||||
bundle: {
|
||||
id: 23,
|
||||
name: 'Field Research Bundle',
|
||||
room: 4,
|
||||
reward: 'Recycling Machine'
|
||||
},
|
||||
id: 25
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -9,34 +9,19 @@ interface Filters {
|
||||
skillFilter: { selectedSkills: string[]; skillExclusive: boolean }
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
filters: Filters
|
||||
}>()
|
||||
const emit = defineEmits<{ (e: 'update:filters', val: Filters): void }>()
|
||||
|
||||
function updateName(name: string) {
|
||||
emit('update:filters', { ...props.filters, nameFilter: name })
|
||||
}
|
||||
|
||||
function updateSeasons(seasonFilter: typeof props.filters.seasonFilter) {
|
||||
emit('update:filters', { ...props.filters, seasonFilter })
|
||||
}
|
||||
|
||||
function updateSkills(skillFilter: typeof props.filters.skillFilter) {
|
||||
emit('update:filters', { ...props.filters, skillFilter })
|
||||
}
|
||||
const filters = defineModel<Filters>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="columns">
|
||||
<div class="columns" v-if="filters">
|
||||
<div class="column">
|
||||
<ItemSearch :modelValue="filters.nameFilter" @update:modelValue="updateName" />
|
||||
<ItemSearch v-model="filters.nameFilter" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<SeasonFilter :modelValue="filters.seasonFilter" @update:modelValue="updateSeasons" />
|
||||
<SeasonFilter v-model="filters.seasonFilter" />
|
||||
</div>
|
||||
<div class="column">
|
||||
<SkillFilter :modelValue="filters.skillFilter" @update:modelValue="updateSkills" />
|
||||
<SkillFilter v-model="filters.skillFilter" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -3,23 +3,14 @@ import SeasonIcon from '@/components/SeasonIcon.vue'
|
||||
import ButtonCheckbox from '@/components/ButtonCheckbox.vue'
|
||||
import { useGeneralStore } from '@/store'
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
interface ModelValue {
|
||||
selectedSeasons: string[]
|
||||
seasonExclusive: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{ modelValue: ModelValue }>()
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', value: ModelValue): void }>()
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
function updateSeasons(val: string[]) {
|
||||
emit('update:modelValue', { ...props.modelValue, selectedSeasons: val })
|
||||
}
|
||||
|
||||
function updateExclusive(val: boolean) {
|
||||
emit('update:modelValue', { ...props.modelValue, seasonExclusive: val })
|
||||
}
|
||||
const modelValue = defineModel<ModelValue>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -27,14 +18,10 @@ function updateExclusive(val: boolean) {
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Season</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field-body" v-if="modelValue">
|
||||
<div class="field has-addons has-addons-centered">
|
||||
<div class="control" v-for="season in store.seasons" :key="season.order">
|
||||
<ButtonCheckbox
|
||||
:value="season.id"
|
||||
:modelValue="modelValue.selectedSeasons"
|
||||
@update:modelValue="updateSeasons"
|
||||
>
|
||||
<ButtonCheckbox :value="season.id" v-model="modelValue.selectedSeasons">
|
||||
<span class="icon is-small">
|
||||
<SeasonIcon :season="season.id"></SeasonIcon>
|
||||
</span>
|
||||
@ -43,11 +30,7 @@ function updateExclusive(val: boolean) {
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-expanded">
|
||||
<ButtonCheckbox
|
||||
class="is-fullwidth"
|
||||
:modelValue="modelValue.seasonExclusive"
|
||||
@update:modelValue="updateExclusive"
|
||||
>
|
||||
<ButtonCheckbox class="is-fullwidth" v-model="modelValue.seasonExclusive">
|
||||
Exclusive
|
||||
</ButtonCheckbox>
|
||||
</div>
|
||||
|
||||
@ -8,18 +8,9 @@ interface ModelValue {
|
||||
skillExclusive: boolean
|
||||
}
|
||||
|
||||
const props = defineProps<{ modelValue: ModelValue }>()
|
||||
const emit = defineEmits<{ (e: 'update:modelValue', value: ModelValue): void }>()
|
||||
const modelValue = defineModel<ModelValue>()
|
||||
|
||||
const store = useGeneralStore()
|
||||
|
||||
function updateSkills(val: string[]) {
|
||||
emit('update:modelValue', { ...props.modelValue, selectedSkills: val })
|
||||
}
|
||||
|
||||
function updateExclusive(val: boolean) {
|
||||
emit('update:modelValue', { ...props.modelValue, skillExclusive: val })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -27,14 +18,10 @@ function updateExclusive(val: boolean) {
|
||||
<div class="field-label is-normal">
|
||||
<label class="label">Skills</label>
|
||||
</div>
|
||||
<div class="field-body">
|
||||
<div class="field-body" v-if="modelValue">
|
||||
<div class="field has-addons has-addons-centered">
|
||||
<div class="control" v-for="skill in store.skills" :key="skill.id">
|
||||
<ButtonCheckbox
|
||||
:value="skill.id"
|
||||
:modelValue="modelValue.selectedSkills"
|
||||
@update:modelValue="updateSkills"
|
||||
>
|
||||
<ButtonCheckbox :value="skill.id" v-model="modelValue.selectedSkills">
|
||||
<span class="icon is-small">
|
||||
<SkillIcon :skill="skill.id" />
|
||||
</span>
|
||||
@ -43,11 +30,7 @@ function updateExclusive(val: boolean) {
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="control is-expanded">
|
||||
<ButtonCheckbox
|
||||
class="is-fullwidth"
|
||||
:modelValue="modelValue.skillExclusive"
|
||||
@update:modelValue="updateExclusive"
|
||||
>
|
||||
<ButtonCheckbox class="is-fullwidth" v-model="modelValue.skillExclusive">
|
||||
Exclusive
|
||||
</ButtonCheckbox>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ import Bundles from '@/views/BundlesView.vue'
|
||||
import BundleItems from '@/components/bundles/BundleItems.vue'
|
||||
import Search from '@/views/SearchView.vue'
|
||||
import Settings from '@/views/SettingsView.vue'
|
||||
import ChangeLog from '@/components/changelog/ChangeLog.vue'
|
||||
import Changelog from '@/views/ChangelogView.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@ -49,7 +49,7 @@ const router = createRouter({
|
||||
},
|
||||
{
|
||||
path: '/changelog',
|
||||
component: ChangeLog
|
||||
component: Changelog
|
||||
}
|
||||
],
|
||||
linkActiveClass: 'is-active'
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import BundleNav from '@/components/bundles/BundleNav.vue'
|
||||
import router from '@/router'
|
||||
import { useGeneralStore } from '@/store'
|
||||
import { RouterView } from 'vue-router'
|
||||
import { RouterView, useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
const store = useGeneralStore()
|
||||
|
||||
const bundle = store.getBundleById(Number(router.currentRoute.value.params.id))
|
||||
</script>
|
||||
|
||||
@ -12,19 +13,7 @@ const bundle = store.getBundleById(Number(router.currentRoute.value.params.id))
|
||||
<div>
|
||||
<BundleNav />
|
||||
<section class="section">
|
||||
<RouterView :key="bundle?.id"></RouterView>
|
||||
<RouterView :key="bundle?.id" />
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.fade-enter,
|
||||
.fade-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
15
src/views/ChangelogView.vue
Normal file
15
src/views/ChangelogView.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import ChangeLogJson from '@/assets/game_data/changelog.json'
|
||||
import Version from '@/components/changelog/VersionDisplay.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="section">
|
||||
<section class="container">
|
||||
<h1 class="title">Changelog</h1>
|
||||
<Version v-for="version in ChangeLogJson.versions" :key="version.date" :version="version" />
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style></style>
|
||||
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import ItemCard from '@/components/item_card/ItemCard.vue'
|
||||
import ItemTable from '@/components/item_table/ItemTable.vue'
|
||||
import ItemCard from '@/components/item-card/ItemCard.vue'
|
||||
import ItemTable from '@/components/item-table/ItemTable.vue'
|
||||
import SearchForm from '@/components/search/SearchForm.vue'
|
||||
import { useGeneralStore } from '@/store'
|
||||
import _ from 'lodash'
|
||||
@ -87,7 +87,7 @@ const filteredItems = computed(() => {
|
||||
|
||||
<template>
|
||||
<section class="section">
|
||||
<SearchForm v-model:filters="filters"></SearchForm>
|
||||
<SearchForm v-model="filters"></SearchForm>
|
||||
<section class="container">
|
||||
<div class="columns is-multiline">
|
||||
<ItemTable v-if="store.CompactView" :items="filteredItems" />
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import { fileURLToPath, URL } from "node:url";
|
||||
|
||||
import { defineConfig } from "vite";
|
||||
import vue from "@vitejs/plugin-vue";
|
||||
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), vueJsx()],
|
||||
resolve: {
|
||||
alias: {
|
||||
"@": fileURLToPath(new URL("./src", import.meta.url)),
|
||||
},
|
||||
},
|
||||
});
|
||||
15
vite.config.ts
Normal file
15
vite.config.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue({ script: { defineModel: true } }), vueJsx()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -1117,7 +1117,7 @@ eslint-plugin-prettier@^4.0.0:
|
||||
dependencies:
|
||||
prettier-linter-helpers "^1.0.0"
|
||||
|
||||
eslint-plugin-vue@^9.11.0:
|
||||
eslint-plugin-vue@^9.14.1:
|
||||
version "9.14.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-9.14.1.tgz#3b0c9857642dac547c7564031cfb09d283eafdd4"
|
||||
integrity sha512-LQazDB1qkNEKejLe/b5a9VfEbtbczcOaui5lQ4Qw0tbRBbQYREyxxOV5BQgNDTqGPs9pxqiEpbMi9ywuIaF7vw==
|
||||
@ -1764,7 +1764,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
|
||||
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
|
||||
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
|
||||
|
||||
postcss@^8.1.10, postcss@^8.4.23:
|
||||
postcss@^8.1.10, postcss@^8.4.23, postcss@^8.4.24:
|
||||
version "8.4.24"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.24.tgz#f714dba9b2284be3cc07dbd2fc57ee4dc972d2df"
|
||||
integrity sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==
|
||||
@ -1785,6 +1785,11 @@ prettier-linter-helpers@^1.0.0:
|
||||
dependencies:
|
||||
fast-diff "^1.1.2"
|
||||
|
||||
prettier@^2.8.8:
|
||||
version "2.8.8"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
|
||||
integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
|
||||
|
||||
punycode@^2.1.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user