]> gitweb.ps.run Git - lolstats/commitdiff
projects / lolstats / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 6ffe459)
html eingecheckt
authorPatrick Schönberger <patrick.schoenberger@posteo.de>
Wed, 5 Dec 2018 23:57:37 +0000 (00:57 +0100)
committerPatrick Schönberger <patrick.schoenberger@posteo.de>
Wed, 5 Dec 2018 23:57:37 +0000 (00:57 +0100)
navigation fertig

html/2 [new file with mode: 0644] patch | blob
html/index.html [new file with mode: 0644] patch | blob
html/script.js [new file with mode: 0644] patch | blob

diff --git a/html/2 b/html/2
new file mode 100644 (file)
index 0000000..8a7d871
--- /dev/null
+++ b/html/2
@@ -0,0 +1,214 @@
+<!DOCTYPE html5>
+<html>
+       <head>
+               <meta charset="utf-8" />
+               <title>lol stats</title>
+               <style>
+body {
+       font-family: 'Noto Sans SC', sans-serif;
+       font-weight: bold;
+       overflow: hidden;
+       background-color: black;
+       user-select: none;
+       width: 100%;
+       height: 100%;
+       padding: 0px;
+       margin: 0px;
+       background-color: rgb(200, 50, 50);
+       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);
+       }
+}
+#start.slideup {
+       animation: startup 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%;
+       top: 50%;
+       transform: translate(-50%, -50%);
+       padding: 10px;
+       text-align: center;
+       background-color: transparent;
+       font-size: 5rem;
+}
+#title {
+       width: 100%;
+       color: white;
+       text-shadow: 1px 1px 40px black;
+}
+#inputpanel {
+       border-radius: 5px;
+       width: calc(100% - 20px);
+       height: 50px;
+       background-color: white;
+       padding: 10px;
+       box-shadow: 1px 1px 40px black;
+       font-size: 2rem;
+       position: relative;
+}
+#regionselect {
+       width: 110px;
+       height: 50px;
+       position: relative;
+       top: 0px;
+       padding: 0px 0px 0px 10px;
+       margin: 5px;
+       text-align: center;
+       background-color: rgb(200, 50, 50);
+       color: white;
+       border-radius: 5px;
+       border: none;
+       outline: none;
+       text-transform: uppercase;
+       position: absolute;
+       left: 5px;
+       top: 5px;
+       z-index: 1;
+}
+#nameinput {
+       text-align: center;
+       border-bottom: 1px solid lightgray;
+       outline: none;
+       margin: 5px;
+       width: calc(100% - 220px - 10px);
+       height: 50px;
+       position: absolute;
+       left: 110px;
+       top: 5px;
+}
+#gobutton {
+       position: relative;
+       vertical-align: baseline;
+       margin: 5px;
+       width: 110px;
+       height: 50px;
+       background-color: rgb(200, 50, 50);
+       color: white;
+       border-radius: 5px;
+       outline: none;
+       position: absolute;
+       top: 5px;
+       right: 5px;
+       z-index: 1;
+}
+@keyframes slideup {
+       0% {
+               top: 100%;
+       }
+       100% {
+               top: 90px;
+       }
+}
+@keyframes slideleft {
+       0% {
+               left: 0%;
+       }
+       100% {
+               left: -50%;
+       }
+}
+#slide.up {
+       animation: slideup 0.3s forwards linear;
+}
+#slide.left {
+       animation: slideleft 0.3s forwards linear;
+}
+#slide {
+       background-color: white;
+       border-radius: 5px;
+       position: absolute;
+       left: 50%;
+       top: 90px;
+       transform: translate(-50%, 0%);
+       width: calc(100% - 20px);
+       text-align: center;     
+}
+#stats {
+       position: relative;
+       left: calc(100% + 20px);
+}
+.bottom-right {
+       position: absolute;
+       right: 0px;
+       bottom: 0px;
+}
+               </style>
+               <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">
+               <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+               <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>
+       </head>
+       <body style="">
+               <div id="app">
+
+                       <!-- Start Screen -->
+                       <div id="start">
+                               <!-- Main panel -->
+                               <!--
+                       <span id="title">Enter Your Summoner Name</span>
+                               -->
+                               <div id="inputpanel">
+                                       <select id="regionselect" v-model="region">
+                                               <option v-for="r in regions" :value="r">{{ r }}</option>
+                                       </select>
+                                       <input v-on:keyup.enter="startToHistory" id="nameinput" v-model="summoner" type="text">
+                                       <button v-on:click="startToHistory" id="gobutton"><span class="fas fa-arrow-right"></span></button>
+                               </div>
+
+                       </div>
+                       <div id="slide">
+                               <div id="matchhistory" style="display: none">
+                                       <button v-on:click="historyToStats">Stats pls..</button>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                               </div>
+                               <div id="stats" style="display: none">
+                                       <button v-on:click="statsToHistory">History pls..</button>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                               </div>
+                       </div>
+
+               </div>
+
+               <!-- Vue.js Script -->
+               <script src="script.js"></script>
+       </body>
+</html>
diff --git a/html/index.html b/html/index.html
new file mode 100644 (file)
index 0000000..d0bd6c9
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,236 @@
+<!DOCTYPE html5>
+<html>
+       <head>
+               <meta charset="utf-8" />
+               <title>lol stats</title>
+               <style>
+body {
+       font-family: 'Noto Sans SC', sans-serif;
+       font-weight: bold;
+       background-color: black;
+       user-select: none;
+       overflow: hidden;
+       width: 100%;
+       height: 100%;
+       padding: 0px;
+       margin: 0px;
+       background-color: rgb(200, 50, 50);
+       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);
+       }
+}
+#start.slideup {
+       animation: startup 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%;
+       top: 50%;
+       transform: translate(-50%, -50%);
+       padding: 10px;
+       text-align: center;
+       background-color: transparent;
+       font-size: 5rem;
+}
+#title {
+       width: 100%;
+       color: white;
+       text-shadow: 1px 1px 40px black;
+}
+#inputpanel {
+       border-radius: 5px;
+       width: calc(100% - 20px);
+       height: 50px;
+       background-color: white;
+       padding: 10px;
+       box-shadow: 1px 1px 40px black;
+       font-size: 2rem;
+       position: relative;
+}
+#regionselect {
+       width: 110px;
+       height: 50px;
+       position: relative;
+       top: 0px;
+       padding: 0px 0px 0px 10px;
+       margin: 5px;
+       text-align: center;
+       background-color: rgb(200, 50, 50);
+       color: white;
+       border-radius: 5px;
+       border: none;
+       outline: none;
+       text-transform: uppercase;
+       position: absolute;
+       left: 5px;
+       top: 5px;
+       z-index: 1;
+}
+#nameinput {
+       text-align: center;
+       border-bottom: 1px solid lightgray;
+       outline: none;
+       margin: 5px;
+       width: calc(100% - 220px - 10px);
+       height: 50px;
+       position: absolute;
+       left: 110px;
+       top: 5px;
+}
+#gobutton {
+       position: relative;
+       vertical-align: baseline;
+       margin: 5px;
+       width: 110px;
+       height: 50px;
+       background-color: rgb(200, 50, 50);
+       color: white;
+       border-radius: 5px;
+       outline: none;
+       position: absolute;
+       top: 5px;
+       right: 5px;
+       z-index: 1;
+}
+@keyframes slideup {
+       0% {
+               top: 100%;
+       }
+       100% {
+               top: 90px;
+       }
+}
+@keyframes slideleft {
+       0% {
+               left: 50%;
+       }
+       100% {
+               left: -50%;
+       }
+}
+@keyframes slideright {
+       0% {
+               left: -50%;
+       }
+       100% {
+               left: 50%;
+       }
+}
+#slide.slideup {
+       animation: slideup 0.3s forwards linear;
+}
+#slide.slideleft {
+       animation: slideleft 0.3s forwards linear;
+}
+#slide.slideright {
+       animation: slideright 0.3s forwards linear;
+}
+#slide.left {
+       left: -50%;
+}
+#slide {
+       position: absolute;
+       left: 50%;
+       top: 90px;
+       transform: translate(-50%, 0%);
+       width: calc(100% - 20px);
+}
+#matchhistory {
+       position: absolute;
+       width: 100%;
+       background-color: white;
+       border-radius: 5px;
+       text-align: center;     
+}
+#stats {
+       position: absolute;
+       width: 100%;
+       left: calc(100% + 20px);
+       background-color: white;
+       border-radius: 5px;
+       text-align: center;     
+}
+.bottom-right {
+       position: absolute;
+       right: 0px;
+       bottom: 0px;
+}
+               </style>
+               <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">
+               <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+               <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>
+       </head>
+       <body style="">
+               <div id="app">
+
+                       <!-- Start Screen -->
+                       <div id="start">
+                               <!-- Main panel -->
+                               <!--
+                       <span id="title">Enter Your Summoner Name</span>
+                               -->
+                               <div id="inputpanel">
+                                       <select id="regionselect" v-model="region">
+                                               <option v-for="r in regions" :value="r">{{ r }}</option>
+                                       </select>
+                                       <input v-on:keyup.enter="startToHistory" id="nameinput" v-model="summoner" type="text">
+                                       <button v-on:click="startToHistory" id="gobutton"><span class="fas fa-arrow-right"></span></button>
+                               </div>
+
+                       </div>
+                       <div id="slide">
+                               <div id="matchhistory" style="display: none">
+                                       <button v-on:click="historyToStats">Stats pls..</button>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist match history live mit {{ summoner }} aus {{ region }}</p>
+                               </div>
+                               <div id="stats" style="display: none">
+                                       <button v-on:click="statsToHistory">History pls..</button>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                                       <p>hallo hier ist stats history live mit {{ summoner }} aus {{ region }}</p>
+                               </div>
+                       </div>
+
+               </div>
+
+               <!-- Vue.js Script -->
+               <script src="script.js"></script>
+       </body>
+</html>
diff --git a/html/script.js b/html/script.js
new file mode 100644 (file)
index 0000000..518f5fb
--- /dev/null
+++ b/html/script.js
@@ -0,0 +1,101 @@
+// Start Screen
+// ------------
+function getRegions() {
+  return [ "euw", "na", "kr", "br" ];
+}
+
+function toggleStart(up) {
+  $("#start").removeClass(up ? "down" : "up");
+  $("#start").addClass(up ? "up" : "down");
+}
+function slideStart() {
+  $("#start").addClass("slideup");
+}
+function slideSlideUp() {
+  $("#slide").addClass("slideup");
+}
+function slideSlideLeft() {
+  $("#slide").removeClass("slideright");
+  $("#slide").addClass("slideleft");
+}
+function slideSlideRight() {
+  $("#slide").removeClass("slideleft");
+  $("#slide").addClass("slideright");
+}
+function toggleSlideLeft() {
+  $("#slide").addClass("left");
+}
+
+var app = new Vue({
+  el: '#app',
+  data: {
+    regions: getRegions(),
+    region: "euw",
+    summoner: "",
+  },
+  methods: {
+    startToHistory: function() {
+      window.history.pushState("object or string", "Title",
+        "/?summoner=" +
+        $("#nameinput").val() +
+        "&region=" +
+        $("#regionselect").val() +
+        "&view=history");
+
+      slideStart();
+      $("#matchhistory").show();
+      slideSlideUp();
+      app.startToHistory = ()=>{};
+    },
+    historyToStats: function() {
+      window.history.pushState("object or string", "Title",
+        "/?summoner=" +
+        $("#nameinput").val() +
+        "&region=" +
+        $("#regionselect").val() +
+        "&view=stats");
+
+      $("#stats").show();
+      slideSlideLeft();
+      setTimeout(() => {
+        $("#matchhistory").hide();
+      }, 300);
+    },
+    statsToHistory: function() {
+      window.history.pushState("object or string", "Title",
+        "/?summoner=" +
+        $("#nameinput").val() +
+        "&region=" +
+        $("#regionselect").val() +
+        "&view=history");
+
+      $("#matchhistory").show();
+      slideSlideRight();
+      setTimeout(() => {
+        $("#stats").hide();
+      }, 300);
+    },
+  },
+});
+
+// Check for URL parameters
+let url = new URL(window.location.href);
+if (url.searchParams.has("summoner"))
+  app.summoner = url.searchParams.get("summoner");
+if (url.searchParams.has("region"))
+  app.region = url.searchParams.get("region");
+if (url.searchParams.has("view")) {
+  let view = url.searchParams.get("view");
+  if (view == "history") {
+    toggleStart(true);
+    $("#matchhistory").show();
+    app.startToHistory = ()=>{};
+  }
+  else if (view == "stats") {
+    toggleStart(true);
+    $("#stats").show();
+    toggleSlideLeft();
+    app.startToHistory = ()=>{};
+  }
+}
+// ------------
Test using express, lowdb and Vue to create a stats site using Riot Games' API (no longer working)