From 5d263ecadf4d96c1bf80051feb29cd6eed43f8e5 Mon Sep 17 00:00:00 2001
From: "PolicyChanges1@gmail.com" <PolicyChanges1@gmail.com>
Date: Sun, 28 Feb 2021 12:06:23 -0500
Subject: [PATCH] ui cleanup

---
 css/styles.css  | 48 +++++++++++++++++++++++++++++-------------------
 dist/tetrion.js | 14 ++++++++------
 index.html      | 37 +++++++++++++++++++++----------------
 src/input.js    |  6 ++++--
 src/main.js     |  6 +++---
 src/views.js    |  2 +-
 6 files changed, 66 insertions(+), 47 deletions(-)

diff --git a/css/styles.css b/css/styles.css
index 663cded..3911f15 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -24,6 +24,7 @@ body{
 	position: absolute;
 	background: #555;
 	background:rgba(1,1,1,.10);
+	width:560px;
 	
 }
 
@@ -37,9 +38,9 @@ body{
 
 
 #leftSide {
+	top:10px;
 	height:100%;
 	position: absolute;
-	top:0px;
 	left:0px;
 	width:210px;
 	text-align: left;
@@ -52,19 +53,21 @@ body{
 	height:200px;
 	width:200px;
 	margin:0 auto;
-	background:rgba(255,255,255,.20);
+	background: rgba(30,30,30,.70);
+    border: 1px solid black;
 }
 
 #leftInfo ul {padding:2%;}
 
 #hold{
+	left:50px;
 	text-align:right;
 	position:relative;
 	width:80px;
 	height:435px;
 	background: #2f2f2f;
 	margin:10px auto;
-	background:rgba(5,5,5,.60);
+	background:rgba(0,0,0,.80);
 }
 
 #gameOver{
@@ -89,24 +92,25 @@ body{
 }
 
 #gameOver h3{
-	color:AliceBlue;
+	color:DimGrey;
 }
 
 #side{
 	height:100%;
 	position: absolute;
-	top:0;
+	top:-10px;
 	right:0;
 	left:560px;
 	text-align: center;
-	background:rgba(.9,.9,.9,.70);
+	background:rgba(1,1,1,.30);
 }
 
 #info{
+	height:700px;
 	width:210px;
 	left:210px;
 	margin:0 auto;
-	background:rgba(.9,.9,.9,.70);
+	background:rgba(1,1,1,.30);
 }
 
 #preview{
@@ -116,39 +120,41 @@ body{
 	
 	background: #ffffff;
 	margin:10px auto;
-	background:rgba(.9,.9,.9,.90);
+	background:rgba(0,0,0,.80);
 }
 
 
 #levelInfo{
-	color:#fff;
+	color:DimGrey;
 	font-size:18px;
 	margin:10px 0;
-	background:rgba(.9,.9,.9,.70);
+	background:rgba(0,0,0,0);
 }
 #level{
 	color:dodgerblue;
-	font-size:32px;
-	background:rgba(.9,.9,.9,.70);
+	font-size:18px;
+	background:rgba(0,0,0,0);
 }
 
 #scoreInfo{
-	color:#fff;
+	color:DimGrey;
 	font-size: 18px;
 	margin-top:0;
-	background:rgba(.9,.9,.9,.70);
+	background:rgba(0,0,0,0);
 }
 
 #score{
 	color:dodgerblue;
 	font-family: 'Arial';
-	background:rgba(.9,.9,.9,.70);
+	background:rgba(0,0,0,0);
 	
-}#linesInfo{
-	color:#fff;
-	font-size: 18px;
+}
+
+#linesInfo{
+
 	margin-top:0;
-	background:rgba(.9,.9,.9,.70);c
+	
+	visibility: collapse;
   }
 
   100% {
@@ -162,4 +168,8 @@ body{
 .fadeOutUp {
   -webkit-animation-name: fadeOutUp;
   animation-name: fadeOutUp;
+}
+#bg {
+  -webkit-filter: blur(3px);
+  filter: blur(3px);
 }
\ No newline at end of file
diff --git a/dist/tetrion.js b/dist/tetrion.js
index 2566997..caf90cd 100644
--- a/dist/tetrion.js
+++ b/dist/tetrion.js
@@ -602,7 +602,9 @@ var UserInputs = {
 		var DAS = parseInt(this.settingsMap.get("Keyboard DAS"));	//65.0;
 		var ARR = parseInt(this.settingsMap.get("Keyboard ARR"));	//20.0;
 
-	
+	if(key == 75)
+		console.log("keyboard key: " + key);
+		
 		if(this.prevKeyboardKeys[key] != this.keyboardKeys[key]) {
 			this.isDirectionArrowDown = false;
 			if(this.keyboardKeys[key] == true)
@@ -693,7 +695,7 @@ var UserInputs = {
 						"50.0", "16.0", "RB", "LB",
 						"DPad-Left", "DPad-Right", "A", "B",
 						"DPad-Down", "DPad-Up", "Back", "", 
-						"=/"],
+						"=/",""],
 	settingsMap: []
 };
 
@@ -836,7 +838,7 @@ var calcIntervalByLevel = function(level) {
 // Default max scene size
 var defaults = {
     maxHeight: 700,
-    maxWidth: 600
+    maxWidth: 560
 };
 
 /**
@@ -860,7 +862,7 @@ Tetris.prototype = {
 		inputs.init();
 		this.createSettings();
 		// if true no openers.  just random tetrinos
-		this.isFreePlay = true;1
+		this.isFreePlay = true;
 		this.isTimerOn = false;
 		this.currentOpener = 0;
 		this.doTest = false;
@@ -1036,7 +1038,7 @@ Tetris.prototype = {
 				if(this.isTimerOn) {
 					var besttime = document.getElementById("besttime").value;
 					var deltaTime = new Date().getTime() - this.sequencePrevTime;
-					if(besttime == "" || deltaTime/1000.0 < parseInt(besttime)) {	
+					if(besttime == "" || deltaTime/1000.0 < parseFloat(besttime)) {	
 						document.getElementById("besttime").value = (deltaTime/1000.0).toString();
 					}
 					this.isSequenceCompleted = true;
@@ -3053,7 +3055,7 @@ var tetrisView = {
 	},
 	// Update the extra reward score
 	setLines:function(setlines){
-		lines.innerHTML = setlines;
+		//lines.innerHTML = setlines;
 	
 	},
 	setReward:function(rewardScore){
diff --git a/index.html b/index.html
index c33a46a..710fb6a 100644
--- a/index.html
+++ b/index.html
@@ -38,12 +38,17 @@
 
 
 <div id="divbg">
-<!-- https://www.shadertoy.com/view/3tXBWj# -->
-<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/Xlf3Rj?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
-<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/tdjyzz?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
+<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/4lBGDh?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
+
+<!-- <iframe width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3tXBWj?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
+
+<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/Xlf3Rj?gui=true&t=10&paused=false&muted=false" allowfullscreen></iframe> -->
+
+<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/tdjyzz?gui=true&t=10&paused=false&muted=false" allowfullscreen></iframe> -->
 <!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3lVfDm?gui=true&t=10&paused=true&muted=false" allowfullscreen></iframe> -->
 <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/WldfWX?gui=&paused=false&muted=false" ></iframe>
-<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3sy3Wy?gui=true&t=10&paused=true&muted=false" ></iframe> -->
+<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/3sy3Wy?gui=true&t=10&paused=false&muted=false" ></iframe> -->
+<!-- <iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/MlSSRt?gui=&paused=false&muted=false" allowfullscreen></iframe> -->
 <script>
 document.getElementById("bg").width = window.innerWidth;
 document.getElementById("bg").height = window.innerHeight;
@@ -118,14 +123,14 @@ document.getElementById("divbg").removeAttribute("tabIndex");
 			</ul>
 		</div>
 	
-		<canvas id="hold"></canvas>
+		<canvas style="border: 1px solid #000;" id="hold"></canvas>
 		<br>
 		
-		<input style="padding:1px;text-decoration:underline;overflow:visible;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="button" id="Timer" value="Timer Off"/>
-		<input disabled=true style="padding:1px;overflow:visible;width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="Time" value=""/>
+		<input style="padding:1px;text-decoration:underline;overflow:visible;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="button" id="Timer" value="Timer Off"/>
+		<input disabled=true style="padding:1px;overflow:visible;width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="Time" value=""/>
 		
-		<input disabled=true style="overflow:visible;width:40%;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttimetext" value="Best Time:"/>
-		<input disabled=true style="overflow:visible;width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttime" value=""/>
+		<input disabled=true style="overflow:visible;width:40%;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttimetext" value="Best Time:"/>
+		<input disabled=true style="overflow:visible;width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttime" value=""/>
 	</div>
 	
 	<div id="gameOver">
@@ -138,18 +143,18 @@ document.getElementById("divbg").removeAttribute("tabIndex");
 		<div id="info">
 			<h1 id="levelInfo">Level: <br><span id="level">1</span></h1>
 			<h2 id="scoreInfo">Score: <br><span id="score" >0</span></h2>
-			<h1 id="linesInfo">Lines: <br><span id="lines" >0</span></h1>
-			<div id="rewardInfo" class="invisible">+<span id="reward">0</span></div>
-			<canvas id="preview"></canvas>
+			<!-- <h1 style="visibility:collapse;" id="linesInfo">Lines: <br><span id="lines" >0</span></h1> -->
+			<div style="visibility:collapse" id="rewardInfo" class="invisible">+<span id="reward">0</span></div>
+			<canvas style="border: 1px solid #000;" id="preview"></canvas>
 			
 			<br>
-			<select style="width:80px;font-size:13px;background:black;color:dodgerblue;text-align:left;" id="settings" name="setting">
+			<select style="width:80px;font-size:13px;background:rgba(0,0,0,.80);color:dodgerblue;border: 1px solid Black;text-align:left;" id="settings" name="setting">
 			  <option selected="">Settings:</option>
 				
 			</select>
-			<input style="width:80px;font-size:13px;background:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="setting_value">
-			<input style="width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;" id="submitsetting" type="submit" value="Set Setting"></input>
-			<input style="width:80px;font-size:12px;background:black;color:dodgerblue;border:1px solid black;" id="test" type="submit" value="Test Yourself"></input>
+			<input style="width:80px;font-size:13px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="setting_value">
+			<input style="width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;" id="submitsetting" type="submit" value="Set Setting"></input>
+			<input style="width:80px;font-size:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;" id="test" type="submit" value="Test Yourself"></input>
 
 			
 		</div>
diff --git a/src/input.js b/src/input.js
index e892130..d3ff0f2 100644
--- a/src/input.js
+++ b/src/input.js
@@ -178,7 +178,9 @@ var UserInputs = {
 		var DAS = parseInt(this.settingsMap.get("Keyboard DAS"));	//65.0;
 		var ARR = parseInt(this.settingsMap.get("Keyboard ARR"));	//20.0;
 
-	
+	if(key == 75)
+		console.log("keyboard key: " + key);
+		
 		if(this.prevKeyboardKeys[key] != this.keyboardKeys[key]) {
 			this.isDirectionArrowDown = false;
 			if(this.keyboardKeys[key] == true)
@@ -269,7 +271,7 @@ var UserInputs = {
 						"50.0", "16.0", "RB", "LB",
 						"DPad-Left", "DPad-Right", "A", "B",
 						"DPad-Down", "DPad-Up", "Back", "", 
-						"=/"],
+						"=/",""],
 	settingsMap: []
 };
 
diff --git a/src/main.js b/src/main.js
index 3f652ee..3a20786 100644
--- a/src/main.js
+++ b/src/main.js
@@ -134,7 +134,7 @@ var calcIntervalByLevel = function(level) {
 // Default max scene size
 var defaults = {
     maxHeight: 700,
-    maxWidth: 600
+    maxWidth: 560
 };
 
 /**
@@ -158,7 +158,7 @@ Tetris.prototype = {
 		inputs.init();
 		this.createSettings();
 		// if true no openers.  just random tetrinos
-		this.isFreePlay = true;1
+		this.isFreePlay = true;
 		this.isTimerOn = false;
 		this.currentOpener = 0;
 		this.doTest = false;
@@ -334,7 +334,7 @@ Tetris.prototype = {
 				if(this.isTimerOn) {
 					var besttime = document.getElementById("besttime").value;
 					var deltaTime = new Date().getTime() - this.sequencePrevTime;
-					if(besttime == "" || deltaTime/1000.0 < parseInt(besttime)) {	
+					if(besttime == "" || deltaTime/1000.0 < parseFloat(besttime)) {	
 						document.getElementById("besttime").value = (deltaTime/1000.0).toString();
 					}
 					this.isSequenceCompleted = true;
diff --git a/src/views.js b/src/views.js
index 9dea9c4..fe1d377 100644
--- a/src/views.js
+++ b/src/views.js
@@ -126,7 +126,7 @@ var tetrisView = {
 	},
 	// Update the extra reward score
 	setLines:function(setlines){
-		lines.innerHTML = setlines;
+		//lines.innerHTML = setlines;
 	
 	},
 	setReward:function(rewardScore){