(#22) Memory Game Module

Author: opiepj

src/app/components/example-modules/example-modules.html

@@ -15,6 +15,12 @@
            (click)="active = 2"
            [class.active]="active === 2">Tic tac toe</a>
       </li>
+      <li>
+        <a class="ac-button md-default-theme"
+           [router-link]=" ['./memory'] "
+           (click)="active = 2"
+           [class.active]="active === 2">Memory Game</a>
+      </li>
     </ul>
   </nav>
 

src/app/components/example-modules/example-modules.ts

@@ -6,6 +6,7 @@ import {RouteConfig, routerDirectives} from 'angular2/router';
 // Modules
 import {Tictactoe} from './tictactoe-module/tictactoe';
 import {Search} from './search-module/search';
+import {Memory} from './memory-module/memory';
 // View
 let template = require('./example-modules.html');
 let styles = require('./example-modules.css')
@@ -15,7 +16,8 @@ let styles = require('./example-modules.css')
 @RouteConfig([
   { path: '/',              redirectTo: '/search' },
   { path: '/search',        as: 'search',        component: Search },
-  { path: '/tictactoe',     as: 'tictactoe',     component: Tictactoe }
+  { path: '/tictactoe',     as: 'tictactoe',     component: Tictactoe },
+  { path: '/memory',        as: 'memory',        component: Memory }
 ])
 @View({
   directives: [ routerDirectives, CSSClass ],

src/app/components/example-modules/memory-module/directives/card.ts

@@ -0,0 +1,21 @@
+/// <reference path="../../../../../typings/_custom.d.ts" />
+
+// Angular 2
+import {Component, View, EventEmitter, coreDirectives} from 'angular2/angular2';
+
+let styles   = require('../views/css/memory.css');
+let template = require('../views/card.html');
+
+@Component({
+  selector: 'card',
+  properties: [ 'card' ],
+  events: [ 'select' ]
+})
+@View({
+  directives: [ coreDirectives ],
+  styles: [styles],
+  template: template
+})
+export class Card {
+  select: EventEmitter = new EventEmitter();
+}

src/app/components/example-modules/memory-module/memory.ts

@@ -0,0 +1,31 @@
+/// <reference path="../../../../typings/_custom.d.ts" />
+
+// Angular 2
+import {Component, View, coreDirectives} from 'angular2/angular2';
+
+// Services
+import {Game}  from './services/game';
+
+// Directives
+import {Card} from './directives/card';
+
+// View
+let view = require('./views/memory.html');
+
+@Component({
+  selector: 'memory',
+  viewBindings: [Game]
+})
+@View({
+  directives: [coreDirectives, Card],
+  template: view
+})
+export class Memory {
+  constructor(public game: Game) {
+
+  }
+
+  reset() {
+    this.game = Game.create();
+  }
+}

src/app/components/example-modules/memory-module/services/game.ts

@@ -0,0 +1,98 @@
+/// <reference path="../../../../../typings/_custom.d.ts" />
+
+import {Injectable} from 'angular2/angular2';
+import {Tile}  from '../services/tile';
+
+var tileNames = ['8-ball', 'kronos', 'baked-potato', 'dinosaur', 'rocket', 'skinny-unicorn',
+    'that-guy', 'zeppelin'];
+var message = {
+  CLICK:'Click on a tile.',
+  ONE_MORE:'Pick one more card',
+  MISS: 'Try again',
+  MATCH: 'Good job! Keep going.',
+  WON: 'You win!'
+};
+
+@Injectable()
+export class Game {
+  tileDeck: Array<Tile>;
+  firstPick: Tile;
+  grid: any;
+  secondPick: Tile;
+  message: string;
+  unmatchedPairs: number;
+
+  constructor(tileNames) {
+    this.tileDeck = this.makeDeck(tileNames);
+    this.message = message.CLICK;
+    this.unmatchedPairs = tileNames.length;
+    this.firstPick = null;
+    this.secondPick = null;
+    this.grid = this.makeGrid(this.tileDeck);
+  }
+
+  public static create(): Game {
+    return new Game(tileNames);
+  }
+
+  makeDeck(tileNames) {
+    var tileDeck: Array<Tile> = [];
+    for (name in tileNames) {
+      tileDeck.push(new Tile(name));
+      tileDeck.push(new Tile(name));
+    }
+
+    return tileDeck;
+  }
+
+  makeGrid(tileDeck) {
+    var gridDimension = Math.sqrt(tileDeck.length);
+    var grid = [];
+
+    for (var row = 0; row < gridDimension; row++) {
+      grid[row] = [];
+      for (var col = 0; col < gridDimension; col++) {
+        grid[row][col] = this.removeRandomTile(tileDeck);
+      }
+    }
+
+    return grid;
+  }
+
+  removeRandomTile(tileDeck) {
+    var i = Math.floor(Math.random()*tileDeck.length);
+    return tileDeck.splice(i, 1)[0];
+  }
+
+  flipTile(tile) {
+    if (tile.flipped) {
+        return;
+    }
+
+    tile.flip();
+
+    if(!this.firstPick || this.secondPick) {
+
+      if (this.secondPick) {
+        this.firstPick.flip();
+        this.secondPick.flip();
+        this.firstPick = this.secondPick = undefined;
+      }
+
+      this.firstPick = tile;
+      this.message = message.ONE_MORE;
+
+    } else {
+      if (this.firstPick.title === tile.title) {
+        this.unmatchedPairs--;
+        if (this.unmatchedPairs > 0) {
+          this.message = message.WON;
+        }
+        this.firstPick = this.secondPick = undefined;
+      } else {
+        this.secondPick = tile;
+        this.message = message.MISS;
+      }
+    }
+  }
+}

src/app/components/example-modules/memory-module/services/tile.ts

@@ -0,0 +1,18 @@
+/// <reference path="../../../../../typings/_custom.d.ts" />
+
+import {Injectable} from 'angular2/angular2';
+
+@Injectable()
+export class Tile {
+  title: string;
+  flipped: boolean;
+
+  constructor(title: string) {
+    this.title = title;
+    this.flipped = false
+  }
+
+  flip() {
+    this.flipped = !this.flipped;
+  }
+}

src/app/components/example-modules/memory-module/views/card.html

@@ -0,0 +1,6 @@
+<div class="container">
+  <div class="card" ng-class="{flipped: tile.flipped}">
+    <img class="front" ng-src="img/back.png">
+    <img class="back" ng-src="img/{{tile.title}}.png">
+  </div>
+</div>

src/app/components/example-modules/memory-module/views/css/memory.css

@@ -0,0 +1,61 @@
+.container {
+  width: 165px;
+  height: 200px;
+  position: relative;
+  -webkit-perspective: 800px;
+  -moz-perspective: 800px;
+  -ms-perspective: 800px;
+  -o-perspective: 800px;
+  perspective: 800px;
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  -webkit-transition: -webkit-transform 1s;
+  -moz-transition: -moz-transform 1s;
+  -ms-transition: -ms-transform 1s;
+  -o-transition: -o-transform 1s;
+  transition: transform 1s;
+  -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  -ms-transform-style: preserve-3d;
+  -o-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+}
+
+.card.flipped {
+  -webkit-transform: rotateY( 180deg );
+  -moz-transform: rotateY( 180deg );
+  -ms-transform: rotateY( 180deg );
+  -o-transform: rotateY( 180deg );
+  transform: rotateY( 180deg );
+}
+
+.card img {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+
+
+.card .back {
+  background: blue;
+  -webkit-transform: rotateY( 180deg );
+  -moz-transform: rotateY( 180deg );
+  -ms-transform: rotateY( 180deg );
+  -o-transform: rotateY( 180deg );
+  transform: rotateY( 180deg );
+}
+
+.message {
+  width: 660px;
+  text-align: center;
+}