From 7aecc11333eeff555614048d16b4073ce65f7812 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Patrick=20Sch=C3=B6nberger?= Date: Mon, 10 Dec 2018 18:45:49 +0100 Subject: [PATCH] User interface --- html/index.html | 273 ++++++++---------------------------------------- html/script.js | 99 ++++++++---------- index.js | 1 + 3 files changed, 86 insertions(+), 287 deletions(-) diff --git a/html/index.html b/html/index.html index d0bd6c9..283074e 100644 --- a/html/index.html +++ b/html/index.html @@ -1,236 +1,51 @@ - - - lol stats - - - - - - - - -
+ + + lol stats + + + + + + + + + +
- -
- - -
- - - -
+ +
+ + +
+ + + +
-
-
- - -
+
+ +
+ - - - +
+ + + + diff --git a/html/script.js b/html/script.js index 518f5fb..8db21f9 100644 --- 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 + + "®ion=" + + 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() + - "®ion=" + - $("#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() + - "®ion=" + - $("#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() + - "®ion=" + - $("#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 = ()=>{}; } } // ------------ diff --git a/index.js b/index.js index f887339..2f25188 100644 --- a/index.js +++ b/index.js @@ -7,6 +7,7 @@ const port = 3000 let rules = [ ["/", "index.html"], ["/script.js", "script.js"], + ["/style.css", "style.css"], ]; let obfuscateJs = false; -- 2.50.1