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

   1 function getRegions() {
   2   return [ "euw", "na", "kr", "br" ];
   3 }
   4 function getChampions() {
   5   return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"}, {name: "Not"} ];
   6 }
   7 function getMatchProps() {
   8   return [
   9     {text: "Champion", name: "champ"},
  10     {text: "Lane", name: "lane"},
  11   ];
  12 }
  13 function getMatches() {
  14   return [
  15     {champ: "Xerath", lane: "Middle"},
  16     {champ: "Quinn", lane: "Bottom"},
  17   ];
  18 }
  19 function getInfo() {
  20   app.summoner = $("#nameinput").val();
  21   app.region = $("#regionselect").val();
  22 }
  23 function setUrl() {
  24   window.history.pushState("object or string", "Title",
  25     "/lol?summoner=" +
  26     app.summoner +
  27     "&region=" +
  28     app.region +
  29     "&view=" +
  30     app.view);
  31 }
  32 function slideStartUp() {
  33   $("#start").removeClass("slidedown");
  34   $("#start").addClass("slideup");
  35 }
  36 function slideStartDown() {
  37   $("#start").removeClass("slideup");
  38   $("#start").addClass("slidedown");
  39 }
  40 function changeView(view) {
  41   if (view != "start" && view != "history" && view != "stats") {
  42     setUrl();
  43     return;
  44   }
  45   let oldView = app.view;
  46   if (oldView == "start") {
  47     if (view == "history") {
  48       slideStartUp();
  49       $("#matchhistory").show("slide", { direction: "down" }, 300);
  50     } else if (view == "stats") {
  51       slideStartUp();
  52       $("#stats").show("slide", { direction: "down" }, 300);
  53     }
  54   } else if (oldView == "history") {
  55     if (view == "start") {
  56       $("#matchhistory").hide("slide", { direction: "down" }, 300);
  57       slideStartDown();
  58     } else if (view == "stats") {
  59       $("#stats").show("blind", { direction: "right" });
  60       $("#matchhistory").hide("blind", { direction: "left" });
  61     }
  62   } else if (oldView == "stats") {
  63     if (view == "start") {
  64       $("#stats").hide("slide", { direction: "down" }, 300);
  65       slideStartDown();
  66     } else if (view == "history") {
  67       $("#matchhistory").show("blind", { direction: "left" });
  68       $("#stats").hide("blind", { direction: "right" });
  69     }
  70   }
  71   app.view = view;
  72 }
  73 let app = new Vue({
  74   el: '#app',
  75   data: {
  76     summoner: "",
  77     region: "",
  78     view: "start",
  79     regions: getRegions(),
  80     champions: getChampions(),
  81     matchprops: getMatchProps(),
  82     matches: getMatches(),
  83   },
  84   methods: {
  85     submit: function() {
  86       getInfo();
  87       if (app.view == "start")
  88         changeView("history");
  89       setUrl();
  90     },
  91     historyToStats: function() {
  92       changeView("stats");
  93       setUrl();
  94     },
  95     statsToHistory: function() {
  96       changeView("history");
  97       setUrl();
  98     },
  99     refreshHistory: function() {
 100     },
 101   },
 102 });
 103
 104 function parseUrl() {
 105   console.log("parseUrl");
 106   let url = new URL(window.location.href);
 107   if (url.searchParams.has("summoner")) {
 108     app.summoner = url.searchParams.get("summoner");
 109     $("#nameinput").val(app.summoner);
 110   }
 111   if (url.searchParams.has("region")) {
 112     app.region = url.searchParams.get("region");
 113     $("#regionselect").val(app.region);
 114   }
 115   if (url.searchParams.has("view")) {
 116     let view = url.searchParams.get("view");
 117     changeView(view);
 118   } else {
 119     changeView("start");
 120   }
 121 }
 122
 123 window.addEventListener('popstate', parseUrl);
 124 window.addEventListener('load', parseUrl);