Misc clean up

This commit is contained in:
gamebrary 2024-07-12 10:19:27 -07:00
parent 78266e6661
commit 54eed1f708
12 changed files with 173 additions and 139 deletions

View file

@ -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

View file

@ -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 Filtersyour 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;

View file

@ -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;

View file

@ -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>

View file

@ -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

View file

@ -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,

View file

@ -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';
},
},

View file

@ -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;

View file

@ -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>

View file

@ -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 Filtersyour 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 {

View file

@ -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"

View file

@ -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