diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/index.html | 6 | ||||
| -rw-r--r-- | html/script.js | 29 | ||||
| -rw-r--r-- | html/style.css | 273 | ||||
| -rw-r--r-- | html/style.sass | 158 |
4 files changed, 346 insertions, 120 deletions
diff --git a/html/index.html b/html/index.html index d35e28f..25d8fce 100644 --- a/html/index.html +++ b/html/index.html @@ -2,6 +2,7 @@ <html> <head> <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Advanced League of Legends Match History & Statistics</title> <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"> @@ -23,7 +24,7 @@ --> <div id="inputpanel"> <select id="regionselect"> - <option v-for="r in regions" :value="r">{{ r }}</option> + <option v-for="(url, name) in regions" :value="name">{{ name }}</option> </select> <input v-on:keyup.enter="submit" id="nameinput" type="text" placeholder="Summoner Name"> <button v-on:click="submit" id="gobutton"><span class="fas fa-arrow-right"></span></button> @@ -36,10 +37,11 @@ <label for="champselect">Champion</label> <select id="champselect"> <option>All</option> - <option v-for="c in champions">{{ c.name }}</option> + <option v-for="c in champions">{{ c }}</option> </select> <button id="refreshbutton" v-on:click="refreshHistory">Refresh</button> </div> + <hr /> <div id="matchlist"> <table> <tr> diff --git a/html/script.js b/html/script.js index 25f1565..a10dd69 100644 --- a/html/script.js +++ b/html/script.js @@ -1,8 +1,14 @@ function getRegions() { - return [ "euw", "na", "kr", "br" ]; + $.ajax("/lol/regions") + .done((data) => { + app.regions = JSON.parse(data); + }); } function getChampions() { - return [ {name: "Aatrox"}, {name: "Annie"}, {name: "Braum"}, {name: "Not"} ]; + $.ajax("/lol/champions") + .done((data) => { + app.champions = JSON.parse(data); + }); } function getMatchProps() { return [ @@ -11,10 +17,10 @@ function getMatchProps() { ]; } function getMatches() { - return [ - {champ: "Xerath", lane: "Middle"}, - {champ: "Quinn", lane: "Bottom"}, - ]; + $.ajax("/lol/matches?region=" + app.region + "&summoner=" + app.summoner); + .done((data) => { + app.matches = JSON.parse(data); + }); } function getInfo() { app.summoner = $("#nameinput").val(); @@ -92,10 +98,10 @@ let app = new Vue({ summoner: "", region: "", view: "", - regions: getRegions(), - champions: getChampions(), - matchprops: getMatchProps(), - matches: getMatches(), + regions: [], + champions: [], + matchprops: [], + matches: [], }, methods: { submit: function() { @@ -113,6 +119,7 @@ let app = new Vue({ setUrl(); }, refreshHistory: function() { + getMatches(); }, }, }); @@ -145,4 +152,6 @@ window.addEventListener('popstate', () => { window.addEventListener('load', () => { let view = parseUrl(); setView(view); + getRegions(); + getChampions(); }); diff --git a/html/style.css b/html/style.css index b012d22..6145c2d 100644 --- a/html/style.css +++ b/html/style.css @@ -1,70 +1,40 @@ body { - font-family: 'Noto Sans SC', sans-serif; + font-family: "Noto Sans SC", sans-serif; font-weight: bold; padding: 0px; margin: 0px; } + #background { position: fixed; width: 100%; height: 100%; - background-color: rgb(200, 50, 50); + background-color: #c83232; box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset; } -input, select, button { - font-size:inherit; - border: none; -} -@keyframes startup { - 0% { - top: 50%; - transform: translate(-50%, -50%); - width: 65%; - } - 100% { - top: 0%; - transform: translate(-50%, 0%); - width: calc(100% - 20px); - } -} -@keyframes startdown { - 100% { - top: 50%; - transform: translate(-50%, -50%); - width: 65%; - } - 0% { - top: 0%; - transform: translate(-50%, 0%); - width: calc(100% - 20px); - } -} -#start.slideup { - animation: startup 0.3s forwards linear; -} -#start.slidedown { - animation: startdown 0.3s forwards linear; -} -#start.up { - top: 0%; - transform: translate(-50%, 0%); - width: calc(100% - 20px); -} -#start.down { - top: 50%; - transform: translate(-50%, -50%); - width: 65%; -} + #start { position: absolute; - width: 65%; - left: 50%; + margin: 7px; + left: calc(50% - 7px); top: 50%; transform: translate(-50%, -50%); - padding: 10px; text-align: center; background-color: transparent; - font-size: 5rem; + border-radius: 4px; + background-color: white; + box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8); +} + +@media only screen and (orientation: landscape) { + #start { + width: 65%; + } +} +@media only screen and (orientation: portrait) { + #start { + width: 85%; + } } #title { width: 100%; @@ -72,89 +42,176 @@ input, select, button { text-shadow: 1px 1px 40px black; user-select: none; } + #inputpanel { - border-radius: 5px; - width: calc(100% - 20px); - height: 50px; - background-color: white; - padding: 10px; - box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8); - font-size: 2rem; + width: calc(100% - 14px); + height: 7vmin; + font-size: 4.5vmin; position: relative; + margin: 7px; } -#regionselect { - width: 110px; - height: 50px; + +#matchhistory, #stats { + position: absolute; + font-size: 2.5vmin; + width: calc(100% - 14px); + min-height: calc(100% - (7vmin + 21px) - 14px); + margin: 7px; + top: calc(7vmin + 21px); + background-color: white; + border-radius: 4px; + text-align: center; +} + +#historyfilters { position: relative; - top: 0px; - padding: 0px 0px 0px 10px; - margin: 5px; + width: calc(100% - 14px); + height: calc(21vmin + 14px); + margin: 7px; +} + +#matchlist { + width: calc(100% - 14px); + margin: 7px; + height: auto; +} + +hr { + margin: 0; +} + +select { text-align: center; - background-color: rgb(200, 50, 50); +} + +select:hover { + background-color: #b41e1e; +} + +select > option { + background-color: #c83232; +} + +input { + border: none; + outline: none; + font-size: inherit; +} + +button, select { + vertical-align: baseline; + width: 18vmin; + height: 7vmin; + background-color: #c83232; color: white; - border-radius: 5px; + border-radius: 4px; border: none; outline: none; + font-size: inherit; +} + +button:hover { + background-color: #b41e1e; +} + +.bottom-right { + position: absolute; + right: 0px; + bottom: 0px; +} + +#regionselect { text-transform: uppercase; position: absolute; - left: 5px; - top: 5px; + left: 0; z-index: 1; } -#regionselect:hover { - background-color: rgb(180, 30, 30); -} -#regionselect>option { - background-color: rgb(200, 50, 50); -} + #nameinput { text-align: center; border-bottom: 1px solid lightgray; - outline: none; - margin: 5px; - width: calc(100% - 220px - 10px); - height: 50px; + width: calc(100% - 36vmin); + height: 7vmin; position: absolute; - left: 110px; - top: 5px; + left: 18vmin; + top: 0px; } + #gobutton, #statsbutton, #historybutton { position: absolute; - top: 5px; - right: 5px; + margin: 0px; + top: 0px; + right: 0px; z-index: 1; } + #refreshbutton { position: absolute; - right: 5px; - bottom: 5px; + right: 0px; + bottom: 0px; } -button { - vertical-align: baseline; - margin: 5px; - width: 110px; - height: 50px; - background-color: rgb(200, 50, 50); - color: white; - border-radius: 5px; - outline: none; + +@keyframes startup { + 0% { + top: 50%; + transform: translate(-50%, -50%); + @media only screen and (orientation: landscape) { + width: 65%; + } + @media only screen and (orientation: portrait) { + width: 85%; + } + } + 100% { + top: 0%; + transform: translate(-50%, 0%); + width: calc(100% - 14px); + } +} +@keyframes startdown { + 100% { + top: 50%; + transform: translate(-50%, -50%); + @media only screen and (orientation: landscape) { + width: 65%; + } + @media only screen and (orientation: portrait) { + width: 85%; + } + } + 0% { + top: 0%; + transform: translate(-50%, 0%); + width: calc(100% - 14px); + } } -#gobutton:hover { - background-color: rgba(180, 30, 30); +#start.slideup { + animation: startup 0.3s forwards linear; } -#matchhistory, #stats { - position: absolute; - width: calc(100% - 20px); - min-height: calc(100% - 90px - 10px); - margin: 10px; - top: 80px; - background-color: white; - border-radius: 5px; - text-align: center; - overflow: visible; + +#start.slidedown { + animation: startdown 0.3s forwards linear; } -.bottom-right { - position: absolute; - right: 0px; - bottom: 0px; + +#start.up { + top: 0; + width: calc(100% - 14px); + transform: translate(-50%, 0%); +} + +#start.down { + top: 50%; + transform: translate(-50%, -50%); +} +@media only screen and (orientation: landscape) { + #start.down { + width: 65%; + } +} +@media only screen and (orientation: portrait) { + #start.down { + width: 85%; + } } + +/*# sourceMappingURL=style.css.map */ diff --git a/html/style.sass b/html/style.sass new file mode 100644 index 0000000..cf15189 --- /dev/null +++ b/html/style.sass @@ -0,0 +1,158 @@ +$widget-width: 18vmin +$widget-height: 7vmin +$color1: rgb(200, 50, 50) +$color1-dark: rgb(180, 30, 30) +$color2: white +$font-size1: 4.5vmin +$font-size2: 2.5vmin +$margin: 7px +$border: 4px + +body + font-family: 'Noto Sans SC', sans-serif + font-weight: bold + padding: 0px + margin: 0px +#background + position: fixed + width: 100% + height: 100% + background-color: $color1 + box-shadow: 0 0 400px rgba(0, 0, 0, 0.6) inset +#start + position: absolute + margin: $margin + left: calc(50% - #{$margin}) + top: 50% + transform: translate(-50%, -50%) + text-align: center + background-color: transparent + border-radius: $border + background-color: $color2 + box-shadow: 1px 1px 40px rgba(0, 0, 0, 0.8) +@media only screen and (orientation: landscape) + #start + width: 65% +@media only screen and (orientation: portrait) + #start + width: 85% +#title + width: 100% + color: $color2 + text-shadow: 1px 1px 40px black + user-select: none +#inputpanel + width: calc(100% - #{2 * $margin}) + height: $widget-height + font-size: $font-size1 + position: relative + margin: $margin +#matchhistory, #stats + position: absolute + font-size: $font-size2 + width: calc(100% - #{2 * $margin}) + min-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 + position: relative + width: calc(100% - #{2 * $margin}) + height: calc(#{3 * $widget-height} + #{2 * $margin}) + margin: $margin +#matchlist + width: calc(100% - #{2 * $margin}) + margin: $margin + height: auto +hr + margin: 0 +select + text-align: center +select:hover + background-color: $color1-dark +select>option + background-color: $color1 +input + border: none + outline: none + font-size: inherit +button, select + vertical-align: baseline + width: $widget-width + height: $widget-height + background-color: $color1 + color: $color2 + border-radius: $border + border: none + outline: none + font-size: inherit +button:hover + background-color: $color1-dark +.bottom-right + position: absolute + right: 0px + bottom: 0px +#regionselect + text-transform: uppercase + position: absolute + left: 0 + z-index: 1 +#nameinput + text-align: center + border-bottom: 1px solid lightgray + width: calc(100% - #{2 * $widget-width}) + height: $widget-height + position: absolute + left: $widget-width + top: 0px +#gobutton, #statsbutton, #historybutton + position: absolute + margin: 0px + top: 0px + right: 0px + z-index: 1 +#refreshbutton + position: absolute + right: 0px + bottom: 0px +@keyframes startup + 0% + top: 50% + transform: translate(-50%, -50%) + @media only screen and (orientation: landscape) + width: 65% + @media only screen and (orientation: portrait) + width: 85% + 100% + top: 0% + transform: translate(-50%, 0%) + width: calc(100% - #{2 * $margin}) +@keyframes startdown + 100% + top: 50% + transform: translate(-50%, -50%) + @media only screen and (orientation: landscape) + width: 65% + @media only screen and (orientation: portrait) + width: 85% + 0% + top: 0% + transform: translate(-50%, 0%) + width: calc(100% - #{2 * $margin}) +#start.slideup + animation: startup 0.3s forwards linear +#start.slidedown + animation: startdown 0.3s forwards linear +#start.up + top: 0 + width: calc(100% - #{2 * $margin}) + transform: translate(-50%, 0%) +#start.down + top: 50% + transform: translate(-50%, -50%) + @media only screen and (orientation: landscape) + width: 65% + @media only screen and (orientation: portrait) + width: 85% |