Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-10 05:34:15 +00:00
Code Issues Projects Releases Packages Wiki Activity

more updates

Browse source
This commit is contained in:
Gamebrary 2022-08-01 21:41:04 -07:00
parent a5f3d78752
commit e77eb42a13
17 changed files with 370 additions and 308 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/img/open-source-logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

1
public/img/vue-awesome-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 8.4 KiB

3
src/components/AddRemoveGame.vue
View file

@ -28,7 +28,8 @@
<template v-if="user">
<!-- TODO: show active board at top -->
<h4 class="mx-2">Boards:</h4>
<h4 class="my-2">Add to list:</h4>
<b-list-group flush>
<b-list-group-item
v-for="board in formattedBoards"

52
src/components/Game/GameActions.vue Normal file
View file

@ -0,0 +1,52 @@
<template lang="html">
<div>
<portal v-if="user" to="headerActions">
<b-button-group class="mr-2">
<b-button @click="$bus.$emit('ADD_GAME', game.id)">
<i class="fa-solid fa-plus fa-fw" />
Add to list
</b-button>
<b-button :to="{ name: 'game.tags', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-tags fa-fw" />
Tags
</b-button>
<b-button :to="{ name: 'game.progress', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-bars-progress fa-fw" />
Track progress
</b-button>
<b-button :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-note-sticky fa-fw" />
Notes
</b-button>
<b-button :to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-newspaper fa-fw" />
News
</b-button>
<b-button :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-photo-film fa-fw" />
Images / Videos
</b-button>
</b-button-group>
</portal>
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['game', 'user']),
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
</style>

29
src/components/Game/GameNotes.vue
View file

@ -1,29 +0,0 @@
<template lang="html">
<div>
<game-note
v-if="note"
:note="note"
class="cursor-pointer"
@click.native="$router.push({ name: 'game.notes', params: { id: game.id } })"
/>
</div>
</template>
<script>
import { mapState } from 'vuex';
import GameNote from '@/components/GameNote';
export default {
components: {
GameNote,
},
computed: {
...mapState(['notes', 'game']),
note() {
return this.notes[this.game?.id] || null;
},
},
};
</script>

29
src/components/Game/GameSubPage.vue
View file

@ -1,15 +1,34 @@
<template lang="html">
<div>
<b-col>
<b-row>
<b-col
offset="2"
offset-sm="0"
cols="8"
sm="4"
md="4"
xl="3"
>
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}">
<b-img :src="gameCoverUrl" width="200" rounded class="mb-2 mr-2" />
<b-img
:src="gameCoverUrl"
rounded
class="cursor-pointer"
fluid-grow
/>
</router-link>
</b-col>
<b-col>
<b-col
cols="12"
sm="8"
md="8"
lg="8"
xl="9"
class="bg-white rounded p-5"
>
<slot />
</b-col>
</div>
</b-row>
</template>
<script>

2
src/components/Game/SimilarGames.vue
View file

@ -56,7 +56,7 @@ export default {
},
async loadGames() {
this.similarGames = [];
// this.similarGames = [];
// TODO: use try catch
// TODO: append cover url directly here

60
src/components/GameCards/GameCardSearchVertical.vue
View file

@ -7,12 +7,14 @@
img-top
class="mb-2"
footer-class="p-0 text-center font-weight-bold bold strong"
@click="addGameToList"
@click="handleClick"
>
<!-- :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" -->
<template #footer>
<small class="text-muted">
<!-- <pre>{{ selectedBoard }}</pre> -->
<!-- <pre>{{ selectedList }}</pre> -->
<strong>{{ game.name }}</strong>
</small>
</template>
@ -32,19 +34,69 @@ export default {
},
computed: {
...mapState(['user']),
...mapState(['user', 'boards']),
coverUrl() {
return getGameCoverUrl(this.game);
}
},
selectedBoard() {
const { boardId } = this.$route.query;
return this.boards.find(({ id }) => id === boardId);
},
selectedList() {
const { listIndex } = this.$route.query;
return this.selectedBoard.lists[listIndex];
},
},
methods: {
addGameToList() {
handleClick() {
const { listIndex, boardId } = this.$route.query;
if (listIndex && boardId) return this.addGameToList();
return this.user
? this.$bus.$emit('ADD_GAME', this.game.id)
: this.$router.push({ name: 'game', params: { id: this.game.id, slug: this.game.slug }});
},
addGameToList() {
return this.selectedList.games.includes(this.game.id)
? this.removeGame()
: this.addGame();
},
async addGame() {
const boardIndex = this.boards.findIndex(({ id }) => id === this.selectedBoard.id);
const board = this.boards[boardIndex];
console.log(board);
// board.lists[listIndex].games.push(this.game.id);
// try {
// await this.$store.dispatch('SAVE_GAME_BOARD', board);
// } catch (e) {
// // this.$bvToast.toast(`There was an error adding "${this.game.name}"`, { title: list.name, variant: 'danger' });
// }
},
async removeGame({ listIndex, boardId }) {
// const boardIndex = this.boards.findIndex(({ id }) => id === boardId);
// const board = this.boards[boardIndex];
// const gameIndex = board.lists[listIndex].games.indexOf(this.gameId);
//
// board.lists[listIndex].games.splice(gameIndex, 1);
//
// try {
// await this.$store.dispatch('SAVE_GAME_BOARD', board);
// } catch (e) {
// // this.$bvToast.toast(`There was an error removing "${this.game.name}"`, { title: list.name, variant: 'danger' });
// }
},
},
};
</script>

5
src/components/Tags/TagsList.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<b-container fluid>
<div>
<b-card
v-for="({ games, hex, tagTextColor }, name) in tags"
class="tags-list"
@ -47,7 +47,7 @@
/>
</div>
</b-card>
</b-container>
</div>
</template>
<script>
@ -79,6 +79,5 @@ export default {
<style lang="scss" rel="stylesheet/scss" scoped>
.tags-list {
background: #fc0;
max-width: 100%;
}
</style>

14
src/pages/BoardPage.vue
View file

@ -5,6 +5,20 @@
<board-placeholder v-if="loading" />
<template v-else-if="showBoard">
<portal to="headerTitle">
<div class="w-100 d-flex align-items-center justify-content-between">
<h3 class="m-0">{{ board.name }}</h3>
<b-button
:to="{ name: 'board.edit', params: { id: board.id } }"
variant="primary"
class="mr-2"
>
Edit
</b-button>
</div>
</portal>
<!-- TODO: put board in component -->
<game-list
v-for="(list, listIndex) in board.lists"

30
src/pages/DashboardPage.vue
View file

@ -1,31 +1,10 @@
<template lang="html">
<b-container fluid>
<portal to="headerTitle">
test
My Boards
</portal>
<header>
</header>
<b-button
variant="primary"
class="mr-2"
:to="{ name: 'notes.settings' }"
>
Notes
</b-button>
<b-button
variant="primary"
class="mr-2"
:to="{ name: 'tags.settings' }"
>
Tags
</b-button>
<div>
My Boards
<portal to="headerActions">
<b-button
variant="primary"
class="mr-2"
@ -33,10 +12,9 @@
>
Create board
</b-button>
</portal>
<game-boards class="mb-3" />
</div>
<game-boards class="mb-3" />
<empty-state
v-if="boards.length === 0"

4
src/pages/EditListPage.vue
View file

@ -46,7 +46,6 @@
label="Sort list by:"
label-for="sortField"
>
<!-- description="We'll never share your email with anyone else." -->
<b-form-select
id="sortField"
:options="sortOptions"
@ -284,8 +283,9 @@ export default {
await this.$store.dispatch('LOAD_BOARD', this.$route.params.id)
// TODO: set default values
this.list = JSON.parse(JSON.stringify(this.board.lists[this.$route.params.listIndex]));
if (this.list.settings.sortOrder === undefined) this.list.settings.sortOrder = 'sortByCustom';
if (this.list.settings.view === undefined) this.list.settings.view = 'single';
const hasGames = this.list?.games?.length > 0;

74
src/pages/GameNotesPage.vue
View file

@ -5,51 +5,47 @@
Loading...
</div>
<b-form-row v-else>
<game-sub-page>
<b-col>
<game-note v-if="note" :note="{ note }" />
<game-sub-page v-else>
<game-note v-if="note" :note="{ note }" />
<b-button
variant="primary"
:disabled="saving || !dirtied"
@click="saveNote"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="primary"
:disabled="saving || !dirtied"
@click="saveNote"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="danger"
class="mr-1"
v-if="notes[game.id] && !saving"
:disabled="deleting"
@click="deleteNote"
>
<b-spinner small v-if="deleting" />
<b-button
variant="danger"
class="mr-1"
v-if="notes[game.id] && !saving"
:disabled="deleting"
@click="deleteNote"
>
<b-spinner small v-if="deleting" />
<i class="d-sm-none fas fa-trash fa-fw" aria-hidden />
<span class="d-none d-sm-inline">{{ $t('global.delete') }}</span>
</b-button>
<i class="d-sm-none fas fa-trash fa-fw" aria-hidden />
<span class="d-none d-sm-inline">{{ $t('global.delete') }}</span>
</b-button>
<b-form-textarea
v-model.trim="note"
placeholder="Type note here"
rows="3"
max-rows="20"
/>
<b-form-textarea
v-model.trim="note"
placeholder="Type note here"
rows="3"
max-rows="20"
/>
<b-form-text id="input-live-help" v-b-modal.markdown-cheatsheet>
<i class="fab fa-markdown fa-fw" />
Markdown supported
</b-form-text>
<b-form-text id="input-live-help" v-b-modal.markdown-cheatsheet>
<i class="fab fa-markdown fa-fw" />
Markdown supported
</b-form-text>
<b-modal id="markdown-cheatsheet" title="BootstrapVue">
<markdown-cheatsheet />
</b-modal>
</b-col>
</game-sub-page>
</b-form-row>
<b-modal id="markdown-cheatsheet" title="BootstrapVue">
<markdown-cheatsheet />
</b-modal>
</game-sub-page>
</b-container>
</template>

63
src/pages/GamePage.vue
View file

@ -11,41 +11,9 @@
<b-skeleton v-if="loading" />
<template v-else-if="game">
<portal v-if="user" to="headerTitle">
<b-button-group>
<b-button @click="$bus.$emit('ADD_GAME', game.id)">
<i class="fa-solid fa-plus fa-fw" />
Add to list
</b-button>
<game-actions />
<b-button :to="{ name: 'game.tags', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-tags fa-fw" />
Tags
</b-button>
<b-button :to="{ name: 'game.progress', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-bars-progress fa-fw" />
Track progress
</b-button>
<b-button :to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-note-sticky fa-fw" />
Notes
</b-button>
<b-button :to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-newspaper fa-fw" />
News
</b-button>
<b-button :to="{ name: 'game.media', params: { id: game.id, slug: game.slug } }">
<i class="fa-solid fa-photo-film fa-fw" />
Images / Videos
</b-button>
</b-button-group>
</portal>
<b-row class="game">
<b-row>
<b-col
offset="2"
offset-sm="0"
@ -57,7 +25,7 @@
<b-img
:src="gameCoverUrl"
:alt="game.name"
class="cursor-pointer game-cover"
class="cursor-pointer"
fluid-grow
rounded
@click.stop="openGameCover"
@ -77,7 +45,7 @@
<b-card
v-if="boardsWithGame.length"
body-class="p-3"
class="mt-2 ml-n3"
class="mt-2"
>
<h4>Game found in these boards:</h4>
@ -85,7 +53,6 @@
v-for="board in boardsWithGame"
:to="{ name: 'board', params: { id: board.id } }"
:key="board.id"
block
>
<b-avatar
rounded
@ -121,6 +88,7 @@
xl="8"
>
<game-titles />
<b-progress
v-if="progress"
:value="progress"
@ -146,7 +114,13 @@
</b-badge>
<game-description />
<game-notes />
<game-note
v-if="note"
:note="note"
class="cursor-pointer"
@click.native="$router.push({ name: 'game.notes', params: { id: game.id } })"
/>
</b-col>
<b-col
@ -317,24 +291,26 @@
import { mapState, mapGetters } from 'vuex';
import { WEBSITE_CATEGORIES } from '@/constants';
import AmazonLinks from '@/components/Game/AmazonLinks';
import GameNotes from '@/components/Game/GameNotes';
import GameDetails from '@/components/Game/GameDetails';
import GameActions from '@/components/Game/GameActions';
import GameTitles from '@/components/Game/GameTitles';
import GameRating from '@/components/Game/GameRating';
import GameDescription from '@/components/Game/GameDescription';
import SimilarGames from '@/components/Game/SimilarGames';
import GameWebsites from '@/components/Game/GameWebsites';
// import GameSpeedruns from '@/components/Game/GameSpeedruns';
import GameNote from '@/components/GameNote';
export default {
components: {
// Timeline,
AmazonLinks,
GameNote,
GameDescription,
GameDetails,
GameActions,
GameTitles,
GameRating,
GameNotes,
GameWebsites,
// GameSpeedruns,
SimilarGames,
@ -357,9 +333,13 @@ export default {
},
computed: {
...mapState(['game', 'progresses', 'tags', 'boards', 'user']),
...mapState(['game', 'progresses', 'tags', 'boards', 'user', 'notes']),
...mapGetters(['gameTags']),
note() {
return this.notes[this.game?.id] || null;
},
boardsWithGame() {
return this.boards
.filter(({ lists }) => lists.some(({ games }) => games.includes(this.game.id)))
@ -487,6 +467,7 @@ export default {
this.loading = true;
this.$store.commit('CLEAR_GAME');
this.$bus.$emit('UPDATE_WALLPAPER', null);
await this.$store.dispatch('LOAD_GAME', this.gameId)
.catch(() => {

105
src/pages/PublicHomePage.vue
View file

@ -1,5 +1,8 @@
<template lang="html">
<div>
<div class="bg-white">
</div>
<header class="masthead bg-white">
<div class="container px-5">
<div class="row gx-5 align-items-center">
@ -7,10 +10,6 @@
<div class="mb-5 mb-lg-0 text-center text-lg-start">
<h1 class="display-1 mb-3">Organize <small class="display-4">your video games</small> beautifully.</h1>
<p class="lead fw-normal text-muted mb-5">Learn about games, take notes, organize, customize, discover and more with Gamebrary</p>
<div class="d-flex flex-column flex-lg-row align-items-center">
<a class="me-lg-3 mb-4 mb-lg-0" href="#!"><img class="app-badge" src="assets/img/google-play-badge.svg" alt="..." /></a>
<a href="#!"><img class="app-badge" src="assets/img/app-store-badge.svg" alt="..." /></a>
</div>
</div>
</div>
<div class="col-lg-6">
@ -21,19 +20,17 @@
</div>
</header>
<!-- App features section-->
<section id="features">
<!-- <section id="features">
<div class="container px-5">
<div class="row gx-5 align-items-center">
<div class="col-lg-8 order-lg-1 mb-5 mb-lg-0">
<div class="container-fluid px-5">
<div class="row gx-5">
<div class="col-md-6 mb-5">
<!--
Gamebrary is open source, free and universally available, there is no need to install apps, updates, etc... Gamebrary works on all your devices. -->
Gamebrary is open source, free and universally available, there is no need to install apps, updates, etc... Gamebrary works on all your devices.
<!-- Feature item-->
<div class="text-center">
<i class="bi-phone icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Notes</h3>
@ -41,7 +38,6 @@
</div>
</div>
<div class="col-md-6 mb-5">
<!-- Feature item-->
<div class="text-center">
<i class="bi-camera icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Organize</h3>
@ -51,7 +47,6 @@
</div>
<div class="row">
<div class="col-md-6 mb-5 mb-md-0">
<!-- Feature item-->
<div class="text-center">
<i class="bi-gift icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Encyclopedia</h3>
@ -61,7 +56,6 @@
</div>
</div>
<div class="col-md-6">
<!-- Feature item-->
<div class="text-center">
<i class="bi-patch-check icon-feature text-gradient d-block mb-3"></i>
<h3 class="font-alt">Track your progress</h3>
@ -72,21 +66,20 @@
</div>
</div>
<div class="col-lg-4 order-lg-0">
<!-- Features section device mockup-->
<img class="img-fluid rounded-circle" src="https://source.unsplash.com/u8Jn2rzYIps/900x900" alt="..." />
</div>
</div>
</div>
</section>
</section> -->
<section class="text-center bg-dark p-5">
<section class="feature bg-info py-3">
<img src="/img/open-source-logo.png" alt="" width="80" />
<h2 class="text-white">
Open Source, free and universal
</h2>
</section>
<!-- Basic features section-->
<section class="bg-dark">
<div class="container px-5">
<div class="row gx-5 align-items-center justify-content-center justify-content-lg-between">
@ -101,14 +94,21 @@
</div>
</section>
<section class="text-center bg-light p-5">
<h2>
Vue Awesome
</h2>
</section>
<a href="https://awesome-vue.js.org/" target="_blank" class="feature py-5">
<img
src="/img/vue-awesome-logo.svg"
alt="Vue Awesome"
width="180"
class="mb-2"
/>
<!-- Call to action section-->
<section class="bg-success py-5">
<aside class="d-flex flex-column">
<h3>Featured in Awesome Vue.js</h3>
<p class="text-muted">A curated list of awesome things related to Vue.js</p>
</aside>
</a>
<!-- <section class="bg-success py-5">
<div class="cta-content">
<div class="container px-5">
<h2 class="text-white display-3">Get started.
@ -119,7 +119,8 @@
<b-button pill variant="outline-light" size="lg" class="ml-3">Get Pro</b-button>
</div>
</div>
</section>
</section> -->
<public-page-footer />
</div>
</template>
@ -131,44 +132,32 @@ export default {
components: {
PublicPageFooter,
},
data() {
return {
features: [
{
title: 'Boards',
message: 'Much like a bookshelf, display your games, drag and drop them, customize, sort and more!',
},
{
title: 'Encyclopedia',
message: '<strong>Powered by IGDB and Wikipedia</strong>. Gamebrary provides the best video game database with hundreds of thousands of video games.',
},
{
title: 'Notes',
message: 'Take game notes and view them all in place.',
},
{
title: 'Track your progress',
message: 'Keep track of your video game backlog.',
},
{
title: 'Tags',
message: 'Categorize games across the board, literally.',
},
{
title: 'Open Source, free and universal',
message: 'Gamebrary is open source, free and universally available, there is no need to install apps, updates, etc... Gamebrary works on all your devices.',
},
],
};
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.features {
.feature {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 1rem;
margin: 0 auto;
grid-template-columns: 1fr 1fr;
align-items: center;
grid-gap: 4rem;
@media(max-width: 768px) {
grid-gap: 0;
grid-template-columns: 1fr;
aside {
text-align: center;
}
}
img {
margin-left: auto;
@media(max-width: 768px) {
margin: 0 auto;
}
}
}
</style>

30
src/pages/SearchPage.vue
View file

@ -1,6 +1,23 @@
<template lang="html">
<b-container>
<b-row>
<portal to="headerTitle">
<div class="w-100 d-flex align-items-center justify-content-between">
<h3 class="m-0">Search</h3>
<b-button-toolbar key-nav aria-label="Toolbar with button groups" class="mr-1">
<b-button-group class="mx-1">
<b-button :variant="listView ? 'primary' : 'light'" @click="listView = true">
<i class="fa-solid fa-list fa-fw" aria-hidden />
</b-button>
<b-button :variant="listView ? 'light' : 'primary'" @click="listView = false">
<i class="fa-solid fa-grip fa-fw" aria-hidden />
</b-button>
</b-button-group>
</b-button-toolbar>
</div>
</portal>
<!-- TODO: add filters -->
<!-- TODO: add view toggle -->
<!-- <b-col cols="3" class="position-sticky mt-2">
@ -43,21 +60,12 @@
<div v-else-if="searchResults.length > 0">
<header class="my-2 d-flex align-items-center justify-content-between">
<h3 v-if="activeBoardList">
<pre>{{ activeBoardList }}</pre>
Add games to <strong>{{ activeBoardList.name }}</strong>
</h3>
<h3>Search results</h3>
<b-button-toolbar key-nav aria-label="Toolbar with button groups">
<b-button-group class="mx-1">
<b-button :variant="listView ? 'primary' : 'secondary'" @click="listView = true">
<i class="fa-solid fa-list fa-fw" aria-hidden />
</b-button>
<b-button :variant="listView ? 'secondary' : 'primary'" @click="listView = false">
<i class="fa-solid fa-grip fa-fw" aria-hidden />
</b-button>
</b-button-group>
</b-button-toolbar>
</header>
<template v-if="listView">
@ -133,7 +141,7 @@ export default {
},
activeBoardList() {
if (!this.boardListIndex) return [];
if (this.boardListIndex === undefined) return [];
return this.board?.lists[this.boardListIndex];
},

177
src/pages/SettingsPage.vue
View file

@ -1,109 +1,110 @@
<template lang="html">
<b-container>
<div style="width: 400px; max-width: 100%">
<language-settings />
<b-row>
<b-col>
<language-settings />
<settings-card
title="Wallpapers"
description="Manage your wallpapers"
icon="fa-images"
@click.native="$router.push({ name: 'wallpapers' })"
/>
<settings-card
title="Wallpapers"
description="Manage your wallpapers"
icon="fa-images"
@click.native="$router.push({ name: 'wallpapers' })"
/>
<settings-card
title="Notes"
description="View all your notes"
icon="fa-note-sticky"
@click.native="$router.push({ name: 'notes' })"
/>
<settings-card
title="Notes"
description="View all your notes"
icon="fa-note-sticky"
@click.native="$router.push({ name: 'notes' })"
/>
<settings-card
title="Tags"
description="View all your tags"
icon="fa-tags"
@click.native="$router.push({ name: 'tags' })"
/>
<settings-card
title="Tags"
description="View all your tags"
icon="fa-tags"
@click.native="$router.push({ name: 'tags' })"
/>
<settings-card
title="Account"
description="Manage your Gamebrary account"
icon="fa-user"
@click.native="$router.push({ name: 'account.settings' })"
/>
<settings-card
title="Account"
description="Manage your Gamebrary account"
icon="fa-user"
@click.native="$router.push({ name: 'account.settings' })"
/>
<!-- TODO: fix -->
<b-button
block
variant="secondary"
v-b-modal.keyboard-shortcuts
>
Keyboard shortcuts
</b-button>
<!-- TODO: fix -->
<b-button
block
variant="secondary"
v-b-modal.keyboard-shortcuts
>
Keyboard shortcuts
</b-button>
<b-button
block
variant="secondary"
:to="{ name: 'dev.tools' }"
>
Dev tools
</b-button>
<b-button
block
variant="secondary"
:to="{ name: 'dev.tools' }"
>
Dev tools
</b-button>
<b-button
href="https://github.com/romancm/gamebrary"
target="_blank"
block
variant="secondary"
>
<i class="fab fa-github fa-fw" />
GitHub
</b-button>
<b-button
href="https://github.com/romancm/gamebrary"
target="_blank"
block
variant="secondary"
>
<i class="fab fa-github fa-fw" />
GitHub
</b-button>
<b-button
block
variant="secondary"
href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
target="_blank"
>
Submit feedback
</b-button>
<b-button
block
variant="secondary"
href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
target="_blank"
>
Submit feedback
</b-button>
<!-- TODO: hide for paid users -->
<b-button
block
variant="outline-primary"
href="https://www.paypal.me/RomanCervantes/5"
target="_blank"
>
Buy me a coffee
</b-button>
<!-- TODO: hide for paid users -->
<b-button
block
variant="outline-primary"
href="https://www.paypal.me/RomanCervantes/5"
target="_blank"
>
Buy me a coffee
</b-button>
<hr />
<hr />
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'profile.settings' }">
<i class="mr-2 fa-solid fa-user fa-fw" aria-hidden />
<small>Profile</small>
</b-list-group-item> -->
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'profile.settings' }">
<i class="mr-2 fa-solid fa-user fa-fw" aria-hidden />
<small>Profile</small>
</b-list-group-item> -->
<account-settings />
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
<i class="mr-2 fab fa-steam fa-fw" aria-hidden></i>
<small>Steam</small>
</b-list-group-item> -->
<!-- <b-list-group-item exact exact-active-class="bg-primary text-white" :to="{ name: 'steam.settings' }">
<i class="mr-2 fab fa-steam fa-fw" aria-hidden></i>
<small>Steam</small>
</b-list-group-item> -->
<!-- <hr /> -->
<!-- <hr /> -->
<!-- <b-list-group-item :to="{ name: 'profiles' }">
<i class="mr-2 fa-solid fa-people-group fa-fw" aria-hidden />
<small>Profiles</small>
</b-list-group-item> -->
<!-- <b-list-group-item :to="{ name: 'profiles' }">
<i class="mr-2 fa-solid fa-people-group fa-fw" aria-hidden />
<small>Profiles</small>
</b-list-group-item> -->
<!-- {{ $t('global.donateMessage') }} -->
<!-- <a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
{{ $t('global.donating') }}
</a> -->
<!-- {{ $t('global.donateMessage') }} -->
<!-- <a href="https://www.paypal.me/RomanCervantes/5" target="_blank">
{{ $t('global.donating') }}
</a> -->
<small>&copy; 2022 Gamebrary</small>
</div>
<small>&copy; 2022 Gamebrary</small>
</b-col>
</b-row>
</b-container>
</template>