Skip to content

Commit 8f43347

Browse files
opiepjopiepj
committed
(#12) Memory game module.
1 parent 96df1f1 commit 8f43347

File tree

18 files changed

+247
-224
lines changed

18 files changed

+247
-224
lines changed

‎src/app/components/app.html‎

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
<header>
2-
<div layout="row" class="top-nav ac-default-theme">
3-
<a href="https://github.com/1337programming/angular2.0-App">
4-
<img src="angularjs-logo_patrick.png" alt="AngularP" height="54" width="54">
5-
</a>
6-
<span class="logo">{{ name | capitalize }} + Patrick + Webpack</span>
7-
<ul>
8-
<li class="l-left">
9-
<a [router-link]=" ['/home'] "class="top-nav-button ac-default-theme">Home</a>
10-
</li>
11-
<li class="l-left">
12-
<a [router-link]=" ['/dashboard'] "class="top-nav-button ac-default-theme">Dashboard</a>
13-
</li>
14-
<li class="l-left">
15-
<a [router-link]=" ['/example-modules', 'search'] "class="top-nav-button ac-default-theme">Modules</a>
16-
</li>
17-
<li class="l-left">
18-
<img src="angular-shield.png" alt="Angular2" height="54" width="54">
19-
</li>
20-
<li class="l-left">
21-
<img src="webpack.png" alt="Webpack" height="54" width="54">
22-
</li>
23-
</ul>
24-
</div>
25-
</header>
26-
27-
<main>
28-
<router-outlet></router-outlet>
29-
</main>
30-
31-
<footer>
32-
</footer>
1+
<header>
2+
<div layout="row" class="top-nav ac-default-theme">
3+
<a href="https://github.com/1337programming/angular2.0-App">
4+
<img src="angularjs-logo_patrick.png" alt="AngularP" height="54" width="54">
5+
</a>
6+
<span class="logo">{{ name | capitalize }} + Patrick + Webpack</span>
7+
<ul>
8+
<li class="l-left">
9+
<a [router-link]=" ['/home'] "class="top-nav-button ac-default-theme">Home</a>
10+
</li>
11+
<li class="l-left">
12+
<a [router-link]=" ['/dashboard'] "class="top-nav-button ac-default-theme">Dashboard</a>
13+
</li>
14+
<li class="l-left">
15+
<a [router-link]=" ['/example-modules', 'search'] "class="top-nav-button ac-default-theme">Modules</a>
16+
</li>
17+
<li class="l-left">
18+
<img src="angular-shield.png" alt="Angular2" height="54" width="54">
19+
</li>
20+
<li class="l-left">
21+
<img src="webpack.png" alt="Webpack" height="54" width="54">
22+
</li>
23+
</ul>
24+
</div>
25+
</header>
26+
27+
<main>
28+
<router-outlet></router-outlet>
29+
</main>
30+
31+
<footer>
32+
</footer>

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

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
1-
<div layout="row">
2-
<nav class="side-nav l-pinned-left l-layer-4 l-offset-nav">
3-
<ul class="example-modules-menu">
4-
<li>
5-
<a class="ac-button ac-default-theme"
6-
[router-link]=" ['./search'] "
7-
(click)="active = 0"
8-
[class.active]="active === 0">
9-
Search Github
10-
</a>
11-
</li>
12-
<li>
13-
<a class="ac-button md-default-theme"
14-
[router-link]=" ['./tictactoe'] "
15-
(click)="active = 2"
16-
[class.active]="active === 2">Tic tac toe</a>
17-
</li>
18-
<li>
19-
<a class="ac-button md-default-theme"
20-
[router-link]=" ['./memory'] "
21-
(click)="active = 2"
22-
[class.active]="active === 2">Memory Game</a>
23-
</li>
24-
</ul>
25-
</nav>
26-
27-
<div layout="column" class="wide">
28-
<div class="example-modules-content">
29-
<router-outlet></router-outlet>
30-
</div>
31-
</div>
32-
33-
</div>
1+
<div layout="row">
2+
<nav class="side-nav l-pinned-left l-layer-4 l-offset-nav">
3+
<ul class="example-modules-menu">
4+
<li>
5+
<a class="ac-button ac-default-theme"
6+
[router-link]=" ['./search'] "
7+
(click)="active = 0"
8+
[class.active]="active === 0">
9+
Search Github
10+
</a>
11+
</li>
12+
<li>
13+
<a class="ac-button md-default-theme"
14+
[router-link]=" ['./tictactoe'] "
15+
(click)="active = 2"
16+
[class.active]="active === 2">Tic tac toe</a>
17+
</li>
18+
<li>
19+
<a class="ac-button md-default-theme"
20+
[router-link]=" ['./memory'] "
21+
(click)="active = 2"
22+
[class.active]="active === 2">Memory Game</a>
23+
</li>
24+
</ul>
25+
</nav>
26+
27+
<div layout="column" class="wide">
28+
<div class="example-modules-content">
29+
<router-outlet></router-outlet>
30+
</div>
31+
</div>
32+
33+
</div>

‎src/app/components/example-modules/memory-module/directives/card.ts‎ renamed to ‎src/app/components/example-modules/memory-module/directives/board.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,18 @@
44
import {Component, View, EventEmitter, coreDirectives} from 'angular2/angular2';
55

66
let styles = require('../views/css/memory.css');
7-
let template = require('../views/card.html');
7+
let template = require('../views/board.html');
88

99
@Component({
10-
selector: 'card',
11-
properties: [ 'card' ],
10+
selector: 'board',
11+
properties: [ 'board' ],
1212
events: [ 'select' ]
1313
})
1414
@View({
1515
directives: [ coreDirectives ],
1616
styles: [styles],
1717
template: template
1818
})
19-
export class Card {
19+
export class Board {
2020
select: EventEmitter = new EventEmitter();
2121
}

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

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
/// <reference path="../../../../typings/_custom.d.ts" />
2-
3-
// Angular 2
4-
import {Component, View, coreDirectives} from 'angular2/angular2';
5-
6-
// Services
7-
import {Game} from './services/game';
8-
9-
// Directives
10-
import {Card} from './directives/card';
11-
12-
// View
13-
let view = require('./views/memory.html');
14-
15-
@Component({
16-
selector: 'memory',
17-
viewBindings: [Game]
18-
})
19-
@View({
20-
directives: [coreDirectives, Card],
21-
template: view
22-
})
23-
export class Memory {
24-
constructor(public game: Game) {
25-
26-
}
27-
28-
reset() {
29-
this.game = Game.create();
30-
}
31-
}
1+
/// <reference path="../../../../typings/_custom.d.ts" />
2+
3+
// Angular 2
4+
import {Component, View, coreDirectives} from 'angular2/angular2';
5+
6+
// Services
7+
import {MemoryGame} from './services/game';
8+
9+
// Directives
10+
import {Board} from './directives/board';
11+
12+
// View
13+
let view = require('./views/memory.html');
14+
15+
@Component({
16+
selector: 'memory',
17+
viewBindings: [MemoryGame]
18+
})
19+
@View({
20+
directives: [coreDirectives, Board],
21+
template: view
22+
})
23+
24+
export class Memory {
25+
game: MemoryGame;
26+
tileNames: Array<string>;
27+
constructor() {
28+
this.tileNames = ['8-ball', 'kronos', 'baked-potato', 'dinosaur', 'rocket', 'skinny-unicorn',
29+
'that-guy', 'zeppelin'];
30+
this.game = new MemoryGame(this.tileNames);
31+
}
32+
}

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

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@
33
import {Injectable} from 'angular2/angular2';
44
import {Tile} from '../services/tile';
55

6-
var tileNames = ['8-ball', 'kronos', 'baked-potato', 'dinosaur', 'rocket', 'skinny-unicorn',
7-
'that-guy', 'zeppelin'];
6+
87
var message = {
98
CLICK:'Click on a tile.',
109
ONE_MORE:'Pick one more card',
@@ -14,53 +13,49 @@ var message = {
1413
};
1514

1615
@Injectable()
17-
export class Game {
16+
export class MemoryGame {
1817
tileDeck: Array<Tile>;
19-
firstPick: Tile;
20-
grid: any;
21-
secondPick: Tile;
18+
grid: Tile[][];
2219
message: string;
2320
unmatchedPairs: number;
21+
private _firstPick: Tile;
22+
private _secondPick: Tile;
2423

25-
constructor(tileNames) {
26-
this.tileDeck = this.makeDeck(tileNames);
24+
constructor(tileNames: Array<string>) {
25+
this._firstPick = new Tile('');
26+
this._secondPick = new Tile('');
27+
this.tileDeck = MemoryGame.makeDeck(tileNames);
2728
this.message = message.CLICK;
2829
this.unmatchedPairs = tileNames.length;
29-
this.firstPick = null;
30-
this.secondPick = null;
31-
this.grid = this.makeGrid(this.tileDeck);
32-
}
33-
34-
public static create(): Game {
35-
return new Game(tileNames);
30+
this.grid = MemoryGame.makeGrid(this.tileDeck);
3631
}
3732

38-
makeDeck(tileNames) {
33+
static makeDeck(tileNames) {
3934
var tileDeck: Array<Tile> = [];
40-
for (name in tileNames) {
41-
tileDeck.push(new Tile(name));
42-
tileDeck.push(new Tile(name));
35+
for (var i:number = 0; i < tileNames.length; i++) {
36+
tileDeck.push(new Tile(tileNames[i]));
37+
tileDeck.push(new Tile(tileNames[i]));
4338
}
4439

4540
return tileDeck;
4641
}
4742

48-
makeGrid(tileDeck) {
43+
static makeGrid(tileDeck) {
4944
var gridDimension = Math.sqrt(tileDeck.length);
50-
var grid = [];
45+
var grid:Array<Tile[]> = [];
5146

52-
for (var row = 0; row < gridDimension; row++) {
47+
for (var row:number = 0; row < gridDimension; row++) {
5348
grid[row] = [];
54-
for (var col = 0; col < gridDimension; col++) {
55-
grid[row][col] = this.removeRandomTile(tileDeck);
49+
for (var col:number = 0; col < gridDimension; col++) {
50+
grid[row][col] = MemoryGame.removeRandomTile(tileDeck);
5651
}
5752
}
5853

5954
return grid;
6055
}
6156

62-
removeRandomTile(tileDeck) {
63-
var i = Math.floor(Math.random()*tileDeck.length);
57+
static removeRandomTile(tileDeck) {
58+
var i:number = Math.floor(Math.random()*tileDeck.length);
6459
return tileDeck.splice(i, 1)[0];
6560
}
6661

@@ -71,28 +66,43 @@ export class Game {
7166

7267
tile.flip();
7368

74-
if(!this.firstPick || this.secondPick) {
69+
if(!this._firstPick || this._secondPick) {
7570

76-
if (this.secondPick) {
77-
this.firstPick.flip();
78-
this.secondPick.flip();
79-
this.firstPick = this.secondPick = undefined;
71+
if (this._secondPick) {
72+
this._firstPick.flip();
73+
this._secondPick.flip();
74+
this._firstPick = this._secondPick = undefined;
8075
}
8176

82-
this.firstPick = tile;
77+
this._firstPick = tile;
8378
this.message = message.ONE_MORE;
8479

8580
} else {
86-
if (this.firstPick.title === tile.title) {
81+
if (this._firstPick.title === tile.title) {
8782
this.unmatchedPairs--;
8883
if (this.unmatchedPairs > 0) {
8984
this.message = message.WON;
9085
}
91-
this.firstPick = this.secondPick = undefined;
86+
this._firstPick = this._secondPick = undefined;
9287
} else {
93-
this.secondPick = tile;
88+
this._secondPick = tile;
9489
this.message = message.MISS;
9590
}
9691
}
9792
}
93+
94+
public get secondPick():Tile {
95+
return this._secondPick;
96+
}
97+
98+
public set secondPick(value:Tile) {
99+
this._secondPick = value;
100+
}
101+
public get firstPick():Tile {
102+
return this._firstPick;
103+
}
104+
105+
public set firstPick(value:Tile) {
106+
this._firstPick = value;
107+
}
98108
}

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
2+

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

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)