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

ui cleanup

Browse Source
This commit is contained in:
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;
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{
}#linesInfo{
color:#fff;
font-size: 18px;
margin-top:0;
background:rgba(.9,.9,.9,.70);c
visibility: collapse;
}
100% {
@ -163,3 +169,7 @@ body{
-webkit-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 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;
@ -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){

37
index.html
View File

@ -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>

4
src/input.js
View File

@ -178,6 +178,8 @@ 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;
@ -269,7 +271,7 @@ var UserInputs = {
"50.0", "16.0", "RB", "LB",
"DPad-Left", "DPad-Right", "A", "B",
"DPad-Down", "DPad-Up", "Back", "",
"=/"],
"=/",""],
settingsMap: []
};

6
src/main.js
View File

@ -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;

2
src/views.js
View File

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