Layout tweaks and game news improvements

This commit is contained in:
Gamebrary 2022-09-20 16:29:44 -07:00
parent bac32e2fe3
commit 1efc5c87bc
35 changed files with 1675 additions and 1606 deletions

View file

@ -14,6 +14,9 @@
"deploy": "firebase deploy"
},
"dependencies": {
"@bbob/core": "^2.8.1",
"@bbob/html": "^2.8.1",
"@bbob/preset-html5": "^2.8.1",
"@vue-stripe/vue-stripe": "^4.4.2",
"axios": "^0.21.1",
"bootstrap": "^4.5.2",
@ -23,7 +26,7 @@
"firebase-admin": "^9.2.0",
"firebase-functions": "^3.11.0",
"firebaseui": "^4.8.0",
"js-bbcode-parser": "^3.0.5",
"js-bbcode-parser": "^4.0.0",
"lodash.chunk": "^4.2.0",
"lodash.groupby": "^4.6.0",
"lodash.orderby": "^4.6.0",

View file

@ -1,6 +1,6 @@
<template lang="html">
<b-card
v-if="active"
v-if="active || empty"
class="flex-shrink-0"
no-body
v-click-outside="reset"
@ -55,6 +55,10 @@
import { mapState } from 'vuex';
export default {
props: {
empty: Boolean,
},
data() {
return {
listName: '',

View file

@ -1,36 +0,0 @@
<template lang="html">
<div class="empty-board text-center rounded p-3 mx-auto my-2 bg-secondary">
<p class="lead">This board is empty!</p>
<b-button
block
variant="light"
:to="{ name: 'board.edit', params: { id: board.id } }"
>
Edit board
</b-button>
<!-- <b-button
block
variant="primary"
>
Add list
</b-button> -->
</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['board']),
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.empty-board {
width: 300px;
}
</style>

View file

@ -1,38 +1,38 @@
<template lang="html">
<div class="mt-3">
<div v-if="gameGenres" class="pr-2 pb-2 small">
<div v-if="gameGenres" class="pr-2 pb-2">
<strong>Genres:</strong>
{{ gameGenres }}
</div>
<div v-if="gameModes" class="pr-2 pb-2 small">
<div v-if="gameModes" class="pr-2 pb-2">
<strong>{{ $t('board.gameModal.gameModes') }}: </strong>
<span class="text-wrap">{{ gameModes }}</span>
</div>
<div v-if="gameDevelopers" class="pr-2 pb-2 small">
<div v-if="gameDevelopers" class="pr-2 pb-2">
<strong>{{ $t('board.gameModal.developers') }}: </strong>
<span class="text-wrap">{{ gameDevelopers }}</span>
</div>
<div v-if="gamePublishers" class="pr-2 pb-2 small">
<div v-if="gamePublishers" class="pr-2 pb-2">
<strong>{{ $t('board.gameModal.publishers') }}: </strong>
<span class="text-wrap">{{ gamePublishers }}</span>
</div>
<div v-if="playerPerspectives" class="pr-2 pb-2 small">
<div v-if="playerPerspectives" class="pr-2 pb-2">
<strong>{{ $t('board.gameModal.perspective') }}: </strong>
<span class="text-wrap">{{ playerPerspectives }}</span>
</div>
<div class="pr-2 pb-2 small">
<div class="pr-2 pb-2">
<strong>Available for: </strong>
<span class="text-wrap">{{ gamePlatforms || 'N/A' }}</span>
</div>
<div class="pr-2 pb-2 small">
<div class="pr-2 pb-2">
<strong>{{ $t('board.gameModal.releaseDate') }}</strong>
<ol v-if="releaseDates" class="list-unstyled mb-0">
<li

View file

@ -107,7 +107,7 @@ export default {
const igdbVideos = this.game?.videos?.map((video) => {
return {
imageUrl: `https://img.youtube.com/vi/${video.video_id}/sddefault.jpg`,
imageUrl: `https://img.youtube.com/vi/${video.video_id}/default.jpg`,
videoUrl: `https://www.youtube.com/embed/${video.video_id}?rel=0&autoplay=1`,
video: true,
source: 'youtube',

View file

@ -41,7 +41,7 @@
<b-button
v-else
class="mr-3"
class="mr-2"
variant="dark"
:to="{ name: 'auth' }"
>

View file

@ -1,46 +1,48 @@
<template lang="html">
<b-container class="py-3">
<div v-html="formattedReadme" />
<!-- <vue-markdown
class="w-100"
v-if="readme"
:source="readme"
/> -->
<section>
<b-container class="py-3">
<div v-html="formattedReadme" />
<!-- <vue-markdown
class="w-100"
v-if="readme"
:source="readme"
/> -->
<div v-if="repo" class="mb-4">
<b-button
size="sm"
href="https://github.com/romancm/gamebrary/subscription"
target="_blank"
>
{{ $t('gitHub.watch') }} <b-badge variant="light">{{ repo.watchers }}</b-badge>
</b-button>
<div v-if="repo" class="mb-4">
<b-button
size="sm"
href="https://github.com/romancm/gamebrary/subscription"
target="_blank"
>
{{ $t('gitHub.watch') }} <b-badge variant="light">{{ repo.watchers }}</b-badge>
</b-button>
<b-button
size="sm"
href="https://github.com/romancm/gamebrary"
target="_blank"
>
{{ $t('gitHub.star') }} <b-badge variant="light">{{ repo.stargazers_count }}</b-badge>
</b-button>
<b-button
size="sm"
href="https://github.com/romancm/gamebrary"
target="_blank"
>
{{ $t('gitHub.star') }} <b-badge variant="light">{{ repo.stargazers_count }}</b-badge>
</b-button>
<b-button
size="sm"
href="https://github.com/romancm/gamebrary/fork"
target="_blank"
>
{{ $t('gitHub.fork') }} <b-badge variant="light">{{ repo.forks }}</b-badge>
</b-button>
<b-button
size="sm"
href="https://github.com/romancm/gamebrary/fork"
target="_blank"
>
{{ $t('gitHub.fork') }} <b-badge variant="light">{{ repo.forks }}</b-badge>
</b-button>
<b-button
size="sm"
href="https://github.com/romancm/gamebrary/issues"
target="_blank"
>
{{ $t('gitHub.issues') }} <b-badge variant="light">{{ repo.open_issues }}</b-badge>
</b-button>
</div>
</b-container>
<b-button
size="sm"
href="https://github.com/romancm/gamebrary/issues"
target="_blank"
>
{{ $t('gitHub.issues') }} <b-badge variant="light">{{ repo.open_issues }}</b-badge>
</b-button>
</div>
</b-container>
</section>
</template>
<script>

View file

@ -1,18 +1,20 @@
<template lang="html">
<b-container>
<portal to="pageTitle">Login</portal>
<section>
<b-container>
<portal to="pageTitle">Login</portal>
<b-alert
class="mx-auto text-center"
:show="showExpiredAlert"
style="width: 220px"
variant="warning"
>
Session expired
</b-alert>
<b-alert
class="mx-auto text-center"
:show="showExpiredAlert"
style="width: 220px"
variant="warning"
>
Session expired
</b-alert>
<section id="auth" />
</b-container>
<section id="auth" />
</b-container>
</section>
</template>
<script>

View file

@ -43,9 +43,10 @@
:key="list.name"
/>
<empty-board v-if="empty" />
<add-list v-else-if="user && user.uid && user.uid === board.owner" />
<add-list
v-if="isBoardOwner"
:empty="empty"
/>
</template>
<b-alert
@ -60,7 +61,6 @@
<script>
import BoardPlaceholder from '@/components/Board/BoardPlaceholder';
import EmptyBoard from '@/components/Board/EmptyBoard';
import AddList from '@/components/Board/AddList';
import GameList from '@/components/Lists/GameList';
import chunk from 'lodash.chunk';
@ -70,7 +70,6 @@ export default {
components: {
GameList,
BoardPlaceholder,
EmptyBoard,
AddList,
},

View file

@ -1,62 +1,64 @@
<template lang="html">
<b-container>
<portal to="pageTitle">Create board</portal>
<section>
<b-container>
<portal to="pageTitle">Create board</portal>
<b-form @submit.prevent="createBoard" class="field centered">
<b-form-group label="Board name:" label-for="boardName">
<b-form-input
id="boardName"
v-model.trim="board.name"
placeholder="PS4 collection, Nintendo Switch, etc..."
autofocus
required
/>
</b-form-group>
<b-form @submit.prevent="createBoard" class="field centered">
<b-form-group label="Board name:" label-for="boardName">
<b-form-input
id="boardName"
v-model.trim="board.name"
placeholder="PS4 collection, Nintendo Switch, etc..."
autofocus
required
/>
</b-form-group>
<b-form-group
label="Board description"
label-for="boardDescription"
>
<b-form-textarea
id="boardDescription"
v-model="board.description"
maxlength="280"
rows="2"
/>
</b-form-group>
<b-form-group
label="Board description"
label-for="boardDescription"
>
<b-form-textarea
id="boardDescription"
v-model="board.description"
maxlength="280"
rows="2"
/>
</b-form-group>
<!-- <b-form-group
label="Board template"
>
<b-form-radio-group
v-model="selectedTemplate"
:options="boardTemplatesOptions"
name="radios-btn-default"
description="Optional"
/>
<!-- <b-form-group
label="Board template"
>
<b-form-radio-group
v-model="selectedTemplate"
:options="boardTemplatesOptions"
name="radios-btn-default"
description="Optional"
/>
<b-row v-if="selectedTemplate" class="mt-3">
<b-col v-for="column in boardTemplates[selectedTemplate]" :key="column">
<b-card
:header="column"
header-tag="header"
header-class="p-1 pl-2"
hide-footer
/>
</b-col>
</b-row>
</b-form-group> -->
<b-row v-if="selectedTemplate" class="mt-3">
<b-col v-for="column in boardTemplates[selectedTemplate]" :key="column">
<b-card
:header="column"
header-tag="header"
header-class="p-1 pl-2"
hide-footer
/>
</b-col>
</b-row>
</b-form-group> -->
<b-button
variant="primary"
loading
type="submit"
>
<b-spinner small v-if="saving" />
<template v-else>Create board</template>
</b-button>
</b-form>
</b-container>
<b-button
variant="primary"
loading
type="submit"
>
<b-spinner small v-if="saving" />
<template v-else>Create board</template>
</b-button>
</b-form>
</b-container>
</section>
</template>
<script>

View file

@ -1,3 +1,4 @@
<!-- TODO: finish -->
<template lang="html">
<b-container>
Create note

View file

@ -1,58 +1,60 @@
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
variant="light"
class="mr-2"
:to="{ name: 'tags' }"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Create tag
</div>
</portal>
<form @submit.prevent="submit" class="field centered">
<b-form-input
v-model.trim="tag.name"
class="mb-3 field"
maxlength="20"
:placeholder="$t('tags.form.inputPlaceholder')"
required
trim
/>
<p>Background color</p>
<v-swatches v-model="tag.bgColor" show-fallback />
<p>Text color</p>
<v-swatches v-model="tag.textColor" show-fallback />
<p>Preview</p>
<b-button
variant="light"
class="mr-2"
:to="{ name: 'tags' }"
rounded
block
size="sm"
class="mr-2 mb-2 field"
variant="outline-light"
:style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
>
<i class="fa-solid fa-chevron-left" />
{{ tag.name || 'Tag preview' }}
</b-button>
Create tag
</div>
</portal>
<form @submit.prevent="submit" class="field centered">
<b-form-input
v-model.trim="tag.name"
class="mb-3 field"
maxlength="20"
:placeholder="$t('tags.form.inputPlaceholder')"
required
trim
/>
<p>Background color</p>
<v-swatches v-model="tag.bgColor" show-fallback />
<p>Text color</p>
<v-swatches v-model="tag.textColor" show-fallback />
<p>Preview</p>
<b-button
rounded
block
size="sm"
class="mr-2 mb-2 field"
variant="outline-light"
:style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
>
{{ tag.name || 'Tag preview' }}
</b-button>
<b-button
variant="primary"
:disabled="saving"
type="submit"
>
<b-spinner small v-if="saving" />
<span v-else>Create</span>
</b-button>
</form>
</b-container>
<b-button
variant="primary"
:disabled="saving"
type="submit"
>
<b-spinner small v-if="saving" />
<span v-else>Create</span>
</b-button>
</form>
</b-container>
</section>
</template>
<script>

View file

@ -1,7 +1,9 @@
<template lang="html">
<b-container>
<game-boards />
</b-container>
<section>
<b-container>
<game-boards />
</b-container>
</section>
</template>
<script>

View file

@ -1,100 +1,102 @@
<template lang="html">
<b-container>
<page-title
title="Dev tools"
/>
<section>
<b-container>
<page-title
title="Dev tools"
/>
<div
v-for="variant in variants"
:key="variant"
class="mb-3"
>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="variant"
:key="size"
:size="size"
class="mr-2"
<div
v-for="variant in variants"
:key="variant"
class="mb-3"
>
{{ variant }}
</b-button>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="variant"
:key="size"
:size="size"
class="mr-2"
>
{{ variant }}
</b-button>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="`outline-${variant}`"
:key="size"
:size="size"
class="mr-2"
>
{{ variant }}
</b-button>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="`${variant}`"
pill
:key="size"
:size="size"
class="mr-2"
>
{{ variant }}
</b-button>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="`${variant}`"
squared
:key="size"
:size="size"
class="mr-2"
>
{{ variant }}
</b-button>
</div>
<h1>Axiom Verge</h1>
<h2>Axiom Verge</h2>
<h3>Axiom Verge</h3>
<h4>Axiom Verge</h4>
<h5>Axiom Verge</h5>
<h6>Axiom Verge</h6>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
<b-dropdown text="Dropdown Button">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item active>Active action</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<b-alert show variant="primary">Primary Alert</b-alert>
<b-alert show variant="secondary">Secondary Alert</b-alert>
<b-alert show variant="success">Success Alert</b-alert>
<b-alert show variant="danger">Danger Alert</b-alert>
<b-alert show variant="warning">Warning Alert</b-alert>
<b-alert show variant="info">Info Alert</b-alert>
<b-alert show variant="light">Light Alert</b-alert>
<b-alert show variant="dark">Dark Alert</b-alert>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="`outline-${variant}`"
:key="size"
:size="size"
class="mr-2"
@click="$store.commit('SET_SESSION_EXPIRED', true)"
variant="warning"
>
{{ variant }}
Expire session
</b-button>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="`${variant}`"
pill
:key="size"
:size="size"
class="mr-2"
>
{{ variant }}
</b-button>
<b-button
v-for="size in ['sm', '', 'lg']"
:variant="`${variant}`"
squared
:key="size"
:size="size"
class="mr-2"
>
{{ variant }}
</b-button>
</div>
<h1>Axiom Verge</h1>
<h2>Axiom Verge</h2>
<h3>Axiom Verge</h3>
<h4>Axiom Verge</h4>
<h5>Axiom Verge</h5>
<h6>Axiom Verge</h6>
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
<b-dropdown text="Dropdown Button">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item active>Active action</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
<b-alert show variant="primary">Primary Alert</b-alert>
<b-alert show variant="secondary">Secondary Alert</b-alert>
<b-alert show variant="success">Success Alert</b-alert>
<b-alert show variant="danger">Danger Alert</b-alert>
<b-alert show variant="warning">Warning Alert</b-alert>
<b-alert show variant="info">Info Alert</b-alert>
<b-alert show variant="light">Light Alert</b-alert>
<b-alert show variant="dark">Dark Alert</b-alert>
<b-button
@click="$store.commit('SET_SESSION_EXPIRED', true)"
variant="warning"
>
Expire session
</b-button>
</b-container>
</b-container>
</section>
</template>
<script>

View file

@ -1,141 +1,143 @@
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'board', params: { id: board.id } }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Edit board
</div>
</portal>
<b-row>
<b-col>
<b-modal id="boardWallpaper" size="xl" scrollable hide-footer>
<template v-slot:modal-header="{ close }">
<modal-header
title="Wallpaper"
@close="close"
/>
</template>
<wallpapers-list selectable @select="selectWallpaper" :selected="board.backgroundUrl" />
</b-modal>
<form
ref="boardSettingsForm"
class="field centered"
@submit.stop.prevent="saveBoard"
>
<b-form-group
:label="$t('board.settings.nameLabel')"
label-for="name"
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'board', params: { id: board.id } }"
variant="light"
class="mr-2"
>
<b-form-input
id="name"
v-model="board.name"
required
/>
</b-form-group>
<i class="fa-solid fa-chevron-left" />
</b-button>
<b-form-group
:label="$t('board.settings.descriptionLabel')"
label-for="description"
Edit board
</div>
</portal>
<b-row>
<b-col>
<b-modal id="boardWallpaper" size="xl" scrollable hide-footer>
<template v-slot:modal-header="{ close }">
<modal-header
title="Wallpaper"
@close="close"
/>
</template>
<wallpapers-list selectable @select="selectWallpaper" :selected="board.backgroundUrl" />
</b-modal>
<form
ref="boardSettingsForm"
class="field centered"
@submit.stop.prevent="saveBoard"
>
<b-form-textarea
id="description"
v-model="board.description"
maxlength="280"
rows="3"
<b-form-group
:label="$t('board.settings.nameLabel')"
label-for="name"
>
<b-form-input
id="name"
v-model="board.name"
required
/>
</b-form-group>
<b-form-group
:label="$t('board.settings.descriptionLabel')"
label-for="description"
>
<b-form-textarea
id="description"
v-model="board.description"
maxlength="280"
rows="3"
/>
</b-form-group>
<b-form-checkbox v-model="board.isPublic" switch class="mb-2">
Public
</b-form-checkbox>
<b-alert show variant="info" v-if="board.isPublic" class="m-0 text-truncate">
<strong>Public Board URL</strong>
<br>
<small>{{ `https://gamebrary.com/b/${board.id}` }}</small>
</b-alert>
<hr class="my-3">
<b-form-group
label="Board background"
class="m-0"
/>
</b-form-group>
<b-form-checkbox v-model="board.isPublic" switch class="mb-2">
Public
</b-form-checkbox>
<div class="d-flex align-items-start">
<v-swatches
v-model="board.backgroundColor"
show-fallback
popover-x="left"
/>
<b-alert show variant="info" v-if="board.isPublic" class="m-0 text-truncate">
<strong>Public Board URL</strong>
<br>
<small>{{ `https://gamebrary.com/b/${board.id}` }}</small>
</b-alert>
<hr class="my-3">
<b-form-group
label="Board background"
class="m-0"
/>
<div class="d-flex align-items-start">
<v-swatches
v-model="board.backgroundColor"
show-fallback
popover-x="left"
/>
<b-button
v-if="board.backgroundColor"
@click="board.backgroundColor = null"
variant="light"
class="ml-2"
>
<!-- <i class="fas fa-trash fa-fw" aria-hidden /> -->
<i class="fas fa-times fa-fw" aria-hidden></i>
</b-button>
</div>
<b-button
v-if="board.backgroundColor"
@click="board.backgroundColor = null"
v-b-modal.boardWallpaper
variant="light"
class="ml-2"
class="mb-2"
block
>
<!-- <i class="fas fa-trash fa-fw" aria-hidden /> -->
<i class="fas fa-times fa-fw" aria-hidden></i>
Choose background image
</b-button>
</div>
<b-button
v-b-modal.boardWallpaper
variant="light"
class="mb-2"
block
>
Choose background image
</b-button>
<b-button
v-if="board.backgroundUrl"
variant="link"
class="mb-2"
block
@click="board.backgroundUrl = null"
>
<i class="fas fa-trash fa-fw" aria-hidden /> Remove background image
</b-button>
<b-button
v-if="board.backgroundUrl"
variant="link"
class="mb-2"
block
@click="board.backgroundUrl = null"
>
<i class="fas fa-trash fa-fw" aria-hidden /> Remove background image
</b-button>
<mini-board
v-if="board.backgroundUrl || board.backgroundColor"
v-b-modal.boardWallpaper
:board="board"
/>
<mini-board
v-if="board.backgroundUrl || board.backgroundColor"
v-b-modal.boardWallpaper
:board="board"
/>
<hr class="my-3">
<hr class="my-3">
<b-button
variant="primary"
:disabled="saving"
type="submit"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="primary"
:disabled="saving"
type="submit"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="link"
@click="confirmDelete"
>
{{ $t('board.settings.deleteBoard') }}
</b-button>
</form>
</b-col>
</b-row>
</b-container>
<b-button
variant="link"
@click="confirmDelete"
>
{{ $t('board.settings.deleteBoard') }}
</b-button>
</form>
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>

View file

@ -1,111 +1,113 @@
<!-- TODO: use getter to get tags with game info added to it -->
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
variant="light"
class="mr-2"
:to="{ name: 'tags' }"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Edit tag
</div>
</portal>
<portal to="headerActions">
<b-button
variant="light"
variant="danger"
class="mr-2"
:to="{ name: 'tags' }"
@click="promptDeleteTag(tag.name)"
>
<i class="fa-solid fa-chevron-left" />
<i class="fas fa-trash-alt fa-fw" aria-hidden />
</b-button>
</portal>
Edit tag
</div>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<portal to="headerActions">
<b-button
variant="danger"
class="mr-2"
@click="promptDeleteTag(tag.name)"
>
<i class="fas fa-trash-alt fa-fw" aria-hidden />
</b-button>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<b-row v-else>
<b-col>
<form
class="field centered"
@submit.prevent="saveTag"
>
<label for="tagName">Tag name:</label>
<b-form-input
id="tagName"
v-model.trim="tag.name"
class="mb-3 field"
maxlength="20"
:placeholder="$t('tags.form.inputPlaceholder')"
required
trim
/>
<p>Background color</p>
<v-swatches
v-model="tag.bgColor"
show-fallback
popover-x="left"
/>
<p>Text color</p>
<v-swatches
v-model="tag.textColor"
show-fallback
popover-x="left"
/>
<p>Preview</p>
<b-button
v-if="tag.name"
rounded
size="sm"
class="mr-2 mb-4"
variant="transparent"
:style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
<b-row v-else>
<b-col>
<form
class="field centered"
@submit.prevent="saveTag"
>
{{ tag.name }}
</b-button>
<label for="tagName">Tag name:</label>
<hr />
<!-- TODO: Put games tagged in collapsible and lazy load images -->
<b-form-input
id="tagName"
v-model.trim="tag.name"
class="mb-3 field"
maxlength="20"
:placeholder="$t('tags.form.inputPlaceholder')"
required
trim
/>
<b-button
variant="primary"
:disabled="saving"
type="submit"
>
<b-spinner small v-if="saving" />
<span v-else>Save</span>
</b-button>
<p>Background color</p>
<hr />
<v-swatches
v-model="tag.bgColor"
show-fallback
popover-x="left"
/>
<p>Text color</p>
<p>Games tagged</p>
<v-swatches
v-model="tag.textColor"
show-fallback
popover-x="left"
/>
<!-- TODO: add quick game picker -->
<b-alert :show="tag.games.length === 0" variant="light" class="field">
No games tagged
</b-alert>
<p>Preview</p>
<b-img
v-for="game in tag.games"
:key="game"
:src="getCoverUrl(game)"
class="cursor-pointer rounded mr-2 mb-2"
width="80"
@click="$router.push({ name: 'game', params: { id: games[game].id, slug: games[game].slug }})"
/>
</form>
</b-col>
</b-row>
</b-container>
<b-button
v-if="tag.name"
rounded
size="sm"
class="mr-2 mb-4"
variant="transparent"
:style="`background-color: ${tag.bgColor}; color: ${tag.textColor}`"
>
{{ tag.name }}
</b-button>
<hr />
<!-- TODO: Put games tagged in collapsible and lazy load images -->
<b-button
variant="primary"
:disabled="saving"
type="submit"
>
<b-spinner small v-if="saving" />
<span v-else>Save</span>
</b-button>
<hr />
<p>Games tagged</p>
<!-- TODO: add quick game picker -->
<b-alert :show="tag.games.length === 0" variant="light" class="field">
No games tagged
</b-alert>
<b-img
v-for="game in tag.games"
:key="game"
:src="getCoverUrl(game)"
class="cursor-pointer rounded mr-2 mb-2"
width="80"
@click="$router.push({ name: 'game', params: { id: games[game].id, slug: games[game].slug }})"
/>
</form>
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>

View file

@ -1,8 +1,5 @@
<template lang="html">
<b-container>
<portal to="pageTitle">
Explore public game boards
</portal>
<game-boards />
<!-- <div class="game-deals">
@ -23,15 +20,3 @@ export default {
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
// .explore-page {
// display: grid;
// grid-template-columns: 1fr 300px;
// grid-gap: 1rem;
// }
// .game-deals {
// height: calc(100vh - 200px);
// overflow-y: auto;
// }
</style>

View file

@ -1,101 +1,103 @@
<template lang="html">
<b-container>
<b-spinner v-if="loading" class="spinner-centered" />
<section>
<b-container>
<b-spinner v-if="loading" class="spinner-centered" />
<b-row v-else>
<portal to="pageTitle">
<div>
<b-row v-else>
<portal to="pageTitle">
<div>
<b-button
v-if="game"
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Notes
</div>
</portal>
<portal to="headerActions">
<b-button
v-if="game"
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
:to="{ name: 'notes' }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
>
All notes
</b-button>
</portal>
Notes
</div>
</portal>
<portal to="headerActions">
<b-button
:to="{ name: 'notes' }"
variant="light"
class="mr-2"
>
All notes
</b-button>
</portal>
<b-col cols="12" sm="6">
<game-note
v-if="showPreview"
:note="{ note }"
class="mt-3 mt-sm-0"
/>
<router-link
v-else-if="game"
:to="{ name: 'game', params: { id: game.id, slug: game.slug }}"
class="float-right"
>
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<b-col cols="12" sm="6">
<form class="mt-3 mt-sm-0 mb-3 field">
<b-form-textarea
v-model.trim="note"
placeholder="Type note here"
rows="3"
max-rows="20"
<b-col cols="12" sm="6">
<game-note
v-if="showPreview"
:note="{ note }"
class="mt-3 mt-sm-0"
/>
<b-link
class="small"
variant="link"
v-b-modal.markdown-cheatsheet
<router-link
v-else-if="game"
:to="{ name: 'game', params: { id: game.id, slug: game.slug }}"
class="float-right"
>
<i class="fab fa-markdown fa-fw" />
Markdown supported
</b-link>
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<footer class="mt-2 d-flex">
<b-button
variant="primary"
:disabled="saving"
@click="saveNote"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-col cols="12" sm="6">
<form class="mt-3 mt-sm-0 mb-3 field">
<b-form-textarea
v-model.trim="note"
placeholder="Type note here"
rows="3"
max-rows="20"
/>
<b-button
variant="danger"
class="ml-2"
v-if="!saving"
:disabled="deleting"
@click="deleteNote"
<b-link
class="small"
variant="link"
v-b-modal.markdown-cheatsheet
>
<b-spinner small v-if="deleting" />
<i v-else class="fas fa-trash fa-fw" aria-hidden />
</b-button>
<i class="fab fa-markdown fa-fw" />
Markdown supported
</b-link>
<b-button
variant="light"
class="ml-auto"
@click="showPreview = !showPreview"
>
<i class="fas fa-eye fa-fw" aria-hidden />
Toggle preview
</b-button>
</footer>
</form>
</b-col>
</b-row>
</b-container>
<footer class="mt-2 d-flex">
<b-button
variant="primary"
:disabled="saving"
@click="saveNote"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
variant="danger"
class="ml-2"
v-if="!saving"
:disabled="deleting"
@click="deleteNote"
>
<b-spinner small v-if="deleting" />
<i v-else class="fas fa-trash fa-fw" aria-hidden />
</b-button>
<b-button
variant="light"
class="ml-auto"
@click="showPreview = !showPreview"
>
<i class="fas fa-eye fa-fw" aria-hidden />
Toggle preview
</b-button>
</footer>
</form>
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>

View file

@ -1,192 +1,194 @@
<template lang="html">
<b-container>
<b-spinner v-if="loading" class="spinner-centered" />
<template v-else-if="game">
<portal to="pageTitle">
<b-button
v-if="originBoardId"
:to="{ name: 'board', params: { id: originBoardId } }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
</portal>
<portal to="headerActions" v-if="user">
<b-button-group class="mr-2">
<game-tags-dropdown />
<section>
<b-container>
<b-spinner v-if="loading" class="spinner-centered" />
<template v-else-if="game">
<portal to="pageTitle">
<b-button
v-if="originBoardId"
:to="{ name: 'board', params: { id: originBoardId } }"
variant="light"
@click="$router.push({ name: 'game.progress', params: { id: game.id, slug: game.slug } })"
class="mr-2"
>
<template v-if="progress">
{{ progress }}%
</template>
<i v-else class="fa-solid fa-stopwatch" />
<i class="fa-solid fa-chevron-left" />
</b-button>
</portal>
<b-button
:to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }"
variant="light"
>
<i class="fa-solid fa-note-sticky fa-fw" />
</b-button>
<portal to="headerActions" v-if="user">
<b-button-group class="mr-2">
<game-tags-dropdown />
<add-remove-game />
</b-button-group>
</portal>
<game-media-modal />
<b-row>
<b-col
cols="12"
sm="6"
md="4"
xl="3"
>
<div class="position-relative cursor-pointer" v-b-modal.mediaModal>
<i class="fa-solid fa-play play-button color-white text-white font-size-xl" />
<b-img
:src="gameCoverUrl"
:alt="game.name"
rounded
fluid
/>
</div>
<section
v-if="gameNews.length"
tag="a"
class="bg-light d-none d-sm-flex rounded px-2 mt-2 flex-column"
>
<h5 class="pt-2">Latest news:</h5>
<router-link
v-for="article in gameNews"
:key="article.gid"
:to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }"
class="d-flex mb-2"
<b-button
variant="light"
@click="$router.push({ name: 'game.progress', params: { id: game.id, slug: game.slug } })"
>
<template v-if="progress">
{{ progress }}%
</template>
<i v-else class="fa-solid fa-stopwatch" />
</b-button>
<b-button
:to="{ name: 'game.notes', params: { id: game.id, slug: game.slug } }"
variant="light"
>
<i class="fa-solid fa-note-sticky fa-fw" />
</b-button>
<add-remove-game />
</b-button-group>
</portal>
<game-media-modal />
<b-row>
<b-col
cols="12"
sm="6"
md="4"
xl="3"
>
<div class="position-relative cursor-pointer" v-b-modal.mediaModal>
<i class="fa-solid fa-play play-button color-white text-white font-size-xl" />
<b-img
v-if="article.imageUrl"
:src="article.imageUrl"
width="100"
:src="gameCoverUrl"
:alt="game.name"
rounded
class="float-left mr-2"
fluid
/>
</div>
<small class="pr-2">{{ article.title }}</small>
</router-link>
</section>
<section
v-if="gameNews.length"
tag="a"
class="bg-light d-none d-sm-flex rounded px-2 mt-2 flex-column"
>
<h5 class="pt-2">Latest news:</h5>
<!-- <amazon-links class="mt-2" /> -->
<game-note
v-if="note"
:note="note"
class="cursor-pointer mt-3"
@click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
/>
<game-in-list :class="{ 'text-white': steamBackground }" />
<!-- <game-speedruns /> -->
<!-- <div v-if="gameAchievements"> -->
<!-- <pre>{{ gameAchievements }}</pre> -->
<!-- </div> -->
</b-col>
<b-col
cols="12"
sm="6"
md="8"
xl="9"
>
<!-- bg-white -->
<article :class="[' rounded', steamBackground ? 'bg-white mt-2 mt-md-0 p-3' : 'px-sm-3 p-0']">
<header class="d-flex align-items-start justify-content-between pb-2">
<game-titles />
<aside>
<!-- <b-button :href="metacriticScore.url" variant="success" v-if="metacriticScore.url">
{{ metacriticScore.score }}
</b-button> -->
<b-button
v-for="({ bgColor, textColor, name, index }) in tagsApplied"
:key="name"
<router-link
v-for="article in gameNews"
:key="article.gid"
:to="{ name: 'game.news', params: { id: game.id, slug: game.slug } }"
class="d-flex mb-2"
>
<b-img
v-if="article.imageUrl"
:src="article.imageUrl"
width="100"
rounded
size="sm"
variant="transparent"
class="mr-1 mb-2"
:style="`background-color: ${bgColor}; color: ${textColor}`"
:to="{ name: 'tag.edit', params: { id: index } }"
>
<i class="fa-solid fa-tag mr-1" />
{{ name }}
</b-button>
class="float-left mr-2"
/>
<small class="pr-2">{{ article.title }}</small>
</router-link>
</section>
<!-- <amazon-links class="mt-2" /> -->
<game-note
v-if="note"
:note="note"
class="cursor-pointer mt-3"
@click.native="$router.push({ name: 'game.notes', params: { id: game.id, slug: game.slug } })"
/>
<game-in-list :class="{ 'text-white': steamBackground }" />
<!-- <game-speedruns /> -->
<!-- <div v-if="gameAchievements"> -->
<!-- <pre>{{ gameAchievements }}</pre> -->
<!-- </div> -->
</b-col>
<b-col
cols="12"
sm="6"
md="8"
xl="9"
>
<!-- bg-white -->
<article :class="[' rounded', steamBackground ? 'bg-white mt-2 mt-md-0 p-3' : 'px-sm-3 p-0']">
<header class="d-flex align-items-start justify-content-between pb-2">
<game-titles />
<aside>
<!-- <b-button :href="metacriticScore.url" variant="success" v-if="metacriticScore.url">
{{ metacriticScore.score }}
</b-button> -->
<b-button
v-for="({ bgColor, textColor, name, index }) in tagsApplied"
:key="name"
rounded
size="sm"
variant="transparent"
class="mr-1 mb-2"
:style="`background-color: ${bgColor}; color: ${textColor}`"
:to="{ name: 'tag.edit', params: { id: index } }"
>
<i class="fa-solid fa-tag mr-1" />
{{ name }}
</b-button>
</aside>
</header>
<aside class="supplemental-info bg-white field float-right ml-5 pb-2">
<b-img
v-if="gameHeaderImage"
v-b-modal.mediaModal
:src="gameHeaderImage"
class="mb-2"
rounded
fluid
/>
<b-img
v-if="gameScrenshot"
v-b-modal.mediaModal
:src="gameScrenshot"
rounded
fluid
/>
<game-websites />
</aside>
</header>
<aside class="supplemental-info bg-white field float-right ml-5 pb-2">
<b-img
v-if="gameHeaderImage"
v-b-modal.mediaModal
:src="gameHeaderImage"
class="mb-2"
rounded
fluid
/>
<game-description />
<game-details />
<game-ratings />
</article>
<b-img
v-if="gameScrenshot"
v-b-modal.mediaModal
:src="gameScrenshot"
rounded
fluid
/>
<small
v-if="legalNotice"
class="text-muted"
v-html="legalNotice"
/>
</b-col>
</b-row>
<game-websites />
</aside>
<similar-games />
</template>
<game-description />
<game-details />
<game-ratings />
</article>
<small
v-if="legalNotice"
class="text-muted"
v-html="legalNotice"
/>
</b-col>
</b-row>
<similar-games />
</template>
<div class="pt-5" v-else>
<div class="d-flex justify-content-center align-items-center" id="main">
<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center">404</h1>
<div class="inline-block align-middle">
<h2 class="font-weight-normal lead" id="desc">Game was not found.</h2>
<div class="pt-5" v-else>
<div class="d-flex justify-content-center align-items-center" id="main">
<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center">404</h1>
<div class="inline-block align-middle">
<h2 class="font-weight-normal lead" id="desc">Game was not found.</h2>
</div>
</div>
</div>
</div>
<!-- <timeline
v-if="twitterHandle"
:id="twitterHandle"
sourceType="profile"
>
loading...
</timeline> -->
</b-container>
<!-- <timeline
v-if="twitterHandle"
:id="twitterHandle"
sourceType="profile"
>
loading...
</timeline> -->
</b-container>
</section>
</template>
<script>

View file

@ -1,59 +1,61 @@
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
variant="light"
class="mr-2"
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Track progress
</div>
</portal>
<b-row>
<b-col cols="12" sm="6">
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" class="float-right">
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<b-col cols="12" sm="6" class="mt-3 mt-sm-0 mb-3">
<b-input-group :prepend="`${progress}%`" class="field mb-2">
<b-form-input
size="lg"
v-model="progress"
type="range"
max="100"
step="1"
/>
</b-input-group>
<b-button
variant="primary"
:disabled="saving"
class="mr-2"
@click="saveProgress"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
Track progress
</div>
</portal>
<b-row>
<b-col cols="12" sm="6">
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" class="float-right">
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<b-col cols="12" sm="6" class="mt-3 mt-sm-0 mb-3">
<b-input-group :prepend="`${progress}%`" class="field mb-2">
<b-form-input
size="lg"
v-model="progress"
type="range"
max="100"
step="1"
/>
</b-input-group>
<b-button
variant="primary"
:disabled="saving"
class="mr-2"
@click="saveProgress"
>
<b-spinner small v-if="saving" />
<span v-else>{{ $t('global.save') }}</span>
</b-button>
<b-button
:disabled="deleting"
variant="danger"
@click="deleteProgress"
>
<b-spinner small v-if="deleting" />
<i v-else class="fas fa-trash fa-fw" aria-hidden />
</b-button>
</b-col>
</b-row>
</b-container>
<b-button
:disabled="deleting"
variant="danger"
@click="deleteProgress"
>
<b-spinner small v-if="deleting" />
<i v-else class="fas fa-trash fa-fw" aria-hidden />
</b-button>
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>

View file

@ -1,87 +1,90 @@
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'settings' }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'settings' }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Notes
</div>
</portal>
<portal to="headerActions">
<div class="mr-2">
<b-form-input
v-if="!showEmptyState"
type="search"
class="d-none d-sm-block"
placeholder="Search notes"
v-model="search"
/>
</div>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<empty-state
v-else-if="showEmptyState"
illustration="notes.png"
:title="$t('notes.title')"
message="Looks like you don't have any notes yet."
>
<b-button variant="light" :to="{ name: 'notes.create' }">
Add note
</b-button>
</empty-state>
Notes
</div>
</portal>
<b-row v-else-if="noteGames.length">
<b-col>
<b-form-input
v-if="!showEmptyState"
type="search"
class="d-sm-none field mb-3"
placeholder="Search notes"
v-model="search"
/>
<portal to="headerActions">
<div class="mr-2">
<b-form-input
v-if="!showEmptyState"
type="search"
class="d-none d-sm-block"
placeholder="Search notes"
v-model="search"
/>
</div>
</portal>
<b-card-group columns>
<b-card
v-for="(game, index) in noteGames"
body-class="p-2"
:key="index"
>
<b-card-text>
<b-button
v-if="game"
variant="light"
size="sm"
class="d-flex p-2 mb-2 align-items-center"
:to="{ name: 'game.notes', params: { id: game.id, slug: game.slug }}"
>
<b-img
:src="getCoverUrl(game.id)"
class="cursor-pointer rounded"
width="30"
/>
<b-spinner v-if="loading" class="spinner-centered" />
<div class="ml-2 overflow-hidden">
<h5>{{ game.name }}</h5>
</div>
</b-button>
<empty-state
v-else-if="showEmptyState"
illustration="notes.png"
:title="$t('notes.title')"
message="Looks like you don't have any notes yet."
>
<b-button variant="light" :to="{ name: 'notes.create' }">
Add note
</b-button>
</empty-state>
<b-row v-else-if="noteGames.length">
<b-col>
<b-form-input
v-if="!showEmptyState"
type="search"
class="d-sm-none field mb-3"
placeholder="Search notes"
v-model="search"
/>
<b-card-group columns>
<b-card
v-for="(game, index) in noteGames"
:key="index"
>
<b-card-text>
<b-button
v-if="game"
variant="light"
size="sm"
class="d-flex p-2 mb-2 align-items-center"
:to="{ name: 'game.notes', params: { id: game.id, slug: game.slug }}"
>
<b-img
:src="getCoverUrl(game.id)"
class="cursor-pointer rounded"
width="30"
/>
<div class="ml-2 overflow-hidden">
<h5>{{ game.name }}</h5>
</div>
</b-button>
<p class="note-text text-muted small" v-if="filteredNotes[index]">
{{ filteredNotes[index].note }}
</p>
</b-card-text>
</b-card>
</b-card-group>
</b-col>
</b-row>
</b-container>
<p class="note-text text-muted small" v-if="filteredNotes[index]">
{{ filteredNotes[index].note }}
</p>
</b-card-text>
</b-card>
</b-card-group>
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>

View file

@ -1,15 +1,17 @@
<template lang="html">
<b-container class="py-2">
<h1>Privacy Policy</h1>
<p>Your privacy is important to us. It is Gamebrary's policy to respect your privacy regarding any information we may collect from you across our website, <a href="http://gamebrary.com">http://gamebrary.com</a>, and other sites we own and operate.</p>
<p>We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why were collecting it and how it will be used.</p>
<p>We only retain collected information for as long as necessary to provide you with your requested service. What data we store, well protect within commercially acceptable means to prevent loss and theft, as well as unauthorised access, disclosure, copying, use or modification.</p>
<p>We dont share any personally identifying information publicly or with third-parties, except when required to by law.</p>
<p>Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.</p>
<p>You are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.</p>
<p>Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.</p>
<p>This policy is effective as of 22 January 2019.</p>
</b-container>
<section>
<b-container class="py-2">
<h1>Privacy Policy</h1>
<p>Your privacy is important to us. It is Gamebrary's policy to respect your privacy regarding any information we may collect from you across our website, <a href="http://gamebrary.com">http://gamebrary.com</a>, and other sites we own and operate.</p>
<p>We only ask for personal information when we truly need it to provide a service to you. We collect it by fair and lawful means, with your knowledge and consent. We also let you know why were collecting it and how it will be used.</p>
<p>We only retain collected information for as long as necessary to provide you with your requested service. What data we store, well protect within commercially acceptable means to prevent loss and theft, as well as unauthorised access, disclosure, copying, use or modification.</p>
<p>We dont share any personally identifying information publicly or with third-parties, except when required to by law.</p>
<p>Our website may link to external sites that are not operated by us. Please be aware that we have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.</p>
<p>You are free to refuse our request for your personal information, with the understanding that we may be unable to provide you with some of your desired services.</p>
<p>Your continued use of our website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how we handle user data and personal information, feel free to contact us.</p>
<p>This policy is effective as of 22 January 2019.</p>
</b-container>
</section>
</template>
<script>

View file

@ -1,207 +1,209 @@
<template lang="html">
<b-container>
<portal to="pageTitle">Profile</portal>
<section>
<b-container>
<portal to="pageTitle">Profile</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<b-spinner v-if="loading" class="spinner-centered" />
<form
v-else-if="profile"
class="field centered"
@submit.prevent="save"
>
<portal to="headerActions">
<b-button
:to="{ name: 'public.profile', params: { userName: profile.userName } }"
class="mr-2"
>
View profile
</b-button>
</portal>
<b-form-group
label-class="m-0 text-muted"
label="Name"
label-for="name"
<form
v-else-if="profile"
class="field centered"
@submit.prevent="save"
>
<b-form-input
id="name"
v-model="profile.name"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="About you"
label-for="bio"
>
<b-form-input
id="bio"
v-model="profile.bio"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Location"
label-for="location"
>
<b-form-input
id="location"
v-model="profile.location"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Website"
label-for="website"
>
<b-form-input
id="website"
v-model="profile.website"
class="mb-3"
@blur="autoformatWebsite"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Twitter"
label-for="twitter"
>
<b-form-input
id="twitter"
v-model="profile.twitter"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Nintendo Friend Code"
label-for="friendCode"
>
<b-form-input
id="friendCode"
v-model="profile.friendCode"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Playstation online ID"
label-for="psnId"
>
<b-form-input
id="psnId"
v-model="profile.psnId"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Steam friend code"
label-for="steamFriendCode"
>
<b-form-input
id="steamFriendCode"
v-model="profile.steamFriendCode"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Xbox Gamertag"
label-for="gamerTag"
>
<b-form-input
id="gamerTag"
v-model="profile.gamerTag"
class="mb-3"
/>
</b-form-group>
<footer class="mt-3 mb-5">
<b-button
variant="primary"
type="submit"
>
<b-spinner small v-if="saving" />
<template v-else>Save</template>
</b-button>
<b-button
variant="link"
class="text-danger"
:disabled="deleting"
@click="confirmDeleteProfile"
>
<b-spinner small v-if="deleting" />
<template v-else>Delete profile</template>
</b-button>
</footer>
</form>
<form
v-else
class="field centered"
@submit.prevent="checkUserNameAvailability"
>
<p class="text-muted text-center">Choose a user name to get started!</p>
<b-input-group class="mb-3">
<b-form-input
id="userName"
autocomplete="off"
v-model.trim="userName"
size="lg"
:minlength="$options.MIN_PROFILE_LENGTH"
:maxlength="$options.MAX_PROFILE_LENGTH"
required
:state="available"
@input="formatUserName"
/>
<template #append>
<portal to="headerActions">
<b-button
:to="{ name: 'public.profile', params: { userName: profile.userName } }"
class="mr-2"
>
View profile
</b-button>
</portal>
<b-form-group
label-class="m-0 text-muted"
label="Name"
label-for="name"
>
<b-form-input
id="name"
v-model="profile.name"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="About you"
label-for="bio"
>
<b-form-input
id="bio"
v-model="profile.bio"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Location"
label-for="location"
>
<b-form-input
id="location"
v-model="profile.location"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Website"
label-for="website"
>
<b-form-input
id="website"
v-model="profile.website"
class="mb-3"
@blur="autoformatWebsite"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Twitter"
label-for="twitter"
>
<b-form-input
id="twitter"
v-model="profile.twitter"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Nintendo Friend Code"
label-for="friendCode"
>
<b-form-input
id="friendCode"
v-model="profile.friendCode"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Playstation online ID"
label-for="psnId"
>
<b-form-input
id="psnId"
v-model="profile.psnId"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Steam friend code"
label-for="steamFriendCode"
>
<b-form-input
id="steamFriendCode"
v-model="profile.steamFriendCode"
class="mb-3"
/>
</b-form-group>
<b-form-group
label-class="m-0 text-muted"
label="Xbox Gamertag"
label-for="gamerTag"
>
<b-form-input
id="gamerTag"
v-model="profile.gamerTag"
class="mb-3"
/>
</b-form-group>
<footer class="mt-3 mb-5">
<b-button
variant="primary"
type="submit"
>
<b-spinner small v-if="checkingAvailability" />
<template v-else>
<i class="fa-solid fa-magnifying-glass" />
</template>
<b-spinner small v-if="saving" />
<template v-else>Save</template>
</b-button>
<b-button
variant="link"
class="text-danger"
:disabled="deleting"
@click="confirmDeleteProfile"
>
<b-spinner small v-if="deleting" />
<template v-else>Delete profile</template>
</b-button>
</footer>
</form>
<form
v-else
class="field centered"
@submit.prevent="checkUserNameAvailability"
>
<p class="text-muted text-center">Choose a user name to get started!</p>
<b-input-group class="mb-3">
<b-form-input
id="userName"
autocomplete="off"
v-model.trim="userName"
size="lg"
:minlength="$options.MIN_PROFILE_LENGTH"
:maxlength="$options.MAX_PROFILE_LENGTH"
required
:state="available"
@input="formatUserName"
/>
<template #append>
<b-button
type="submit"
>
<b-spinner small v-if="checkingAvailability" />
<template v-else>
<i class="fa-solid fa-magnifying-glass" />
</template>
</b-button>
</template>
</b-input-group>
<template v-if="available">
<b-alert
class="mt-3"
show
variant="success"
>
Great, <strong>{{ userName }}</strong> is available!
</b-alert>
<b-button block variant="success" @click="createProfile">
<b-spinner small v-if="saving" />
<template v-else>Create profile</template>
</b-button>
</template>
</b-input-group>
<template v-if="available">
<b-alert
class="mt-3"
show
variant="success"
>
Great, <strong>{{ userName }}</strong> is available!
</b-alert>
<b-button block variant="success" @click="createProfile">
<b-spinner small v-if="saving" />
<template v-else>Create profile</template>
</b-button>
</template>
<div v-else-if="!checkingAvailability && available === false">
User name not available
</div>
</form>
</b-container>
<div v-else-if="!checkingAvailability && available === false">
User name not available
</div>
</form>
</b-container>
</section>
</template>
<script>

View file

@ -1,76 +1,78 @@
<template lang="html">
<b-container>
<b-spinner v-if="loading" class="spinner-centered" />
<section>
<b-container>
<b-spinner v-if="loading" class="spinner-centered" />
<div
v-else-if="profile"
>
<portal to="headerActions">
<b-button
v-if="isProfileOwner"
class="mr-2"
:to="{ name: 'profile.settings' }"
>
Edit
</b-button>
</portal>
<div class="profile field centered text-center">
<b-avatar
src="https://placekitten.com/300/300"
size="6rem"
class="mb-2"
/>
<div
v-else-if="profile"
>
<portal to="headerActions">
<b-button
v-if="isProfileOwner"
class="mr-2"
:to="{ name: 'profile.settings' }"
>
Edit
</b-button>
</portal>
<div class="profile field centered text-center">
<b-avatar
src="https://placekitten.com/300/300"
size="6rem"
class="mb-2"
/>
<!-- <pre>{{ profile }}</pre> -->
<h1 class="m-0">{{ profile.userName }}</h1>
<p class="text-lead text-muted m-0">{{ profile.name }}</p>
<p>{{ profile.bio }}</p>
<!-- <pre>{{ profile }}</pre> -->
<h1 class="m-0">{{ profile.userName }}</h1>
<p class="text-lead text-muted m-0">{{ profile.name }}</p>
<p>{{ profile.bio }}</p>
<p>
<i class="fa fa-globe" aria-hidden="true" />
{{ profile.location }}
</p>
<p>
<i class="fa fa-globe" aria-hidden="true" />
{{ profile.location }}
</p>
<b-button :href="profile.twitter" v-if="profile.twitter" class="mr-2">
<i class="fab fa-twitter fa-fw" aria-hidden />
{{ profile.twitter }}
</b-button>
<b-button :href="profile.twitter" v-if="profile.twitter" class="mr-2">
<i class="fab fa-twitter fa-fw" aria-hidden />
{{ profile.twitter }}
</b-button>
<b-button v-if="profile.website" :href="profile.website">
{{ profile.website }}
</b-button>
<b-button v-if="profile.website" :href="profile.website">
{{ profile.website }}
</b-button>
</div>
<!-- <b-button :to="{ name: 'profiles' }">
View other profiles
</b-button> -->
<b-row class="mt-4">
<b-col
v-for="board in userBoards"
:key="board.id"
cols="12"
sm="6"
md="4"
lg="3"
class="px-2"
>
<mini-board
:board="board"
@click.native="$router.push({ name: 'board', params: { id: board.id } })"
class="p-relative mb-3"
/>
</b-col>
</b-row>
</div>
<!-- <b-button :to="{ name: 'profiles' }">
View other profiles
</b-button> -->
<b-row class="mt-4">
<b-col
v-for="board in userBoards"
:key="board.id"
cols="12"
sm="6"
md="4"
lg="3"
class="px-2"
>
<mini-board
:board="board"
@click.native="$router.push({ name: 'board', params: { id: board.id } })"
class="p-relative mb-3"
/>
</b-col>
</b-row>
</div>
<empty-state
v-else
title="404 Not Found"
illustration="404.png"
message="Page not found!"
/>
</b-container>
<empty-state
v-else
title="404 Not Found"
illustration="404.png"
message="Page not found!"
/>
</b-container>
</section>
</template>
<script>

View file

@ -1,23 +1,25 @@
<template lang="html">
<b-container fluid>
<page-title
title="Profiles"
/>
<section>
<b-container>
<page-title
title="Profiles"
/>
<b-button
:to="{ name: 'public.profile', params: { userName: profile.userName } }"
block
class="profile-button p-2"
v-for="profile in profiles"
:key="profile.userName"
>
<div>
<h1>{{ profile.displayName }}</h1>
<small class="text-info">{{ `@${profile.userName}` }}</small>
<p v-if="profile.bio">{{ profile.bio }}</p>
</div>
</b-button>
</b-container>
<b-button
:to="{ name: 'public.profile', params: { userName: profile.userName } }"
block
class="profile-button p-2"
v-for="profile in profiles"
:key="profile.userName"
>
<div>
<h1>{{ profile.displayName }}</h1>
<small class="text-info">{{ `@${profile.userName}` }}</small>
<p v-if="profile.bio">{{ profile.bio }}</p>
</div>
</b-button>
</b-container>
</section>
</template>
<script>

View file

@ -1,41 +1,43 @@
<template lang="html">
<b-container>
<portal to="pageTitle">Releases</portal>
<section>
<b-container>
<portal to="pageTitle">Releases</portal>
<portal to="headerActions">
<b-button
url="https://github.com/romancm/gamebrary"
variant="light"
target="_blank"
class="mr-2"
<portal to="headerActions">
<b-button
url="https://github.com/romancm/gamebrary"
variant="light"
target="_blank"
class="mr-2"
>
<i class="fab fa-github fa-fw" aria-hidden />
View in GitHub
</b-button>
</portal>
<b-card
v-for="release in releases"
:key="release.id"
hide-footer
class="mb-3"
>
<i class="fab fa-github fa-fw" aria-hidden />
View in GitHub
</b-button>
</portal>
<template v-slot:header>
<h3 class="mb-0">
<b-badge>{{ release.tag_name }}</b-badge>
{{ release.name }}
</h3>
</template>
<b-card
v-for="release in releases"
:key="release.id"
hide-footer
class="mb-3"
>
<template v-slot:header>
<h3 class="mb-0">
<b-badge>{{ release.tag_name }}</b-badge>
{{ release.name }}
</h3>
</template>
<b-card-text>
<small class="text-muted">
{{ $t('releases.published') }} {{ formatDate(release.published_at) }}
</small>
<b-card-text>
<small class="text-muted">
{{ $t('releases.published') }} {{ formatDate(release.published_at) }}
</small>
<div class="w-100 releases" v-html="$options.marked(release.body)" />
</b-card-text>
</b-card>
</b-container>
<div class="w-100 releases" v-html="$options.marked(release.body)" />
</b-card-text>
</b-card>
</b-container>
</section>
</template>
<script>

View file

@ -1,92 +1,94 @@
<template lang="html">
<b-container>
<portal to="pageTitle">Search</portal>
<section>
<b-container>
<portal to="pageTitle">Search</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<b-spinner v-if="loading" class="spinner-centered" />
<div v-else-if="showEmptyState" class="field centered">
<search-box />
</div>
<div v-else-if="showEmptyState" class="field centered p-2">
<search-box />
</div>
<b-row v-else-if="searchResults.length">
<portal to="headerActions">
<search-box class="mr-2" />
</portal>
<b-form-row v-else-if="searchResults.length">
<portal to="headerActions">
<search-box class="mr-2" />
</portal>
<b-col cols="12">
<search-box class="field mb-3 d-sm-none" />
</b-col>
<b-col cols="12">
<search-box class="field mb-3 d-sm-none" />
</b-col>
<b-col cols="12" class="bg-light py-2 mb-3" v-if="activeBoard">
<div class="d-flex align-items-center">
<span class="d-none d-sm-block">
Add games to:
</span>
<b-button-group class="ml-sm-2">
<b-dropdown
split
variant="info"
:split-to="{ name: 'board', params: { id: boardId } }"
:text="activeBoard.name"
>
<b-dropdown-item
v-for="board in boards"
:key="board.id"
:disabled="!board.lists.length"
:to="{ name: 'search', query: { boardId: board.id, listIndex: 0, q: query } }"
>
{{ board.name }}
</b-dropdown-item>
</b-dropdown>
<b-dropdown
v-if="activeBoardList"
split
variant="info"
:split-to="{ name: 'board', params: { id: boardId } }"
:text="activeBoardList.name"
>
<b-dropdown-item
v-for="(list, listIndex) in activeBoard.lists"
:key="list.id"
:to="{ name: 'search', query: { boardId: activeBoard.id, listIndex, q: query } }"
>
{{ list.name }}
</b-dropdown-item>
</b-dropdown>
</b-button-group>
<b-button :to="{ name: 'search' }" class="ml-auto" variant="light">
<i class="fas fa-times fa-fw" aria-hidden />
<span class="d-none d-sm-inline">
Clear
<b-col cols="12" class="bg-light py-2 mb-3" v-if="activeBoard">
<div class="d-flex align-items-center">
<span class="d-none d-sm-block">
Add games to:
</span>
</b-button>
</div>
</b-col>
<b-col
cols="6"
md="4"
lg="2"
v-for="game in searchResults"
:key="game.id"
<b-button-group class="ml-sm-2">
<b-dropdown
split
variant="info"
:split-to="{ name: 'board', params: { id: boardId } }"
:text="activeBoard.name"
>
<b-dropdown-item
v-for="board in boards"
:key="board.id"
:disabled="!board.lists.length"
:to="{ name: 'search', query: { boardId: board.id, listIndex: 0, q: query } }"
>
{{ board.name }}
</b-dropdown-item>
</b-dropdown>
<b-dropdown
v-if="activeBoardList"
split
variant="info"
:split-to="{ name: 'board', params: { id: boardId } }"
:text="activeBoardList.name"
>
<b-dropdown-item
v-for="(list, listIndex) in activeBoard.lists"
:key="list.id"
:to="{ name: 'search', query: { boardId: activeBoard.id, listIndex, q: query } }"
>
{{ list.name }}
</b-dropdown-item>
</b-dropdown>
</b-button-group>
<b-button :to="{ name: 'search' }" class="ml-auto" variant="light">
<i class="fas fa-times fa-fw" aria-hidden />
<span class="d-none d-sm-inline">
Clear
</span>
</b-button>
</div>
</b-col>
<b-col
cols="6"
md="4"
lg="2"
v-for="game in searchResults"
:key="game.id"
>
<game-card-search :game="game" />
</b-col>
</b-form-row>
<div
v-else-if="query.length > 0"
class="field centered text-center mt-5"
>
<game-card-search :game="game" />
</b-col>
</b-row>
<p>No results found</p>
<div
v-else-if="query.length > 0"
class="field centered text-center mt-5"
>
<p>No results found</p>
<search-box />
</div>
</b-container>
<search-box />
</div>
</b-container>
</section>
</template>
<script>

View file

@ -1,134 +1,136 @@
<template lang="html">
<b-container>
<portal to="pageTitle">Settings</portal>
<section>
<b-container>
<portal to="pageTitle">Settings</portal>
<b-row>
<b-col cols="12">
<div class="field centered">
<settings-card
title="Wallpapers"
description="Manage your wallpapers"
icon="fa-images"
@click.native="$router.push({ name: 'wallpapers' })"
/>
<b-row>
<b-col cols="12">
<div class="field centered">
<settings-card
title="Wallpapers"
description="Manage your wallpapers"
icon="fa-images"
@click.native="$router.push({ name: 'wallpapers' })"
/>
<settings-card
title="Profile"
description="Public profile"
icon="fa-user"
@click.native="$router.push({ name: 'profile.settings' })"
/>
<settings-card
title="Profile"
description="Public profile"
icon="fa-user"
@click.native="$router.push({ name: 'profile.settings' })"
/>
<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' })"
/>
<!-- <div
data-form-slug="6148881969433360"
data-env="production"
data-path="contact-us/6148881969433360"
class="keap-custom-form"
/> -->
<!-- <div
data-form-slug="6148881969433360"
data-env="production"
data-path="contact-us/6148881969433360"
class="keap-custom-form"
/> -->
<b-button
block
variant="light"
v-b-modal.keyboard-shortcuts
>
Keyboard shortcuts
</b-button>
<b-button
block
variant="light"
v-b-modal.keyboard-shortcuts
>
Keyboard shortcuts
</b-button>
<!-- <b-button
block
variant="light"
:to="{ name: 'dev.tools' }"
>
Dev tools
</b-button> -->
<!-- <b-button
block
variant="light"
:to="{ name: 'dev.tools' }"
>
Dev tools
</b-button> -->
<delete-account-modal />
<delete-account-modal />
<b-button
href="https://github.com/romancm/gamebrary"
target="_blank"
block
variant="light"
>
<!-- <i class="fab fa-github fa-fw" /> -->
GitHub
</b-button>
<b-button
href="https://github.com/romancm/gamebrary"
target="_blank"
block
variant="light"
>
<!-- <i class="fab fa-github fa-fw" /> -->
GitHub
</b-button>
<b-button
block
variant="light"
href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
target="_blank"
>
Submit feedback
</b-button>
<b-button
block
variant="light"
href="https://goo.gl/forms/r0juBCsZaUtJ03qb2"
target="_blank"
>
Submit feedback
</b-button>
<b-button
block
href="https://www.paypal.me/RomanCervantes/5"
target="_blank"
>
Donate
</b-button>
<b-button
block
href="https://www.paypal.me/RomanCervantes/5"
target="_blank"
>
Donate
</b-button>
<hr />
<hr />
<b-button
block
variant="light"
@click="session_signOut"
>
Log out
</b-button>
<b-button
block
variant="light"
@click="session_signOut"
>
Log out
</b-button>
<b-button
block
variant="light"
@click="$bvModal.show('deleteAccount');"
>
Delete account
</b-button>
<b-button
block
variant="light"
@click="$bvModal.show('deleteAccount');"
>
Delete account
</b-button>
<!-- <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> -->
<small>&copy; 2022 Gamebrary</small>
<small>&copy; 2022 Gamebrary</small>
<b-button
:to="{ name: 'releases' }"
size="sm"
variant="link"
>
{{ latestRelease }}
</b-button>
</div>
<!-- <language-settings /> -->
</b-col>
</b-row>
</b-container>
<b-button
:to="{ name: 'releases' }"
size="sm"
variant="link"
>
{{ latestRelease }}
</b-button>
</div>
<!-- <language-settings /> -->
</b-col>
</b-row>
</b-container>
</section>
</template>
<script>

View file

@ -1,15 +1,17 @@
<template lang="html">
<b-container fluid>
<page-title title="Steam settings" />
<section>
<b-container>
<page-title title="Steam settings" />
<b-form-group label="Steam ID:">
<b-form-input
v-model="steamId"
style="max-width: 200px"
@change="save"
/>
</b-form-group>
</b-container>
<b-form-group label="Steam ID:">
<b-form-input
v-model="steamId"
style="max-width: 200px"
@change="save"
/>
</b-form-group>
</b-container>
</section>
</template>
<script>

View file

@ -1,57 +1,59 @@
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
variant="light"
class="mr-2"
:to="{ name: 'settings' }"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Tags
</div>
</portal>
<portal v-if="!loading && tags.length > 0" to="headerActions">
<b-button
variant="light"
class="mr-2"
:to="{ name: 'settings' }"
variant="light"
:to="{ name: 'tag.create' }"
>
<i class="fa-solid fa-chevron-left" />
Add tag
</b-button>
</portal>
Tags
</div>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<portal v-if="!loading && tags.length > 0" to="headerActions">
<b-button
class="mr-2"
variant="light"
:to="{ name: 'tag.create' }"
>
Add tag
</b-button>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<empty-state
v-else-if="tags.length === 0"
message="Tags are a great way to organize your collection"
>
<b-button
variant="light"
:to="{ name: 'tag.create' }"
<empty-state
v-else-if="tags.length === 0"
message="Tags are a great way to organize your collection"
>
Create a tag
</b-button>
</empty-state>
<b-button
variant="light"
:to="{ name: 'tag.create' }"
>
Create a tag
</b-button>
</empty-state>
<div class="field mr-auto ml-auto" v-else>
<b-button
v-for="({ textColor, bgColor, name, games }, index) in tags"
@click="$router.push({ name: 'tag.edit', params: { id: index } })"
rounded
block
variant="transparent"
:style="`background-color: ${bgColor}; color: ${textColor}`"
:key="name"
>
{{ name }} {{ games.length ? `(${games.length})` : '' }}
</b-button>
</div>
</b-container>
<div class="field mr-auto ml-auto" v-else>
<b-button
v-for="({ textColor, bgColor, name, games }, index) in tags"
@click="$router.push({ name: 'tag.edit', params: { id: index } })"
rounded
block
variant="transparent"
:style="`background-color: ${bgColor}; color: ${textColor}`"
:key="name"
>
{{ name }} {{ games.length ? `(${games.length})` : '' }}
</b-button>
</div>
</b-container>
</section>
</template>
<script>

View file

@ -1,37 +1,39 @@
<template lang="html">
<b-container class="py-2">
<h1>Terms of Service</h1>
<h2>1. Terms</h2>
<p>By accessing the website at <a href="http://gamebrary.com">http://gamebrary.com</a>, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this website are protected by applicable copyright and trademark law.</p>
<h2>2. Use License</h2>
<ol type="a">
<li>Permission is granted to temporarily download one copy of the materials (information or software) on Gamebrary's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:
<ol type="i">
<li>modify or copy the materials;</li>
<li>use the materials for any commercial purpose, or for any public display (commercial or non-commercial);</li>
<li>attempt to decompile or reverse engineer any software contained on Gamebrary's website;</li>
<li>remove any copyright or other proprietary notations from the materials; or</li>
<li>transfer the materials to another person or "mirror" the materials on any other server.</li>
</ol>
</li>
<li>This license shall automatically terminate if you violate any of these restrictions and may be terminated by Gamebrary at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.</li>
</ol>
<h2>3. Disclaimer</h2>
<ol type="a">
<li>The materials on Gamebrary's website are provided on an 'as is' basis. Gamebrary makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.</li>
<li>Further, Gamebrary does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the materials on its website or otherwise relating to such materials or on any sites linked to this site.</li>
</ol>
<h2>4. Limitations</h2>
<p>In no event shall Gamebrary or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on Gamebrary's website, even if Gamebrary or a Gamebrary authorized representative has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.</p>
<h2>5. Accuracy of materials</h2>
<p>The materials appearing on Gamebrary's website could include technical, typographical, or photographic errors. Gamebrary does not warrant that any of the materials on its website are accurate, complete or current. Gamebrary may make changes to the materials contained on its website at any time without notice. However Gamebrary does not make any commitment to update the materials.</p>
<h2>6. Links</h2>
<p>Gamebrary has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Gamebrary of the site. Use of any such linked website is at the user's own risk.</p>
<h2>7. Modifications</h2>
<p>Gamebrary may revise these terms of service for its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service.</p>
<h2>8. Governing Law</h2>
<p>These terms and conditions are governed by and construed in accordance with the laws of Arizona and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
</b-container>
<section>
<b-container class="py-2">
<h1>Terms of Service</h1>
<h2>1. Terms</h2>
<p>By accessing the website at <a href="http://gamebrary.com">http://gamebrary.com</a>, you are agreeing to be bound by these terms of service, all applicable laws and regulations, and agree that you are responsible for compliance with any applicable local laws. If you do not agree with any of these terms, you are prohibited from using or accessing this site. The materials contained in this website are protected by applicable copyright and trademark law.</p>
<h2>2. Use License</h2>
<ol type="a">
<li>Permission is granted to temporarily download one copy of the materials (information or software) on Gamebrary's website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title, and under this license you may not:
<ol type="i">
<li>modify or copy the materials;</li>
<li>use the materials for any commercial purpose, or for any public display (commercial or non-commercial);</li>
<li>attempt to decompile or reverse engineer any software contained on Gamebrary's website;</li>
<li>remove any copyright or other proprietary notations from the materials; or</li>
<li>transfer the materials to another person or "mirror" the materials on any other server.</li>
</ol>
</li>
<li>This license shall automatically terminate if you violate any of these restrictions and may be terminated by Gamebrary at any time. Upon terminating your viewing of these materials or upon the termination of this license, you must destroy any downloaded materials in your possession whether in electronic or printed format.</li>
</ol>
<h2>3. Disclaimer</h2>
<ol type="a">
<li>The materials on Gamebrary's website are provided on an 'as is' basis. Gamebrary makes no warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or non-infringement of intellectual property or other violation of rights.</li>
<li>Further, Gamebrary does not warrant or make any representations concerning the accuracy, likely results, or reliability of the use of the materials on its website or otherwise relating to such materials or on any sites linked to this site.</li>
</ol>
<h2>4. Limitations</h2>
<p>In no event shall Gamebrary or its suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on Gamebrary's website, even if Gamebrary or a Gamebrary authorized representative has been notified orally or in writing of the possibility of such damage. Because some jurisdictions do not allow limitations on implied warranties, or limitations of liability for consequential or incidental damages, these limitations may not apply to you.</p>
<h2>5. Accuracy of materials</h2>
<p>The materials appearing on Gamebrary's website could include technical, typographical, or photographic errors. Gamebrary does not warrant that any of the materials on its website are accurate, complete or current. Gamebrary may make changes to the materials contained on its website at any time without notice. However Gamebrary does not make any commitment to update the materials.</p>
<h2>6. Links</h2>
<p>Gamebrary has not reviewed all of the sites linked to its website and is not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by Gamebrary of the site. Use of any such linked website is at the user's own risk.</p>
<h2>7. Modifications</h2>
<p>Gamebrary may revise these terms of service for its website at any time without notice. By using this website you are agreeing to be bound by the then current version of these terms of service.</p>
<h2>8. Governing Law</h2>
<p>These terms and conditions are governed by and construed in accordance with the laws of Arizona and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.</p>
</b-container>
</section>
</template>
<script>

View file

@ -1,41 +1,26 @@
<template lang="html">
<b-container class="pb-3">
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'settings' }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
<section>
<b-container class="pb-3">
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'settings' }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
Wallpapers
</div>
</portal>
Wallpapers
</div>
</portal>
<empty-state
v-if="showEmptyState"
:title="$t('wallpapers.title')"
message="Upload a wallpaper to customize your boards"
@action="triggerFileUpload"
>
<b-button
:disabled="outOfSpace"
variant="light"
class="mr-2"
@click="triggerFileUpload"
<empty-state
v-if="showEmptyState"
:title="$t('wallpapers.title')"
message="Upload a wallpaper to customize your boards"
@action="triggerFileUpload"
>
<b-spinner small v-if="saving" />
<template v-else>
Upload wallpaper
</template>
</b-button>
</empty-state>
<template v-else>
<portal to="headerActions">
<b-button
:disabled="outOfSpace"
variant="light"
@ -45,34 +30,51 @@
<b-spinner small v-if="saving" />
<template v-else>
<i class="fas fa-upload fa-fw" aria-hidden />
<span class="d-none d-sm-inline">Upload</span>
Upload wallpaper
</template>
</b-button>
</portal>
</empty-state>
<b-alert
v-if="isDuplicate && !saving && file && file.name"
show
variant="warning"
>
{{ $t('wallpapers.form.duplicateMessage', { fileName: file.name }) }}
</b-alert>
<template v-else>
<portal to="headerActions">
<b-button
:disabled="outOfSpace"
variant="light"
class="mr-2"
@click="triggerFileUpload"
>
<b-spinner small v-if="saving" />
<wallpapers-list />
<template v-else>
<i class="fas fa-upload fa-fw" aria-hidden />
<span class="d-none d-sm-inline">Upload</span>
</template>
</b-button>
</portal>
<b-alert :show="showEmptyState">You don't have any wallpapers.</b-alert>
</template>
<b-alert
v-if="isDuplicate && !saving && file && file.name"
show
variant="warning"
>
{{ $t('wallpapers.form.duplicateMessage', { fileName: file.name }) }}
</b-alert>
<b-form-file
class="d-none file-input"
v-model="file"
accept="image/*"
:browse-text="$t('wallpapers.form.upload')"
:placeholder="$t('wallpapers.form.placeholder')"
@input="uploadWallpaper"
/>
</b-container>
<wallpapers-list />
<b-alert :show="showEmptyState">You don't have any wallpapers.</b-alert>
</template>
<b-form-file
class="d-none file-input"
v-model="file"
accept="image/*"
:browse-text="$t('wallpapers.form.upload')"
:placeholder="$t('wallpapers.form.placeholder')"
@input="uploadWallpaper"
/>
</b-container>
</section>
</template>
<script>

View file

@ -1,56 +1,79 @@
<!-- TODO: get inspiration from polygon -->
<!-- TODO: restore bbparser -->
<template lang="html">
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
<section>
<b-container>
<portal to="pageTitle">
<div>
<b-button
:to="{ name: 'game', params: { id: game.id, slug: game.slug } }"
variant="light"
class="mr-2"
>
<i class="fa-solid fa-chevron-left" />
</b-button>
News
News
</div>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<div v-else-if="!articles.length">
no news found
</div>
</portal>
<b-spinner v-if="loading" class="spinner-centered" />
<b-row v-else>
<b-col cols="12" sm="4">
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" class="float-right">
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<div v-else-if="!articles.length">
no news found
</div>
<b-col cols="12" sm="8">
<!-- <pre>{{ articles }}</pre> -->
<b-card
v-for="article in articles"
class="mb-3"
:key="article.id"
>
<strong>{{ article.title }}</strong>
<p class="text-muted small">By {{ article.author }} | {{ article.date }}</p>
<b-row class="game-news" v-else>
<b-col cols="6">
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" class="float-right">
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<div v-html="parseBBCode(article.contents)" />
<b-col cols="6">
<b-alert
v-for="article in articles"
:key="article.id"
show
variant="secondary"
class="mb-3 small"
>
<strong>{{ article.title }}</strong>
feedlabel
<pre>{{ article.feedlabel }}</pre>
feedname
<pre>{{ article.feedname }}</pre>
<!-- <b-badge v-for="tag in article.tags" :key="tag">{{ tag }}</b-badge> -->
<div class="mb-0 w-100" v-html="$options.marked(article.contents)" />
</b-alert>
</b-col>
</b-row>
</b-container>
<!-- <div class="mb-0 w-100" v-html="$options.marked(article.contents)" /> -->
</b-card>
</b-col>
</b-row>
<!-- <b-row class="game-news" v-else>
<b-col cols="6">
<router-link :to="{ name: 'game', params: { id: game.id, slug: game.slug }}" class="float-right">
<b-img :src="gameCoverUrl" fluid rounded />
</router-link>
</b-col>
<b-col cols="6">
</b-col>
</b-row> -->
</b-container>
</section>
</template>
<script>
import { mapState } from 'vuex';
import { marked } from 'marked';
import { getGameCoverUrl } from '@/utils';
// import bbCodeParser from 'js-bbcode-parser';
import bbobHTML from '@bbob/html'
import presetHTML5 from '@bbob/preset-html5'
import bbCodeParser from 'js-bbcode-parser';
import BBCodeParser from 'js-bbcode-parser/src/index.js';
export default {
marked,
@ -82,6 +105,10 @@ export default {
},
methods: {
parseBBCode(contents) {
return bbobHTML(contents, presetHTML5())
},
async loadNews() {
this.loading = true;

View file

@ -270,7 +270,6 @@ const routes = [
path: '/',
component: HomePage,
meta: {
title: 'Dashboard',
public: true,
},
},

View file

@ -980,6 +980,46 @@
"@babel/helper-validator-identifier" "^7.16.7"
to-fast-properties "^2.0.0"
"@bbob/core@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@bbob/core/-/core-2.8.1.tgz#2952483f11ed6a1137468606984e4a6fa44ac3c3"
integrity sha512-1z+sw/hyRyN05NgxFCuFzq5GP1SrLU+Z3KO0ivIkO1E/M+4ae5dURwMICq2bzJEEHNfPwQsnj/Hk6m2qYmnBTQ==
dependencies:
"@bbob/parser" "^2.8.1"
"@bbob/html@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@bbob/html/-/html-2.8.1.tgz#7bb2e9cff021646d4cfb647de74844e876e76b54"
integrity sha512-AmX38Ow45D6VQSWa0msH6CR7iEpbuWt+ZCTs1aiHoRSQxgLwll09Pc9UxoFkvWH1EnOux/nhxJjc8sM8+94PkA==
dependencies:
"@bbob/core" "^2.8.1"
"@bbob/plugin-helper" "^2.8.1"
"@bbob/parser@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@bbob/parser/-/parser-2.8.1.tgz#3ec149ca2cad597269390ab8d68e5eccc119a038"
integrity sha512-iRj7dbSLnuPvV46Lo1KeTFMoo4ux1jYmQ3rHYK7iUe8vUFAQvwEfHs/K9/1cE7ktrBpObIyepZD7PvN0QXw6Gw==
dependencies:
"@bbob/plugin-helper" "^2.8.1"
"@bbob/plugin-helper@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@bbob/plugin-helper/-/plugin-helper-2.8.1.tgz#b63a0ca359fb5810c081d0587e26ca2ca5b994fa"
integrity sha512-u7DlTdj1QcbFyKDKlmPXDCvSmDrUM+hBY8NTQ/Y6EhC4y5jvRhau2bsKlMB454uuzkbE44qRsxF6ZpIhpTCLOw==
"@bbob/preset-html5@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@bbob/preset-html5/-/preset-html5-2.8.1.tgz#3bfa0f94a4ea8f5b564ddf2928423b693fea22d0"
integrity sha512-ufXUvJqy3v7kwAPUwSr9zeOLSqS5uZ5okN09AhAD8W858u4UasAi5b+ski5RxADOU2Wu2RBPQ7uaJIlUinVbCg==
dependencies:
"@bbob/plugin-helper" "^2.8.1"
"@bbob/preset" "^2.8.1"
"@bbob/preset@^2.8.1":
version "2.8.1"
resolved "https://registry.yarnpkg.com/@bbob/preset/-/preset-2.8.1.tgz#f316045749ccb696c5e660f982e211abce67bd33"
integrity sha512-h7xRNEZ8gAmoJn0qXSUu6b/csZJ03wB5AbXeFCIZWYkb9miGClF0sU0o93nRvnSo9MhOAsahYLhG62roHPX1Ng==
"@bcoe/v8-coverage@^0.2.3":
version "0.2.3"
resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@ -6738,10 +6778,10 @@ jose@^2.0.5:
dependencies:
"@panva/asn1.js" "^1.0.0"
js-bbcode-parser@^3.0.5:
version "3.0.5"
resolved "https://registry.yarnpkg.com/js-bbcode-parser/-/js-bbcode-parser-3.0.5.tgz#c8cef49fe41f6a11d5550db482c4bbb1a4de2014"
integrity sha512-443YN6jukBNthfiJm3pA9pUAmpiyiK51L0uecsIySb2aNLpF4xz+lQH0CN+E0DyTEy9J0SafX9FAU0JJOQyRyg==
js-bbcode-parser@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-bbcode-parser/-/js-bbcode-parser-4.0.0.tgz#ca4b8de5c1b52f382f525802b6918071653cb869"
integrity sha512-3uoQJBMhhaJQhFY+KeR99MNCUxLjTaacHf930Ln6DQd13yD+EXqtHovhlaN5Jb+J058hx1F0l64rF0rLGM7dJA==
js-beautify@^1.6.12:
version "1.14.3"