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