User interface

[lolstats] / html / script.js

diff --git a/html/script.js b/html/script.js
index 518f5fbce8e4316369b876e87b9e9d2f33b8dc87..8db21f945033e3b607c7c4a13e2464012ec4dc6b 100644 (file)
--- a/html/script.js
+++ b/html/script.js
@@ -4,6 +4,20 @@ function getRegions() {
   return [ "euw", "na", "kr", "br" ];
 }
 
+function getInfo() {
+  app.summoner = $("#nameinput").val();
+  app.region = $("#regionselect").val();
+} 
+function setUrl() {
+  window.history.pushState("object or string", "Title",
+    "/?summoner=" +
+    app.summoner +
+    "&region=" +
+    app.region +
+    "&view=" +
+    app.view);
+}
+
 function toggleStart(up) {
   $("#start").removeClass(up ? "down" : "up");
   $("#start").addClass(up ? "up" : "down");
@@ -11,91 +25,60 @@ function toggleStart(up) {
 function slideStart() {
   $("#start").addClass("slideup");
 }
-function slideSlideUp() {
-  $("#slide").addClass("slideup");
-}
-function slideSlideLeft() {
-  $("#slide").removeClass("slideright");
-  $("#slide").addClass("slideleft");
-}
-function slideSlideRight() {
-  $("#slide").removeClass("slideleft");
-  $("#slide").addClass("slideright");
-}
-function toggleSlideLeft() {
-  $("#slide").addClass("left");
-}
-
 var app = new Vue({
   el: '#app',
   data: {
-    regions: getRegions(),
-    region: "euw",
     summoner: "",
+    region: "",
+    view: "start",
+    regions: getRegions(),
   },
   methods: {
-    startToHistory: function() {
-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=history");
-
-      slideStart();
-      $("#matchhistory").show();
-      slideSlideUp();
-      app.startToHistory = ()=>{};
+    submit: function() {
+      getInfo();
+      if (app.view == "start") {
+        app.view = "history";
+        setUrl();
+        slideStart();
+        $("#matchhistory").show("slide", { direction: "down" }, 300);
+      } else {
+        setUrl();
+      }
     },
     historyToStats: function() {
-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=stats");
-
-      $("#stats").show();
-      slideSlideLeft();
-      setTimeout(() => {
-        $("#matchhistory").hide();
-      }, 300);
+      app.view = "stats";
+      setUrl();
+      $("#stats").show("blind", { direction: "right" });
+      $("#matchhistory").hide("blind", { direction: "left" });
     },
     statsToHistory: function() {
-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=history");
-
-      $("#matchhistory").show();
-      slideSlideRight();
-      setTimeout(() => {
-        $("#stats").hide();
-      }, 300);
+      app.view = "history";
+      setUrl();
+      $("#matchhistory").show("blind", { direction: "left" });
+      $("#stats").hide("blind", { direction: "right" });
     },
   },
 });
 
 // Check for URL parameters
 let url = new URL(window.location.href);
-if (url.searchParams.has("summoner"))
+if (url.searchParams.has("summoner")) {
   app.summoner = url.searchParams.get("summoner");
-if (url.searchParams.has("region"))
+  $("#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();
-    app.startToHistory = ()=>{};
   }
   else if (view == "stats") {
     toggleStart(true);
     $("#stats").show();
-    toggleSlideLeft();
-    app.startToHistory = ()=>{};
   }
 }
 // ------------