disabled openers for now. added disable background.

This commit is contained in:
PolicyChanges1@gmail.com 2021-02-13 08:22:26 -05:00
parent 4556a33818
commit fc9d7ca801
7 changed files with 123 additions and 43 deletions

View File

@ -2,12 +2,16 @@ html,body{
height:100%;
}
nav ul{height:200px; width:80%;}
nav ul{overflow:hidden; overflow-y:scroll;}
body{
background: #3f3f3f;
margin:0;
padding:0;
position: relative;
font-family: 'American Typewriter','Marker Felt';
}
#tetris{
@ -15,7 +19,7 @@ body{
top:50%;
position: absolute;
background: #555;
background:rgba(0.2,0.2,0.2,.70);
background:rgba(.9,.9,.9,.60);
}
@ -23,8 +27,8 @@ body{
height:100%;
position: absolute;
background: #2f2f2f;
left:120px;
background:rgba(.9,.9,.9,.50);
left:210px;
background:rgba(.9,.9,.9,.80);
}
@ -33,31 +37,32 @@ body{
position: absolute;
top:0px;
left:0px;
width:120px;
width:210px;
text-align: center;
background:rgba(.9,.9,.9,.80);
background:rgba(.9,.9,.9,.60);
}
#leftInfo{
height:100%;
width:120px;
width:210px;
margin:0 auto;
background:rgba(.9,.9,.9,.80);
background:rgba(.9,.9,.9,.60);
}
#hold{
position:relative;
width:80px;
height:360px;
height:435px;
background: #2f2f2f;
margin:10px auto;
background:rgba(.9,.9,.9,.80);
background:rgba(.9,.9,.9,.60);
}
#gameOver{
height:100%;
position: absolute;
right:120px;
left:210px;
background:rgba(0,0,0,.75);
z-index:999;
color:#ffe100;
@ -83,20 +88,23 @@ body{
position: absolute;
top:0;
right:0;
left:560px;
text-align: center;
background:rgba(.9,.9,.9,.70);
}
#info{
width:120px;
width:210px;
left:210px;
margin:0 auto;
background:rgba(.9,.9,.9,.70);
}
#preview{
width:80px;
height:360px;
height:468px;
top:0px;
background: #ffffff;
margin:10px auto;
background:rgba(.9,.9,.9,.90);

38
dist/tetrion.js vendored
View File

@ -531,6 +531,7 @@ var UserInputs = {
this.processKeyDown(90); // Z
this.processKeyDown(16); // shift
this.processKeyDown(17); // ctrl
this.processKeyDown(81); // q
},
// keyboard keys z,x,space
@ -801,6 +802,10 @@ Tetris.prototype = {
this._fireShape();
},
setTKIFonzieVar: function()
{
this.reset();
},
//Reset game
reset: function() {
this.running = false;
@ -813,15 +818,16 @@ Tetris.prototype = {
this.currentTime = this.startTime;
this.prevTime = this.startTime;
this.levelTime = this.startTime;
this.shapeQueue = [];
this.hintQueue = [];
this.holdQueue = [];
this.shapeQueue = this.shapeQueue || [];
this.hintQueue = this.hintQueue || [];
this.holdQueue = this.holdQueue || [];
this.canPullFromHoldQueue = false;
clearMatrix(this.matrix);
views.setLevel(this.level);
views.setScore(this.score);
views.setGameOver(this.isGameOver);
openers.reset();
//openers.reset();
this._draw();
},
//Start game
@ -883,16 +889,16 @@ Tetris.prototype = {
while(this.shapeQueue.length <= 4)
{
this.preparedShape = openers.getNextMino();
this.preparedShape = shapes.randomShape();//openers.getNextMino();
this.shapeQueue.push(this.preparedShape);
}
while(this.hintQueue.length <= 4)
/*while(this.hintQueue.length <= 4)
{
this.preparedShape = openers.getNextHint(this.matrix);
this.hintQueue.push(this.preparedShape);
}
}*/
this.hintMino = this.hintQueue.shift();
//this.hintMino = this.hintQueue.shift();
this.shape = this.shapeQueue.shift();// shapes.randomShape();
this._draw();
@ -905,7 +911,7 @@ Tetris.prototype = {
canvas.drawShape(this.shape);
canvas.drawHoldShape(this.holdQueue);
canvas.drawPreviewShape(this.shapeQueue);
canvas.drawHintShape(this.hintMino);
//canvas.drawHintShape(this.hintMino);
if(this.shape != undefined) {
@ -1023,6 +1029,12 @@ Tetris.prototype = {
this.popHoldStack();
this._update();
}
if(curkey == 81) {
if(document.getElementById("bg").style.display == "none")
document.getElementById("bg").style.display = "initial";
else
document.getElementById("bg").style.display="none";
}
}
inputs.inputqueue = [];
}
@ -1048,7 +1060,6 @@ Tetris.prototype = {
// Update game data
_update: function() {
if(this.shape != undefined) //TODO delete
if (this.shape.canDown(this.matrix)) {
this.shape.goDown(this.matrix);
} else {
@ -1179,6 +1190,7 @@ var OpenerGenerator = {
this.idx = 0;
this.isInit = 0;
}
console.log("mino: " + mino);
return mino;
//return this.shapeQueue[this.idx%=6];
@ -1946,8 +1958,8 @@ var layoutView = function(container,maxW,maxH){
if (sideW < SIDE_WIDTH ){
info.style.width = side.style.width;
}
hold.style.top = 200+'px';//preview.top + 10px pad
side.style.height = 500 + 'px';
hold.style.top = 10+'px';//preview.top + 10px pad
preview.width = 80;
@ -1955,7 +1967,7 @@ var layoutView = function(container,maxW,maxH){
hold.width = 80;
hold.height = 380;
gameOver.style.width = scene.width +'px';

View File

@ -4,28 +4,76 @@
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #888;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
<title>Tetrion Opening Trainer</title>
<link rel="stylesheet" href="css/styles.css">
<script>
function setOpener() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/4lBGDh?gui=false&t=10&paused=false&muted=false" allowfullscreen></iframe>
<iframe id="bg" width="640" height="360" frameborder="0" src="https://www.shadertoy.com/embed/4lBGDh?gui=&t=10&paused=false&muted=false" allowfullscreen></iframe>
<script>
var txt = "";
<!--txt += "<p>innerWidth: " + window.innerWidth + "</p>";
<!--txt += "<p>innerHeight: " + window.innerHeight + "</p>";-->
<!--txt += "<p>outerWidth: " + window.outerWidth + "</p>";-->
<!--txt += "<p>outerHeight: " + window.outerHeight + "</p>";-->
document.getElementById("bg").width = window.innerWidth;
document.getElementById("bg").height = window.innerHeight;
</script>
<div id="tetris">
<canvas id="scene"></canvas>
<div id="leftSide">
<!--<header>header area</header>-->
<nav>
<ul>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">TKI 3 (Fonzie variation) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">TKI 3 (Flat Top variation) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">TKI 3 (Castle Top variation) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Ajanba TSD </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">DT Cannon (LS / JZ base)</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">MKO Stacking</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Pokemino's STD </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Mr. T-Spin's STD (reversed) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Hachispin</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Albatross</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Number One </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Pelican</a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">DT Cannon (TSZ base) </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">BT Cannon </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">C-Spin </a></li>
<li style="font-size:12px";><a href="#" id="setTKIFonzieVar">Hummingbird</a></li>
</ul>
</nav>
<!-- <footer>footer area</footer>-->
<canvas id="hold"></canvas>
</div>
<div id="gameOver">

View File

@ -111,6 +111,7 @@ var UserInputs = {
this.processKeyDown(90); // Z
this.processKeyDown(16); // shift
this.processKeyDown(17); // ctrl
this.processKeyDown(81); // q
},
// keyboard keys z,x,space

View File

@ -157,6 +157,10 @@ Tetris.prototype = {
this._fireShape();
},
setTKIFonzieVar: function()
{
this.reset();
},
//Reset game
reset: function() {
this.running = false;
@ -169,15 +173,16 @@ Tetris.prototype = {
this.currentTime = this.startTime;
this.prevTime = this.startTime;
this.levelTime = this.startTime;
this.shapeQueue = [];
this.hintQueue = [];
this.holdQueue = [];
this.shapeQueue = this.shapeQueue || [];
this.hintQueue = this.hintQueue || [];
this.holdQueue = this.holdQueue || [];
this.canPullFromHoldQueue = false;
clearMatrix(this.matrix);
views.setLevel(this.level);
views.setScore(this.score);
views.setGameOver(this.isGameOver);
openers.reset();
//openers.reset();
this._draw();
},
//Start game
@ -239,16 +244,16 @@ Tetris.prototype = {
while(this.shapeQueue.length <= 4)
{
this.preparedShape = openers.getNextMino();
this.preparedShape = shapes.randomShape();//openers.getNextMino();
this.shapeQueue.push(this.preparedShape);
}
while(this.hintQueue.length <= 4)
/*while(this.hintQueue.length <= 4)
{
this.preparedShape = openers.getNextHint(this.matrix);
this.hintQueue.push(this.preparedShape);
}
}*/
this.hintMino = this.hintQueue.shift();
//this.hintMino = this.hintQueue.shift();
this.shape = this.shapeQueue.shift();// shapes.randomShape();
this._draw();
@ -261,7 +266,7 @@ Tetris.prototype = {
canvas.drawShape(this.shape);
canvas.drawHoldShape(this.holdQueue);
canvas.drawPreviewShape(this.shapeQueue);
canvas.drawHintShape(this.hintMino);
//canvas.drawHintShape(this.hintMino);
if(this.shape != undefined) {
@ -379,6 +384,12 @@ Tetris.prototype = {
this.popHoldStack();
this._update();
}
if(curkey == 81) {
if(document.getElementById("bg").style.display == "none")
document.getElementById("bg").style.display = "initial";
else
document.getElementById("bg").style.display="none";
}
}
inputs.inputqueue = [];
}
@ -404,7 +415,6 @@ Tetris.prototype = {
// Update game data
_update: function() {
if(this.shape != undefined) //TODO delete
if (this.shape.canDown(this.matrix)) {
this.shape.goDown(this.matrix);
} else {

View File

@ -76,6 +76,7 @@ var OpenerGenerator = {
this.idx = 0;
this.isInit = 0;
}
console.log("mino: " + mino);
return mino;
//return this.shapeQueue[this.idx%=6];

View File

@ -76,8 +76,8 @@ var layoutView = function(container,maxW,maxH){
if (sideW < SIDE_WIDTH ){
info.style.width = side.style.width;
}
hold.style.top = 200+'px';//preview.top + 10px pad
side.style.height = 500 + 'px';
hold.style.top = 10+'px';//preview.top + 10px pad
preview.width = 80;
@ -85,7 +85,7 @@ var layoutView = function(container,maxW,maxH){
hold.width = 80;
hold.height = 380;
gameOver.style.width = scene.width +'px';