X-Git-Url: https://gitweb.ps.run/lolstats/blobdiff_plain/357831fb54ab6a832df76924676b43689fa0461c..HEAD:/html/script.js diff --git a/html/script.js b/html/script.js index 518f5fb..fdd261f 100644 --- a/html/script.js +++ b/html/script.js @@ -1,101 +1,277 @@ -// Start Screen -// ------------ function getRegions() { - return [ "euw", "na", "kr", "br" ]; + return { + "BR": "br1.api.riotgames.com", + "EUNE": "eun1.api.riotgames.com", + "EUW": "euw1.api.riotgames.com", + "JP": "jp1.api.riotgames.com", + "KR": "kr.api.riotgames.com", + "LAN": "la1.api.riotgames.com", + "LAS": "la2.api.riotgames.com", + "NA": "na1.api.riotgames.com", + "OCE": "oc1.api.riotgames.com", + "TR": "tr1.api.riotgames.com", + "RU": "ru.api.riotgames.com", + "PBE": "pbe1.api.riotgames.com", + }; } - -function toggleStart(up) { - $("#start").removeClass(up ? "down" : "up"); - $("#start").addClass(up ? "up" : "down"); +function getQueues() { + return { + 0 : "Custom", + 2 : "5v5 Blind Pick", + 4 : "5v5 Ranked Solo", + 6 : "5v5 Ranked Premade", + 7 : "Co-op vs AI", + 8 : "3v3 Normal", + 9 : "3v3 Ranked Flex", + 14 : "5v5 Draft Pick", + 16 : "5v5 Dominion Blind Pick", + 17 : "5v5 Dominion Draft Pick", + 25 : "Dominion Co-op vs AI", + 31 : "Co-op vs AI Intro Bot", + 32 : "Co-op vs AI Beginner Bot", + 33 : "Co-op vs AI Intermediate Bot", + 41 : "3v3 Ranked Team", + 42 : "5v5 Ranked Team", + 52 : "Co-op vs AI", + 61 : "5v5 Team Builder", + 65 : "5v5 ARAM", + 70 : "One for All", + 72 : "1v1 Snowdown Showdown", + 73 : "2v2 Snowdown Showdown", + 75 : "6v6 Hexakill", + 76 : "Ultra Rapid Fire", + 78 : "One For All: Mirror Mode", + 83 : "Co-op vs AI Ultra Rapid Fire", + 91 : "Doom Bots Rank 1", + 92 : "Doom Bots Rank 2", + 93 : "Doom Bots Rank 5", + 96 : "Ascension", + 98 : "6v6 Hexakill", + 100 : "5v5 ARAM", + 300 : "Legend of the Poro King", + 310 : "Nemesis", + 313 : "Black Market Brawlers", + 315 : "Nexus Siege", + 317 : "Definitely Not Dominion", + 318 : "ARURF", + 325 : "All Random", + 400 : "5v5 Draft Pick", + 410 : "5v5 Ranked Dynamic", + 420 : "5v5 Ranked Solo", + 430 : "5v5 Blind Pick", + 440 : "5v5 Ranked Flex", + 450 : "5v5 ARAM", + 460 : "3v3 Blind Pick", + 470 : "3v3 Ranked Flex", + 600 : "Blood Hunt Assassin", + 610 : "Dark Star: Singularity", + 700 : "Clash", + 800 : "Co-op vs. AI Intermediate Bot", + 810 : "Co-op vs. AI Intro Bot", + 820 : "Co-op vs. AI Beginner Bot", + 830 : "Co-op vs. AI Intro Bot", + 840 : "Co-op vs. AI Beginner Bot", + 850 : "Co-op vs. AI Intermediate Bot", + 900 : "ARURF", + 910 : "Ascension", + 920 : "Legend of the Poro King", + 940 : "Nexus Siege", + 950 : "Doom Bots Voting", + 960 : "Doom Bots Standard", + 980 : "Star Guardian Invasion: Normal", + 990 : "Star Guardian Invasion: Onslaught", + 1000 : "PROJECT: Hunters", + 1010 : "Snow ARURF", + 1020 : "One for All", + 1030 : "Odyssey Extraction: Intro", + 1040 : "Odyssey Extraction: Cadet", + 1050 : "Odyssey Extraction: Crewmember", + 1060 : "Odyssey Extraction: Captain", + 1070 : "Odyssey Extraction: Onslaught", + 1200 : "Nexus Blitz", + }; } -function slideStart() { - $("#start").addClass("slideup"); +function getChampions() { + $.ajax("/lol/champions") + .done((data) => { + app.champions = JSON.parse(data); + }); } -function slideSlideUp() { - $("#slide").addClass("slideup"); +function getChampLookup() { + $.ajax("/lol/champlookup") + .done((data) => { + app.champlookup = JSON.parse(data); + }); } -function slideSlideLeft() { - $("#slide").removeClass("slideright"); - $("#slide").addClass("slideleft"); +let matchesHtml = []; +function getMatches() { + $.ajax("/lol/matches?region=" + app.region + "&summoner=" + app.summoner) + .done((data) => { + app.matches = JSON.parse(data); + matchesHtml = []; + matchesHtml.push("Game TypeTime"); + for (m in app.matches) { + app.matches[m].championString = app.champlookup[app.matches[m].champion]; + app.matches[m].queueString = app.queues[app.matches[m].queue]; + app.matches[m].timestampString = new Date(app.matches[m].timestamp).toLocaleString(); + let newTag = ""; + newTag = newTag.concat("" + app.matches[m].queueString + ""); + newTag = newTag.concat("" + app.matches[m].timestampString + ""); + newTag = newTag.concat(""); + console.log(newTag); + matchesHtml.push(newTag); + } + var clusterize = new Clusterize({ + rows: matchesHtml, + scrollId: 'scrollArea', + contentId: 'contentArea', + }); + }); } -function slideSlideRight() { - $("#slide").removeClass("slideleft"); - $("#slide").addClass("slideright"); +function getInfo() { + app.summoner = $("#nameinput").val(); + app.region = $("#regionselect").val(); +} +function setUrl() { + window.history.pushState("object or string", "Title", + "/lol?summoner=" + + app.summoner + + "®ion=" + + app.region + + "&view=" + + app.view); } -function toggleSlideLeft() { - $("#slide").addClass("left"); +function toggleStartUp() { + $("#start").removeClass("down"); + $("#start").addClass("up"); } - -var app = new Vue({ +function toggleStartDown() { + $("#start").removeClass("up"); + $("#start").addClass("down"); +} +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("blind", { direction: "down" }, 300); + } else if (view == "stats") { + slideStartUp(); + $("#stats").show("blind", { direction: "down" }, 300); + } + } else if (oldView == "history") { + if (view == "start") { + $("#matchhistory").hide("blind", { 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("blind", { 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: { - regions: getRegions(), - region: "euw", summoner: "", + region: "", + view: "", + regions: getRegions(), + queues: getQueues(), + champlookup: [], + champions: [], + matchprops: [ + { name: "championString", text: "Champion" }, + { name: "queueString", text: "Queue" }, + { name: "timestampString", text: "Date" }, + ], + matches: [], }, 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") + changeView("history"); + setUrl(); + app.matches = []; + getMatches(); }, historyToStats: function() { - window.history.pushState("object or string", "Title", - "/?summoner=" + - $("#nameinput").val() + - "®ion=" + - $("#regionselect").val() + - "&view=stats"); - - $("#stats").show(); - slideSlideLeft(); - setTimeout(() => { - $("#matchhistory").hide(); - }, 300); + changeView("stats"); + setUrl(); }, statsToHistory: function() { - window.history.pushState("object or string", "Title", - "/?summoner=" + - $("#nameinput").val() + - "®ion=" + - $("#regionselect").val() + - "&view=history"); - - $("#matchhistory").show(); - slideSlideRight(); - setTimeout(() => { - $("#stats").hide(); - }, 300); + changeView("history"); + setUrl(); + }, + refreshHistory: function() { + getMatches(); + }, + selectAll: function() { + $(".champselectcb").prop('checked', true); + }, + selectNone: function() { + $(".champselectcb").prop('checked', false); }, }, }); -// 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', async () => { + let view = parseUrl(); + setView(view); + getChampions(); + getChampLookup(); +});