From 83c8ba1f47233dd4e92bf7aa5875871770c04af2 Mon Sep 17 00:00:00 2001
From: shalomalexander <shalomalexander68@gmail.com>
Date: Sat, 3 Oct 2020 22:43:18 +0530
Subject: [PATCH 1/3] Added a hardcoded html 5 game in desktop app  using
 iframe

---
 components/Sidebar.vue |  5 ++++
 pages/index.vue        | 53 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/components/Sidebar.vue b/components/Sidebar.vue
index d1634e7..fd18be2 100644
--- a/components/Sidebar.vue
+++ b/components/Sidebar.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="sidebar-wrapper">
+    <nuxt-link to="/">
+      <div class="item">
+        Home
+      </div>
+    </nuxt-link>
     <nuxt-link to="/explore">
       <div class="item">
         Explore
diff --git a/pages/index.vue b/pages/index.vue
index 0e2f954..f32ad57 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,61 @@
 <template>
-  <div class="page-wrapper">
-    <h1>Home</h1>
+  <div>
+    <div class="page-wrapper">
+      <h1>Home</h1>
+      <form @submit.prevent="urlHandler">
+        <input v-model="url" type="text" placeholder="Search your game">
+        <button v-on:click="urlHandler()">Search</button>
+      </form>
+      <br>
+      <!--src attribute is hard coded-->
+      <iframe v-if: src ="https://games.cdn.famobi.com/html5games/t/table-tennis-world-tour/v240/?fg_domain=play.famobi.com&fg_aid=A1000-1&fg_uid=8c8e5fc6-7e38-47ab-96eb-150276e79ef8&fg_pid=4638e320-4444-4514-81c4-d80a8c662371&fg_beat=736&original_ref=https%3A%2F%2Fgames.cdn.famobi.com%2F" height="550px" width="100%" title="Iframe Example"></iframe>
+    </div>
   </div>
 </template>
 
+<script>
+export default {
+  name: "Index",
+  components: {
+  },
+  // Currently I want to use this url attribute in the src of iframe but the im not sure how to pass the data to it.
+  data(){
+    return {
+      url: ""
+    }
+  },
+  methods: {
+    urlHandler(){
+    }
+  }
+}
+
+</script>
+
 <style scoped>
 .page-wrapper {
   padding: 1rem;
 }
 
-button, input {
-  border: 1px solid grey;
+button{
+  width: 200px;
+  border:20;
+  padding: 20px;
+  font-size: 1.3em;
+  background-color: aqua;
+  color: #687F7F;
 }
 
+button:hover{
+  opacity: 0.50;
+}
+
+input {
+  width: calc(50% - 50px);
+  border: 0;
+  padding: 20px;
+  font-size: 1.3em;
+  background-color: #323333;
+  color: #687F7F;
+}
 </style>

From cb09cc6b15eebb0dbf769aa6e75ae6373ee067af Mon Sep 17 00:00:00 2001
From: shalomalexander <shalomalexander68@gmail.com>
Date: Sun, 4 Oct 2020 20:05:16 +0530
Subject: [PATCH 2/3] Functioning Search Bar Added

---
 components/Loading.vue | 36 ++++++++++++++++++++++++++++++
 nuxt.config.js         |  4 +++-
 pages/index.vue        | 50 +++++++++++++++++++++++-------------------
 pages/installed.vue    |  2 +-
 4 files changed, 68 insertions(+), 24 deletions(-)
 create mode 100644 components/Loading.vue

diff --git a/components/Loading.vue b/components/Loading.vue
new file mode 100644
index 0000000..bc9e471
--- /dev/null
+++ b/components/Loading.vue
@@ -0,0 +1,36 @@
+<template>
+  <div v-if="loading" class="loading-page">
+    <p>Loading...</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    loading: false
+  }),
+  methods: {
+    start(){
+      this.loading = true
+    },
+    finish(){
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.loading-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  padding-top: 200px;
+  font-size: 30px;
+  font-family: sans-serif;
+}
+</style>
diff --git a/nuxt.config.js b/nuxt.config.js
index fe7f4b5..21d8a55 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -43,5 +43,7 @@ export default {
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
-  }
+  },
+
+  loading: '~/components/Loading.vue'
 }
diff --git a/pages/index.vue b/pages/index.vue
index f32ad57..702c45f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,13 +2,14 @@
   <div>
     <div class="page-wrapper">
       <h1>Home</h1>
-      <form @submit.prevent="urlHandler">
-        <input v-model="url" type="text" placeholder="Search your game">
-        <button v-on:click="urlHandler()">Search</button>
+      <form class="searchbar">
+        <div class="searchbar-input">
+          <!-- Input -->
+          <input v-model="url" type="search" placeholder="Paste the Game URL" />
+          <!-- Search button -->
+          <a :href="`${url}/`" class="searchbar-clear"></a>
+        </div>
       </form>
-      <br>
-      <!--src attribute is hard coded-->
-      <iframe v-if: src ="https://games.cdn.famobi.com/html5games/t/table-tennis-world-tour/v240/?fg_domain=play.famobi.com&fg_aid=A1000-1&fg_uid=8c8e5fc6-7e38-47ab-96eb-150276e79ef8&fg_pid=4638e320-4444-4514-81c4-d80a8c662371&fg_beat=736&original_ref=https%3A%2F%2Fgames.cdn.famobi.com%2F" height="550px" width="100%" title="Iframe Example"></iframe>
     </div>
   </div>
 </template>
@@ -16,20 +17,14 @@
 <script>
 export default {
   name: "Index",
-  components: {
-  },
+  components: {},
   // Currently I want to use this url attribute in the src of iframe but the im not sure how to pass the data to it.
   data(){
     return {
       url: ""
     }
-  },
-  methods: {
-    urlHandler(){
-    }
   }
 }
-
 </script>
 
 <style scoped>
@@ -37,25 +32,36 @@ export default {
   padding: 1rem;
 }
 
-button{
+.searchbar-clear {
   width: 200px;
-  border:20;
   padding: 20px;
-  font-size: 1.3em;
-  background-color: aqua;
-  color: #687F7F;
+  border: 0px solid #00B4CC;
+  background: #00B4CC;
+  color: white;
+  border-radius: 0 10px 10px 0;
+  cursor: pointer;
+  font-size: 20px;
+  background-image: linear-gradient(#2193b0,#00B4CC);
+  box-shadow: 5px 5px 5px #888888;
 }
 
-button:hover{
-  opacity: 0.50;
+.searchbar-clear:hover {
+  opacity: 0.9;
+  background-image: linear-gradient(#2193b0,#00B4CC);
 }
 
 input {
   width: calc(50% - 50px);
-  border: 0;
+  border: 0px;
   padding: 20px;
   font-size: 1.3em;
   background-color: #323333;
-  color: #687F7F;
+  color: #687f7f;
+  border-radius: 10px 0px 0px 10px;
+  box-shadow: 5px 5px 5px #888888;
+}
+
+input:hover{
+  opacity: 0.95;
 }
 </style>
diff --git a/pages/installed.vue b/pages/installed.vue
index f0a18eb..b8e9c93 100644
--- a/pages/installed.vue
+++ b/pages/installed.vue
@@ -13,7 +13,7 @@ import * as fs from "tauri/api/fs"
 export default {
   data(){
     return {
-      games: []
+      games: ["shalom", "sharon"]
     }
   },
   created(){

From 0d724a2aabf89e00a9c6c042f7f274dfbc9f19c9 Mon Sep 17 00:00:00 2001
From: shalomalexander <shalomalexander68@gmail.com>
Date: Sun, 4 Oct 2020 20:19:58 +0530
Subject: [PATCH 3/3] Implemented Search Bar

---
 components/Loading.vue | 36 ------------------------------------
 nuxt.config.js         |  4 +---
 pages/installed.vue    |  2 +-
 3 files changed, 2 insertions(+), 40 deletions(-)
 delete mode 100644 components/Loading.vue

diff --git a/components/Loading.vue b/components/Loading.vue
deleted file mode 100644
index bc9e471..0000000
--- a/components/Loading.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <div v-if="loading" class="loading-page">
-    <p>Loading...</p>
-  </div>
-</template>
-
-<script>
-export default {
-  data: () => ({
-    loading: false
-  }),
-  methods: {
-    start(){
-      this.loading = true
-    },
-    finish(){
-      this.loading = false
-    }
-  }
-}
-</script>
-
-<style scoped>
-.loading-page {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(255, 255, 255, 0.8);
-  text-align: center;
-  padding-top: 200px;
-  font-size: 30px;
-  font-family: sans-serif;
-}
-</style>
diff --git a/nuxt.config.js b/nuxt.config.js
index 21d8a55..fe7f4b5 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -43,7 +43,5 @@ export default {
 
   // Build Configuration (https://go.nuxtjs.dev/config-build)
   build: {
-  },
-
-  loading: '~/components/Loading.vue'
+  }
 }
diff --git a/pages/installed.vue b/pages/installed.vue
index b8e9c93..f0a18eb 100644
--- a/pages/installed.vue
+++ b/pages/installed.vue
@@ -13,7 +13,7 @@ import * as fs from "tauri/api/fs"
 export default {
   data(){
     return {
-      games: ["shalom", "sharon"]
+      games: []
     }
   },
   created(){