Initial Commit

gabenparadise/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

gabenparadise/README.md

@@ -0,0 +1,24 @@
+# gabenparadise
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

gabenparadise/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

gabenparadise/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "gabenparadise",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "register-service-worker": "^1.7.1",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.4.0",
+    "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-pwa": "~4.4.0",
+    "@vue/cli-service": "~4.4.0",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "lint-staged": "^9.5.0",
+    "prettier": "^1.19.1",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "@vue/prettier"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  }
+}

gabenparadise/src/App.vue

@@ -0,0 +1,49 @@
+<template>
+  <div id="app">
+    <div class="header-top">
+      <div class="">
+        <h1 class="display-4">{{ title }}</h1>
+        <p class="lead">{{ content }}</p>
+      </div>
+      <div class="">
+        <i id="sub-identifi" class="fa fa-bell-o bell" aria-hidden="true"></i>
+      </div>
+    </div>
+     <GamesList />
+  </div>
+</template>
+
+<style>
+body {
+  background: #151515;
+  color: white;
+}
+
+.header-top {
+  display: flex;
+  align-items: space-between;
+}
+
+.bell{
+  font-size: 2.5rem;
+  font-weight: 300;
+  line-height: 2;
+}
+</style>
+
+<script>
+import GamesList from "./components/GamesList.vue";
+
+export default {
+  name: "App",
+  data() {
+    return {
+      title: "Gaben Paradise",
+      content: "get information about free games in one place"
+    };
+  },
+  components: {
+    GamesList
+  }
+};
+</script>

gabenparadise/src/components/GamesList.vue

@@ -0,0 +1,100 @@
+<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>
+          </div>
+
+          <div v-if="game.metacritic != null" class="item-counts">{{game.metacritic}}%</div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+.item {
+  height: 100%;
+  background: #222;
+  border-radius: 10px;
+}
+
+.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-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);
+    }
+  }
+};
+</script>

gabenparadise/src/main.js

@@ -0,0 +1,9 @@
+import Vue from "vue";
+import App from "./App.vue";
+import "./registerServiceWorker";
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: h => h(App)
+}).$mount("#app");

gabenparadise/src/registerServiceWorker.js

@@ -0,0 +1,87 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker";
+import axios from "axios";
+import firebase from "firebase/app";
+import "firebase/messaging";
+
+if (process.env.NODE_ENV === "production") {
+  if (Notification.permission === 'granted') {
+    const firebaseConfig = {
+      apiKey: "AIzaSyB4IvN1P0u7nWZx96lAKWNix7EOx0tuX48",
+      authDomain: "gabenparadise-c658e.firebaseapp.com",
+      databaseURL: "https://gabenparadise-c658e.firebaseio.com",
+      projectId: "gabenparadise-c658e",
+      storageBucket: "gabenparadise-c658e.appspot.com",
+      messagingSenderId: "338698464238",
+      appId: "1:338698464238:web:da7df8af54802ab19efcff"
+    };
+
+    if (!firebase.apps.length) {
+      firebase.initializeApp(firebaseConfig);
+    }
+  }
+
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+        "For more details, visit https://goo.gl/AFskqB"
+      );
+
+      Notification.requestPermission(function (status) {
+        console.log("Status ", status);
+      })
+    },
+    registered($registration) {
+      if (Notification.permission === 'granted') {
+        const messaging = firebase.messaging.isSupported() ? firebase.messaging() : null
+        if (messaging != null) {
+          console.log("Service worker has been registered. ", $registration);
+          messaging.useServiceWorker($registration);
+          messaging.usePublicVapidKey('BEbiSQ7ishlWlO7v-_EJW3iFk6WmgdSFrPgfXsjLNflqljBqWEZwv-4iyaTaYYE1VM2y1fX9V50QoZ0c8ft5C0s');
+          
+          messaging.getToken().then(function (token) {
+            console.log("Token: ", token)
+            console.log(JSON.stringify({ "token": token }));
+            
+            axios.post('https://dev.steelants.cz/vasek/gabenparadise/api/subscribe', { 
+              "token" : token
+            }, {
+              headers: {
+                'Content-Type': 'application/x-www-form-urlencoded'
+              }
+            }
+            ).then(function (response) {
+              console.log(response);
+            }).catch(function (error) {
+              console.log(error);
+            });
+          });
+        } else {
+          document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell"; 
+        }
+      } else {
+        document.getElementById("sub-identifi").className = "fa fa-bell-slash-o bell"; 
+      }
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+      //window.location.reload(true);
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    }
+  });
+}

gabenparadise/src/service-worker.js

@@ -0,0 +1,24 @@
+self.__precacheManifest = [].concat(self.__precacheManifest || []);
+
+// workbox.setConfig({
+//     debug: true
+// });
+
+workbox.precaching.precacheAndRoute(self.__precacheManifest, {});
+
+self.addEventListener("push", function (event) {
+    console.log('Received a push message', event);
+    if (event.data) {
+        var data = event.data.json();
+        console.log(data);
+        event.waitUntil(self.registration.showNotification(data.notification.title, {
+            body: data.notification.body,
+            icon: data.notification.image || null
+        }));
+    }
+});
+
+self.addEventListener("notificationclick", function (event) {
+    const promiseChain = clients.openWindow("https://gabenparadise.com/");
+    event.waitUntil(promiseChain);
+});

gabenparadise/vue.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  pwa: {
+    name: 'Gaben Paradise',
+    workboxPluginMode: 'InjectManifest',
+    workboxOptions:{
+      swSrc: "src/service-worker.js"
+    },
+    iconPaths: {
+      favicon32: 'img/icons/favicon-32x32.png',
+      favicon16: 'img/icons/favicon-16x16.png',
+      appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png',
+      maskIcon: 'img/icons/safari-pinned-tab.svg',
+      msTileImage: 'img/icons/msapplication-icon-144x144.png'
+    }
+  }
+}