diff --git a/css/styles.css b/css/styles.css index 1c7892c..1b0868e 100644 --- a/css/styles.css +++ b/css/styles.css @@ -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); diff --git a/dist/tetrion.js b/dist/tetrion.js index 261f4a2..356f26a 100644 --- a/dist/tetrion.js +++ b/dist/tetrion.js @@ -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'; diff --git a/index.html b/index.html index 3fb8187..f653271 100644 --- a/index.html +++ b/index.html @@ -4,28 +4,76 @@ + Tetrion Opening Trainer + + + - + +
+
+ + + +
diff --git a/src/input.js b/src/input.js index c76eb82..7c74b44 100644 --- a/src/input.js +++ b/src/input.js @@ -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 diff --git a/src/main.js b/src/main.js index a93a485..ba734a1 100644 --- a/src/main.js +++ b/src/main.js @@ -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 { diff --git a/src/openers.js b/src/openers.js index 533d855..4938e46 100644 --- a/src/openers.js +++ b/src/openers.js @@ -76,6 +76,7 @@ var OpenerGenerator = { this.idx = 0; this.isInit = 0; } + console.log("mino: " + mino); return mino; //return this.shapeQueue[this.idx%=6]; diff --git a/src/views.js b/src/views.js index 0edf32f..2e4cdc3 100644 --- a/src/views.js +++ b/src/views.js @@ -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';