wikipedia and stripe progress

src/components/Game.vue

@@ -44,38 +44,25 @@
 
       <b-col cols="7">
         <!-- <pre class="text-dark small">{{ game.gog.price }}</pre> -->
-        <h3 class="mb-2">
+        <h3 class="m-0">
           {{ game.name }}
-          <b-button v-b-toggle.my-collapse>Toggle Collapse</b-button>
-
-          <b-collapse id="my-collapse">
-            <b-card title="Collapsible card">
-              <pre>{{ game }}</pre>
-              <!-- <div
-                class="mb-1"
-                rounded
-                v-for="alternativeName in game.alternative_names"
-                :key="alternativeName.id"
-              >
-                <b-avatar
-                  v-b-tooltip.hover
-                  :title="alternativeName.comment || null"
-                  size="sm"
-                  :src="`/static/img/country-flags/${getCountryCode(alternativeName.comment)}.svg`"
-                />
-
-                {{ alternativeName.name }}
-              </div> -->
-            </b-card>
-          </b-collapse>
           <b-badge variant="success" v-if="game && game.steam && game.steam.metacritic">{{ game.steam.metacritic.score }}</b-badge>
-          <br />
-          <!-- <b-badge variant="success" v-if="steamGame && steamGame.metacritic">{{ steamGame.metacritic.score }}</b-badge> -->
-
-          <b-badge v-b-modal.altNames>
-            <strong>Also known as:</strong>
-          </b-badge>
         </h3>
+
+        <game-alternative-titles />
+        <b-badge
+          v-for="({ games, hex, tagTextColor }, name) in tags"
+          v-if="games.includes(game.id)"
+          :key="name"
+          pill
+          tag="small"
+          class="mr-1 mb-2"
+          :style="`background-color: ${hex}; color: ${tagTextColor}`"
+          v-b-modal.tags
+        >
+          {{ name }}
+        </b-badge>
+
         <!-- <small>
           <pre class="text-dark">{{ steamGame }}</pre>
         </small> -->
@@ -101,7 +88,7 @@
         battle-royale -->
 
         <game-genres :game="game" />
-        <!-- <game-description :game="game" :steam-game="steamGame" /> -->
+        <game-description />
 
         <game-platforms />
         <!-- <game-news :game="game" /> -->
@@ -113,19 +100,6 @@
           class="d-md-none"
         />
 
-        <b-badge
-          v-for="({ games, hex, tagTextColor }, name) in tags"
-          v-if="games.includes(game.id)"
-          :key="name"
-          pill
-          tag="small"
-          class="mr-1 mb-2"
-          :style="`background-color: ${hex}; color: ${tagTextColor}`"
-          v-b-modal.tags
-        >
-          {{ name }}
-        </b-badge>
-
         <!-- <template v-if="!loading">
           <b-skeleton v-for="n in 3" :key="n" />
         </template> -->
@@ -159,6 +133,7 @@
 import GameGenres from '@/components/Game/GameGenres';
 // import GameNews from '@/components/Game/GameNews';
 import GameDetails from '@/components/Game/GameDetails';
+import GameAlternativeTitles from '@/components/Game/GameAlternativeTitles';
 import GamePlatforms from '@/components/Game/GamePlatforms';
 import GameRating from '@/components/Game/GameRating';
 import GameDescription from '@/components/Game/GameDescription';
@@ -174,6 +149,7 @@ export default {
     // Timeline,
     GameDescription,
     GameDetails,
+    GameAlternativeTitles,
     GamePlatforms,
     GameRating,
     // GameImages,

src/components/Game/GameAlternativeTitles.vue

@@ -0,0 +1,62 @@
+<template lang="html">
+  <div v-if="game.alternative_names">
+    <strong class="small link" v-b-toggle.altTitles variant="light">{{ game.alternative_names.length }} Alternative titles</strong>
+
+    <b-collapse id="altTitles">
+      <div
+        class="mb-1 small"
+        rounded
+        variant="light"
+        v-for="alternativeName in game.alternative_names"
+        :key="alternativeName.id"
+      >
+        <b-avatar
+          v-b-tooltip.hover
+          :title="alternativeName.comment || null"
+          size="sm"
+          :src="`/static/img/country-flags/${getCountryCode(alternativeName.comment)}.svg`"
+        />
+
+        {{ alternativeName.name }}
+      </div>
+    </b-collapse>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+
+export default {
+  computed: {
+    ...mapState(['game']),
+  },
+
+  methods: {
+    getCountryCode(alternateTitleDescription) {
+      if (!alternateTitleDescription) return 'un';
+
+      const description = alternateTitleDescription.toLowerCase();
+
+      if (description.includes('japanese')) return 'jp';
+      if (description.includes('korean')) return 'kr';
+      if (description.includes('portuguese')) return 'pt';
+      if (description.includes('brazilian')) return 'br';
+      if (description.includes('spanish')) return 'es';
+      if (description.includes('french')) return 'fr';
+      if (description.includes('italian')) return 'it';
+      if (description.includes('arabic')) return 'sa';
+      if (description.includes('polish')) return 'pl';
+      if (description.includes('russian')) return 'ru';
+      if (description.includes('chinese')) return 'cn';
+      if (description.includes('german')) return 'de';
+      if (description.includes('dutch')) return 'nl';
+      if (description.includes('european')) return 'eu';
+
+      return 'un';
+    },
+  },
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+</style>

src/components/Game/GameDescription.vue

@@ -9,54 +9,31 @@
     </div>
 
     <template v-else>
-      <small class="text-muted">Source: {{ source }}</small>
-
+      <!-- <small class="text-muted">Source: {{ source }}</small> -->
       <p
         :class="{'break-spaces': source === 'IGDB' }"
         v-html="description"
       />
     </template>
 
-    <b-modal
-      id="wikipediaArticle"
-      scrollable
-      hide-footer
-    >
-      <template v-slot:modal-header="{ close }">
-        <modal-header
-          :title="game.name"
-          subtitle="Wikipedia article"
-          @close="close"
+    <b-card no-body>
+      <b-tabs pills card>
+        <b-tab
+          v-for="section in wikipediaArticle.remaining.sections"
+          :key="section.id"
+          :title='section.line'
         >
-          <template v-slot:header>
-            <b-img
-              :src="activeGameCoverUrl"
-              :alt="game.name"
-              class="float-left mr-2"
-              height="40"
-              rounded
-            />
-          </template>
-        </modal-header>
-      </template>
-
-      <p
-        :class="{'break-spaces': source === 'IGDB' }"
-        v-html="gameDescription"
-      />
-    </b-modal>
+          <b-card-text class="wiki-content" v-html="section.text" />
+        </b-tab>
+      </b-tabs>
+    </b-card>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 
 export default {
-  props: {
-    game: Object,
-    steamGame: Object,
-  },
-
   data() {
     return {
       wikipediaArticle: {},
@@ -66,6 +43,7 @@ export default {
 
   computed: {
     ...mapGetters(['activeGameCoverUrl']),
+    ...mapState(['game']),
 
     description() {
       return this.trimmedDescription
@@ -74,19 +52,20 @@ export default {
     },
 
     gameDescription() {
-      const steamDescription = this.steamGame && this.steamGame.short_description
-        ? this.steamGame.short_description
+      const steamDescription = this.game && this.game.steam && this.game.steam.short_description
+        ? this.game.steam.short_description
         : null;
 
-      const wikipediaDescription = this.wikipediaArticle && this.wikipediaArticle.extract
-        ? this.wikipediaArticle.extract
-        : null;
+
+      // const wikipediaDescription = this.wikipediaArticle && this.wikipediaArticle.lead && this.wikipediaArticle.lead.sections[0]
+      //   ? this.wikipediaArticle.lead.sections[0].text
+      //   : null;
 
       const igdbDescription = this.game && this.game.summary
         ? this.game.summary
         : null;
 
-      return steamDescription || wikipediaDescription || igdbDescription;
+      return steamDescription || igdbDescription;
     },
 
     trimmedDescription() {
@@ -96,11 +75,11 @@ export default {
     },
 
     source() {
-      if (this.steamGame && this.steamGame.short_description) {
+      if (this.game.steam && this.game.steam.short_description) {
         return 'Steam';
       }
 
-      return this.wikipediaArticle && this.wikipediaArticle.extract
+      return this.wikipediaArticle && this.wikipediaArticle.lead && this.wikipediaArticle.lead[0]
         ? 'Wikipedia'
         : 'IGDB';
     },
@@ -173,4 +152,11 @@ h2 {
 .mw-empty-elt {
   display: none;
 }
+
+.wiki-content img {
+  float: left;
+  // border-radius: 1rem;
+  padding-right: 1rem;
+  width: auto;
+}
 </style>

src/components/Game/GameDetails.vue

@@ -1,25 +1,6 @@
 <template lang="html">
   <div>
     <b-alert show variant="secondary" class="game-details">
-      <div v-if="game.alternative_names">
-        <strong>Also known as:</strong>
-        <div
-          class="mb-1"
-          rounded
-          v-for="alternativeName in game.alternative_names"
-          :key="alternativeName.id"
-        >
-          <b-avatar
-            v-b-tooltip.hover
-            :title="alternativeName.comment || null"
-            size="sm"
-            :src="`/static/img/country-flags/${getCountryCode(alternativeName.comment)}.svg`"
-          />
-
-          {{ alternativeName.name }}
-        </div>
-      </div>
-
       <div v-if="gameModes">
         <strong>{{ $t('board.gameModal.gameModes') }}:</strong>
         <span class="text-wrap">{{ gameModes }}</span>
@@ -131,30 +112,5 @@ export default {
       return [...new Set(formattedReleaseDates)];
     },
   },
-
-  methods: {
-    getCountryCode(alternateTitleDescription) {
-      if (!alternateTitleDescription) return 'un';
-
-      const description = alternateTitleDescription.toLowerCase();
-
-      if (description.includes('japanese')) return 'jp';
-      if (description.includes('korean')) return 'kr';
-      if (description.includes('portuguese')) return 'pt';
-      if (description.includes('brazilian')) return 'br';
-      if (description.includes('spanish')) return 'es';
-      if (description.includes('french')) return 'fr';
-      if (description.includes('italian')) return 'it';
-      if (description.includes('arabic')) return 'sa';
-      if (description.includes('polish')) return 'pl';
-      if (description.includes('russian')) return 'ru';
-      if (description.includes('chinese')) return 'cn';
-      if (description.includes('german')) return 'de';
-      if (description.includes('dutch')) return 'nl';
-      if (description.includes('european')) return 'eu';
-
-      return 'un';
-    },
-  },
 };
 </script>

src/components/PageHeader.vue

@@ -25,7 +25,7 @@
       <div class="global-actions">
         <portal-target name="headerActions" />
 
-        <b-button class="mr-2" variant="success">
+        <b-button class="mr-2" variant="success" :to="{ name: 'upgrade' }">
           <i class="fa-solid fa-crown" />
           Upgrade
         </b-button>

src/pages/NotesPage.vue

@@ -25,6 +25,7 @@
 
     <template v-else>
       <div class="notes mb-2">
+        <pre>{{ filteredNotes[0] }}</pre>
         <note
           v-for="(note, index) in filteredNotes"
           :key="index"

src/pages/UpgradePage.vue

@@ -3,13 +3,18 @@
     <stripe-checkout
       ref="checkoutRef"
       mode="subscription"
-      pk="pk_live_5160DvBGpsgtQXdlaEzH237I6JOkwRhfO5s6nbrK9IG9erzIbkpW610yu7qE4PUjEQAc2GXbM20egr82H1mkRN5rn00qDa5dw1L"
+      pk="pk_test_Plr6zbTURKQbfRUkcXYP58hl"
       :line-items="lineItems"
-      success-url="http://localhost:4000/#/upgrade"
-      cancel-url="http://localhost:4000/#/upgrade"
+      success-url="http://localhost:4000/#/upgrade?state=success"
+      cancel-url="http://localhost:4000/#/upgrade?state=cancel"
       @loading="load"
     />
 
+    <pre>{{ lineItems }}</pre>
+    <pre>{{ loading }}</pre>
+
+    <b-button @click="planSelected = 'monthly'">Monthly</b-button>
+    <b-button @click="planSelected = 'yearly'">Yearly</b-button>
   </div>
 </template>
 
@@ -24,18 +29,39 @@ export default {
   data() {
     return {
       loading: false,
-      lineItems: [
-        {
-          price: 'prod_LQ5kl5sCkdI7Kr',
-          quantity: 1,
-        },
-      ],
+      planSelected: null,
+      monthlyPlan: {
+        price: 'price_1KjFY4GpsgtQXdlaWZa44Gbj',
+        quantity: 1,
+      },
+      yearlyPlan: {
+        price: 'price_1KjFYeGpsgtQXdlajXFxtkDN',
+        quantity: 1,
+      },
     };
   },
 
+  computed: {
+    lineItems() {
+      if (this.planSelected === 'monthly') return [this.monthlyPlan];
+      if (this.planSelected === 'yearly') return [this.yearlyPlan];
+
+      return [{}];
+    },
+  },
+
+  watch: {
+    planSelected(value) {
+      this.$refs.checkoutRef.redirectToCheckout();
+    },
+  },
+
   methods: {
     // load(status) {
-    load() {
+    load(value) {
+      console.log(value);
+      this.loading = value;
+      console.log('load');
       // console.log(status);
     },
   },

src/store/actions.js

@@ -40,15 +40,9 @@ export default {
 
   LOAD_WIKIPEDIA_ARTICLE(context, articleTitle) {
     return new Promise((resolve, reject) => {
-      axios.get(`https://en.wikipedia.org/w/api.php?origin=*&action=query&prop=extracts&titles=${articleTitle}&format=json`)
-        .then(({ data: { query } }) => {
-          const pageIds = Object.keys(query.pages);
-
-          const article = pageIds.length
-            ? query.pages[pageIds[0]]
-            : null;
-
-          resolve(article);
+      axios.get(`https://en.wikipedia.org/api/rest_v1/page/mobile-sections/${articleTitle}`)
+        .then(({ data }) => {
+          resolve(data);
         }).catch(reject);
     });
   },

src/styles/_typography.scss

@@ -84,6 +84,6 @@ $text-muted: $muted !default;
 //
 
 
-$pre-color: $white !default;
+$pre-color: $dark !default;
 // $pre-scrollable-max-height:         340px !default;
 //