From ff6eb8ce79756c4a6e066904a67920c40d5871ce Mon Sep 17 00:00:00 2001
From: JonatanRek <vasek@steelants.cz>
Date: Mon, 10 Aug 2020 14:49:25 +0200
Subject: [PATCH] Preparation for loading

---
 gabenparadise/public/manifest.json         |   2 +-
 gabenparadise/src/components/GamesList.vue | 159 ++++++++++-----------
 2 files changed, 78 insertions(+), 83 deletions(-)

diff --git a/gabenparadise/public/manifest.json b/gabenparadise/public/manifest.json
index e1b67bc..02224c4 100644
--- a/gabenparadise/public/manifest.json
+++ b/gabenparadise/public/manifest.json
@@ -1,7 +1,7 @@
 {
     "name": "Gaben Paradise",
     "short_name": "Gaben Paradise",
-    "theme_color": "#4DBA87",
+    "theme_color": "#24ACF2",
     "icons": [
         {
             "src": "./img/icons/android-chrome-192x192.png",
diff --git a/gabenparadise/src/components/GamesList.vue b/gabenparadise/src/components/GamesList.vue
index 9a2cc29..06876bf 100644
--- a/gabenparadise/src/components/GamesList.vue
+++ b/gabenparadise/src/components/GamesList.vue
@@ -1,100 +1,95 @@
 <template>
-
-<div class="text-center">
-  <b-spinner label="Spinning"></b-spinner>
-  <b-spinner type="grow" label="Spinning"></b-spinner>
-  <b-spinner variant="primary" label="Spinning"></b-spinner>
-  <b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
-  <b-spinner variant="success" label="Spinning"></b-spinner>
-  <b-spinner variant="success" type="grow" label="Spinning"></b-spinner>
-</div>
-
   <div class="row">
     <div class="col-sm-6 col-md-4 mb-5" v-for="game of games" v-bind:key="game.name">
-      <div class="item">
-        <div class="item-image">
-          <img class="item-image-main" :src="game.image" />
-          <img class="item-image-icon" :src="game.platform" />
-        </div>
-        <div class="item-details">
-          <div>
-            <a :href="game.url">
-              <h5 style="display: inline-block;">{{game.name}}</h5>
-            </a>
+      <a :href="game.url">
+        <div class="item">
+          <div class="item-image">
+            <img class="item-image-main" :src="game.image" />
+            <img class="item-image-icon" :src="game.platform" />
+          </div>
+          <div class="item-details">
+            <div>
+              <h5 style="display: inline-block;">{{game.name}}</h5>
+            </div>
+            <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
           </div>
-
-          <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
-
         </div>
-      </div>
+      </a>
+    </div>
+    <div class="text-center">
+      <b-spinner type="grow" label="Spinning"></b-spinner>
     </div>
   </div>
 </template>
 
 <style>
-.item {
-  height: 100%;
-  background: #222;
-  border-radius: 10px;
-}
+  .item {
+    height: 100%;
+    background: #222;
+    border-radius: 10px;
+  }
 
-.item-image {
-  display: block;
-  padding-bottom: 60%; /* 60% sirky */
-  position: relative;
-}
+  .item-image {
+    display: block;
+    padding-bottom: 60%;
+    /* 60% sirky */
+    position: relative;
+  }
 
-.item-image-main {
-  border-radius: 10px 10px 0 0;
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
-  object-fit: cover;
-}
-.item-image-icon {
-  position: absolute;
-  left: 10px;
-  top: 10px;
-  width: 30px;
-  height: auto;
-}
+  .item-image-main {
+    border-radius: 10px 10px 0 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    object-fit: cover;
+  }
 
-.item-details {
-  padding: 10px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
+  .item-image-icon {
+    position: absolute;
+    left: 10px;
+    top: 10px;
+    width: 30px;
+    height: auto;
+  }
 
-.item-counts {
-  border: 1px solid green;
-  color: green;
-  padding: 4px;
-  font-size: 12px;
-  font-weight: 600;
-}
+  .item-details {
+    padding: 10px;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+  }
+
+  .item-counts {
+    border: 1px solid green;
+    color: green;
+    padding: 4px;
+    font-size: 12px;
+    font-weight: 600;
+  }
 </style>
 
 <script>
-import axios from "axios";
-export default {
-  data() {
-    return {
-      games: []
-    };
-  },
-  async created() {
-    try {
-      const res = async axios.get(
-        "https://api.gabenparadise.com/api/data",
-        { crossdomain: true }
-      );
-      this.games = res.data;
-    } catch (e) {
-      console.error(e);
+  import axios from "axios";
+  export default {
+    data() {
+      return {
+        games: []
+      };
+    },
+    async created() {
+      try {
+        var res = async axios.get(
+          "https://api.gabenparadise.com/api/data",
+          { crossdomain: true }
+        );
+        this.games = res.data;
+      } catch (e) {
+        console.error(e);
+      } finally {
+        console.error('finally');
+      }
     }
-  }
-};
-</script>
+  };
+</script>
\ No newline at end of file