Skip to content

Commit 6c2c87f

Browse files
remarcmijremarcmij
committed
Refactors the Cards example
1 parent 4be4d3c commit 6c2c87f

File tree

13 files changed

+164
-105
lines changed

13 files changed

+164
-105
lines changed

‎.vscode/settings.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
{
22
"cSpell.words": [
3+
"Goede",
34
"Protos",
45
"asynchronicity",
56
"campbells",
@@ -8,7 +9,9 @@
89
"onvoiceschanged",
910
"proto",
1011
"prototypal",
11-
"todos"
12+
"reis",
13+
"todos",
14+
"ziens"
1215
],
1316
"workbench.colorCustomizations": {}
1417
}

‎src/week3/7-oop/cards/Card.js‎

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

‎src/week3/7-oop/cards/app.js‎

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

‎src/week3/7-oop/cards/index.html‎

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

‎src/week3/7-oop/cards/util.js‎

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

‎src/week3/7-oop/deal-poker-cards/App.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict';
2+
3+
{
4+
const { CardDeck, CardGame } = window;
5+
6+
class App {
7+
constructor() {
8+
const cardDeck = new CardDeck();
9+
this.game = new CardGame(cardDeck);
10+
}
11+
}
12+
13+
window.onload = () => new App();
14+
}

‎src/week3/7-oop/deal-poker-cards/Card.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
'use strict';
2+
3+
{
4+
const { createAndAppend } = window.Util;
5+
6+
class Card {
7+
static getCardHtml(rank, symbol) {
8+
return `
9+
<div class='card-row row-top'>
10+
<div class="card-text">
11+
<div>${rank}</div>
12+
<div class="card-symbol">${symbol}</div>
13+
</div>
14+
<div class="card-text">
15+
<div>${rank}</div>
16+
<div class="card-symbol">${symbol}</div>
17+
</div>
18+
</div>
19+
<div class='card-row row-bottom'>
20+
<div class="card-text">
21+
<div>${rank}</div>
22+
<div class="card-symbol">${symbol}</div>
23+
</div>
24+
<div class="card-text">
25+
<div>${rank}</div>
26+
<div class="card-symbol">${symbol}</div>
27+
</div>
28+
</div>`;
29+
}
30+
31+
constructor(symbol, color, rank) {
32+
this.symbol = symbol;
33+
this.color = color;
34+
this.rank = rank;
35+
}
36+
37+
render(container) {
38+
const cardContainer = createAndAppend('div', container, {
39+
class: 'card-container',
40+
style: `color: ${this.color}`,
41+
});
42+
cardContainer.innerHTML = Card.getCardHtml(this.rank, this.symbol);
43+
}
44+
}
45+
46+
window.Card = Card;
47+
}

src/week3/7-oop/cards/CardDeck.js renamed to src/week3/7-oop/deal-poker-cards/CardDeck.js

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,41 @@
1-
/* global createAndAppend, createCard */
2-
31
'use strict';
42

53
{
4+
const {
5+
Card,
6+
Util: { createAndAppend },
7+
} = window;
8+
69
const CARD_SUITS = [
710
{ symbol: '♦️', color: 'red' },
811
{ symbol: '♠️', color: 'black' },
912
{ symbol: '♥️', color: 'red' },
1013
{ symbol: '♣️', color: 'black' },
1114
];
1215

13-
const CARD_RANKS = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
16+
const CARD_RANKS = [
17+
'2',
18+
'3',
19+
'4',
20+
'5',
21+
'6',
22+
'7',
23+
'8',
24+
'9',
25+
'10',
26+
'J',
27+
'Q',
28+
'K',
29+
'A',
30+
];
1431

1532
class CardDeck {
1633
constructor() {
1734
this.allCards = [];
1835
CARD_SUITS.forEach(suit => {
19-
const suitCards = CARD_RANKS.map(rank => createCard(suit.symbol, suit.color, rank));
36+
const suitCards = CARD_RANKS.map(
37+
rank => new Card(suit.symbol, suit.color, rank),
38+
);
2039
this.allCards = this.allCards.concat(suitCards);
2140
});
2241
this.cards = this.allCards.slice();
@@ -47,5 +66,5 @@
4766
}
4867
}
4968

50-
window.createCardDeck = () => new CardDeck();
69+
window.CardDeck = CardDeck;
5170
}

src/week3/7-oop/cards/CardGame.js renamed to src/week3/7-oop/deal-poker-cards/CardGame.js

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
1-
/* global createAndAppend */
2-
31
'use strict';
42

53
{
64
const DEAL_COUNT = 5;
7-
const DEAL_LABELS = ['1ST', '2ND', '3RD', '4TH', '5TH', '6TH', '7TH', '8TH', '9TH', '10TH'];
5+
const DEAL_LABELS = [
6+
'1ST',
7+
'2ND',
8+
'3RD',
9+
'4TH',
10+
'5TH',
11+
'6TH',
12+
'7TH',
13+
'8TH',
14+
'9TH',
15+
'10TH',
16+
];
17+
18+
const { createAndAppend } = window.Util;
819

920
class CardGame {
1021
constructor(cardDeck) {
@@ -65,5 +76,5 @@
6576
}
6677
}
6778

68-
window.createCardGame = cardDeck => new CardGame(cardDeck);
79+
window.CardGame = CardGame;
6980
}

‎src/week3/7-oop/deal-poker-cards/README.md‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Deal Poker Cards
2+
3+
> [Wikipedia](https://en.wikipedia.org/wiki/Poker): _Poker is a family of card games that combines gambling, strategy, and skill._
4+
5+
In this example five playing cards at a time are randomly drawn from a deck of 52 cards until no more cards can be drawn.
6+
7+
The application is made up of five classes:
8+
9+
| Class name | Description |
10+
| ---------- | ----------- |
11+
| Card | Represent a single card in a card deck. |
12+
| CardDeck | Represents a deck of cards with four suits (Hearts, Tiles, Clovers and Pikes). |
13+
| CardGame | Represents the View (i.e. the UI) of the game. |
14+
| App | Container class for the application. |
15+
| Util | A static class with utility functions. |
16+

0 commit comments

Comments
 (0)