From 60fc3bd74e693832cf5f795ba1fb4e7d27a089d7 Mon Sep 17 00:00:00 2001
From: Valentin Kaelin <kalanehd@gmail.com>
Date: Thu, 18 Apr 2019 21:33:49 +0900
Subject: [PATCH] Remove unused code and polish SearchForm

---
 client/src/components/SearchForm.vue |  68 +++++------------
 server/home.html                     |  52 -------------
 server/summoner.html                 | 108 ---------------------------
 3 files changed, 20 insertions(+), 208 deletions(-)
 delete mode 100644 server/home.html
 delete mode 100644 server/summoner.html
diff --git a/client/src/components/SearchForm.vue b/client/src/components/SearchForm.vue
index 4d0cd89..37468ac 100644
--- a/client/src/components/SearchForm.vue
+++ b/client/src/components/SearchForm.vue
@@ -1,7 +1,6 @@
 <template>
   <form @submit.prevent="formSubmit" class="flex text-teal-100 text-lg w-full">
     <div class="relative w-full">
-      <!-- <v-icon name="search" class="absolute ml-2 vertical-center"></v-icon> -->
       <input
         type="text"
         autofocus
@@ -10,9 +9,9 @@
       >
       <div class="absolute right-0 vertical-center flex items-center h-full mr-2">
         <div
-          v-bind:class="{'bg-teal-600' : dropdown}"
           @click="dropdown = !dropdown"
-          class="cursor-pointer flex items-center px-2 py-1 rounded"
+          :class="{'bg-teal-600' : dropdown}"
+          class="cursor-pointer flex items-center px-2 py-1 rounded transition-all transition-fast ease-in-quad ease-out-quad hover:text-white"
         >
           <span class="selected font-bold">{{ selectedRegion }}</span>
           <v-icon name="caret-down" class="ml-1"></v-icon>
@@ -35,8 +34,8 @@
             v-for="(region, index) in regions"
             :key="region"
             @click="selectedRegion = region"
-            class="px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
             :class="classRegions(index)"
+            class="px-4b py-1 text-xs bg-teal-600 hover:bg-teal-500"
           >{{ region }}</div>
         </div>
       </transition>
@@ -50,43 +49,36 @@
 
 <script>
 export default {
-  props: {
-    data: Object
-  },
   data() {
     return {
-      summoner: "",
+      summoner: '',
       dropdown: false,
       regions: [
-        "BR",
-        "EUNE",
-        "EUW",
-        "JP",
-        "KR",
-        "LAN",
-        "LAS",
-        "NA",
-        "OCE",
-        "TR",
-        "RU"
+        'BR',
+        'EUNE',
+        'EUW',
+        'JP',
+        'KR',
+        'LAN',
+        'LAS',
+        'NA',
+        'OCE',
+        'TR',
+        'RU'
       ],
-      selectedRegion: "EUW"
+      selectedRegion: 'EUW'
     };
   },
   methods: {
     classRegions(index) {
       return {
-        "rounded-t": index === 0,
-        "rounded-b": index === this.regions.length - 1
+        'rounded-t': index === 0,
+        'rounded-b': index === this.regions.length - 1
       };
     },
     formSubmit() {
-      console.log("form submit child");
-      this.$emit(
-        "formSubmit",
-        this.summoner,
-        this.selectedRegion.toLowerCase()
-      );
+      console.log('form submit child');
+      this.$emit('formSubmit', this.summoner, this.selectedRegion.toLowerCase());
     }
   }
 };
@@ -97,24 +89,4 @@ export default {
   top: 57px;
   right: 1px;
 }
-
-.bounce-enter-active {
-  animation: bounce-in 0.5s;
-}
-
-.bounce-leave-active {
-  animation: bounce-in 0.5s reverse;
-}
-
-@keyframes bounce-in {
-  0% {
-    transform: scale(0);
-  }
-  50% {
-    transform: scale(1.25);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
 </style>
diff --git a/server/home.html b/server/home.html
deleted file mode 100644
index 28b1f0c..0000000
--- a/server/home.html
+++ /dev/null
@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Riot Api Node</title>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
-  <!-- Custom CSS -->
-  <link rel="stylesheet" href="public/style.css">
-</head>
-
-<body class="font-sans bg-grey-lighter">
-
-  <div class="loader--overlay">
-    <div class="loader-container">
-      <div class="LoaderBalls">
-        <div class="LoaderBalls__item"></div>
-        <div class="LoaderBalls__item"></div>
-        <div class="LoaderBalls__item"></div>
-      </div>
-    </div>
-  </div>
-
-  <button class="debug"></button>
-
-  <div class="search">
-
-    <div class="container mx-auto">
-      <h2>Homepage</h2>
-      <form class="flex items-center" id="changeName"  method="get" action="summoners">
-        <input type="search" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="username" placeholder="Pseudo du Joueur">
-        <button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">
-          Chercher
-        </button>
-        <button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
-          <i class="fas fa-sync"></i>
-        </button>
-      </form>
-
-    </div>
-  </div>
-
-
-  <div class="flex items-center justify-center w-full" style="height: calc(100vh - 153px);">
-    <h1>Welcome on KLN's RIOT API Test</h1>
-
-  </div>
-</body>
-
-</html>
\ No newline at end of file
diff --git a/server/summoner.html b/server/summoner.html
deleted file mode 100644
index 0bd3618..0000000
--- a/server/summoner.html
+++ /dev/null
@@ -1,108 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Riot Api Node</title>
-  <link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
-  <!-- Custom CSS -->
-  <link rel="stylesheet" href="public/style.css">
-</head>
-
-<body class="font-sans bg-grey-lighter">
-
-  <div class="loader--overlay">
-    <div class="loader-container">
-      <div class="LoaderBalls">
-        <div class="LoaderBalls__item"></div>
-        <div class="LoaderBalls__item"></div>
-        <div class="LoaderBalls__item"></div>
-      </div>
-    </div>
-  </div>
-
-  <button class="debug"></button>
-
-  <div class="search">
-    <div class="container mx-auto">
-
-      <form class="flex items-center mb-6" id="changeName" method="get" action="summoners">
-        <input type="search" class="hadow appearance-none border rounded w-full py-2 px-3 text-grey-darker leading-tight focus:outline-none focus:shadow-outline mr-1" id="name" name="username" placeholder="Pseudo du Joueur">
-        <button type="submit" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 mr-1 border border-grey-light rounded shadow">
-          Chercher
-        </button>
-        <button id="refresh" class="bg-white hover:bg-grey-lightest text-grey-darkest font-semibold py-2 px-4 border border-grey-light rounded shadow">
-          <i class="fas fa-sync"></i>
-        </button>
-      </form>
-
-    </div>
-  </div>
-
-  <div class="container mx-auto pb-16">
-    <div class="player shadow-md">
-      <div class="player__pp"></div>
-      <h1 class="player__name">Default name</h1>
-      <h3 class="player__level">Default level</h3>
-      <h3 class="player__rank">Default division</h3>
-      <div class="player__rank-img"></div>
-      <h3 class="player__ratio">Default ratio</h3>
-
-
-      <!--<ul class="list-matches--debug">
-
-        <li class="match">
-          <div class="content-container">
-
-            <div class="first">
-              <img src="/public/img/champions/Vayne.png" class="champion-img" alt="example design">
-              <span class="level">17</span>
-              <div class="summonerSpells">
-                <img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerFlash.png" alt="Flash">
-                <img class="spell-icon" src="https://cdn.valentinkaelin.ch/riot/spells/SummonerDot.png" alt="Ignite">
-              </div>
-              <span class="champion-name">Vayne</span>
-            </div>
-
-            <div class="second">
-              <div class="map">Summoner's Rift</div>
-              <div class="gamemode">Normal (Draft Mode)</div>
-            </div>
-
-            <div class="third">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3140.png" class="item" alt="example design">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3153.png" class="item" alt="example design">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3031.png" class="item" alt="example design">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3124.png" class="item" alt="example design">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3094.png" class="item" alt="example design">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3006.png" class="item" alt="example design">
-              <img src="https://cdn.valentinkaelin.ch/riot/items/3363.png" class="item" alt="example design">
-            </div>
-
-            <div class="fourth">
-              <div class="score">8/6/9</div>
-              <div class="gold-farm">
-                <div class="gold">16.2k</div>
-                <div class="farm">227</div>
-              </div>
-              <div class="duration-date">
-                <div class="duration">40:31</div>
-                <div class="date">1/12/2018</div>
-              </div>
-            </div>
-
-          </div>
-        </li>
-      </ul>-->
-
-    </div>
-  </div>
-
-  <script src="public/data.js"></script>
-  <script src="public/functions.js"></script>
-  <script src="public/summoner.js"></script>
-</body>
-
-</html>
\ No newline at end of file
