views korrigiert

diff --git a/html/script.js b/html/script.js
index cee77f6f1d5a8f9586fb18847239319e4806c199..88f12a4e4312d604fd8e9f5e0a39c9d8a1484855 100644 (file)
--- a/html/script.js
+++ b/html/script.js
@@ -14,6 +14,62 @@ function getMatches() {
   return [
     {champ: "Xerath", lane: "Middle"},
     {champ: "Quinn", lane: "Bottom"},
   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 getInfo() {
   ];
 }
 function getInfo() {


@@ -29,6 +85,14 @@ function setUrl() {
     "&view=" +
     app.view);
 }
     "&view=" +
     app.view);
 }

+function toggleStartUp() {
+  $("#start").removeClass("down");
+  $("#start").addClass("up");
+}
+function toggleStartDown() {
+  $("#start").removeClass("up");
+  $("#start").addClass("down");
+}

 function slideStartUp() {
   $("#start").removeClass("slidedown");
   $("#start").addClass("slideup");
 function slideStartUp() {
   $("#start").removeClass("slidedown");
   $("#start").addClass("slideup");


@@ -37,12 +101,20 @@ function slideStartDown() {
   $("#start").removeClass("slideup");
   $("#start").addClass("slidedown");
 }
   $("#start").removeClass("slideup");
   $("#start").addClass("slidedown");
 }

-function changeView(view) {
-  if (view != "start" && view != "history" && view != "stats") {
-    setUrl();
-    return;
+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;
   let oldView = app.view;

+  console.log("changing view from " + oldView + " to " + view);

   if (oldView == "start") {
     if (view == "history") {
       slideStartUp();
   if (oldView == "start") {
     if (view == "history") {
       slideStartUp();


@@ -75,7 +147,7 @@ let app = new Vue({
   data: {
     summoner: "",
     region: "",
   data: {
     summoner: "",
     region: "",

-    view: "start",
+    view: "",

     regions: getRegions(),
     champions: getChampions(),
     matchprops: getMatchProps(),
     regions: getRegions(),
     champions: getChampions(),
     matchprops: getMatchProps(),


@@ -102,7 +174,6 @@ let app = new Vue({
 });
 
 function parseUrl() {
 });
 
 function parseUrl() {

-  console.log("parseUrl");

   let url = new URL(window.location.href);
   if (url.searchParams.has("summoner")) {
     app.summoner = url.searchParams.get("summoner");
   let url = new URL(window.location.href);
   if (url.searchParams.has("summoner")) {
     app.summoner = url.searchParams.get("summoner");


@@ -114,11 +185,20 @@ function parseUrl() {
   }
   if (url.searchParams.has("view")) {
     let view = url.searchParams.get("view");
   }
   if (url.searchParams.has("view")) {
     let view = url.searchParams.get("view");

-    changeView(view);
+    if (view != "start" && view != "history" && view != "stats") {
+      view = "start";
+    }
+    return view;

   } else {
   } else {

-    changeView("start");
+    return "start";

   }
 }
 
   }
 }
 

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

diff --git a/html/style.css b/html/style.css
index dc31ed556bf293af574164236522dcbf682485cf..a410d3f761dd3b2c65c2623ad3c7653e9245f7fd 100644 (file)
--- a/html/style.css
+++ b/html/style.css
@@ -8,6 +8,7 @@ body {
   margin: 0px;
   background-color: rgb(200, 50, 50);
   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;
   margin: 0px;
   background-color: rgb(200, 50, 50);
   box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset;

+  overflow: hidden;

 }
 input, select, button {
   font-size:inherit;
 }
 input, select, button {
   font-size:inherit;


@@ -149,6 +150,7 @@ button {
   background-color: white;
   border-radius: 5px;
   text-align: center;  
   background-color: white;
   border-radius: 5px;
   text-align: center;  

+  overflow: visible;

 }
 .bottom-right {
   position: absolute;
 }
 .bottom-right {
   position: absolute;