diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/index.html | 46 | ||||
| -rw-r--r-- | html/script.js | 138 | ||||
| -rw-r--r-- | html/style.css | 27 | ||||
| -rw-r--r-- | html/style.sass | 21 |
4 files changed, 192 insertions, 40 deletions
diff --git a/html/index.html b/html/index.html index 25d8fce..e39dec9 100644 --- a/html/index.html +++ b/html/index.html @@ -11,6 +11,8 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.css"> + <script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.js"></script> </head> <body style=""> <div id="background"></div> @@ -20,7 +22,7 @@ <div id="start"> <!-- Main panel --> <!-- - <span id="title">Enter Your Summoner Name</span> + <span id="title">Enter Your Summoner Name</span> --> <div id="inputpanel"> <select id="regionselect"> @@ -34,32 +36,46 @@ <div id="matchhistory" style="display: none"> <div id="historyfilters"> <button id="statsbutton" v-on:click="historyToStats">Statistics</button> - <label for="champselect">Champion</label> - <select id="champselect"> - <option>All</option> - <option v-for="c in champions">{{ c }}</option> - </select> + <div id="champselect"> + <button class="champselect" v-on:click="selectAll">All</button> + <button class="champselect" v-on:click="selectNone">None</button><br /> + <span v-for="c in champions"><input class="champselectcb" type="checkbox" />{{ c }}<br /></span> + </div> <button id="refreshbutton" v-on:click="refreshHistory">Refresh</button> </div> <hr /> - <div id="matchlist"> - <table> - <tr> - <th v-for="c in matchprops">{{ c.text }}</th> - </tr> - <tr v-for="m in matches"> - <td v-for="c in matchprops">{{ m[c.name] }}</td> - </tr> - </table> + <div id="matchlist" class="clusterize"> + <div style="position: relative; width: 100%; height: 100%; max-height: 100%" id="scrollArea" class="clusterize-scroll"> + <table> + <tbody id="contentArea" class="clusterize-content"> + <tr> + <th>Icon</th> + <th v-for="c in matchprops">{{ c.text }}</th> + </tr> + <tr v-for="m in matches"> + <td><img class="championIcon" :src="'http://ddragon.leagueoflegends.com/cdn/8.24.1/img/champion/' + m.championString + '.png'"></img></td> + <td v-for="c in matchprops">{{ m[c.name] }}</td> + </tr> + </tbody> + </table> + </div> </div> </div> <div id="stats" style="display: none"> + <div id="statsfilters"> <button id="historybutton" v-on:click="statsToHistory">Match history</button> + </div> </div> </div> <!-- Vue.js Script --> <script src="lol/script.js"></script> + <script> + var clusterize = new Clusterize({ + scrollId: 'scrollArea', + contentId: 'contentArea', + }); + </script> </body> </html> diff --git a/html/script.js b/html/script.js index 1105262..c2d4fd5 100644 --- a/html/script.js +++ b/html/script.js @@ -1,9 +1,95 @@ function getRegions() { - $.ajax("/lol/regions") - .done((data) => { - app.regions = JSON.parse(data); - setTimeout(() => $("#regionselect").val(app.region), 0); - }); + 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 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 getChampions() { $.ajax("/lol/champions") @@ -11,21 +97,20 @@ function getChampions() { app.champions = JSON.parse(data); }); } -function getMatchProps() { - return [ - {text: "Champion", name: "champ"}, - {text: "Lane", name: "lane"}, - ]; +function getChampLookup() { + $.ajax("/lol/champlookup") + .done((data) => { + app.champlookup = JSON.parse(data); + }); } function getMatches() { $.ajax("/lol/matches?region=" + app.region + "&summoner=" + app.summoner) .done((data) => { - app.matches = data; - for (p in app.matches[0]) { - app.matchprops.push({ - name: p, - text: p.toUpperCase(), - }); + app.matches = JSON.parse(data); + 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(); } }); } @@ -105,9 +190,15 @@ let app = new Vue({ summoner: "", region: "", view: "", - regions: [], + regions: getRegions(), + queues: getQueues(), + champlookup: [], champions: [], - matchprops: [], + matchprops: [ + { name: "championString", text: "Champion" }, + { name: "queueString", text: "Queue" }, + { name: "timestampString", text: "Date" }, + ], matches: [], }, methods: { @@ -116,6 +207,8 @@ let app = new Vue({ if (app.view == "start") changeView("history"); setUrl(); + app.matches = []; + getMatches(); }, historyToStats: function() { changeView("stats"); @@ -128,6 +221,12 @@ let app = new Vue({ refreshHistory: function() { getMatches(); }, + selectAll: function() { + $(".champselectcb").prop('checked', true); + }, + selectNone: function() { + $(".champselectcb").prop('checked', false); + }, }, }); @@ -139,6 +238,7 @@ function parseUrl() { } 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"); @@ -158,6 +258,6 @@ window.addEventListener('popstate', () => { window.addEventListener('load', async () => { let view = parseUrl(); setView(view); - getRegions(); getChampions(); + getChampLookup(); }); diff --git a/html/style.css b/html/style.css index 6145c2d..78f746a 100644 --- a/html/style.css +++ b/html/style.css @@ -55,7 +55,7 @@ body { position: absolute; font-size: 2.5vmin; width: calc(100% - 14px); - min-height: calc(100% - (7vmin + 21px) - 14px); + height: calc(100% - (7vmin + 21px) - 14px); margin: 7px; top: calc(7vmin + 21px); background-color: white; @@ -63,7 +63,7 @@ body { text-align: center; } -#historyfilters { +#historyfilters, #statsfilters { position: relative; width: calc(100% - 14px); height: calc(21vmin + 14px); @@ -72,8 +72,9 @@ body { #matchlist { width: calc(100% - 14px); + height: calc(100% - 28px - 2px - (21vmin + 14px)); margin: 7px; - height: auto; + overflow: auto; } hr { @@ -120,6 +121,11 @@ button:hover { bottom: 0px; } +.championIcon { + width: 60px; + height: 60px; +} + #regionselect { text-transform: uppercase; position: absolute; @@ -151,6 +157,21 @@ button:hover { bottom: 0px; } +#champselect { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: auto; + overflow: auto; + text-align: left; +} + +button.champselect { + width: 9vmin; + height: 3.5vmin; +} + @keyframes startup { 0% { top: 50%; diff --git a/html/style.sass b/html/style.sass index cf15189..ccdab30 100644 --- a/html/style.sass +++ b/html/style.sass @@ -51,21 +51,22 @@ body position: absolute font-size: $font-size2 width: calc(100% - #{2 * $margin}) - min-height: calc(100% - (#{$widget-height} + #{3 * $margin}) - #{2 * $margin}) + height: calc(100% - (#{$widget-height} + #{3 * $margin}) - #{2 * $margin}) margin: $margin top: calc(#{$widget-height} + #{3 * $margin}) background-color: $color2 border-radius: $border text-align: center -#historyfilters +#historyfilters, #statsfilters position: relative width: calc(100% - #{2 * $margin}) height: calc(#{3 * $widget-height} + #{2 * $margin}) margin: $margin #matchlist width: calc(100% - #{2 * $margin}) + height: calc(100% - #{4 * $margin} - 2px - (#{3 * $widget-height} + #{2 * $margin})) margin: $margin - height: auto + overflow: auto hr margin: 0 select @@ -94,6 +95,9 @@ button:hover position: absolute right: 0px bottom: 0px +.championIcon + width: 60px + height: 60px #regionselect text-transform: uppercase position: absolute @@ -117,6 +121,17 @@ button:hover position: absolute right: 0px bottom: 0px +#champselect + position: absolute + top: 0 + left: 0 + height: 100% + width: auto + overflow: auto + text-align: left +button.champselect + width: $widget-width / 2 + height: $widget-height / 2 @keyframes startup 0% top: 50% |