gitweb.ps.run Git - lolstats/blob - html/script.js

   1 function getRegions() {
   2   return {
   3     "BR": "br1.api.riotgames.com",
   4     "EUNE": "eun1.api.riotgames.com",
   5     "EUW": "euw1.api.riotgames.com",
   6     "JP": "jp1.api.riotgames.com",
   7     "KR": "kr.api.riotgames.com",
   8     "LAN": "la1.api.riotgames.com",
   9     "LAS": "la2.api.riotgames.com",
  10     "NA": "na1.api.riotgames.com",
  11     "OCE": "oc1.api.riotgames.com",
  12     "TR": "tr1.api.riotgames.com",
  13     "RU": "ru.api.riotgames.com",
  14     "PBE": "pbe1.api.riotgames.com",
  15   };
  16 }
  17 function getQueues() {
  18   return {
  19     0           : "Custom",
  20     2           : "5v5 Blind Pick",
  21     4           : "5v5 Ranked Solo",
  22     6           : "5v5 Ranked Premade",
  23     7           : "Co-op vs AI",
  24     8           : "3v3 Normal",
  25     9           : "3v3 Ranked Flex",
  26     14          : "5v5 Draft Pick",
  27     16          : "5v5 Dominion Blind Pick",
  28     17          : "5v5 Dominion Draft Pick",
  29     25          : "Dominion Co-op vs AI",
  30     31          : "Co-op vs AI Intro Bot",
  31     32          : "Co-op vs AI Beginner Bot",
  32     33          : "Co-op vs AI Intermediate Bot",
  33     41          : "3v3 Ranked Team",
  34     42          : "5v5 Ranked Team",
  35     52          : "Co-op vs AI",
  36     61          : "5v5 Team Builder",
  37     65          : "5v5 ARAM",
  38     70          : "One for All",
  39     72          : "1v1 Snowdown Showdown",
  40     73          : "2v2 Snowdown Showdown",
  41     75          : "6v6 Hexakill",
  42     76          : "Ultra Rapid Fire",
  43     78          : "One For All: Mirror Mode",
  44     83          : "Co-op vs AI Ultra Rapid Fire",
  45     91          : "Doom Bots Rank 1",
  46     92          : "Doom Bots Rank 2",
  47     93          : "Doom Bots Rank 5",
  48     96          : "Ascension",
  49     98          : "6v6 Hexakill",
  50     100         : "5v5 ARAM",
  51     300         : "Legend of the Poro King",
  52     310         : "Nemesis",
  53     313         : "Black Market Brawlers",
  54     315         : "Nexus Siege",
  55     317         : "Definitely Not Dominion",
  56     318         : "ARURF",
  57     325         : "All Random",
  58     400         : "5v5 Draft Pick",
  59     410         : "5v5 Ranked Dynamic",
  60     420         : "5v5 Ranked Solo",
  61     430         : "5v5 Blind Pick",
  62     440         : "5v5 Ranked Flex",
  63     450         : "5v5 ARAM",
  64     460         : "3v3 Blind Pick",
  65     470         : "3v3 Ranked Flex",
  66     600         : "Blood Hunt Assassin",
  67     610         : "Dark Star: Singularity",
  68     700         : "Clash",
  69     800         : "Co-op vs. AI Intermediate Bot",
  70     810         : "Co-op vs. AI Intro Bot",
  71     820         : "Co-op vs. AI Beginner Bot",
  72     830         : "Co-op vs. AI Intro Bot",
  73     840         : "Co-op vs. AI Beginner Bot",
  74     850         : "Co-op vs. AI Intermediate Bot",
  75     900         : "ARURF",
  76     910         : "Ascension",
  77     920         : "Legend of the Poro King",
  78     940         : "Nexus Siege",
  79     950         : "Doom Bots Voting",
  80     960         : "Doom Bots Standard",
  81     980         : "Star Guardian Invasion: Normal",
  82     990         : "Star Guardian Invasion: Onslaught",
  83     1000        : "PROJECT: Hunters",
  84     1010        : "Snow ARURF",
  85     1020        : "One for All",
  86     1030        : "Odyssey Extraction: Intro",
  87     1040        : "Odyssey Extraction: Cadet",
  88     1050        : "Odyssey Extraction: Crewmember",
  89     1060        : "Odyssey Extraction: Captain",
  90     1070        : "Odyssey Extraction: Onslaught",
  91     1200        : "Nexus Blitz",
  92   };
  93 }
  94 function getChampions() {
  95   $.ajax("/lol/champions")
  96     .done((data) => {
  97       app.champions = JSON.parse(data);
  98     });
  99 }
 100 function getChampLookup() {
 101   $.ajax("/lol/champlookup")
 102     .done((data) => {
 103       app.champlookup = JSON.parse(data);
 104     });
 105 }
 106 let matchesHtml = [];
 107 function getMatches() {
 108   $.ajax("/lol/matches?region=" + app.region + "&summoner=" + app.summoner)
 109     .done((data) => {
 110       app.matches = JSON.parse(data);
 111       matchesHtml = [];
 112       matchesHtml.push("<tr><th></th><th>Game Type</th><th>Time</th></tr>");
 113       for (m in app.matches) {
 114         app.matches[m].championString = app.champlookup[app.matches[m].champion];
 115         app.matches[m].queueString = app.queues[app.matches[m].queue];
 116         app.matches[m].timestampString = new Date(app.matches[m].timestamp).toLocaleString();
 117         let newTag = "<tr><td><img class='championIcon' src='http://ddragon.leagueoflegends.com/cdn/8.24.1/img/champion/" + app.matches[m].championString + ".png'></img></td>";
 118         newTag = newTag.concat("<td>" + app.matches[m].queueString + "</td>");
 119         newTag = newTag.concat("<td>" + app.matches[m].timestampString + "</td>");
 120         newTag = newTag.concat("</tr>");
 121         console.log(newTag);
 122         matchesHtml.push(newTag);
 123       }
 124       var clusterize = new Clusterize({
 125         rows: matchesHtml,
 126         scrollId: 'scrollArea',
 127         contentId: 'contentArea',
 128       });
 129     });
 130 }
 131 function getInfo() {
 132   app.summoner = $("#nameinput").val();
 133   app.region = $("#regionselect").val();
 134 }
 135 function setUrl() {
 136   window.history.pushState("object or string", "Title",
 137     "/lol?summoner=" +
 138     app.summoner +
 139     "&region=" +
 140     app.region +
 141     "&view=" +
 142     app.view);
 143 }
 144 function toggleStartUp() {
 145   $("#start").removeClass("down");
 146   $("#start").addClass("up");
 147 }
 148 function toggleStartDown() {
 149   $("#start").removeClass("up");
 150   $("#start").addClass("down");
 151 }
 152 function slideStartUp() {
 153   $("#start").removeClass("slidedown");
 154   $("#start").addClass("slideup");
 155 }
 156 function slideStartDown() {
 157   $("#start").removeClass("slideup");
 158   $("#start").addClass("slidedown");
 159 }
 160 function setView(view) {
 161   console.log("Setting view to " + view);
 162   if (view == "history") {
 163     toggleStartUp();
 164     $("#matchhistory").show();
 165   } else if (view == "stats") {
 166     toggleStartUp();
 167     $("#stats").show();
 168   }
 169   app.view = view;
 170 }
 171 function changeView(view) {
 172   let oldView = app.view;
 173   console.log("changing view from " + oldView + " to " + view);
 174   if (oldView == "start") {
 175     if (view == "history") {
 176       slideStartUp();
 177       $("#matchhistory").show("blind", { direction: "down" }, 300);
 178     } else if (view == "stats") {
 179       slideStartUp();
 180       $("#stats").show("blind", { direction: "down" }, 300);
 181     }
 182   } else if (oldView == "history") {
 183     if (view == "start") {
 184       $("#matchhistory").hide("blind", { direction: "down" }, 300);
 185       slideStartDown();
 186     } else if (view == "stats") {
 187       $("#stats").show("blind", { direction: "right" });
 188       $("#matchhistory").hide("blind", { direction: "left" });
 189     }
 190   } else if (oldView == "stats") {
 191     if (view == "start") {
 192       $("#stats").hide("blind", { direction: "down" }, 300);
 193       slideStartDown();
 194     } else if (view == "history") {
 195       $("#matchhistory").show("blind", { direction: "left" });
 196       $("#stats").hide("blind", { direction: "right" });
 197     }
 198   }
 199   app.view = view;
 200 }
 201 let app = new Vue({
 202   el: '#app',
 203   data: {
 204     summoner: "",
 205     region: "",
 206     view: "",
 207     regions: getRegions(),
 208     queues: getQueues(),
 209     champlookup: [],
 210     champions: [],
 211     matchprops: [
 212       { name: "championString", text: "Champion" },
 213       { name: "queueString", text: "Queue" },
 214       { name: "timestampString", text: "Date" },
 215     ],
 216     matches: [],
 217   },
 218   methods: {
 219     submit: function() {
 220       getInfo();
 221       if (app.view == "start")
 222         changeView("history");
 223       setUrl();
 224       app.matches = [];
 225       getMatches();
 226     },
 227     historyToStats: function() {
 228       changeView("stats");
 229       setUrl();
 230     },
 231     statsToHistory: function() {
 232       changeView("history");
 233       setUrl();
 234     },
 235     refreshHistory: function() {
 236       getMatches();
 237     },
 238     selectAll: function() {
 239       $(".champselectcb").prop('checked', true);
 240     },
 241     selectNone: function() {
 242       $(".champselectcb").prop('checked', false);
 243     },
 244   },
 245 });
 246
 247 function parseUrl() {
 248   let url = new URL(window.location.href);
 249   if (url.searchParams.has("summoner")) {
 250     app.summoner = url.searchParams.get("summoner");
 251     $("#nameinput").val(app.summoner);
 252   }
 253   if (url.searchParams.has("region")) {
 254     app.region = url.searchParams.get("region");
 255     $("#regionselect").val(app.region);
 256   }
 257   if (url.searchParams.has("view")) {
 258     let view = url.searchParams.get("view");
 259     if (view != "start" && view != "history" && view != "stats") {
 260       view = "start";
 261     }
 262     return view;
 263   } else {
 264     return "start";
 265   }
 266 }
 267
 268 window.addEventListener('popstate', () => {
 269   let view = parseUrl();
 270   changeView(view);
 271 });
 272 window.addEventListener('load', async () => {
 273   let view = parseUrl();
 274   setView(view);
 275   getChampions();
 276   getChampLookup();
 277 });