Show star ratings and other stuff

package.json

@@ -31,6 +31,7 @@
         "vue-gallery": "^1.5.0",
         "vue-gravatar": "^1.2.1",
         "vue-i18n": "^8.0.0",
+        "vue-markdown": "^2.2.4",
         "vue-raven": "^1.0.0",
         "vue-router": "^3.0.1",
         "vuedraggable": "^2.16.0",

src/App.vue

@@ -2,10 +2,15 @@
     <div id="app">
         <nav-header />
 
-        <main :class="{ 'logged-in': user && !isPublic }">
+        <main :class="{ 'logged-in': user && !isPublic }" v-if="user && !isPublic">
             <router-view />
         </main>
 
+        <div class="auth" v-else>
+            <i class="fas fa-circle-notch fast-spin fa-3x" />
+            <h3>Authorizing</h3>
+        </div>
+
         <toast />
     </div>
 </template>

src/components/GameCard/GameCard.vue

@@ -5,7 +5,11 @@
         <div class="game-info">
             <h4 v-text="game.name" @click="openDetails" />
 
-            <game-rating v-if="showGameRating" small :rating="game.rating" />
+            <game-rating
+                v-if="showGameRating"
+                :rating="game.rating"
+                small
+            />
 
             <button
                 v-if="searchResult"

src/components/GameDetail/GameDetailPlaceholder.vue

@@ -8,6 +8,7 @@
 
                 <div>
                     <placeholder :lines="1" class="game-title" />
+                    <game-rating :rating="100" placeholder />
                     <placeholder :lines="5" />
                 </div>
 
@@ -18,10 +19,12 @@
 
 <script>
 import { mapGetters } from 'vuex';
+import GameRating from '@/components/GameDetail/GameRating';
 import Placeholder from '@/components/Placeholder/Placeholder';
 
 export default {
     components: {
+        GameRating,
         Placeholder,
     },
 
@@ -69,7 +72,7 @@ export default {
     width: $container-width;
     max-width: 100%;
     z-index: 1;
-    margin: 100px;
+    margin: $gp * 3;
     padding: $gp 0;
     border-radius: $border-radius;
 
@@ -104,7 +107,6 @@ export default {
 
 .game-title {
     --placeholder-text-height: 30px;
-    margin-bottom: $gp;
     width: 50%;
 
     @media($small) {
@@ -112,4 +114,8 @@ export default {
         margin: 0 auto;
     }
 }
+
+.game-rating {
+    margin-bottom: $gp;
+}
 </style>

src/components/GameDetail/GameReviewBox.vue

@@ -1,7 +1,5 @@
 <template lang="html">
     <div v-if="game" class="review-box">
-        <game-rating :rating="game.rating" />
-
         <div class="info">
             <section v-if="playerPerspectives">
                 <strong>Perspective</strong> {{ playerPerspectives }}
@@ -37,12 +35,10 @@
 
 <script>
 import GameLinks from '@/components/GameDetail/GameLinks';
-import GameRating from '@/components/GameDetail/GameRating';
 import { mapState, mapGetters } from 'vuex';
 
 export default {
     components: {
-        GameRating,
         GameLinks,
     },
 
@@ -71,7 +67,7 @@ export default {
     text-align: left;
     display: grid;
     margin: 0 auto;
-    grid-template-columns: 100px auto;
+    // grid-template-columns: 100px auto;
     grid-gap: $gp;
     padding: $gp 0;
     align-items: center;

src/pages/GameBoard/GameBoard.vue

@@ -8,7 +8,13 @@
     >
         <game-board-placeholder v-if="loading" />
 
-        <modal ref="game" large :show-close="false" @close="gameDetailId = null">
+        <modal
+            ref="game"
+            large
+            no-padding
+            :show-close="false"
+            @close="closeGame"
+        >
             <game-detail slot="content" :id="gameDetailId" v-if="gameDetailId" />
         </modal>
 
@@ -97,15 +103,9 @@ export default {
 
         if (this.platform) {
             this.loadGameData();
-
-            document.title = this.platform
-                ? `${this.platform.name} - Gamebrary`
-                : 'Gamebrary';
+            this.setPageTitle();
         } else {
-            // eslint-disable-next-line
-            if (!this.user) {
-                this.$router.push({ name: 'auth' });
-            }
+            this.$router.push({ name: 'platforms' });
         }
 
         this.$bus.$on('OPEN_GAME', this.openGame);
@@ -116,6 +116,18 @@ export default {
     },
 
     methods: {
+
+        closeGame() {
+            this.setPageTitle();
+            this.gameDetailId = null;
+        },
+
+        setPageTitle() {
+            document.title = this.platform
+                ? `${this.platform.name} - Gamebrary`
+                : 'Gamebrary';
+        },
+
         openGame(id) {
             this.gameDetailId = id;
             this.$refs.game.open();

src/pages/GameDetail/GameDetail.vue

@@ -12,6 +12,7 @@
 
                     <div>
                         <h2>{{ game.name }}</h2>
+                        <game-rating :rating="game.rating" />
                         <p class="game-description" v-html="game.summary" />
                         <affiliate-link />
                         <game-review-box />
@@ -31,6 +32,7 @@
 import { mapState, mapGetters } from 'vuex';
 import GameHeader from '@/components/GameDetail/GameHeader';
 import GameScreenshots from '@/components/GameDetail/GameScreenshots';
+import GameRating from '@/components/GameDetail/GameRating';
 import GameVideos from '@/components/GameDetail/GameVideos';
 import GameReviewBox from '@/components/GameDetail/GameReviewBox';
 import AffiliateLink from '@/components/GameDetail/AffiliateLink';
@@ -41,6 +43,7 @@ export default {
     components: {
         IgdbCredit,
         GameHeader,
+        GameRating,
         GameScreenshots,
         GameVideos,
         GameReviewBox,
@@ -130,6 +133,10 @@ export default {
         }
     }
 
+    h2 {
+        margin-bottom: 0;
+    }
+
     .game-info {
         display: grid;
         grid-template-columns: 180px auto;

src/router/index.js

@@ -1,7 +1,6 @@
 import Vue from 'vue';
 import Router from 'vue-router';
 import ShareList from '@/pages/ShareList/ShareList';
-import GameDetail from '@/pages/GameDetail/GameDetail';
 import GameBoard from '@/pages/GameBoard/GameBoard';
 import Platforms from '@/pages/Platforms/Platforms';
 
@@ -15,11 +14,6 @@ export default new Router({
             name: 'shareList',
             component: ShareList,
         },
-        {
-            name: 'game-detail',
-            path: '/g/:id/:slug',
-            component: GameDetail,
-        },
         {
             name: 'platforms',
             path: '/platforms',