PolicyChanges
/
policychanges
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ui cleanup

pull/1/head
PolicyChanges1@gmail.com 2021-02-28 12:06:23 -05:00
parent bf1dba8d47
commit 5d263ecadf
6 changed files with 66 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
css/styles.css
View File

@ -24,6 +24,7 @@ body{
position: absolute; position: absolute;
background: #555; background: #555;
background:rgba(1,1,1,.10); background:rgba(1,1,1,.10);
width:560px;
} }
@ -37,9 +38,9 @@ body{
#leftSide { #leftSide {
top:10px;
height:100%; height:100%;
position: absolute; position: absolute;
top:0px;
left:0px; left:0px;
width:210px; width:210px;
text-align: left; text-align: left;
@ -52,19 +53,21 @@ body{
height:200px; height:200px;
width:200px; width:200px;
margin:0 auto; margin:0 auto;
background:rgba(255,255,255,.20); background: rgba(30,30,30,.70);
border: 1px solid black;
} }
#leftInfo ul {padding:2%;} #leftInfo ul {padding:2%;}
#hold{ #hold{
left:50px;
text-align:right; text-align:right;
position:relative; position:relative;
width:80px; width:80px;
height:435px; height:435px;
background: #2f2f2f; background: #2f2f2f;
margin:10px auto; margin:10px auto;
background:rgba(5,5,5,.60); background:rgba(0,0,0,.80);
} }
#gameOver{ #gameOver{
@ -89,24 +92,25 @@ body{
} }
#gameOver h3{ #gameOver h3{
color:AliceBlue; color:DimGrey;
} }
#side{ #side{
height:100%; height:100%;
position: absolute; position: absolute;
top:0; top:-10px;
right:0; right:0;
left:560px; left:560px;
text-align: center; text-align: center;
background:rgba(.9,.9,.9,.70); background:rgba(1,1,1,.30);
} }
#info{ #info{
height:700px;
width:210px; width:210px;
left:210px; left:210px;
margin:0 auto; margin:0 auto;
background:rgba(.9,.9,.9,.70); background:rgba(1,1,1,.30);
} }
#preview{ #preview{
@ -116,39 +120,41 @@ body{
background: #ffffff; background: #ffffff;
margin:10px auto; margin:10px auto;
background:rgba(.9,.9,.9,.90); background:rgba(0,0,0,.80);
} }
#levelInfo{ #levelInfo{
color:#fff; color:DimGrey;
font-size:18px; font-size:18px;
margin:10px 0; margin:10px 0;
background:rgba(.9,.9,.9,.70); background:rgba(0,0,0,0);
} }
#level{ #level{
color:dodgerblue; color:dodgerblue;
font-size:32px; font-size:18px;
background:rgba(.9,.9,.9,.70); background:rgba(0,0,0,0);
} }
#scoreInfo{ #scoreInfo{
color:#fff; color:DimGrey;
font-size: 18px; font-size: 18px;
margin-top:0; margin-top:0;
background:rgba(.9,.9,.9,.70); background:rgba(0,0,0,0);
} }
#score{ #score{
color:dodgerblue; color:dodgerblue;
font-family: 'Arial'; font-family: 'Arial';
background:rgba(.9,.9,.9,.70); background:rgba(0,0,0,0);
}
#linesInfo{
}#linesInfo{
color:#fff;
font-size: 18px;
margin-top:0; margin-top:0;
background:rgba(.9,.9,.9,.70);c
visibility: collapse;
} }
100% { 100% {
@ -163,3 +169,7 @@ body{
-webkit-animation-name: fadeOutUp; -webkit-animation-name: fadeOutUp;
animation-name: fadeOutUp; animation-name: fadeOutUp;
} }
#bg {
-webkit-filter: blur(3px);
filter: blur(3px);
}

12
dist/tetrion.js vendored
View File

@ -602,6 +602,8 @@ var UserInputs = {
var DAS = parseInt(this.settingsMap.get("Keyboard DAS")); //65.0; var DAS = parseInt(this.settingsMap.get("Keyboard DAS")); //65.0;
var ARR = parseInt(this.settingsMap.get("Keyboard ARR")); //20.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]) { if(this.prevKeyboardKeys[key] != this.keyboardKeys[key]) {
this.isDirectionArrowDown = false; this.isDirectionArrowDown = false;
@ -693,7 +695,7 @@ var UserInputs = {
"50.0", "16.0", "RB", "LB", "50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B", "DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "", "DPad-Down", "DPad-Up", "Back", "",
"=/"], "=/",""],
settingsMap: [] settingsMap: []
}; };
@ -836,7 +838,7 @@ var calcIntervalByLevel = function(level) {
// Default max scene size // Default max scene size
var defaults = { var defaults = {
maxHeight: 700, maxHeight: 700,
maxWidth: 600 maxWidth: 560
}; };
/** /**
@ -860,7 +862,7 @@ Tetris.prototype = {
inputs.init(); inputs.init();
this.createSettings(); this.createSettings();
// if true no openers. just random tetrinos // if true no openers. just random tetrinos
this.isFreePlay = true;1 this.isFreePlay = true;
this.isTimerOn = false; this.isTimerOn = false;
this.currentOpener = 0; this.currentOpener = 0;
this.doTest = false; this.doTest = false;
@ -1036,7 +1038,7 @@ Tetris.prototype = {
if(this.isTimerOn) { if(this.isTimerOn) {
var besttime = document.getElementById("besttime").value; var besttime = document.getElementById("besttime").value;
var deltaTime = new Date().getTime() - this.sequencePrevTime; 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(); document.getElementById("besttime").value = (deltaTime/1000.0).toString();
} }
this.isSequenceCompleted = true; this.isSequenceCompleted = true;
@ -3053,7 +3055,7 @@ var tetrisView = {
}, },
// Update the extra reward score // Update the extra reward score
setLines:function(setlines){ setLines:function(setlines){
lines.innerHTML = setlines; //lines.innerHTML = setlines;
}, },
setReward:function(rewardScore){ setReward:function(rewardScore){

37
index.html
View File

@ -38,12 +38,17 @@
<div id="divbg"> <div id="divbg">
<!-- https://www.shadertoy.com/view/3tXBWj# --> <!-- <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 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 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/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/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> <script>
document.getElementById("bg").width = window.innerWidth; document.getElementById("bg").width = window.innerWidth;
document.getElementById("bg").height = window.innerHeight; document.getElementById("bg").height = window.innerHeight;
@ -118,14 +123,14 @@ document.getElementById("divbg").removeAttribute("tabIndex");
</ul> </ul>
</div> </div>
<canvas id="hold"></canvas> <canvas style="border: 1px solid #000;" id="hold"></canvas>
<br> <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 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:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="Time" value=""/> <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: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:black;color:dodgerblue;border:1px solid black;text-align:left;" type="text" id="besttime" value=""/> <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>
<div id="gameOver"> <div id="gameOver">
@ -138,18 +143,18 @@ document.getElementById("divbg").removeAttribute("tabIndex");
<div id="info"> <div id="info">
<h1 id="levelInfo">Level: <br><span id="level">1</span></h1> <h1 id="levelInfo">Level: <br><span id="level">1</span></h1>
<h2 id="scoreInfo">Score: <br><span id="score" >0</span></h2> <h2 id="scoreInfo">Score: <br><span id="score" >0</span></h2>
<h1 id="linesInfo">Lines: <br><span id="lines" >0</span></h1> <!-- <h1 style="visibility:collapse;" id="linesInfo">Lines: <br><span id="lines" >0</span></h1> -->
<div id="rewardInfo" class="invisible">+<span id="reward">0</span></div> <div style="visibility:collapse" id="rewardInfo" class="invisible">+<span id="reward">0</span></div>
<canvas id="preview"></canvas> <canvas style="border: 1px solid #000;" id="preview"></canvas>
<br> <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> <option selected="">Settings:</option>
</select> </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: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:black;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="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:12px;background:rgba(0,0,0,.80);color:dodgerblue;border:1px solid black;" id="test" type="submit" value="Test Yourself"></input>
</div> </div>

4
src/input.js
View File

@ -178,6 +178,8 @@ var UserInputs = {
var DAS = parseInt(this.settingsMap.get("Keyboard DAS")); //65.0; var DAS = parseInt(this.settingsMap.get("Keyboard DAS")); //65.0;
var ARR = parseInt(this.settingsMap.get("Keyboard ARR")); //20.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]) { if(this.prevKeyboardKeys[key] != this.keyboardKeys[key]) {
this.isDirectionArrowDown = false; this.isDirectionArrowDown = false;
@ -269,7 +271,7 @@ var UserInputs = {
"50.0", "16.0", "RB", "LB", "50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B", "DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "", "DPad-Down", "DPad-Up", "Back", "",
"=/"], "=/",""],
settingsMap: [] settingsMap: []
}; };

6
src/main.js
View File

@ -134,7 +134,7 @@ var calcIntervalByLevel = function(level) {
// Default max scene size // Default max scene size
var defaults = { var defaults = {
maxHeight: 700, maxHeight: 700,
maxWidth: 600 maxWidth: 560
}; };
/** /**
@ -158,7 +158,7 @@ Tetris.prototype = {
inputs.init(); inputs.init();
this.createSettings(); this.createSettings();
// if true no openers. just random tetrinos // if true no openers. just random tetrinos
this.isFreePlay = true;1 this.isFreePlay = true;
this.isTimerOn = false; this.isTimerOn = false;
this.currentOpener = 0; this.currentOpener = 0;
this.doTest = false; this.doTest = false;
@ -334,7 +334,7 @@ Tetris.prototype = {
if(this.isTimerOn) { if(this.isTimerOn) {
var besttime = document.getElementById("besttime").value; var besttime = document.getElementById("besttime").value;
var deltaTime = new Date().getTime() - this.sequencePrevTime; 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(); document.getElementById("besttime").value = (deltaTime/1000.0).toString();
} }
this.isSequenceCompleted = true; this.isSequenceCompleted = true;

2
src/views.js
View File

@ -126,7 +126,7 @@ var tetrisView = {
}, },
// Update the extra reward score // Update the extra reward score
setLines:function(setlines){ setLines:function(setlines){
lines.innerHTML = setlines; //lines.innerHTML = setlines;
}, },
setReward:function(rewardScore){ setReward:function(rewardScore){