ui cleanup
parent
bf1dba8d47
commit
5d263ecadf
|
@ -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);
|
||||
}
|
|
@ -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){
|
||||
|
|
37
index.html
37
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>
|
||||
|
|
|
@ -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: []
|
||||
};
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -126,7 +126,7 @@ var tetrisView = {
|
|||
},
|
||||
// Update the extra reward score
|
||||
setLines:function(setlines){
|
||||
lines.innerHTML = setlines;
|
||||
//lines.innerHTML = setlines;
|
||||
|
||||
},
|
||||
setReward:function(rewardScore){
|
||||
|
|
Loading…
Reference in New Issue