views korrigiert

[lolstats] / html / script.js

diff --git a/html/script.js b/html/script.js
index 518f5fbce8e4316369b876e87b9e9d2f33b8dc87..88f12a4e4312d604fd8e9f5e0a39c9d8a1484855 100644 (file)
--- a/html/script.js
+++ b/html/script.js
@@ -1,101 +1,204 @@
-// Start Screen
-// ------------

 function getRegions() {
   return [ "euw", "na", "kr", "br" ];
 }
 function getRegions() {
   return [ "euw", "na", "kr", "br" ];
 }

-
-function toggleStart(up) {
-  $("#start").removeClass(up ? "down" : "up");
-  $("#start").addClass(up ? "up" : "down");
+function getChampions() {
+  return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"}, {name: "Not"} ];

 }
 }

-function slideStart() {
-  $("#start").addClass("slideup");
+function getMatchProps() {
+  return [
+    {text: "Champion", name: "champ"},
+    {text: "Lane", name: "lane"},
+  ];

 }
 }

-function slideSlideUp() {
-  $("#slide").addClass("slideup");
+function getMatches() {
+  return [
+    {champ: "Xerath", lane: "Middle"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+    {champ: "Quinn", lane: "Bottom"},
+  ];

 }
 }

-function slideSlideLeft() {
-  $("#slide").removeClass("slideright");
-  $("#slide").addClass("slideleft");
+function getInfo() {
+  app.summoner = $("#nameinput").val();
+  app.region = $("#regionselect").val();
+} 
+function setUrl() {
+  window.history.pushState("object or string", "Title",
+    "/lol?summoner=" +
+    app.summoner +
+    "&region=" +
+    app.region +
+    "&view=" +
+    app.view);

 }
 }

-function slideSlideRight() {
-  $("#slide").removeClass("slideleft");
-  $("#slide").addClass("slideright");
+function toggleStartUp() {
+  $("#start").removeClass("down");
+  $("#start").addClass("up");

 }
 }

-function toggleSlideLeft() {
-  $("#slide").addClass("left");
+function toggleStartDown() {
+  $("#start").removeClass("up");
+  $("#start").addClass("down");

 }
 }

-
-var app = new Vue({
+function slideStartUp() {
+  $("#start").removeClass("slidedown");
+  $("#start").addClass("slideup");
+}
+function slideStartDown() {
+  $("#start").removeClass("slideup");
+  $("#start").addClass("slidedown");
+}
+function setView(view) {
+  console.log("Setting view to " + view);
+  if (view == "history") {
+    toggleStartUp();
+    $("#matchhistory").show();
+  } else if (view == "stats") {
+    toggleStartUp();
+    $("#stats").show();
+  }
+  app.view = view;
+}
+function changeView(view) {
+  let oldView = app.view;
+  console.log("changing view from " + oldView + " to " + 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: {
   el: '#app',
   data: {

-    regions: getRegions(),
-    region: "euw",

     summoner: "",
     summoner: "",

+    region: "",
+    view: "",
+    regions: getRegions(),
+    champions: getChampions(),
+    matchprops: getMatchProps(),
+    matches: getMatches(),

   },
   methods: {
   },
   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")
+        changeView("history");
+      setUrl();

     },
     historyToStats: function() {
     },
     historyToStats: function() {

-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=stats");
-
-      $("#stats").show();
-      slideSlideLeft();
-      setTimeout(() => {
-        $("#matchhistory").hide();
-      }, 300);
+      changeView("stats");
+      setUrl();

     },
     statsToHistory: function() {
     },
     statsToHistory: function() {

-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=history");
-
-      $("#matchhistory").show();
-      slideSlideRight();
-      setTimeout(() => {
-        $("#stats").hide();
-      }, 300);
+      changeView("history");
+      setUrl();
+    },
+    refreshHistory: function() {

     },
   },
 });
 
     },
   },
 });
 

-// Check for URL parameters
-let url = new URL(window.location.href);
-if (url.searchParams.has("summoner"))
-  app.summoner = url.searchParams.get("summoner");
-if (url.searchParams.has("region"))
-  app.region = url.searchParams.get("region");
-if (url.searchParams.has("view")) {
-  let view = url.searchParams.get("view");
-  if (view == "history") {
-    toggleStart(true);
-    $("#matchhistory").show();
-    app.startToHistory = ()=>{};
+function 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();
-    toggleSlideLeft();
-    app.startToHistory = ()=>{};
+  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 != "start" && view != "history" && view != "stats") {
+      view = "start";
+    }
+    return view;
+  } else {
+    return "start";

   }
 }
   }
 }

-// ------------
+
+window.addEventListener('popstate', () => {
+  let view = parseUrl();
+  changeView(view);
+});
+window.addEventListener('load', () => {
+  let view = parseUrl();
+  setView(view);
+});