code cleanup

diff --git a/html/index.html b/html/index.html
index 2e6b29256360847ef63c9f8308294d4eb071cc45..060f1241d4a1256e3994e53d5903627b50d6a9c7 100644 (file)
--- a/html/index.html
+++ b/html/index.html
@@ -37,7 +37,7 @@
             <option>All</option>
             <option v-for="c in champions">{{ c.name }}</option>
           </select>
-          <button id="refreshbutton" v-on:click="refreshhistory">Refresh</button>
+          <button id="refreshbutton" v-on:click="refreshHistory">Refresh</button>
         </div>
         <div id="matchlist">
           <table>

diff --git a/html/script.js b/html/script.js
index 51c43c0281648d80e9fccdb50334bd2c33a93036..cee77f6f1d5a8f9586fb18847239319e4806c199 100644 (file)
--- a/html/script.js
+++ b/html/script.js
@@ -1,5 +1,3 @@
-// Start Screen
-// ------------
 function getRegions() {
   return [ "euw", "na", "kr", "br" ];
 }
@@ -7,9 +5,16 @@ function getChampions() {
   return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"}, {name: "Not"} ];
 }
 function getMatchProps() {
-  return []
+  return [
+    {text: "Champion", name: "champ"},
+    {text: "Lane", name: "lane"},
+  ];
 }
 function getMatches() {
+  return [
+    {champ: "Xerath", lane: "Middle"},
+    {champ: "Quinn", lane: "Bottom"},
+  ];
 }
 function getInfo() {
   app.summoner = $("#nameinput").val();
@@ -24,15 +29,48 @@ function setUrl() {
     "&view=" +
     app.view);
 }
-
-function toggleStart(up) {
-  $("#start").removeClass(up ? "down" : "up");
-  $("#start").addClass(up ? "up" : "down");
-}
-function slideStart() {
+function slideStartUp() {
+  $("#start").removeClass("slidedown");
   $("#start").addClass("slideup");
 }
-var app = new Vue({
+function slideStartDown() {
+  $("#start").removeClass("slideup");
+  $("#start").addClass("slidedown");
+}
+function changeView(view) {
+  if (view != "start" && view != "history" && view != "stats") {
+    setUrl();
+    return;
+  }
+  let oldView = app.view;
+  if (oldView == "start") {
+    if (view == "history") {
+      slideStartUp();
+      $("#matchhistory").show("slide", { direction: "down" }, 300);
+    } else if (view == "stats") {
+      slideStartUp();
+      $("#stats").show("slide", { direction: "down" }, 300);
+    }
+  } else if (oldView == "history") {
+    if (view == "start") {
+      $("#matchhistory").hide("slide", { direction: "down" }, 300);
+      slideStartDown();
+    } else if (view == "stats") {
+      $("#stats").show("blind", { direction: "right" });
+      $("#matchhistory").hide("blind", { direction: "left" });
+    }
+  } else if (oldView == "stats") {
+    if (view == "start") {
+      $("#stats").hide("slide", { direction: "down" }, 300);
+      slideStartDown();
+    } else if (view == "history") {
+      $("#matchhistory").show("blind", { direction: "left" });
+      $("#stats").hide("blind", { direction: "right" });
+    }
+  }
+  app.view = view;
+}
+let app = new Vue({
   el: '#app',
   data: {
     summoner: "",
@@ -46,49 +84,41 @@ var app = new Vue({
   methods: {
     submit: function() {
       getInfo();
-      if (app.view == "start") {
-        app.view = "history";
-        setUrl();
-        slideStart();
-        $("#matchhistory").show("slide", { direction: "down" }, 300);
-      } else {
-        setUrl();
-      }
+      if (app.view == "start")
+        changeView("history");
+      setUrl();
     },
     historyToStats: function() {
-      app.view = "stats";
+      changeView("stats");
       setUrl();
-      $("#stats").show("blind", { direction: "right" });
-      $("#matchhistory").hide("blind", { direction: "left" });
     },
     statsToHistory: function() {
-      app.view = "history";
+      changeView("history");
       setUrl();
-      $("#matchhistory").show("blind", { direction: "left" });
-      $("#stats").hide("blind", { direction: "right" });
+    },
+    refreshHistory: function() {
     },
   },
 });
 
-// Check for URL parameters
-let url = new URL(window.location.href);
-if (url.searchParams.has("summoner")) {
-  app.summoner = url.searchParams.get("summoner");
-  $("#nameinput").val(app.summoner);
-}
-if (url.searchParams.has("region")) {
-  app.region = url.searchParams.get("region");
-  $("#regionselect").val(app.region);
-}
-if (url.searchParams.has("view")) {
-  let view = url.searchParams.get("view");
-  if (view == "history") {
-    toggleStart(true);
-    $("#matchhistory").show();
+function parseUrl() {
+  console.log("parseUrl");
+  let url = new URL(window.location.href);
+  if (url.searchParams.has("summoner")) {
+    app.summoner = url.searchParams.get("summoner");
+    $("#nameinput").val(app.summoner);
   }
-  else if (view == "stats") {
-    toggleStart(true);
-    $("#stats").show();
+  if (url.searchParams.has("region")) {
+    app.region = url.searchParams.get("region");
+    $("#regionselect").val(app.region);
+  }
+  if (url.searchParams.has("view")) {
+    let view = url.searchParams.get("view");
+    changeView(view);
+  } else {
+    changeView("start");
   }
 }
-// ------------
+
+window.addEventListener('popstate', parseUrl);
+window.addEventListener('load', parseUrl);

diff --git a/html/style.css b/html/style.css
index af80d07189d734c391939d8bf664911d636234ec..dc31ed556bf293af574164236522dcbf682485cf 100644 (file)
--- a/html/style.css
+++ b/html/style.css
@@ -25,9 +25,24 @@ input, select, button {
     width: calc(100% - 20px);
   }
 }
+@keyframes startdown {
+  100% {
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 65%;
+  }
+  0% {
+    top: 0%;
+    transform: translate(-50%, 0%);
+    width: calc(100% - 20px);
+  }
+}
 #start.slideup {
   animation: startup 0.3s forwards linear;
 }
+#start.slidedown {
+  animation: startdown 0.3s forwards linear;
+}
 #start.up {
   top: 0%;
   transform: translate(-50%, 0%);
@@ -135,9 +150,6 @@ button {
   border-radius: 5px;
   text-align: center;  
 }
-#stats {
-  background-color: red;
-}
 .bottom-right {
   position: absolute;
   right: 0px;