Skip to content

Commit 861ca84

Browse files
thomaswmanionthomaswmanion
committed
2 parents b500acf + 0600197 commit 861ca84

File tree

20 files changed

+349
-60
lines changed

20 files changed

+349
-60
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
"exports-loader": "^0.6.2",
4646
"expose-loader": "^0.7.0",
4747
"file-loader": "^0.8.1",
48+
"gulp": "^3.9.0",
4849
"gulp-clean": "^0.3.1",
4950
"gulp-util": "^3.0.6",
5051
"imports-loader": "^0.6.3",

‎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 & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +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-
</ul>
19-
</nav>
20-
21-
<div layout="column" class="wide">
22-
<div class="example-modules-content">
23-
<router-outlet></router-outlet>
24-
</div>
25-
</div>
26-
27-
</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/example-modules.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {RouteConfig, routerDirectives} from 'angular2/router';
66
// Modules
77
import {Tictactoe} from './tictactoe-module/tictactoe';
88
import {Search} from './search-module/search';
9+
import {Memory} from './memory-module/memory';
910
// View
1011
let template = require('./example-modules.html');
1112
let styles = require('./example-modules.css')
@@ -15,7 +16,8 @@ let styles = require('./example-modules.css')
1516
@RouteConfig([
1617
{ path: '/', redirectTo: '/search' },
1718
{ path: '/search', as: 'search', component: Search },
18-
{ path: '/tictactoe', as: 'tictactoe', component: Tictactoe }
19+
{ path: '/tictactoe', as: 'tictactoe', component: Tictactoe },
20+
{ path: '/memory', as: 'memory', component: Memory }
1921
])
2022
@View({
2123
directives: [ routerDirectives, CSSClass ],

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

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference path="../../../../../typings/_custom.d.ts" />
2+
3+
// Angular 2
4+
import {Component, View, EventEmitter, coreDirectives} from 'angular2/angular2';
5+
6+
let styles = require('../views/css/memory.css');
7+
let template = require('../views/board.html');
8+
9+
@Component({
10+
selector: 'board',
11+
properties: [ 'board' ],
12+
events: [ 'select' ]
13+
})
14+
@View({
15+
directives: [ coreDirectives ],
16+
styles: [styles],
17+
template: template
18+
})
19+
export class Board {
20+
select: EventEmitter = new EventEmitter();
21+
}

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +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 {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: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
/// <reference path="../../../../../typings/_custom.d.ts" />
2+
3+
import {Injectable} from 'angular2/angular2';
4+
import {Tile} from '../services/tile';
5+
6+
7+
var message = {
8+
CLICK:'Click on a tile.',
9+
ONE_MORE:'Pick one more card',
10+
MISS: 'Try again',
11+
MATCH: 'Good job! Keep going.',
12+
WON: 'You win!'
13+
};
14+
15+
@Injectable()
16+
export class MemoryGame {
17+
tileDeck: Array<Tile>;
18+
grid: Tile[][];
19+
message: string;
20+
unmatchedPairs: number;
21+
private _firstPick: Tile;
22+
private _secondPick: Tile;
23+
24+
constructor(tileNames: Array<string>) {
25+
this._firstPick = new Tile('');
26+
this._secondPick = new Tile('');
27+
this.tileDeck = MemoryGame.makeDeck(tileNames);
28+
this.message = message.CLICK;
29+
this.unmatchedPairs = tileNames.length;
30+
this.grid = MemoryGame.makeGrid(this.tileDeck);
31+
}
32+
33+
static makeDeck(tileNames) {
34+
var tileDeck: Array<Tile> = [];
35+
for (var i:number = 0; i < tileNames.length; i++) {
36+
tileDeck.push(new Tile(tileNames[i]));
37+
tileDeck.push(new Tile(tileNames[i]));
38+
}
39+
40+
return tileDeck;
41+
}
42+
43+
static makeGrid(tileDeck) {
44+
var gridDimension = Math.sqrt(tileDeck.length);
45+
var grid:Array<Tile[]> = [];
46+
47+
for (var row:number = 0; row < gridDimension; row++) {
48+
grid[row] = [];
49+
for (var col:number = 0; col < gridDimension; col++) {
50+
grid[row][col] = MemoryGame.removeRandomTile(tileDeck);
51+
}
52+
}
53+
54+
return grid;
55+
}
56+
57+
static removeRandomTile(tileDeck) {
58+
var i:number = Math.floor(Math.random()*tileDeck.length);
59+
return tileDeck.splice(i, 1)[0];
60+
}
61+
62+
flipTile(tile) {
63+
if (tile.flipped) {
64+
return;
65+
}
66+
67+
tile.flip();
68+
69+
if(!this._firstPick || this._secondPick) {
70+
71+
if (this._secondPick) {
72+
this._firstPick.flip();
73+
this._secondPick.flip();
74+
this._firstPick = this._secondPick = undefined;
75+
}
76+
77+
this._firstPick = tile;
78+
this.message = message.ONE_MORE;
79+
80+
} else {
81+
if (this._firstPick.title === tile.title) {
82+
this.unmatchedPairs--;
83+
if (this.unmatchedPairs > 0) {
84+
this.message = message.WON;
85+
}
86+
this._firstPick = this._secondPick = undefined;
87+
} else {
88+
this._secondPick = tile;
89+
this.message = message.MISS;
90+
}
91+
}
92+
}
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+
}
108+
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/// <reference path="../../../../../typings/_custom.d.ts" />
2+
3+
import {Injectable} from 'angular2/angular2';
4+
5+
@Injectable()
6+
export class Tile {
7+
title: string;
8+
flipped: boolean;
9+
10+
constructor(title: string) {
11+
this.title = title;
12+
this.flipped = false
13+
}
14+
15+
flip() {
16+
this.flipped = !this.flipped;
17+
}
18+
}

‎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+

0 commit comments

Comments
 (0)