Mirrors/gamebrary
2
0
Fork 0
mirror of https://github.com/romancm/gamebrary synced 2024-11-23 11:43:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

giornata di lavoro

Browse source
This commit is contained in:
Gamebrary 2022-04-14 16:27:32 -07:00
parent 1fdfa987bc
commit 90a1d38271
14 changed files with 380 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/Board/MiniBoard.vue
View file

@ -1,11 +1,10 @@
<!-- TODO: fix background hex not rendering -->
<template lang="html">
<div
class="mini-board overflow-hidden p-1 rounded cursor-pointer bg-secondary"
:class="['mini-board overflow-hidden p-1 rounded cursor-pointer', { 'bg-secondary': !board.backgroundColor }]"
:style="miniBoardStyles"
@click="$emit('view-board', board.id)"
>
<pre>{{ backgroundImage }}</pre>
<header class="text-small d-flex align-items-center">
<span class="mr-1">{{ board.name }}</span>
@ -53,9 +52,7 @@ export default {
computed: {
miniBoardStyles() {
if (this.backgroundImage) {
return `background-image: url(${this.backgroundImage});`;
}
if (this.backgroundImage) return `background-image: url(${this.backgroundImage});`
return this.board?.backgroundColor
? `background-color: ${this.board.backgroundColor};`

1
src/components/Game/GameDescription.vue
View file

@ -1,5 +1,4 @@
<template lang="html">
<!-- TODO: break up wikipedia description into chunks -->
<div class="game-description">
<div v-if="loading" class="mb-4">
<b-skeleton

9
src/components/GameBoards.vue
View file

@ -30,8 +30,8 @@
>
<b-button
size="sm"
variant="secondary"
@click.stop="editBoard(board)"
variant="transparent"
@click.stop="editBoard(board.id)"
>
<i class="fas fa-pencil-alt fa-fw" aria-hidden />
</b-button>
@ -110,9 +110,8 @@ export default {
}
},
editBoard(board) {
this.$store.commit('SET_ACTIVE_BOARD', board);
this.$bvModal.show('edit-board');
editBoard(id) {
this.$router.push({ name: 'edit-board', params: { id } });
},
getWallpaperUrl(url) {

3
src/components/GameNote.vue
View file

@ -21,6 +21,7 @@
<script>
import { marked } from 'marked';
import { mapGetters } from 'vuex';
export default {
props: {
@ -28,6 +29,8 @@ export default {
},
computed: {
...mapGetters(['gameCoverUrl']),
formattedNote() {
return marked(this.note?.note || this.note);
},

3
src/components/PageHeader.vue
View file

@ -12,11 +12,12 @@
<i class="fas fa-arrow-left fa-fw" aria-hidden />
</b-button>
<portal-target name="pageTitle" />
<span v-if="$route.meta.title">
{{ $route.meta.title }}
</span>
<portal-target v-else name="pageTitle" />
<span v-if="showBoardName">
{{ board.name }}

20
src/components/PageTitle.vue
View file

@ -1,14 +1,18 @@
<template lang="html">
<header class="my-3 d-flex align-items-center justify-content-between">
<header class="mb-2 d-flex align-items-center justify-content-between">
<h5 class="m-0">{{ title }}</h5>
<b-button
v-if="actionText"
variant="primary"
@click="$emit('action')"
>
{{ actionText }}
</b-button>
<div v-if="$slots.default || actionText">
<slot />
<b-button
v-if="actionText"
variant="primary"
@click="$emit('action')"
>
{{ actionText }}
</b-button>
</div>
</header>
</template>

2
src/pages/BoardPage.vue
View file

@ -10,7 +10,7 @@
<portal v-if="isBoardPage" to="headerActions">
<b-button
v-if="user && user.uid && user.uid === board.owner"
variant="light"
variant="primary"
class="mr-2"
:to="{ name: 'edit-board', params: { id: board.id } }"
>

13
src/pages/DashboardPage.vue
View file

@ -8,12 +8,17 @@
/>
</portal>
<portal to="headerActions">
<b-button
variant="primary"
class="mr-2"
@click="$router.push({ name: 'create-board' })"
>
Create board
</b-button>
</portal>
<div v-if="boards.length">
Boards
<b-button @click="$router.push({ name: 'create-board' })">Create board</b-button>
<game-boards class="mb-3" />
</div>

2
src/pages/NotesPage.vue
View file

@ -1,6 +1,6 @@
<!-- TODO: pagination? -->
<template lang="html">
<b-container>
<b-container fluid>
<page-title
title="Notes"
>

13
src/pages/PublicProfilePage.vue
View file

@ -1,12 +1,17 @@
<template lang="html">
<b-container>
<b-container fluid>
<div v-if="loading">
Loading...
</div>
<template v-else-if="profile">
<div>
<img :src="profile.profileImage" :alt="userName" class="rounded" />
<img
v-if="avatar"
:src="avatar"
:alt="userName"
class="rounded"
/>
<h2>{{ profile.userName }}</h2>
@ -78,6 +83,10 @@ export default {
userName() {
return this.$route.params.userName;
},
avatar() {
return this.profile?.profilePic || this.user?.photoURL || null;
},
},
watch: {

4
src/pages/SearchPage.vue
View file

@ -2,6 +2,10 @@
<div class="search-page bg-white p-2">
<search-box class="d-md-none mb-2" />
<b-alert show variant="success">
Custom search controls go here!
</b-alert>
<b-skeleton v-if="loading" />
<b-card-group columns v-else-if="searchResults.length > 0">

325
src/pages/UpgradePage.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<div>
<b-container fluid>
<stripe-checkout
ref="checkoutRef"
mode="subscription"
@ -10,13 +10,296 @@
@loading="load"
/>
<pre>{{ lineItems }}</pre>
<pre>{{ loading }}</pre>
<!-- TODO: finish UI, set loading spinner -->
<b-card class="text-center">
<h2>Level up your video game collection!</h2>
<p class="lead-text">
Organize your video game collection with Gamebrary.
</p>
<b-button @click="planSelected = 'monthly'">Monthly</b-button>
<b-button @click="planSelected = 'yearly'">Yearly</b-button>
</div>
<b-button-group>
<b-button
:variant="planSelected === 'monthly' ? 'info' : 'light'"
@click="planSelected = 'monthly'"
>
Monthly billing
</b-button>
<b-button
:variant="planSelected === 'yearly' ? 'info' : 'light'"
v-b-tooltip.top="'2 Months free'"
@click="planSelected = 'yearly'"
>
Yearly billing
</b-button>
</b-button-group>
<table class="table table-hover">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="text-muted">
Gamebrary Free
<br />
<h2 class="price">
$0{{ pricingLabel }}
</h2>
</th>
<th scope="col" class="text-success">
Gamebrary Pro
<br />
<h2 class="price">
${{ `${amountToPay}${pricingLabel}` }}
</h2>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Unlimited game boards
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Search
</td>
<td class="text-muted">
Basic
</td>
<td class="text-success">
Advanced
</td>
</tr>
<tr>
<td>
Board filters
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Customizations
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Speedruns
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Steam integration
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Tags
</td>
<td>
5
</td>
<td>
Unlimited
</td>
</tr>
<tr>
<td>
Notes
</td>
<td>
Plain text
</td>
<td>
Custom notes, rich text.
</td>
</tr>
<tr>
<td>
Custom URL
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Progress tracking
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Keyboard shortcuts
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Feature
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
List sorting
</td>
<td>
Basic
</td>
<td>
Advanced
</td>
</tr>
<tr>
<td>
Multiple list views
</td>
<td>
Basic
</td>
<td>
Multiple
</td>
</tr>
<tr>
<td>
Dock
(Quickly access all your boards, pin them, organize them, group them, etc...)
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Import/Export
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Public profile
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>Shared feature</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
<tr>
<td>
Customer support
</td>
<td>
<i class="fa-solid fa-times text-muted" />
</td>
<td>
<i class="fa-solid fa-check text-success" />
</td>
</tr>
</tbody>
</table>
<b-button size="lg" variant="success" @click="checkout">
Go Pro!
</b-button>
</b-card>
<b-alert show class="mt-3">
Students and Developers get Pro for free!
</b-alert>
<b-alert show class="mt-3">
F.A.Q.
NO REFUNDS
We use stripe for payments
</b-alert>
</b-container>
</template>
<script>
@ -30,7 +313,7 @@ export default {
data() {
return {
loading: false,
planSelected: null,
planSelected: 'monthly',
monthlyPlan: {
price: 'price_1KjFY4GpsgtQXdlaWZa44Gbj',
quantity: 1,
@ -44,16 +327,21 @@ export default {
computed: {
lineItems() {
if (this.planSelected === 'monthly') return [this.monthlyPlan];
if (this.planSelected === 'yearly') return [this.yearlyPlan];
return [{}];
return this.planSelected === 'yearly'
? [this.yearlyPlan]
: [this.monthlyPlan];
},
},
watch: {
planSelected() {
this.$refs.checkoutRef.redirectToCheckout();
pricingLabel() {
return this.planSelected === 'yearly'
? '/year'
: '/month';
},
amountToPay() {
return this.planSelected === 'yearly'
? '50'
: '5';
},
},
@ -61,10 +349,17 @@ export default {
load(value) {
this.loading = value;
},
checkout() {
this.$refs.checkoutRef.redirectToCheckout();
}
},
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.price {
font-family: 'Gochi Hand', cursive;
}
</style>

18
src/routes.js
View file

@ -76,16 +76,25 @@ const routes = [
name: 'account-settings',
path: 'account',
component: AccountSettingsPage,
meta: {
title: "Account",
},
},
{
name: 'steam-settings',
path: 'steam',
component: SteamSettingsPage,
meta: {
title: "Steam",
},
},
{
name: 'general-settings',
path: '',
component: GeneralSettingsPage,
meta: {
title: 'Settings',
}
},
{
name: 'tags-settings',
@ -108,7 +117,7 @@ const routes = [
path: 'notes',
component: NotesPage,
meta: {
title: 'Tags',
title: 'Notes',
},
},
{
@ -181,7 +190,7 @@ const routes = [
path: '/upgrade',
component: UpgradePage,
meta: {
title: 'Upgrade to PRO!',
title: 'Upgrade',
},
},
{
@ -212,6 +221,9 @@ const routes = [
path: '/board/create',
name: 'create-board',
component: CreateBoardPage,
meta: {
title: 'Create board',
}
},
{
path: '/board/:id',
@ -260,7 +272,7 @@ const routes = [
path: '/',
component: HomePage,
meta: {
title: 'Home',
title: 'Dashboard',
public: true,
},
},

6
src/store/getters.js
View file

@ -14,6 +14,12 @@ export default {
: '/no-image.jpg';
},
gameCoverUrl: ({ game }) => {
return game?.cover?.image_id
? `https://images.igdb.com/igdb/image/upload/t_cover_big_2x/${game.cover.image_id}.jpg`
: '/no-image.jpg';
},
isBoardOwner: ({ board, user }) => {
const boardOwner = board && board.owner;
const userId = user && user.uid;