User interface

author: Patrick Schönberger 2018-12-10 18:45:49 +0100
committer: Patrick Schönberger 2018-12-10 18:45:49 +0100
commit: 7aecc11333eeff555614048d16b4073ce65f7812 (patch)
tree: bacf6d1c878c1bbde45ace119255223e0b9e9a0a
parent: 357831fb54ab6a832df76924676b43689fa0461c (diff)
download: lolstats-7aecc11333eeff555614048d16b4073ce65f7812.tar.gz
lolstats-7aecc11333eeff555614048d16b4073ce65f7812.zip
3 files changed, 86 insertions, 287 deletions
diff --git a/html/index.html b/html/index.html
index d0bd6c9..283074e 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,236 +1,51 @@
 <!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">
+  <head>
+    <meta charset="utf-8" />
+    <title>lol stats</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">
+    <link rel="stylesheet" href="style.css">
+    <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>
+    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.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>
+      <!-- Start Screen -->
+      <div id="start">
+        <!-- Main panel -->
+        <!--
+        <span id="title">Enter Your Summoner Name</span>
+        -->
+        <div id="inputpanel">
+          <select id="regionselect">
+            <option v-for="r in regions" :value="r">{{ r }}</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>
+        </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>
+      <div id="matchhistory" style="display: none">
+        <button v-on:click="historyToStats">Statistics</button>
+        <hr />
+        Champion:
+        <select>
+          <option>Annie</option>
+          <option>Aatrox</option>
+        </select>
 
-		</div>
+      </div>
+      <div id="stats" style="display: none">
+        <button v-on:click="statsToHistory">Match history</button>
+      </div>
 
-		<!-- Vue.js Script -->
-		<script src="script.js"></script>
-	</body>
+    </div>
+
+    <!-- Vue.js Script -->
+    <script src="script.js"></script>
+  </body>
 </html>
diff --git a/html/script.js b/html/script.js
index 518f5fb..8db21f9 100644
--- a/html/script.js
+++ b/html/script.js
@@ -4,6 +4,20 @@ function getRegions() {
   return [ "euw", "na", "kr", "br" ];
 }
 
+function getInfo() {
+  app.summoner = $("#nameinput").val();
+  app.region = $("#regionselect").val();
+} 
+function setUrl() {
+  window.history.pushState("object or string", "Title",
+    "/?summoner=" +
+    app.summoner +
+    "&region=" +
+    app.region +
+    "&view=" +
+    app.view);
+}
+
 function toggleStart(up) {
   $("#start").removeClass(up ? "down" : "up");
   $("#start").addClass(up ? "up" : "down");
@@ -11,91 +25,60 @@ function toggleStart(up) {
 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: "",
+    region: "",
+    view: "start",
+    regions: getRegions(),
   },
   methods: {
-    startToHistory: function() {
-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=history");
-
-      slideStart();
-      $("#matchhistory").show();
-      slideSlideUp();
-      app.startToHistory = ()=>{};
+    submit: function() {
+      getInfo();
+      if (app.view == "start") {
+        app.view = "history";
+        setUrl();
+        slideStart();
+        $("#matchhistory").show("slide", { direction: "down" }, 300);
+      } else {
+        setUrl();
+      }
     },
     historyToStats: function() {
-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=stats");
-
-      $("#stats").show();
-      slideSlideLeft();
-      setTimeout(() => {
-        $("#matchhistory").hide();
-      }, 300);
+      app.view = "stats";
+      setUrl();
+      $("#stats").show("blind", { direction: "right" });
+      $("#matchhistory").hide("blind", { direction: "left" });
     },
     statsToHistory: function() {
-      window.history.pushState("object or string", "Title",
-        "/?summoner=" +
-        $("#nameinput").val() +
-        "&region=" +
-        $("#regionselect").val() +
-        "&view=history");
-
-      $("#matchhistory").show();
-      slideSlideRight();
-      setTimeout(() => {
-        $("#stats").hide();
-      }, 300);
+      app.view = "history";
+      setUrl();
+      $("#matchhistory").show("blind", { direction: "left" });
+      $("#stats").hide("blind", { direction: "right" });
     },
   },
 });
 
 // Check for URL parameters
 let url = new URL(window.location.href);
-if (url.searchParams.has("summoner"))
+if (url.searchParams.has("summoner")) {
   app.summoner = url.searchParams.get("summoner");
-if (url.searchParams.has("region"))
+  $("#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");
   if (view == "history") {
     toggleStart(true);
     $("#matchhistory").show();
-    app.startToHistory = ()=>{};
   }
   else if (view == "stats") {
     toggleStart(true);
     $("#stats").show();
-    toggleSlideLeft();
-    app.startToHistory = ()=>{};
   }
 }
 // ------------
diff --git a/index.js b/index.js
index f887339..2f25188 100644
--- a/index.js
+++ b/index.js
@@ -7,6 +7,7 @@ const port = 3000
 let rules = [
   ["/", "index.html"],
   ["/script.js", "script.js"],
+  ["/style.css", "style.css"],
 ];
 
 let obfuscateJs = false;
author	Patrick Schönberger	2018-12-10 18:45:49 +0100
committer	Patrick Schönberger	2018-12-10 18:45:49 +0100
commit	7aecc11333eeff555614048d16b4073ce65f7812 (patch)
tree	bacf6d1c878c1bbde45ace119255223e0b9e9a0a
parent	357831fb54ab6a832df76924676b43689fa0461c (diff)
download	lolstats-7aecc11333eeff555614048d16b4073ce65f7812.tar.gz lolstats-7aecc11333eeff555614048d16b4073ce65f7812.zip