2 files changed, 92 insertions, 10 deletions

diff --git a/html/script.js b/html/script.js
index cee77f6..88f12a4 100644
--- a/html/script.js
+++ b/html/script.js
@@ -14,6 +14,62 @@ 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 getInfo() {
@@ -29,6 +85,14 @@ function setUrl() {
     "&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");
@@ -37,12 +101,20 @@ function slideStartDown() {
   $("#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;
+  console.log("changing view from " + oldView + " to " + view);
   if (oldView == "start") {
     if (view == "history") {
       slideStartUp();
@@ -75,7 +147,7 @@ let app = new Vue({
   data: {
     summoner: "",
     region: "",
-    view: "start",
+    view: "",
     regions: getRegions(),
     champions: getChampions(),
     matchprops: getMatchProps(),
@@ -102,7 +174,6 @@ let app = new Vue({
 });
 
 function parseUrl() {
-  console.log("parseUrl");
   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");
-    changeView(view);
+    if (view != "start" && view != "history" && view != "stats") {
+      view = "start";
+    }
+    return view;
   } 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 dc31ed5..a410d3f 100644
--- 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;
+  overflow: hidden;
 }
 input, select, button {
   font-size:inherit;
@@ -149,6 +150,7 @@ button {
   background-color: white;
   border-radius: 5px;
   text-align: center;	
+  overflow: visible;
 }
 .bottom-right {
   position: absolute;