wip

functions/index.js

@@ -15,6 +15,8 @@ admin.initializeApp({
   messagingSenderId: '324529217902',
 });
 
+exports.steam = require('./steam');
+
 exports.customSearch = functions.https.onRequest((req, res) => {
   res.set('Access-Control-Allow-Origin', "*");
 
@@ -279,21 +281,3 @@ exports.email = functions.https.onRequest((req, res) => {
     .then(({ data }) => { res.status(200).send(data) })
     .catch((error) => { res.send(error) });
 });
-
-exports.news = functions.https.onRequest((req, res) => {
-  res.set('Access-Control-Allow-Origin', "*")
-  const { appId } = req.query;
-
-  if (!appId) res.send(400);
-
-  axios({
-    url: `https://api.steampowered.com/ISteamNews/GetNewsForApp/v0002/?appid=${appId}`,
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
-      'Accept': 'application/json',
-    },
-  })
-    .then(({ data }) => { res.status(200).send(data) })
-    .catch((error) => { res.send(error) });
-});

functions/steam.js

@@ -0,0 +1,76 @@
+const functions = require('firebase-functions');
+const axios = require('axios');
+const BASE_URL =
+// TODO: put base url in constant
+
+exports.news = functions.https.onRequest((req, res) => {
+  res.set('Access-Control-Allow-Origin', "*")
+  const { appId } = req.query;
+
+  if (!appId) res.send(400);
+
+  axios({
+    url: `https://api.steampowered.com/ISteamNews/GetNewsForApp/v0002/?appid=${appId}`,
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Accept': 'application/json',
+    },
+  })
+    .then(({ data }) => res.status(200).send(data))
+    .catch((error) => res.send(error));
+});
+
+exports.friends = functions.https.onRequest((req, res) => {
+  res.set('Access-Control-Allow-Origin', "*")
+  const { appId } = req.query;
+
+  if (!appId) res.send(400);
+
+  axios({
+    url: 'https://api.steampowered.com/ISteamUser/GetFriendList/v1?key=0DFD0511A922896D8064A4EABC32BE08&steamid=76561198017003200',
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Accept': 'application/json',
+    },
+  })
+    .then(({ data }) => res.status(200).send(data))
+    .catch((error) => res.send(error));
+});
+
+exports.ownedGames = functions.https.onRequest((req, res) => {
+  res.set('Access-Control-Allow-Origin', "*")
+  const { appId } = req.query;
+
+  if (!appId) res.send(400);
+
+  axios({
+    url: 'https://api.steampowered.com/IPlayerService/GetOwnedGames/v0001/?key=0DFD0511A922896D8064A4EABC32BE08&steamid=76561198017003200&include_appinfo=true&format=json',
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Accept': 'application/json',
+    },
+  })
+    .then(({ data }) => res.status(200).send(data))
+    .catch((error) => res.send(error));
+});
+
+exports.gameList = functions.https.onRequest((req, res) => {
+  res.set('Access-Control-Allow-Origin', "*")
+  const { appId } = req.query;
+
+  if (!appId) res.send(400);
+
+  axios({
+    url: 'http://api.steampowered.com/ISteamApps/GetAppList/v2',
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+      'Accept': 'application/json',
+    },
+  })
+    .then(({ data }) => res.status(200).send(data))
+    .catch((error) => res.send(error));
+});

package.json

@@ -24,6 +24,7 @@
         "firebase-admin": "^9.2.0",
         "firebase-functions": "^3.11.0",
         "firebaseui": "^4.8.0",
+        "js-bbcode-parser": "^3.0.5",
         "lodash.chunk": "^4.2.0",
         "lodash.groupby": "^4.6.0",
         "lodash.orderby": "^4.6.0",

src/components/Dock/VerticalDock.vue

@@ -14,17 +14,25 @@
 
     <pinned-boards />
     <user-menu />
+
+    <b-button :to="{ name: 'settings' }">
+      <i class="fas fa-cog" />
+    </b-button>
+
+    <global-search class="ml-2" />
   </nav>
 </template>
 
 <script>
 import { mapState, mapGetters } from 'vuex';
 import PinnedBoards from '@/components/Board/PinnedBoards';
+import GlobalSearch from '@/components/GlobalSearch';
 import UserMenu from '@/components/UserMenu';
 
 export default {
   components: {
     PinnedBoards,
+    GlobalSearch,
     UserMenu,
   },
 

src/components/Game.vue

@@ -45,6 +45,7 @@
           class="my-1 w-25"
         />
         <game-description :game="game" />
+        <game-news :game="game" />
         <game-details :game="game" />
 
         <similar-games
@@ -95,6 +96,7 @@
 
 <script>
 import GameNotes from '@/components/Game/GameNotes';
+import GameNews from '@/components/Game/GameNews';
 import GameDetails from '@/components/Game/GameDetails';
 import GameRating from '@/components/Game/GameRating';
 import GameDescription from '@/components/Game/GameDescription';
@@ -111,6 +113,7 @@ export default {
     GameRating,
     GameImages,
     GameNotes,
+    GameNews,
     GameVideos,
     GameWebsites,
     SimilarGames,

src/components/Game/GameNews.vue

@@ -0,0 +1,88 @@
+<template lang="html">
+  <div class="game-news">
+    <pre>{{ articles.length }}</pre>
+    <b-card v-for ="article in articles" :key="article.id" class="mb-3">
+      <h5 class="mb-0">
+        <pre>{{ article.id }}</pre>
+        {{ article.title }}
+
+        <b-badge variant="info">{{ article.feedlabel }}</b-badge>
+      </h5>
+
+      <small>
+        By {{ article.author }} on
+        {{ $dayjs.unix(article.date).format('MMMM D, YYYY') }}
+      </small>
+
+      <p v-html="getformattedContent(article)" />
+
+      <b-button :href="article.url" variant="info" target="_blank">Read article</b-button>
+      <!-- TODO: add pc gamer logo /#/game/12597/owlboy -->
+
+      <!-- <vue-markdown v-html="parseBBcode(article.contents)" /> -->
+      <!-- <vue-markdown v-html="article.contents" /> -->
+      <!-- https://cdn.akamai.steamstatic.com/steamcommunity/public/images -->
+    </b-card>
+  </div>
+</template>
+
+<script>
+import VueMarkdown from 'vue-markdown';
+import bbCodeParser from 'js-bbcode-parser';
+
+export default {
+  components: {
+    VueMarkdown,
+  },
+
+  props: {
+    game: Object,
+  },
+
+  data() {
+    return {
+      articles: [],
+    };
+  },
+
+  computed: {
+    steamAppId() {
+      const websites = (this.game && this.game.websites) || [];
+
+      const steamData = websites.find(({ category }) => category === 13);
+      const steamUrl = steamData && steamData.url;
+      const steamAppId = steamUrl ? steamUrl.split('/')[4] : null;
+
+      return steamAppId;
+    },
+  },
+
+  mounted() {
+    if (this.steamAppId) this.loadNews();
+  },
+
+  methods: {
+    getformattedContent(article) {
+      const usesBBcodeFormat = article.feedname === 'steam_community_announcements';
+
+      return usesBBcodeFormat
+        ? bbCodeParser.parse(article.contents.replace(/{STEAM_CLAN_IMAGE}/g, 'https://cdn.akamai.steamstatic.com/steamcommunity/public/images/clans/'))
+        : article.contents;
+    },
+
+    async loadNews() {
+      this.articles = await this.$store.dispatch('LOAD_STEAM_GAME_NEWS', this.steamAppId);
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+.game-news {
+  img {
+    width: 100%;
+    height: auto;
+    max-width: 100%;
+  }
+}
+</style>

src/components/GlobalSearch.vue

@@ -71,8 +71,17 @@ export default {
   methods: {
     openGame(gameId) {
       // TODO: handle game detail view setting
+      // this.$store.commit('SET_GAME_MODAL_DATA', { gameId });
+      // this.$bvModal.show('game-modal');
       this.$store.commit('SET_GAME_MODAL_DATA', { gameId });
-      this.$bvModal.show('game-modal');
+
+      this.$router.push({
+        name: 'game',
+        params: {
+          gameId,
+          // gameSlug: this.games[gameId].slug,
+        },
+      });
     },
 
     async search(searchText) {

src/components/Settings/GameDetailSettings.vue

@@ -1,5 +1,6 @@
 <template lang="html">
   <div>
+    <!-- TODO: use PEGI/ESRB logos -->
     <b-form-group label="Game rating system:">
       <b-form-select
         v-model="gameRatingSystem"

src/components/UserMenu.vue

@@ -129,11 +129,11 @@ export default {
           title: 'Wallpapers',
           icon: 'fas fa-images',
         },
-        {
-          name: 'settings',
-          title: 'Settings',
-          icon: 'fas fa-cog',
-        },
+        // {
+        //   name: 'settings',
+        //   title: 'Settings',
+        //   icon: 'fas fa-cog',
+        // },
       ],
       secondaryButtons: [
         {

src/components/WallpapersList.vue

@@ -34,7 +34,7 @@
           variant="danger"
           @click="confirmDeleteWallpaper(wallpaper)"
         >
-          Delete file
+          <i class="fas fa-trash fa-fw" aria-hidden />
         </b-button>
 
         <b-button

src/pages/GamePage.vue

@@ -2,9 +2,10 @@
   <div class="pt-3 game-page" ref="gamePage">
     <!-- TODO: add  -->
     <!-- <b-button>Back to board</b-button> -->
-    <game :game="game" :loading="loading" />
+    <b-skeleton v-if="loading" />
+    <game v-else-if="game" :game="game" />
 
-    <div class="game-backdrop" :style="`background-image: url(${backdropUrl})`" />
+    <!-- <div class="game-backdrop" :style="`background-image: url(${backdropUrl})`" /> -->
   </div>
 </template>
 

src/pages/GeneralSettingsPage.vue

@@ -0,0 +1,13 @@
+<template lang="html">
+  <div>
+    General settings page
+  </div>
+</template>
+
+<script>
+export default {
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+</style>

src/pages/SettingsPage.vue

@@ -2,13 +2,26 @@
   <b-container fluid>
     <page-title title="Settings" />
 
-    <div class="d-inline-flex flex-column align-items-start">
+    <b-list-group>
+      <b-list-group-item :to="{ name: 'general-settings' }">
+        <i class="fas fa-sliders-h fa-fw" aria-hidden />
+        General
+      </b-list-group-item>
+      <b-list-group-item :to="{ name: 'steam-settings' }">
+        <i class="fab fa-steam fa-fw" aria-hidden></i>
+        Steam
+      </b-list-group-item>
+    </b-list-group>
+
+    <router-view />
+
+    <!-- <div class="d-inline-flex flex-column align-items-start">
       <language-selector />
       <game-detail-settings />
       <steam-settings />
       <dock-settings />
 
-      <!-- <provider-card /> -->
+      <provider-card />
 
       <b-button
         @click="session_signOut"
@@ -26,7 +39,7 @@
       </b-button>
 
       <delete-account-modal />
-    </div>
+    </div> -->
   </b-container>
 </template>
 
@@ -36,7 +49,7 @@ import GameDetailSettings from '@/components/Settings/GameDetailSettings';
 import SteamSettings from '@/components/Settings/SteamSettings';
 import DockSettings from '@/components/Settings/DockSettings';
 // import GameDetailViewSelector from '@/components/Settings/GameDetailViewSelector';
-// import ProviderCard from '@/components/ProviderCard';
+import ProviderCard from '@/components/ProviderCard';
 import DeleteAccountModal from '@/components/Settings/DeleteAccountModal';
 import sessionMixin from '@/mixins/sessionMixin';
 import { mapState } from 'vuex';
@@ -48,7 +61,7 @@ export default {
     SteamSettings,
     DockSettings,
     // GameDetailViewSelector,
-    // ProviderCard,
+    ProviderCard,
     DeleteAccountModal,
   },
 

src/pages/SteamSettingsPage.vue

@@ -0,0 +1,55 @@
+<template lang="html">
+  <div>
+    <b-form-group label="Steam ID:">
+      <b-form-input
+        v-model="steamId"
+        style="max-width: 200px"
+        @change="save"
+      />
+    </b-form-group>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import { GAME_DETAIL_VIEWS } from '@/constants';
+
+export default {
+  data() {
+    return {
+      saving: false,
+      GAME_DETAIL_VIEWS,
+      steamId: null,
+    };
+  },
+
+  computed: {
+    ...mapState(['settings']),
+  },
+
+  mounted() {
+    const { settings } = this;
+
+    this.steamId = settings && settings.steamId
+      ? settings.steamId
+      : null;
+  },
+
+  methods: {
+    async save() {
+      const { steamId, settings } = this;
+
+      const payload = {
+        ...settings,
+        steamId,
+      };
+
+      await this.$store.dispatch('SAVE_SETTINGS', payload)
+        .catch(() => {
+          this.$bvToast.toast('There was an error saving your settings', { variant: 'danger' });
+          this.saving = false;
+        });
+    },
+  },
+};
+</script>

src/routes.js

@@ -16,6 +16,8 @@ import PublicProfilePage from '@/pages/PublicProfilePage';
 import PublicProfilesPage from '@/pages/PublicProfilesPage';
 import ReleasesPage from '@/pages/ReleasesPage';
 import SettingsPage from '@/pages/SettingsPage';
+import SteamSettingsPage from '@/pages/SteamSettingsPage';
+import GeneralSettingsPage from '@/pages/GeneralSettingsPage';
 import TagsPage from '@/pages/TagsPage';
 import TermsPage from '@/pages/TermsPage';
 import WallpapersPage from '@/pages/WallpapersPage';
@@ -54,6 +56,18 @@ const routes = [
     meta: {
       title: 'Settings',
     },
+    children: [
+      {
+        name: 'steam-settings',
+        path: 'steam',
+        component: SteamSettingsPage,
+      },
+      {
+        name: 'general-settings',
+        path: '',
+        component: GeneralSettingsPage,
+      },
+    ],
   },
   {
     name: 'game',

src/store/actions.js

@@ -32,6 +32,19 @@ export default {
     });
   },
 
+  LOAD_STEAM_GAME_NEWS(context, steamGameId) {
+    return new Promise((resolve, reject) => {
+      axios.get(`${API_BASE}/steam-news?appId=${steamGameId}`)
+        .then(({ data }) => {
+          const gameNews = data && data.appnews && data.appnews.newsitems
+            ? data.appnews.newsitems
+            : null;
+
+          resolve(gameNews);
+        }).catch(reject);
+    });
+  },
+
   LOAD_BOARDS({ state, commit }) {
     return new Promise((resolve, reject) => {
       const db = firebase.firestore();

yarn.lock

@@ -6264,6 +6264,11 @@ js-base64@^2.1.8, js-base64@^2.1.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
 
+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-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"