Zwischenstand Minesweeper

Author: keppi2

minesweeper-kep/app/app.component.ts

@@ -1,7 +1,9 @@
 import {Component} from 'angular2/core';
+import {minesweeper} from './minesweeper';
 
 @Component({
     selector: 'my-app',
-    template: '<h1>My First Angular 2 App</h1>'
+    template: '<minesweeper></minesweeper>',
+    directives: [minesweeper]
 })
-export class AppComponent { } 
+export class AppComponent { }

minesweeper-kep/app/cell.ts

@@ -0,0 +1,44 @@
+export class cell{
+  private bomb : boolean;
+  private clicked : boolean = false;
+  private x : number;
+  private y : number;
+  private field : Array<Array<cell>>;
+
+  constructor( x : number, y : number, field : Array<Array<cell>>){
+    this.bomb =  Math.round((Math.random() * 4)) == 0;
+    this.x = x;
+    this.y = y;
+    this.field = field;
+
+    if(this.bomb){
+      console.log("is Bomb on "+this.x+" and "+this.y);
+    }else{
+      console.log("is not a Bomb");
+    }
+  }
+
+  public isBomb() : boolean {
+    return this.bomb;
+  }
+
+  public click(){
+    this.clicked = true;
+  }
+
+  public isClicked(){
+    return this.clicked;
+  }
+
+  public getNumNeighborBombs(): number{
+    var num = 0;
+    if(this.x > 1 && this.field[this.y][this.x-1].isBomb()){
+      num++;
+    }
+    if(this.y > 1 && this.field[this.y-1][this.x].isBomb()){
+      num++;
+    }
+    return num;
+  }
+
+}

minesweeper-kep/app/cellRenderer.html

@@ -0,0 +1,7 @@
+<div class="cell">
+  <div class="innerCell" [ngClass]="{bomb:showBomb(), noBomb:noBomb()}" (click)="click()">
+    <span >
+      {{getDisplayValue()}}
+    </span>
+  </div>
+</div>

minesweeper-kep/app/cellrenderer.ts

@@ -0,0 +1,52 @@
+import {Component, Input} from 'angular2/core';
+import {cell} from './cell';
+
+@Component({
+    selector: 'cellrenderer',
+    templateUrl: 'app/cellRenderer.html',
+})
+export class cellrenderer {
+  @Input() cellParameter : cell;
+  private clicked : boolean = false;
+
+  constructor(){
+
+  }
+
+  public isBomb() : boolean{
+    return this.cellParameter.isBomb();
+  }
+
+  public showBomb(){
+    return this.cellParameter.isBomb() && this.isClicked();
+  }
+
+  public noBomb(){
+    return !this.cellParameter.isBomb() &&this.isClicked();
+  }
+
+  public isClicked(){
+    return this.cellParameter.isClicked();
+  }
+
+
+  public click(){
+    this.cellParameter.click();
+  }
+
+  public getDisplayValue() : string{
+    if(this.isClicked()){
+      if(this.isBomb()){
+        return "B";
+      }else{
+        return this.cellParameter.getNumNeighborBombs()+"";
+      }
+    }else{
+      return "-"
+    }
+  }
+
+
+
+
+}

minesweeper-kep/app/minesweeper.html

@@ -0,0 +1,9 @@
+Ich bin das Minesweeper feld.
+<br />
+<span *ngFor="#row of getField(); #r = index">
+  <span *ngFor="#mycell of row; #c = index" >
+    <cellrenderer [cellParameter]="mycell"></cellrenderer>
+  </span>
+  <br />
+  <br />
+</span>

minesweeper-kep/app/minesweeper.ts

@@ -0,0 +1,32 @@
+import {Component} from 'angular2/core';
+import {cell} from './cell';
+import {cellrenderer} from './cellrenderer';
+
+@Component({
+    selector: 'minesweeper',
+    templateUrl: 'app/minesweeper.html',
+    directives:[cellrenderer]
+})
+export class minesweeper {
+  private field : Array<Array<cell>>;
+
+   constructor(){
+    this.initField();
+  }
+
+  public initField(){
+    console.log("init field");
+    var length = 10;
+    this.field = new Array<Array<cell>>(length);
+    for(var r = 0; r< length; r++){
+      this.field[r] = new Array<cell>(length);
+      for(var c = 0; c< 10; c++){
+        this.field[r][c] = new cell(c,r, this.field);
+      }
+    }
+  }
+
+  public getField() : Array<Array<cell>> {
+    return this.field;
+  }
+}

minesweeper-kep/css/app.css

@@ -0,0 +1,20 @@
+.cell{
+  padding:10px;
+  display:inline;
+  width:10px;
+}
+
+.innerCell{
+  padding:10px;
+  border:1px solid black;
+  display:inline;
+}
+
+
+.bomb{
+  background-color:red;
+}
+
+.noBomb{
+    background-color: green;
+}

minesweeper-kep/index.html

@@ -4,7 +4,7 @@
     <title>Angular 2 QuickStart</title>
 
     <script src="assets/js/jquery-2.2.0.min.js"></script>
-    
+
     <!-- 1. Load libraries -->
     <!-- IE required polyfills, in this exact order -->
     <script src="node_modules/es6-shim/es6-shim.min.js"></script>
@@ -18,6 +18,8 @@
 
 
     <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/app.css">
+
     <!-- Optional theme -->
     <link rel="stylesheet" href="assets/css/bootstrap-theme.min.css" >
     <!-- Latest compiled and minified JavaScript -->