mirror of
https://github.com/romancm/gamebrary
synced 2024-11-10 05:34:15 +00:00
Misc clean up
This commit is contained in:
parent
78266e6661
commit
54eed1f708
12 changed files with 173 additions and 139 deletions
|
@ -1,4 +1,3 @@
|
|||
// TODO: add endpoint to update/add contact
|
||||
// firebase emulators:start --only functions
|
||||
// Add json object in .runtimeconfig.json to use env variables locally
|
||||
|
||||
|
|
50
src/App.vue
50
src/App.vue
|
@ -1,11 +1,37 @@
|
|||
<!-- TODO: add like button to all game covers -->
|
||||
<!-- TODO: finish notifications -->
|
||||
<!-- TODO: finish boards transparency -->
|
||||
<!-- TODO: add itch.io affiliates link -->
|
||||
<!-- TODO: add features page -->
|
||||
<!-- TODO: integrate with keap -->
|
||||
<!-- TODO: make all components pascal case -->
|
||||
<!-- TODO: hook up remaining status indicator places -->
|
||||
<!-- // LanguageSettings,
|
||||
// SteamSettingsPage,
|
||||
// import SteamSettingsPage from '@/pages/SteamSettingsPage';
|
||||
// import LanguageSettings from '@/components/Settings/LanguageSettings'; -->
|
||||
<!-- Elevate Your Play, Organize Your Way! -->
|
||||
<!-- "Gamebrary: Level Up Your Collection, Organize Your Play." -->
|
||||
|
||||
<!--
|
||||
🌟 Smart Filters: Now, effortlessly find the perfect game for your mood or gaming session with our new Smart Filters! Sort and discover your collection based on genres, release dates, and more. Level up your game organization experience!
|
||||
|
||||
Explore the next level of game management with Gamebrary's Smart Filters—your key to a more personalized gaming adventure. Start organizing like never before! 🚀🎮
|
||||
|
||||
Introducing the **New Feature: "PlayStats"**!
|
||||
|
||||
Now, take your game organization to the next level with PlayStats, the latest addition to our website. Dive deeper into your gaming world and enhance your experience by tracking and analyzing your gameplay habits. Here's what PlayStats has to offer:
|
||||
|
||||
1. **Gameplay Insights:**
|
||||
Explore detailed statistics on your gaming patterns, such as total playtime, most played genres, and favorite gaming hours. Gain valuable insights into your gaming preferences.
|
||||
|
||||
2. **Achievement Showcase:**
|
||||
Showcase your in-game achievements and milestones. Celebrate your victories and share your gaming accomplishments with the community.
|
||||
|
||||
3. **Playtime Reminders:**
|
||||
Set personalized playtime reminders to maintain a healthy gaming balance. Keep track of your gaming sessions and ensure you stay on top of your real-life responsibilities.
|
||||
|
||||
4. **Game Recommendations:**
|
||||
Receive tailored game recommendations based on your play history and preferences. Discover new titles that align with your gaming style and interests.
|
||||
|
||||
Elevate your gaming experience with PlayStats – because your gaming journey is more than just a collection; it's a story waiting to be told. Upgrade your Gamebrary experience today!
|
||||
-->
|
||||
|
||||
<!-- CHORE: add like button to all game covers -->
|
||||
<!-- CHORE: make all components pascal case -->
|
||||
<!-- TODO: allow to copy/clone board -->
|
||||
<template>
|
||||
<main
|
||||
id="app"
|
||||
|
@ -188,15 +214,11 @@ export default {
|
|||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
#app {
|
||||
display: flex;
|
||||
background-size: contain;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-position: top;
|
||||
height: 100svh;
|
||||
// background-repeat: no-repeat;
|
||||
|
||||
// test
|
||||
max-height: 100svh;
|
||||
overflow-y: auto;
|
||||
// end test
|
||||
|
||||
&.nav-top {
|
||||
padding-top: 65px;
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
<!-- TODO: highlight game in board when clicked from here -->
|
||||
<template lang="html">
|
||||
<b-card
|
||||
class="cursor-pointer overflow-hidden"
|
||||
|
@ -28,7 +27,7 @@
|
|||
Public
|
||||
</b-badge>
|
||||
</header>
|
||||
|
||||
|
||||
<component
|
||||
:is="miniBoardComponent"
|
||||
:board="formattedBoard"
|
||||
|
@ -137,7 +136,7 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" rel="stylesheet/scss" scoped>
|
||||
$boardHeight: 200px;
|
||||
$boardHeight: 240px;
|
||||
|
||||
.mini-board {
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
@ -2,16 +2,17 @@
|
|||
<b-dropdown
|
||||
v-b-tooltip.hover.auto= "{ delay: { show: 500, hide: 50 } }"
|
||||
:title="boardButtonTitle"
|
||||
active
|
||||
v-bind="dockDropdownProps"
|
||||
>
|
||||
<template #button-content>
|
||||
<i class="fa-regular fa-cards-blank"></i>
|
||||
<i class="fa-regular fa-cards-blank" />
|
||||
</template>
|
||||
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'boards' }"
|
||||
>
|
||||
<i class="fa-regular fa-rectangle-list fa-fw"></i>
|
||||
<i class="fa-regular fa-rectangle-list" />
|
||||
<span class="ml-2">My boards</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
|
|
|
@ -13,12 +13,12 @@
|
|||
<b-img
|
||||
v-if="isGamePage && !isVerticalNav && gameName"
|
||||
:src="$options.getImageUrl(game)"
|
||||
width="140"
|
||||
rounded
|
||||
:alt="gameName"
|
||||
height="50"
|
||||
class="mr-2"
|
||||
/>
|
||||
|
||||
<span>{{ gameName }}</span>
|
||||
<strong>{{ gameName }}</strong>
|
||||
|
||||
<b-dropdown-item-button @click="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })">
|
||||
Add note
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<!-- TODO: bring settings to nav, remove page. -->
|
||||
<!-- TODO: highlight menu item if active -->
|
||||
<template>
|
||||
<div class="pl-2 h-100 w-100 d-flex" :class="{ 'd-flex flex-column': isVerticalNav }">
|
||||
<div class="pl-1 h-100 w-100 d-flex" :class="{ 'd-flex flex-column': isVerticalNav }">
|
||||
<b-button
|
||||
v-if="!user"
|
||||
v-b-tooltip.hover.auto="{ delay: { show: 500, hide: 50 } }"
|
||||
|
@ -72,22 +72,26 @@
|
|||
<b-button
|
||||
v-bind="dockDropdownProps"
|
||||
:to="{ name: 'search' }"
|
||||
class="mr-1"
|
||||
class="mr-1 d-sm-none"
|
||||
v-b-tooltip.hover.auto="{ delay: { show: 500, hide: 50 } }"
|
||||
title="Search"
|
||||
>
|
||||
<i class="fa-regular fa-search"></i>
|
||||
</b-button>
|
||||
|
||||
<ProfileDockDropdown v-if="user" class="ml-auto" />
|
||||
|
||||
<b-button
|
||||
v-else
|
||||
variant="danger"
|
||||
:to="{ name: 'auth' }"
|
||||
>
|
||||
Get started <span class="d-none d-sm-inline"> — it's free!</span>
|
||||
</b-button>
|
||||
<div class="ml-auto d-flex align-items-center">
|
||||
<SearchBox class="d-none d-sm-inline mr-1" />
|
||||
|
||||
<ProfileDockDropdown v-if="user" />
|
||||
|
||||
<b-button
|
||||
v-else
|
||||
variant="danger"
|
||||
:to="{ name: 'auth' }"
|
||||
>
|
||||
Get started <span class="d-none d-sm-inline"> — it's free!</span>
|
||||
</b-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -101,10 +105,12 @@ import SettingsDockDropdown from '@/components/Dock/SettingsDockDropdown';
|
|||
import TagsDockDropdown from '@/components/Dock/TagsDockDropdown';
|
||||
import NotesDockDropdown from '@/components/Dock/NotesDockDropdown';
|
||||
import GamesDockDropdown from '@/components/Dock/GamesDockDropdown';
|
||||
import SearchBox from '@/components/SearchBox';
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
SearchBox,
|
||||
UploadWallpaperButton,
|
||||
BoardsDockDropdown,
|
||||
ProfileDockDropdown,
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
title="Profile"
|
||||
v-bind="dockDropdownProps"
|
||||
:class="isVerticalNav ? 'mt-auto' : 'ml-auto'"
|
||||
:toggle-class="avatarImage ? 'p-0' : ''"
|
||||
variant="transparent"
|
||||
no-caret
|
||||
>
|
||||
|
@ -16,39 +17,37 @@
|
|||
rounded
|
||||
/>
|
||||
|
||||
<b-img
|
||||
v-else
|
||||
src="/img/dock-icons/profile.png"
|
||||
alt="wikipedia"
|
||||
width="24"
|
||||
/>
|
||||
<i v-else class="fa-regular fa-user" />
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<b-dropdown-text :class="darkTheme ? 'text-success' : 'text-danger'">
|
||||
{{ profileTitle }}
|
||||
</b-dropdown-text>
|
||||
<b-dropdown-item
|
||||
v-if="userName"
|
||||
:to="{ name: 'public.profile', params: { userName } }"
|
||||
>
|
||||
{{ displayUserName }}
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'profile' }"
|
||||
>
|
||||
<i class="fa-regular fa-rectangle-list fa-fw"></i>
|
||||
<span class="ml-2">Edit profile</span>
|
||||
<i class="fa-regular fa-user-pen"></i>
|
||||
<span class="ml-2">Edit profile</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item
|
||||
<!-- <b-dropdown-item
|
||||
v-if="profile"
|
||||
:to="{ name: 'public.profile', params: { userName: profile.userName } }"
|
||||
>
|
||||
<i class="fa-regular fa-plus fa-fw" />
|
||||
<i class="fa-regular fa-address-card"></i>
|
||||
<span class="ml-2">View profile</span>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown-item> -->
|
||||
|
||||
<b-dropdown-item
|
||||
@click="signOut"
|
||||
>
|
||||
<i class="fa-regular fa-rectangle-list fa-fw"></i>
|
||||
<span class="ml-2">Log out</span>
|
||||
<i class="fa-regular fa-right-from-bracket"></i>
|
||||
<span class="ml-2">Log out</span>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</template>
|
||||
|
@ -69,9 +68,13 @@ export default {
|
|||
...mapState(['board', 'user']),
|
||||
...mapGetters(['dockDropdownProps', 'darkTheme', 'isVerticalNav']),
|
||||
|
||||
profileTitle() {
|
||||
return this.profile?.userName
|
||||
? `@${this.profile.userName}`
|
||||
userName() {
|
||||
return this.profile?.userName;
|
||||
},
|
||||
|
||||
displayUserName() {
|
||||
return this.userName
|
||||
? `@${this.userName}`
|
||||
: 'Profile';
|
||||
},
|
||||
},
|
||||
|
|
|
@ -26,44 +26,57 @@
|
|||
:checked="showGameThumbnails"
|
||||
>
|
||||
<span :class="darkTheme ? 'text-light' : null">
|
||||
Show game thumbnails
|
||||
Game covers in board preview
|
||||
</span>
|
||||
</b-form-checkbox>
|
||||
|
||||
<b-form-checkbox
|
||||
switch
|
||||
@change="toggleTransparency"
|
||||
:checked="transparencyEnabled"
|
||||
>
|
||||
<span :class="darkTheme ? 'text-light' : null">Transparency</span>
|
||||
</b-form-checkbox>
|
||||
<!-- TODO: add option to use system theme (auto) -->
|
||||
</b-dropdown-form>
|
||||
|
||||
<div class="p-1">
|
||||
<span>Menu position</span>
|
||||
<span :class="darkTheme ? 'text-light' : null">Menu position</span>
|
||||
|
||||
<b-form-select
|
||||
:value="navPosition"
|
||||
:options="options"
|
||||
:options="navPositionOptions"
|
||||
@change="setNavPosition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-1">
|
||||
<span :class="darkTheme ? 'text-light' : null">Preferred age rating</span>
|
||||
|
||||
<b-form-select
|
||||
:value="ageRating"
|
||||
:options="ageRatingOptions"
|
||||
@change="setPreferredGameRating"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<b-dropdown-item
|
||||
:to="{ name: 'settings' }"
|
||||
:to="{ name: 'account' }"
|
||||
>
|
||||
<i class="fa-regular fa-rectangle-list fa-fw"></i>
|
||||
<span class="ml-2">Settings</span>
|
||||
<i class="fa-regular fa-user-shield fa-fw" />
|
||||
<span class="ml-2">Account</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item
|
||||
href="https://github.com/romancm/gamebrary/"
|
||||
target="_blank"
|
||||
>
|
||||
<b-img
|
||||
src="/img/dock-icons/github.png"
|
||||
width="24"
|
||||
/>
|
||||
<i class="fa-brands fa-github fa-fw" />
|
||||
GitHub
|
||||
</b-dropdown-item>
|
||||
|
||||
<b-dropdown-item v-b-modal.keyboard-shortcuts>
|
||||
<b-img
|
||||
src="/img/dock-icons/shortcuts.png"
|
||||
width="24"
|
||||
/>
|
||||
<i class="fa-regular fa-keyboard fa-fw" />
|
||||
|
||||
<span class="ml-2">Keyboard Shortcuts</span>
|
||||
</b-dropdown-item>
|
||||
|
@ -72,10 +85,8 @@
|
|||
:to="{ name: 'help' }"
|
||||
id="help"
|
||||
>
|
||||
<b-img
|
||||
src="/img/dock-icons/help.png"
|
||||
width="24"
|
||||
/>
|
||||
<i class="fa-duotone fa-question fa-fw" />
|
||||
|
||||
<span class="ml-2">Help</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
|
@ -98,11 +109,14 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex';
|
||||
import { AGE_RATINGS } from '@/constants';
|
||||
|
||||
export default {
|
||||
AGE_RATINGS,
|
||||
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
navPositionOptions: [
|
||||
{ value: 'top', text: 'Top' },
|
||||
{ value: 'right', text: 'Right' },
|
||||
{ value: 'bottom', text: 'Bottom' },
|
||||
|
@ -113,7 +127,25 @@ export default {
|
|||
|
||||
computed: {
|
||||
...mapState(['user', 'settings']),
|
||||
...mapGetters(['darkTheme', 'isVerticalNav', 'showGameThumbnails', 'dockDropdownProps', 'navPosition']),
|
||||
...mapGetters(['darkTheme', 'isVerticalNav', 'showGameThumbnails', 'dockDropdownProps', 'navPosition', 'transparencyEnabled', 'ageRating']),
|
||||
|
||||
ageRatingOptions() {
|
||||
return AGE_RATINGS.map((rating) => {
|
||||
|
||||
return {
|
||||
value: rating.id,
|
||||
text: rating.name,
|
||||
}
|
||||
console.log('rating', rating);
|
||||
|
||||
// ageRatingOptions: [
|
||||
// { value: 'top', text: 'Top' },
|
||||
// { value: 'right', text: 'Right' },
|
||||
// { value: 'bottom', text: 'Bottom' },
|
||||
// { value: 'left', text: 'Left' },
|
||||
// ],
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
|
@ -132,6 +164,19 @@ export default {
|
|||
this.saving = false;
|
||||
},
|
||||
|
||||
async setPreferredGameRating(ageRating) {
|
||||
try {
|
||||
await this.$store.dispatch('SAVE_SETTINGS', {
|
||||
...this.settings,
|
||||
ageRating,
|
||||
});
|
||||
} catch (e) {
|
||||
this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
|
||||
}
|
||||
|
||||
this.saving = false;
|
||||
},
|
||||
|
||||
async toggleTheme() {
|
||||
const { settings } = this;
|
||||
const darkTheme = settings?.darkTheme || false;
|
||||
|
@ -148,6 +193,21 @@ export default {
|
|||
});
|
||||
},
|
||||
|
||||
async toggleTransparency() {
|
||||
const transparencyEnabled = this.settings?.transparencyEnabled || false;
|
||||
|
||||
const payload = {
|
||||
...this.settings,
|
||||
transparencyEnabled: !transparencyEnabled,
|
||||
};
|
||||
|
||||
await this.$store.dispatch('SAVE_SETTINGS', payload)
|
||||
.catch(() => {
|
||||
this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
|
||||
this.saving = false;
|
||||
});
|
||||
},
|
||||
|
||||
async toggleGameThumbnails() {
|
||||
const { settings } = this;
|
||||
const showGameThumbnails = settings?.showGameThumbnails || false;
|
||||
|
|
|
@ -41,25 +41,14 @@
|
|||
v-if="user"
|
||||
:to="{ name: 'tag.create' }"
|
||||
>
|
||||
<span class="fa-stack">
|
||||
<i class="fa-light fa-tag fa-stack-1x"></i>
|
||||
<i class="fab fa-plus"></i>
|
||||
</span>
|
||||
|
||||
<!-- <img
|
||||
src="/img/dock-icons/new-tag.png"
|
||||
width="24"
|
||||
/> -->
|
||||
<i class="fa-regular fa-plus fa-fw" />
|
||||
<span class="ml-2">Add tag</span>
|
||||
</b-dropdown-item>
|
||||
|
||||
|
||||
<b-dropdown-item
|
||||
v-if="user"
|
||||
v-if="user"
|
||||
>
|
||||
<img
|
||||
src="/img/dock-icons/tag-game.png"
|
||||
width="24"
|
||||
/>
|
||||
<i class="fa-regular fa-plus fa-fw" />
|
||||
<span class="ml-2">Tag game</span>
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
|
|
@ -1,38 +1,5 @@
|
|||
<!-- TODO: allow auto collapse, toggle on click, hover -->
|
||||
<!-- TODO: add option for dock style: rounded, full, floating (top, bottom), bring back pinned boards, notes, tags, -->
|
||||
<!-- // LanguageSettings,
|
||||
// SteamSettingsPage,
|
||||
// import SteamSettingsPage from '@/pages/SteamSettingsPage';
|
||||
// import LanguageSettings from '@/components/Settings/LanguageSettings'; -->
|
||||
<!-- Elevate Your Play, Organize Your Way! -->
|
||||
<!-- "Gamebrary: Level Up Your Collection, Organize Your Play." -->
|
||||
|
||||
<!--
|
||||
🌟 Smart Filters: Now, effortlessly find the perfect game for your mood or gaming session with our new Smart Filters! Sort and discover your collection based on genres, release dates, and more. Level up your game organization experience!
|
||||
|
||||
Explore the next level of game management with Gamebrary's Smart Filters—your key to a more personalized gaming adventure. Start organizing like never before! 🚀🎮
|
||||
|
||||
Introducing the **New Feature: "PlayStats"**!
|
||||
|
||||
Now, take your game organization to the next level with PlayStats, the latest addition to our website. Dive deeper into your gaming world and enhance your experience by tracking and analyzing your gameplay habits. Here's what PlayStats has to offer:
|
||||
|
||||
1. **Gameplay Insights:**
|
||||
Explore detailed statistics on your gaming patterns, such as total playtime, most played genres, and favorite gaming hours. Gain valuable insights into your gaming preferences.
|
||||
|
||||
2. **Achievement Showcase:**
|
||||
Showcase your in-game achievements and milestones. Celebrate your victories and share your gaming accomplishments with the community.
|
||||
|
||||
3. **Playtime Reminders:**
|
||||
Set personalized playtime reminders to maintain a healthy gaming balance. Keep track of your gaming sessions and ensure you stay on top of your real-life responsibilities.
|
||||
|
||||
4. **Game Recommendations:**
|
||||
Receive tailored game recommendations based on your play history and preferences. Discover new titles that align with your gaming style and interests.
|
||||
|
||||
Elevate your gaming experience with PlayStats – because your gaming journey is more than just a collection; it's a story waiting to be told. Upgrade your Gamebrary experience today!
|
||||
-->
|
||||
|
||||
<template lang="html">
|
||||
<nav :class="[darkTheme ? 'dark' : 'light', `nav-${navPosition}`]" class="p-1">
|
||||
<nav :class="[darkTheme ? 'bg-dark' : 'bg-light', `nav-${navPosition}`, transparencyEnabled ? 'semi-transparent' : '']" class="p-1">
|
||||
<PageDock />
|
||||
|
||||
<div
|
||||
|
@ -55,7 +22,7 @@ export default {
|
|||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
...mapGetters(['darkTheme', 'navPosition', 'isVerticalNav']),
|
||||
...mapGetters(['darkTheme', 'navPosition', 'isVerticalNav', 'transparencyEnabled']),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -66,24 +33,16 @@ nav {
|
|||
align-items: center;
|
||||
// border-bottom: 1px solid var(--light);
|
||||
border-radius: .5rem;
|
||||
margin: .5rem;
|
||||
width: calc(100% - 2rem);
|
||||
margin: 1rem;
|
||||
width: calc(100dvw - 2rem);
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
&.dark {
|
||||
background: rgba(53,54,58,.72);
|
||||
}
|
||||
|
||||
&.light {
|
||||
background: rgba(222,228,231,.72);
|
||||
}
|
||||
// background: url('https://static.vecteezy.com/system/resources/previews/026/292/194/original/90s-seamless-pattern-colourful-memphis-style-retro-background-or-retro-80s-wallpaper-free-vector.jpg');
|
||||
// background-size: 200px;
|
||||
|
||||
&.nav-top {
|
||||
top: 0;
|
||||
margin: .5rem 1rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
&.nav-bottom {
|
||||
|
|
|
@ -1,8 +1,5 @@
|
|||
<template lang="html">
|
||||
<b-form
|
||||
class="small-container"
|
||||
@submit.prevent="search"
|
||||
>
|
||||
<b-form @submit.prevent="search">
|
||||
<b-input-group>
|
||||
<b-form-input
|
||||
v-model="searchText"
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
// TODO: audit these
|
||||
export const IMAGE_SIZE_1080P = 't_1080p_2x'; // 1920 x 1080 fit, center gravity
|
||||
export const IMAGE_SIZE_720P = 't_720p_2x'; // 1280 x 720 fit, center gravity
|
||||
export const IMAGE_SIZE_COVER_BIG = 't_cover_big_2x'; // 264 x 374 fit
|
||||
|
|
Loading…
Reference in a new issue