Permalink
Browse files

First version of MineSweeper

  • Loading branch information...
1 parent 36fd263 commit 5485be5c238f0ccac083cfa676b684dca26a1058 @ErnestoR committed Jul 19, 2012
Showing with 95 additions and 60 deletions.
  1. +2 −2 app/app.js
  2. +1 −2 app/view/GridPanel.js
  3. +48 −46 app/view/mineView.js
  4. +44 −10 resources/css/app.css
View
@@ -16,8 +16,8 @@ Ext.application({
launch: function() {
Ext.create('Ext.Window',{
- width:550,
- height:550,
+ width:520,
+ height:520,
maximizable:true,
title:'Buscaminas',
autoScroll:true,
@@ -1,8 +1,7 @@
/**
* @class App.view. GridPanel
* @extends Ext.grid.Panel
- * @author Armando Gonzalez iam@armando.mx
- * @author Ernesto Ramirez
+ * @author Armando Gonzalez iam@armando.mx
* Esta es la definicion del grid que creara nuestro tablero de minas.
*/
Ext.define('App.view.GridPanel', {
View
@@ -12,66 +12,75 @@ Ext.define('App.view.mineView', {
var me = this;
me.store = me.buildStore();
me.itemSelector = ".square";
+ me.trackOver = true;
+ me.overItemCls = 'hover';
me.tpl = new Ext.XTemplate(
'<tpl for=".">',
- '<tpl if="isBorder === 1"><div class="square"> - </div></tpl>',
+ '<tpl if="isBorder === 1"><div class="square"></div></tpl>',
'<tpl if="isBorder === 0">',
- '<tpl if="isRevealed === 1"><div class="square mineUncovered">{numMines} </div></tpl>',
+ '<tpl if="isRevealed === 1">',
+ '<tpl if="numMines != 0">',
+ '<div class="square mine Uncovered{numMines}">{numMines}</div>',
+ '</tpl>',
+ '<tpl if="numMines === 0">',
+ '<div class="square mine Uncovered{numMines}"></div>',
+ '</tpl>',
+ '</tpl>',
'<tpl if="isRevealed === 0">',
'<tpl if="hasBomb != 1">',
- '<div class="square mineCovered"></div>',
+ '<div class="square mine Covered"></div>',
'</tpl>',
'<tpl if="hasBomb === 1">',
- '<div class="square mineCovered">{hasBomb} </div>',
+ '<div class="square mine Covered">*</div>',
'</tpl>',
'</tpl>',
'</tpl>',
'<tpl if="( xindex % '+(me.num+2)+' ) === 0 "><div class="x-clear"></div></tpl>',
'</tpl>'
);
- this.callParent(arguments);
- this.on('itemclick',me.validateMine,this); // evento que se dispara cuando se da click sobre alguna posible mina
+ me.callParent(arguments);
+ me.on('itemclick',me.validateMine,me); // evento que se dispara cuando se da click sobre alguna posible mina
},
validateMine:function( table, record, item, index, e, eOpts ){
- //console.log(Ext.get(e.target).setHTML("asdfghj"));
- if( record.get('isRevealed') === 0){ // si existe mina la explotamos
- this.revealMine(record,item);
- } else {
- console.log("already revealed");
+ if( record.get('isRevealed') === 0){
+ if(record.get('hasBomb') ){ // si existe mina la explotamos
+ Ext.Msg.alert(':(','kaboooom!. GAME OVER!');
+ } else {
+ this.revealMine(record,item);
+ }
}
},
- revealMine:function(record,item){ // creamos las columnas de nuestro grid
- var me = this, revealArray = [];
- console.log("in revealMine");
- if(record.get('hasBomb') ){ // si existe mina la explotamos
- Ext.Msg.alert(':(','kaboooom!. GAME OVER!');
- } else {
- record.set('isRevealed', 1);
- var adjacentMines = this.getAdjacentMines(record.get('id')),
- numMines = this.countMines(adjacentMines);
- if(numMines != 0){
- record.set('numMines', numMines);
- //item.setHTML(numMines);
- }
+ revealMine:function(record){
+ record.set('isRevealed', 1);
+ var adjacentMines = this.getAdjacentMines(record.get('id')),
+ numMines = this.countMines(adjacentMines);
+ if(numMines != 0){
+ record.set('numMines', numMines);
+ }else{
+ this.recursiveReveal(adjacentMines);
}
this.refresh();
+ return record;
+ },
+ recursiveReveal: function(revealArray){
+ for(var i = 0; i < 8 ; i++){
+ var rec = this.getStore().getAt(revealArray[i]);
+ if( rec.get('isRevealed') === 0){
+ this.revealMine(rec);
+ }
+ }
},
-
countMines:function(adjacentMines){ // creamos las columnas de nuestro grid
- var me = this,
- numMines = 0;
-
+ var numMines = 0;
for(var i = 0; i < 8; i++ ){
if(this.getStore().getAt(adjacentMines[i]).get('hasBomb'))
numMines++;
}
return numMines;
-
},
-
getAdjacentMines:function(id){ // creamos las columnas de nuestro grid
- var me = this, adjacentMines = [];
- // NEED to optimize this CODE!!!!! to sleepy
+ var adjacentMines = [];
+ // NEED to optimize this CODE!!!
adjacentMines.push(( id - ( this.num + 3 ) ) );
adjacentMines.push(( id - ( this.num + 2 ) ) );
adjacentMines.push(( id - ( this.num + 1 ) ) );
@@ -80,39 +89,33 @@ Ext.define('App.view.mineView', {
adjacentMines.push(( id + ( this.num + 1 ) ) );
adjacentMines.push(( id + ( this.num + 2 ) ) );
adjacentMines.push(( id + ( this.num + 3 ) ) );
- // NEED to optimize this CODE!!!!! to sleepy
return adjacentMines;
},
buildStore:function(){ //creamos nuestro store que contendra cada una de las entidades de nuestro tablero
var me = this, store;
Ext.define('Mine', {
extend: 'Ext.data.Model',
- fields: [
- {
+ fields: [ {
name: 'hasBomb',
type: 'int'
- },
- {
+ },{
name: 'isRevealed',
type: 'int'
- },
- {
+ },{
name: 'isBorder',
type: 'int',
defaultValue: 0
- },
- {
+ },{
name: 'numMines',
type: 'int',
defaultValue: 0
}
]
});
-
store = Ext.create('Ext.data.Store', {
- model: 'Mine',
- data: me.buildData()
- });
+ model: 'Mine',
+ data: me.buildData()
+ });
return store;
},
buildData:function(){ // aqui creamos nuestras entidades slots para cada una de las filas de nuestro store (Records)
@@ -129,7 +132,6 @@ Ext.define('App.view.mineView', {
hasBomb: Math.floor(Math.random()*2),
isRevealed: 0
} );
-
data.push(row);
}
return data;
View
@@ -2,22 +2,56 @@
width: 50px;
height: 50px;
float: left;
-
- }
+}
-.mineCovered {
+.mine {
border: 1px solid black;
- background-color: grey;
text-align: center;
padding-top: 20px;
}
+.Covered {
+ background-color: #A6BCC4;
+ cursor:pointer;
+}
+.Uncovered0 {
+ background-color: transparent;
+}
-.mineUncovered {
- border: 1px solid black;
- background-color: green;
- text-align: center;
- padding-top: 20px;
- }
+.Uncovered1 {
+ color: blue;
+}
+
+.Uncovered2 {
+ color: green;
+}
+
+.Uncovered3 {
+ color: red;
+}
+
+.Uncovered4 {
+ color: #112152;
+}
+
+.Uncovered5 {
+ color: #7A0909;
+}
+
+.Uncovered6 {
+ color: ##2299BE;
+}
+
+.Uncovered7 {
+ color: #A42EF3;
+}
+
+.Uncovered8 {
+ color: #252525;
+}
+
+.square .hover {
+ background-color: #A60000 !important;
+}
.json {
background-image: url(../images/json.png) !important;

0 comments on commit 5485be5

Please sign in to comment.