13 |
39 |
40 |
--------------------------------------------------------------------------------
/27-28-calculator/after/script.js:
--------------------------------------------------------------------------------
1 | import Calculator from "./Calculator.js"
2 |
3 | const primaryOperandDisplay = document.querySelector("[data-primary-operand]")
4 | const secondaryOperandDisplay = document.querySelector(
5 | "[data-secondary-operand]"
6 | )
7 | const operationDisplay = document.querySelector("[data-operation]")
8 |
9 | const calculator = new Calculator(
10 | primaryOperandDisplay,
11 | secondaryOperandDisplay,
12 | operationDisplay
13 | )
14 |
15 | document.addEventListener("click", e => {
16 | if (e.target.matches("[data-all-clear]")) {
17 | calculator.clear()
18 | }
19 | if (e.target.matches("[data-number]")) {
20 | calculator.addDigit(e.target.textContent)
21 | }
22 | if (e.target.matches("[data-delete]")) {
23 | calculator.removeDigit()
24 | }
25 | if (e.target.matches("[data-operation]")) {
26 | calculator.chooseOperation(e.target.textContent)
27 | }
28 | if (e.target.matches("[data-equals]")) {
29 | calculator.evaluate()
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/27-28-calculator/after/styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after {
2 | box-sizing: border-box;
3 | font-family: Gotham Rounded, sans-serif;
4 | font-weight: normal;
5 | }
6 |
7 | body {
8 | padding: 0;
9 | margin: 0;
10 | background: linear-gradient(to right, #7700ff, #008cff);
11 | }
12 |
13 | .calculator-grid {
14 | display: grid;
15 | justify-content: center;
16 | align-content: center;
17 | min-height: 100vh;
18 | grid-template-columns: repeat(4, 100px);
19 | grid-template-rows: minmax(120px, auto) repeat(5, 100px);
20 | }
21 |
22 | .calculator-grid > button {
23 | cursor: pointer;
24 | font-size: 2rem;
25 | border: 1px solid white;
26 | outline: none;
27 | background-color: rgba(255, 255, 255, .75);
28 | }
29 |
30 | .calculator-grid > button:hover {
31 | background-color: rgba(255, 255, 255, .9);
32 | }
33 |
34 | .span-two {
35 | grid-column: span 2;
36 | }
37 |
38 | .output {
39 | grid-column: 1 / -1;
40 | background-color: rgba(0, 0, 0, .75);
41 | display: flex;
42 | align-items: flex-end;
43 | justify-content: space-around;
44 | flex-direction: column;
45 | padding: 10px;
46 | word-wrap: break-word;
47 | word-break: break-all;
48 | }
49 |
50 | .output .history {
51 | color: rgba(255, 255, 255, .75);
52 | font-size: 1.5rem;
53 | display: flex;
54 | }
55 |
56 | .output .secondary-operand {
57 | margin-right: 7px;
58 | }
59 |
60 | .output .primary-operand {
61 | color: white;
62 | font-size: 2.5rem;
63 | }
--------------------------------------------------------------------------------
/27-28-calculator/before/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
15 |
16 |
17 |
18 |
19 |
12 |
38 |
39 |
--------------------------------------------------------------------------------
/27-28-calculator/before/styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after {
2 | box-sizing: border-box;
3 | font-family: Gotham Rounded, sans-serif;
4 | font-weight: normal;
5 | }
6 |
7 | body {
8 | padding: 0;
9 | margin: 0;
10 | background: linear-gradient(to right, #7700ff, #008cff);
11 | }
12 |
13 | .calculator-grid {
14 | display: grid;
15 | justify-content: center;
16 | align-content: center;
17 | min-height: 100vh;
18 | grid-template-columns: repeat(4, 100px);
19 | grid-template-rows: minmax(120px, auto) repeat(5, 100px);
20 | }
21 |
22 | .calculator-grid > button {
23 | cursor: pointer;
24 | font-size: 2rem;
25 | border: 1px solid white;
26 | outline: none;
27 | background-color: rgba(255, 255, 255, .75);
28 | }
29 |
30 | .calculator-grid > button:hover {
31 | background-color: rgba(255, 255, 255, .9);
32 | }
33 |
34 | .span-two {
35 | grid-column: span 2;
36 | }
37 |
38 | .output {
39 | grid-column: 1 / -1;
40 | background-color: rgba(0, 0, 0, .75);
41 | display: flex;
42 | align-items: flex-end;
43 | justify-content: space-around;
44 | flex-direction: column;
45 | padding: 10px;
46 | word-wrap: break-word;
47 | word-break: break-all;
48 | }
49 |
50 | .output .history {
51 | color: rgba(255, 255, 255, .75);
52 | font-size: 1.5rem;
53 | display: flex;
54 | }
55 |
56 | .output .secondary-operand {
57 | margin-right: 7px;
58 | }
59 |
60 | .output .primary-operand {
61 | color: white;
62 | font-size: 2.5rem;
63 | }
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "@babel/plugin-proposal-optional-chaining"
4 | ]
5 | }
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
13 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
14 |
15 |
16 |
17 |
18 | Minesweeper
12 |
13 | Mines Left:
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/minesweeper.js:
--------------------------------------------------------------------------------
1 | import { times, range } from "lodash/fp"
2 |
3 | export const TILE_STATUSES = {
4 | HIDDEN: "hidden",
5 | MINE: "mine",
6 | NUMBER: "number",
7 | MARKED: "marked",
8 | }
9 |
10 | export function createBoard(boardSize, minePositions) {
11 | return times(x => {
12 | return times(y => {
13 | return {
14 | x,
15 | y,
16 | mine: minePositions.some(positionMatch.bind(null, { x, y })),
17 | status: TILE_STATUSES.HIDDEN,
18 | }
19 | }, boardSize)
20 | }, boardSize)
21 | }
22 |
23 | export function markedTilesCount(board) {
24 | return board.reduce((count, row) => {
25 | return (
26 | count + row.filter(tile => tile.status === TILE_STATUSES.MARKED).length
27 | )
28 | }, 0)
29 | }
30 |
31 | export function markTile(board, { x, y }) {
32 | const tile = board[x][y]
33 | if (
34 | tile.status !== TILE_STATUSES.HIDDEN &&
35 | tile.status !== TILE_STATUSES.MARKED
36 | ) {
37 | return board
38 | }
39 |
40 | if (tile.status === TILE_STATUSES.MARKED) {
41 | return replaceTile(
42 | board,
43 | { x, y },
44 | { ...tile, status: TILE_STATUSES.HIDDEN }
45 | )
46 | } else {
47 | return replaceTile(
48 | board,
49 | { x, y },
50 | { ...tile, status: TILE_STATUSES.MARKED }
51 | )
52 | }
53 | }
54 |
55 | function replaceTile(board, position, newTile) {
56 | return board.map((row, x) => {
57 | return row.map((tile, y) => {
58 | if (positionMatch(position, { x, y })) {
59 | return newTile
60 | }
61 | return tile
62 | })
63 | })
64 | }
65 |
66 | export function revealTile(board, { x, y }) {
67 | const tile = board[x][y]
68 | if (tile.status !== TILE_STATUSES.HIDDEN) {
69 | return board
70 | }
71 |
72 | if (tile.mine) {
73 | return replaceTile(board, { x, y }, { ...tile, status: TILE_STATUSES.MINE })
74 | }
75 |
76 | const adjacentTiles = nearbyTiles(board, tile)
77 | const mines = adjacentTiles.filter(t => t.mine)
78 | const newBoard = replaceTile(
79 | board,
80 | { x, y },
81 | { ...tile, status: TILE_STATUSES.NUMBER, adjacentMinesCount: mines.length }
82 | )
83 | if (mines.length === 0) {
84 | return adjacentTiles.reduce((b, t) => {
85 | return revealTile(b, t)
86 | }, newBoard)
87 | }
88 | return newBoard
89 | }
90 |
91 | export function checkWin(board) {
92 | return board.every(row => {
93 | return row.every(tile => {
94 | return (
95 | tile.status === TILE_STATUSES.NUMBER ||
96 | (tile.mine &&
97 | (tile.status === TILE_STATUSES.HIDDEN ||
98 | tile.status === TILE_STATUSES.MARKED))
99 | )
100 | })
101 | })
102 | }
103 |
104 | export function checkLose(board) {
105 | return board.some(row => {
106 | return row.some(tile => {
107 | return tile.status === TILE_STATUSES.MINE
108 | })
109 | })
110 | }
111 |
112 | export function positionMatch(a, b) {
113 | return a.x === b.x && a.y === b.y
114 | }
115 |
116 | function nearbyTiles(board, { x, y }) {
117 | const offsets = range(-1, 2)
118 |
119 | return offsets
120 | .flatMap(xOffset => {
121 | return offsets.map(yOffset => {
122 | return board[x + xOffset]?.[y + yOffset]
123 | })
124 | })
125 | .filter(tile => tile != null)
126 | }
127 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "minesweeper.js",
6 | "scripts": {
7 | "build": "parcel build index.html",
8 | "start": "parcel index.html"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "lodash": "^4.17.21"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.13.8",
18 | "@babel/plugin-proposal-optional-chaining": "^7.13.8",
19 | "parcel-bundler": "1.12.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/script.js:
--------------------------------------------------------------------------------
1 | // Display/UI
2 |
3 | import {
4 | TILE_STATUSES,
5 | createBoard,
6 | markTile,
7 | revealTile,
8 | checkWin,
9 | checkLose,
10 | positionMatch,
11 | markedTilesCount,
12 | } from "./minesweeper.js"
13 |
14 | const BOARD_SIZE = 10
15 | const NUMBER_OF_MINES = 3
16 |
17 | let board = createBoard(
18 | BOARD_SIZE,
19 | getMinePositions(BOARD_SIZE, NUMBER_OF_MINES)
20 | )
21 | const boardElement = document.querySelector(".board")
22 | const minesLeftText = document.querySelector("[data-mine-count]")
23 | const messageText = document.querySelector(".subtext")
24 |
25 | function render() {
26 | boardElement.innerHTML = ""
27 | checkGameEnd()
28 |
29 | getTileElements().forEach(element => {
30 | boardElement.append(element)
31 | })
32 |
33 | listMinesLeft()
34 | }
35 |
36 | function getTileElements() {
37 | return board.flatMap(row => {
38 | return row.map(tileToElement)
39 | })
40 | }
41 |
42 | function tileToElement(tile) {
43 | const element = document.createElement("div")
44 | element.dataset.status = tile.status
45 | element.dataset.x = tile.x
46 | element.dataset.y = tile.y
47 | element.textContent = tile.adjacentMinesCount || ""
48 | return element
49 | }
50 |
51 | boardElement.addEventListener("click", e => {
52 | if (!e.target.matches("[data-status]")) return
53 |
54 | board = revealTile(board, {
55 | x: parseInt(e.target.dataset.x),
56 | y: parseInt(e.target.dataset.y),
57 | })
58 | render()
59 | })
60 |
61 | boardElement.addEventListener("contextmenu", e => {
62 | if (!e.target.matches("[data-status]")) return
63 |
64 | e.preventDefault()
65 | board = markTile(board, {
66 | x: parseInt(e.target.dataset.x),
67 | y: parseInt(e.target.dataset.y),
68 | })
69 | render()
70 | })
71 |
72 | boardElement.style.setProperty("--size", BOARD_SIZE)
73 | render()
74 |
75 | function listMinesLeft() {
76 | minesLeftText.textContent = NUMBER_OF_MINES - markedTilesCount(board)
77 | }
78 |
79 | function checkGameEnd() {
80 | const win = checkWin(board)
81 | const lose = checkLose(board)
82 |
83 | if (win || lose) {
84 | boardElement.addEventListener("click", stopProp, { capture: true })
85 | boardElement.addEventListener("contextmenu", stopProp, { capture: true })
86 | }
87 |
88 | if (win) {
89 | messageText.textContent = "You Win"
90 | }
91 | if (lose) {
92 | messageText.textContent = "You Lose"
93 | board.forEach(row => {
94 | row.forEach(tile => {
95 | if (tile.status === TILE_STATUSES.MARKED) board = markTile(board, tile)
96 | if (tile.mine) board = revealTile(board, tile)
97 | })
98 | })
99 | }
100 | }
101 |
102 | function stopProp(e) {
103 | e.stopImmediatePropagation()
104 | }
105 |
106 | function getMinePositions(boardSize, numberOfMines) {
107 | const positions = []
108 |
109 | while (positions.length < numberOfMines) {
110 | const position = {
111 | x: randomNumber(boardSize),
112 | y: randomNumber(boardSize),
113 | }
114 |
115 | if (!positions.some(positionMatch.bind(null, position))) {
116 | positions.push(position)
117 | }
118 | }
119 |
120 | return positions
121 | }
122 |
123 | function randomNumber(size) {
124 | return Math.floor(Math.random() * size)
125 | }
126 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/after/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background-color: #333;
8 | display: flex;
9 | align-items: center;
10 | font-size: 3rem;
11 | flex-direction: column;
12 | color: white;
13 | }
14 |
15 | .title {
16 | margin: 20px;
17 | }
18 |
19 | .subtext {
20 | color: #CCC;
21 | font-size: 1.5rem;
22 | margin-bottom: 10px;
23 | }
24 |
25 | .board {
26 | display: inline-grid;
27 | padding: 10px;
28 | grid-template-columns: repeat(var(--size), 60px);
29 | grid-template-rows: repeat(var(--size), 60px);
30 | gap: 4px;
31 | background-color: #777;
32 | }
33 |
34 | .board > * {
35 | width: 100%;
36 | height: 100%;
37 | display: flex;
38 | justify-content: center;
39 | align-items: center;
40 | color: white;
41 | border: 2px solid #BBB;
42 | user-select: none;
43 | }
44 |
45 | .board > [data-status="hidden"] {
46 | background-color: #BBB;
47 | cursor: pointer;
48 | }
49 |
50 | .board > [data-status="mine"] {
51 | background-color: red;
52 | }
53 |
54 | .board > [data-status="number"] {
55 | background-color: none;
56 | }
57 |
58 | .board > [data-status="marked"] {
59 | background-color: yellow;
60 | }
--------------------------------------------------------------------------------
/35-minesweeper-fp/before/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Minesweeper
12 |
13 | Mines Left:
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/before/minesweeper.js:
--------------------------------------------------------------------------------
1 | // Logic
2 |
3 | export const TILE_STATUSES = {
4 | HIDDEN: "hidden",
5 | MINE: "mine",
6 | NUMBER: "number",
7 | MARKED: "marked",
8 | }
9 |
10 | export function createBoard(boardSize, numberOfMines) {
11 | const board = []
12 | const minePositions = getMinePositions(boardSize, numberOfMines)
13 |
14 | for (let x = 0; x < boardSize; x++) {
15 | const row = []
16 | for (let y = 0; y < boardSize; y++) {
17 | const element = document.createElement("div")
18 | element.dataset.status = TILE_STATUSES.HIDDEN
19 |
20 | const tile = {
21 | element,
22 | x,
23 | y,
24 | mine: minePositions.some(positionMatch.bind(null, { x, y })),
25 | get status() {
26 | return this.element.dataset.status
27 | },
28 | set status(value) {
29 | this.element.dataset.status = value
30 | },
31 | }
32 |
33 | row.push(tile)
34 | }
35 | board.push(row)
36 | }
37 |
38 | return board
39 | }
40 |
41 | export function markTile(tile) {
42 | if (
43 | tile.status !== TILE_STATUSES.HIDDEN &&
44 | tile.status !== TILE_STATUSES.MARKED
45 | ) {
46 | return
47 | }
48 |
49 | if (tile.status === TILE_STATUSES.MARKED) {
50 | tile.status = TILE_STATUSES.HIDDEN
51 | } else {
52 | tile.status = TILE_STATUSES.MARKED
53 | }
54 | }
55 |
56 | export function revealTile(board, tile) {
57 | if (tile.status !== TILE_STATUSES.HIDDEN) {
58 | return
59 | }
60 |
61 | if (tile.mine) {
62 | tile.status = TILE_STATUSES.MINE
63 | return
64 | }
65 |
66 | tile.status = TILE_STATUSES.NUMBER
67 | const adjacentTiles = nearbyTiles(board, tile)
68 | const mines = adjacentTiles.filter(t => t.mine)
69 | if (mines.length === 0) {
70 | adjacentTiles.forEach(revealTile.bind(null, board))
71 | } else {
72 | tile.element.textContent = mines.length
73 | }
74 | }
75 |
76 | export function checkWin(board) {
77 | return board.every(row => {
78 | return row.every(tile => {
79 | return (
80 | tile.status === TILE_STATUSES.NUMBER ||
81 | (tile.mine &&
82 | (tile.status === TILE_STATUSES.HIDDEN ||
83 | tile.status === TILE_STATUSES.MARKED))
84 | )
85 | })
86 | })
87 | }
88 |
89 | export function checkLose(board) {
90 | return board.some(row => {
91 | return row.some(tile => {
92 | return tile.status === TILE_STATUSES.MINE
93 | })
94 | })
95 | }
96 |
97 | function getMinePositions(boardSize, numberOfMines) {
98 | const positions = []
99 |
100 | while (positions.length < numberOfMines) {
101 | const position = {
102 | x: randomNumber(boardSize),
103 | y: randomNumber(boardSize),
104 | }
105 |
106 | if (!positions.some(positionMatch.bind(null, position))) {
107 | positions.push(position)
108 | }
109 | }
110 |
111 | return positions
112 | }
113 |
114 | function positionMatch(a, b) {
115 | return a.x === b.x && a.y === b.y
116 | }
117 |
118 | function randomNumber(size) {
119 | return Math.floor(Math.random() * size)
120 | }
121 |
122 | function nearbyTiles(board, { x, y }) {
123 | const tiles = []
124 |
125 | for (let xOffset = -1; xOffset <= 1; xOffset++) {
126 | for (let yOffset = -1; yOffset <= 1; yOffset++) {
127 | const tile = board[x + xOffset]?.[y + yOffset]
128 | if (tile) tiles.push(tile)
129 | }
130 | }
131 |
132 | return tiles
133 | }
134 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/before/script.js:
--------------------------------------------------------------------------------
1 | // Display/UI
2 |
3 | import {
4 | TILE_STATUSES,
5 | createBoard,
6 | markTile,
7 | revealTile,
8 | checkWin,
9 | checkLose,
10 | } from "./minesweeper.js"
11 |
12 | const BOARD_SIZE = 10
13 | const NUMBER_OF_MINES = 3
14 |
15 | const board = createBoard(BOARD_SIZE, NUMBER_OF_MINES)
16 | const boardElement = document.querySelector(".board")
17 | const minesLeftText = document.querySelector("[data-mine-count]")
18 | const messageText = document.querySelector(".subtext")
19 |
20 | board.forEach(row => {
21 | row.forEach(tile => {
22 | boardElement.append(tile.element)
23 | tile.element.addEventListener("click", () => {
24 | revealTile(board, tile)
25 | checkGameEnd()
26 | })
27 | tile.element.addEventListener("contextmenu", e => {
28 | e.preventDefault()
29 | markTile(tile)
30 | listMinesLeft()
31 | })
32 | })
33 | })
34 | boardElement.style.setProperty("--size", BOARD_SIZE)
35 | minesLeftText.textContent = NUMBER_OF_MINES
36 |
37 | function listMinesLeft() {
38 | const markedTilesCount = board.reduce((count, row) => {
39 | return (
40 | count + row.filter(tile => tile.status === TILE_STATUSES.MARKED).length
41 | )
42 | }, 0)
43 |
44 | minesLeftText.textContent = NUMBER_OF_MINES - markedTilesCount
45 | }
46 |
47 | function checkGameEnd() {
48 | const win = checkWin(board)
49 | const lose = checkLose(board)
50 |
51 | if (win || lose) {
52 | boardElement.addEventListener("click", stopProp, { capture: true })
53 | boardElement.addEventListener("contextmenu", stopProp, { capture: true })
54 | }
55 |
56 | if (win) {
57 | messageText.textContent = "You Win"
58 | }
59 | if (lose) {
60 | messageText.textContent = "You Lose"
61 | board.forEach(row => {
62 | row.forEach(tile => {
63 | if (tile.status === TILE_STATUSES.MARKED) markTile(tile)
64 | if (tile.mine) revealTile(board, tile)
65 | })
66 | })
67 | }
68 | }
69 |
70 | function stopProp(e) {
71 | e.stopImmediatePropagation()
72 | }
73 |
--------------------------------------------------------------------------------
/35-minesweeper-fp/before/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background-color: #333;
8 | display: flex;
9 | align-items: center;
10 | font-size: 3rem;
11 | flex-direction: column;
12 | color: white;
13 | }
14 |
15 | .title {
16 | margin: 20px;
17 | }
18 |
19 | .subtext {
20 | color: #CCC;
21 | font-size: 1.5rem;
22 | margin-bottom: 10px;
23 | }
24 |
25 | .board {
26 | display: inline-grid;
27 | padding: 10px;
28 | grid-template-columns: repeat(var(--size), 60px);
29 | grid-template-rows: repeat(var(--size), 60px);
30 | gap: 4px;
31 | background-color: #777;
32 | }
33 |
34 | .board > * {
35 | width: 100%;
36 | height: 100%;
37 | display: flex;
38 | justify-content: center;
39 | align-items: center;
40 | color: white;
41 | border: 2px solid #BBB;
42 | user-select: none;
43 | }
44 |
45 | .board > [data-status="hidden"] {
46 | background-color: #BBB;
47 | cursor: pointer;
48 | }
49 |
50 | .board > [data-status="mine"] {
51 | background-color: red;
52 | }
53 |
54 | .board > [data-status="number"] {
55 | background-color: none;
56 | }
57 |
58 | .board > [data-status="marked"] {
59 | background-color: yellow;
60 | }
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/.gitignore:
--------------------------------------------------------------------------------
1 | accounts
2 | node_modules
3 | coverage
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/Account.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 |
3 | module.exports = class Account {
4 | constructor(name) {
5 | this.#name = name
6 | }
7 |
8 | #name
9 | #balance
10 |
11 | get name() {
12 | return this.#name
13 | }
14 |
15 | get balance() {
16 | return this.#balance
17 | }
18 |
19 | get filePath() {
20 | return `accounts/${this.name}.txt`
21 | }
22 |
23 | async #load() {
24 | this.#balance = parseFloat(await FileSystem.read(this.filePath))
25 | }
26 |
27 | async withdraw(amount) {
28 | if (this.balance < amount) throw new Error()
29 | await FileSystem.write(this.filePath, this.#balance - amount)
30 | this.#balance = this.#balance - amount
31 | }
32 |
33 | async deposit(amount) {
34 | await FileSystem.write(this.filePath, this.#balance + amount)
35 | this.#balance = this.#balance + amount
36 | }
37 |
38 | static async find(accountName) {
39 | const account = new Account(accountName)
40 |
41 | try {
42 | await account.#load()
43 | return account
44 | } catch (e) {
45 | return
46 | }
47 | }
48 |
49 | static async create(accountName) {
50 | const account = new Account(accountName)
51 |
52 | await FileSystem.write(account.filePath, 0)
53 | account.#balance = 0
54 |
55 | return account
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/Account.test.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 | const Account = require("./Account")
3 |
4 | beforeEach(() => {
5 | jest.restoreAllMocks()
6 | })
7 |
8 | describe("#deposit", () => {
9 | test("it adds money to the account", async () => {
10 | const startingBalance = 5
11 | const amount = 10
12 | const account = await createAccount("Kyle", startingBalance)
13 | const spy = jest
14 | .spyOn(FileSystem, "write")
15 | .mockReturnValue(Promise.resolve())
16 |
17 | await account.deposit(amount)
18 | expect(account.balance).toBe(amount + startingBalance)
19 | expect(spy).toBeCalledWith(account.filePath, amount + startingBalance)
20 | })
21 | })
22 |
23 | describe("#withdraw", () => {
24 | test("it removes money from the account", async () => {
25 | const startingBalance = 10
26 | const amount = 5
27 | const account = await createAccount("Kyle", startingBalance)
28 | const spy = jest
29 | .spyOn(FileSystem, "write")
30 | .mockReturnValue(Promise.resolve())
31 |
32 | await account.withdraw(amount)
33 | expect(account.balance).toBe(startingBalance - amount)
34 | expect(spy).toBeCalledWith(account.filePath, startingBalance - amount)
35 | })
36 |
37 | describe("with not enough money in the account", () => {
38 | test("it should throw an error", async () => {
39 | const startingBalance = 5
40 | const amount = 10
41 | const account = await createAccount("Kyle", startingBalance)
42 | const spy = jest.spyOn(FileSystem, "write")
43 |
44 | await expect(account.withdraw(amount)).rejects.toThrow()
45 | expect(account.balance).toBe(startingBalance)
46 | expect(spy).not.toBeCalled()
47 | })
48 | })
49 | })
50 |
51 | async function createAccount(name, balance) {
52 | const spy = jest
53 | .spyOn(FileSystem, "read")
54 | .mockReturnValueOnce(Promise.resolve(balance))
55 | const account = await Account.find(name)
56 | spy.mockRestore()
57 | return account
58 | }
59 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/CommandLine.js:
--------------------------------------------------------------------------------
1 | const readline = require("readline")
2 |
3 | module.exports = class CommandLine {
4 | static ask(question) {
5 | const rl = readline.createInterface({
6 | input: process.stdin,
7 | output: process.stdout,
8 | })
9 |
10 | return new Promise(resolve => {
11 | rl.question(`${question} `, answer => {
12 | resolve(answer)
13 | rl.close()
14 | })
15 | })
16 | }
17 |
18 | static print(text) {
19 | console.log(text)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/FileSystem.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 |
3 | module.exports = class FileSystem {
4 | static read(path) {
5 | return new Promise((resolve, reject) => {
6 | fs.readFile(path, (err, data) => {
7 | if (err) return reject(err)
8 | resolve(data)
9 | })
10 | })
11 | }
12 |
13 | static write(path, content) {
14 | return new Promise((resolve, reject) => {
15 | fs.writeFile(path, content.toString(), err => {
16 | if (err) return reject(err)
17 | resolve()
18 | })
19 | })
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "Account.js",
6 | "scripts": {
7 | "test": "jest --coverage"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "jest": "^26.6.3"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/after/script.js:
--------------------------------------------------------------------------------
1 | const Account = require("./Account")
2 | const CommandLine = require("./CommandLine")
3 |
4 | async function main() {
5 | try {
6 | const accountName = await CommandLine.ask(
7 | "Which account would you like to access?"
8 | )
9 | const account = await Account.find(accountName)
10 | if (account == null) account = await promptCreateAccount(accountName)
11 | if (account != null) await promptTask(account)
12 | } catch (e) {
13 | CommandLine.print("ERROR: Please try again")
14 | }
15 | }
16 |
17 | async function promptCreateAccount(accountName) {
18 | const response = await CommandLine.ask(
19 | "That account does not exist. Would you like to create it? (yes/no)"
20 | )
21 |
22 | if (response === "yes") {
23 | return await Account.create(accountName)
24 | }
25 | }
26 |
27 | async function promptTask(account) {
28 | const response = await CommandLine.ask(
29 | "What would you like to do? (view/deposit/withdraw)"
30 | )
31 |
32 | if (response === "deposit") {
33 | const amount = parseFloat(await CommandLine.ask("How much?"))
34 | await account.deposit(amount)
35 | } else if (response === "withdraw") {
36 | const amount = parseFloat(await CommandLine.ask("How much?"))
37 | try {
38 | await account.withdraw(amount)
39 | } catch (e) {
40 | CommandLine.print(
41 | "We were unable to make the withdrawal. Please ensure you have enough money in your account."
42 | )
43 | }
44 | }
45 |
46 | CommandLine.print(`Your balance is ${account.balance}`)
47 | }
48 |
49 | main()
50 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/before/Account.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 |
3 | module.exports = class Account {
4 | constructor(name) {
5 | this.#name = name
6 | }
7 |
8 | #name
9 | #balance
10 |
11 | get name() {
12 | return this.#name
13 | }
14 |
15 | get balance() {
16 | return this.#balance
17 | }
18 |
19 | get filePath() {
20 | return `accounts/${this.name}.txt`
21 | }
22 |
23 | async #load() {
24 | this.#balance = parseFloat(await FileSystem.read(this.filePath))
25 | }
26 |
27 | async withdraw(amount) {
28 | if (this.balance < amount) throw new Error()
29 | await FileSystem.write(this.filePath, this.#balance - amount)
30 | this.#balance = this.#balance - amount
31 | }
32 |
33 | async deposit(amount) {
34 | await FileSystem.write(this.filePath, this.#balance + amount)
35 | this.#balance = this.#balance + amount
36 | }
37 |
38 | static async find(accountName) {
39 | const account = new Account(accountName)
40 |
41 | try {
42 | await account.#load()
43 | return account
44 | } catch (e) {
45 | return
46 | }
47 | }
48 |
49 | static async create(accountName) {
50 | const account = new Account(accountName)
51 |
52 | await FileSystem.write(account.filePath, 0)
53 | account.#balance = 0
54 |
55 | return account
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/before/CommandLine.js:
--------------------------------------------------------------------------------
1 | const readline = require("readline")
2 |
3 | module.exports = class CommandLine {
4 | static ask(question) {
5 | const rl = readline.createInterface({
6 | input: process.stdin,
7 | output: process.stdout,
8 | })
9 |
10 | return new Promise(resolve => {
11 | rl.question(`${question} `, answer => {
12 | resolve(answer)
13 | rl.close()
14 | })
15 | })
16 | }
17 |
18 | static print(text) {
19 | console.log(text)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/before/FileSystem.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 |
3 | module.exports = class FileSystem {
4 | static read(path) {
5 | return new Promise((resolve, reject) => {
6 | fs.readFile(path, (err, data) => {
7 | if (err) return reject(err)
8 | resolve(data)
9 | })
10 | })
11 | }
12 |
13 | static write(path, content) {
14 | return new Promise((resolve, reject) => {
15 | fs.writeFile(path, content.toString(), err => {
16 | if (err) return reject(err)
17 | resolve()
18 | })
19 | })
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/40-atm-unit-tests/before/script.js:
--------------------------------------------------------------------------------
1 | const Account = require("./Account")
2 | const CommandLine = require("./CommandLine")
3 |
4 | async function main() {
5 | try {
6 | const accountName = await CommandLine.ask(
7 | "Which account would you like to access?"
8 | )
9 | const account = await Account.find(accountName)
10 | if (account == null) account = await promptCreateAccount(accountName)
11 | if (account != null) await promptTask(account)
12 | } catch (e) {
13 | CommandLine.print("ERROR: Please try again")
14 | }
15 | }
16 |
17 | async function promptCreateAccount(accountName) {
18 | const response = await CommandLine.ask(
19 | "That account does not exist. Would you like to create it? (yes/no)"
20 | )
21 |
22 | if (response === "yes") {
23 | return await Account.create(accountName)
24 | }
25 | }
26 |
27 | async function promptTask(account) {
28 | const response = await CommandLine.ask(
29 | "What would you like to do? (view/deposit/withdraw)"
30 | )
31 |
32 | if (response === "deposit") {
33 | const amount = parseFloat(await CommandLine.ask("How much?"))
34 | await account.deposit(amount)
35 | } else if (response === "withdraw") {
36 | const amount = parseFloat(await CommandLine.ask("How much?"))
37 | try {
38 | await account.withdraw(amount)
39 | } catch (e) {
40 | CommandLine.print(
41 | "We were unable to make the withdrawal. Please ensure you have enough money in your account."
42 | )
43 | }
44 | }
45 |
46 | CommandLine.print(`Your balance is ${account.balance}`)
47 | }
48 |
49 | main()
50 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/.gitignore:
--------------------------------------------------------------------------------
1 | accounts
2 | node_modules
3 | coverage
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/Account.int.test.js:
--------------------------------------------------------------------------------
1 | const Account = require("./Account")
2 | const fs = require("fs")
3 |
4 | beforeEach(() => {
5 | try {
6 | fs.mkdirSync("accounts")
7 | } catch {
8 | // Ignore error since folder already exists
9 | }
10 | })
11 |
12 | afterEach(() => {
13 | fs.rmSync("accounts", { recursive: true, force: true })
14 | })
15 |
16 | describe(".create", () => {
17 | test("it creates a new account and file", async () => {
18 | const name = "Kyle"
19 | const account = await Account.create(name)
20 | expect(account.name).toBe(name)
21 | expect(account.balance).toBe(0)
22 | expect(fs.readFileSync(account.filePath).toString()).toBe("0")
23 | })
24 | })
25 |
26 | describe(".find", () => {
27 | test("it returns the account", async () => {
28 | const name = "Kyle"
29 | const balance = 10
30 | fs.writeFileSync(`accounts/${name}.txt`, balance.toString())
31 | const account = await Account.find(name)
32 | expect(account.name).toBe(name)
33 | expect(account.balance).toBe(balance)
34 | })
35 |
36 | describe("when there is no existing account", () => {
37 | test("it returns undefined", async () => {
38 | const name = "Kyle"
39 | const account = await Account.find(name)
40 | expect(account).toBeUndefined()
41 | })
42 | })
43 | })
44 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/Account.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 |
3 | module.exports = class Account {
4 | constructor(name) {
5 | this.#name = name
6 | }
7 |
8 | #name
9 | #balance
10 |
11 | get name() {
12 | return this.#name
13 | }
14 |
15 | get balance() {
16 | return this.#balance
17 | }
18 |
19 | get filePath() {
20 | return `accounts/${this.name}.txt`
21 | }
22 |
23 | async #load() {
24 | this.#balance = parseFloat(await FileSystem.read(this.filePath))
25 | }
26 |
27 | async withdraw(amount) {
28 | if (this.balance < amount) throw new Error()
29 | await FileSystem.write(this.filePath, this.#balance - amount)
30 | this.#balance = this.#balance - amount
31 | }
32 |
33 | async deposit(amount) {
34 | await FileSystem.write(this.filePath, this.#balance + amount)
35 | this.#balance = this.#balance + amount
36 | }
37 |
38 | static async find(accountName) {
39 | const account = new Account(accountName)
40 |
41 | try {
42 | await account.#load()
43 | return account
44 | } catch (e) {
45 | return
46 | }
47 | }
48 |
49 | static async create(accountName) {
50 | const account = new Account(accountName)
51 |
52 | await FileSystem.write(account.filePath, 0)
53 | account.#balance = 0
54 |
55 | return account
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/Account.unit.test.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 | const Account = require("./Account")
3 |
4 | beforeEach(() => {
5 | jest.restoreAllMocks()
6 | })
7 |
8 | describe("#deposit", () => {
9 | test("it adds money to the account", async () => {
10 | const startingBalance = 5
11 | const amount = 10
12 | const account = await createAccount("Kyle", startingBalance)
13 | const spy = jest
14 | .spyOn(FileSystem, "write")
15 | .mockReturnValue(Promise.resolve())
16 |
17 | await account.deposit(amount)
18 | expect(account.balance).toBe(amount + startingBalance)
19 | expect(spy).toBeCalledWith(account.filePath, amount + startingBalance)
20 | })
21 | })
22 |
23 | describe("#withdraw", () => {
24 | test("it removes money from the account", async () => {
25 | const startingBalance = 10
26 | const amount = 5
27 | const account = await createAccount("Kyle", startingBalance)
28 | const spy = jest
29 | .spyOn(FileSystem, "write")
30 | .mockReturnValue(Promise.resolve())
31 |
32 | await account.withdraw(amount)
33 | expect(account.balance).toBe(startingBalance - amount)
34 | expect(spy).toBeCalledWith(account.filePath, startingBalance - amount)
35 | })
36 |
37 | describe("with not enough money in the account", () => {
38 | test("it should throw an error", async () => {
39 | const startingBalance = 5
40 | const amount = 10
41 | const account = await createAccount("Kyle", startingBalance)
42 | const spy = jest.spyOn(FileSystem, "write")
43 |
44 | await expect(account.withdraw(amount)).rejects.toThrow()
45 | expect(account.balance).toBe(startingBalance)
46 | expect(spy).not.toBeCalled()
47 | })
48 | })
49 | })
50 |
51 | async function createAccount(name, balance) {
52 | const spy = jest
53 | .spyOn(FileSystem, "read")
54 | .mockReturnValueOnce(Promise.resolve(balance))
55 | const account = await Account.find(name)
56 | spy.mockRestore()
57 | return account
58 | }
59 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/CommandLine.js:
--------------------------------------------------------------------------------
1 | const readline = require("readline")
2 |
3 | module.exports = class CommandLine {
4 | static ask(question) {
5 | const rl = readline.createInterface({
6 | input: process.stdin,
7 | output: process.stdout,
8 | })
9 |
10 | return new Promise(resolve => {
11 | rl.question(`${question} `, answer => {
12 | resolve(answer)
13 | rl.close()
14 | })
15 | })
16 | }
17 |
18 | static print(text) {
19 | console.log(text)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/FileSystem.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 |
3 | module.exports = class FileSystem {
4 | static read(path) {
5 | return new Promise((resolve, reject) => {
6 | fs.readFile(path, (err, data) => {
7 | if (err) return reject(err)
8 | resolve(data)
9 | })
10 | })
11 | }
12 |
13 | static write(path, content) {
14 | return new Promise((resolve, reject) => {
15 | fs.writeFile(path, content.toString(), err => {
16 | if (err) return reject(err)
17 | resolve()
18 | })
19 | })
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "Account.js",
6 | "scripts": {
7 | "test": "jest --coverage",
8 | "test:unit": "jest \\.unit\\. --coverage",
9 | "test:int": "jest \\.int\\. --coverage"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "jest": "^26.6.3"
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/after/script.js:
--------------------------------------------------------------------------------
1 | const Account = require("./Account")
2 | const CommandLine = require("./CommandLine")
3 |
4 | async function main() {
5 | try {
6 | const accountName = await CommandLine.ask(
7 | "Which account would you like to access?"
8 | )
9 | const account = await Account.find(accountName)
10 | if (account == null) account = await promptCreateAccount(accountName)
11 | if (account != null) await promptTask(account)
12 | } catch (e) {
13 | CommandLine.print("ERROR: Please try again")
14 | }
15 | }
16 |
17 | async function promptCreateAccount(accountName) {
18 | const response = await CommandLine.ask(
19 | "That account does not exist. Would you like to create it? (yes/no)"
20 | )
21 |
22 | if (response === "yes") {
23 | return await Account.create(accountName)
24 | }
25 | }
26 |
27 | async function promptTask(account) {
28 | const response = await CommandLine.ask(
29 | "What would you like to do? (view/deposit/withdraw)"
30 | )
31 |
32 | if (response === "deposit") {
33 | const amount = parseFloat(await CommandLine.ask("How much?"))
34 | await account.deposit(amount)
35 | } else if (response === "withdraw") {
36 | const amount = parseFloat(await CommandLine.ask("How much?"))
37 | try {
38 | await account.withdraw(amount)
39 | } catch (e) {
40 | CommandLine.print(
41 | "We were unable to make the withdrawal. Please ensure you have enough money in your account."
42 | )
43 | }
44 | }
45 |
46 | CommandLine.print(`Your balance is ${account.balance}`)
47 | }
48 |
49 | main()
50 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/.gitignore:
--------------------------------------------------------------------------------
1 | accounts
2 | node_modules
3 | coverage
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/Account.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 |
3 | module.exports = class Account {
4 | constructor(name) {
5 | this.#name = name
6 | }
7 |
8 | #name
9 | #balance
10 |
11 | get name() {
12 | return this.#name
13 | }
14 |
15 | get balance() {
16 | return this.#balance
17 | }
18 |
19 | get filePath() {
20 | return `accounts/${this.name}.txt`
21 | }
22 |
23 | async #load() {
24 | this.#balance = parseFloat(await FileSystem.read(this.filePath))
25 | }
26 |
27 | async withdraw(amount) {
28 | if (this.balance < amount) throw new Error()
29 | await FileSystem.write(this.filePath, this.#balance - amount)
30 | this.#balance = this.#balance - amount
31 | }
32 |
33 | async deposit(amount) {
34 | await FileSystem.write(this.filePath, this.#balance + amount)
35 | this.#balance = this.#balance + amount
36 | }
37 |
38 | static async find(accountName) {
39 | const account = new Account(accountName)
40 |
41 | try {
42 | await account.#load()
43 | return account
44 | } catch (e) {
45 | return
46 | }
47 | }
48 |
49 | static async create(accountName) {
50 | const account = new Account(accountName)
51 |
52 | await FileSystem.write(account.filePath, 0)
53 | account.#balance = 0
54 |
55 | return account
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/Account.test.js:
--------------------------------------------------------------------------------
1 | const FileSystem = require("./FileSystem")
2 | const Account = require("./Account")
3 |
4 | beforeEach(() => {
5 | jest.restoreAllMocks()
6 | })
7 |
8 | describe("#deposit", () => {
9 | test("it adds money to the account", async () => {
10 | const startingBalance = 5
11 | const amount = 10
12 | const account = await createAccount("Kyle", startingBalance)
13 | const spy = jest
14 | .spyOn(FileSystem, "write")
15 | .mockReturnValue(Promise.resolve())
16 |
17 | await account.deposit(amount)
18 | expect(account.balance).toBe(amount + startingBalance)
19 | expect(spy).toBeCalledWith(account.filePath, amount + startingBalance)
20 | })
21 | })
22 |
23 | describe("#withdraw", () => {
24 | test("it removes money from the account", async () => {
25 | const startingBalance = 10
26 | const amount = 5
27 | const account = await createAccount("Kyle", startingBalance)
28 | const spy = jest
29 | .spyOn(FileSystem, "write")
30 | .mockReturnValue(Promise.resolve())
31 |
32 | await account.withdraw(amount)
33 | expect(account.balance).toBe(startingBalance - amount)
34 | expect(spy).toBeCalledWith(account.filePath, startingBalance - amount)
35 | })
36 |
37 | describe("with not enough money in the account", () => {
38 | test("it should throw an error", async () => {
39 | const startingBalance = 5
40 | const amount = 10
41 | const account = await createAccount("Kyle", startingBalance)
42 | const spy = jest.spyOn(FileSystem, "write")
43 |
44 | await expect(account.withdraw(amount)).rejects.toThrow()
45 | expect(account.balance).toBe(startingBalance)
46 | expect(spy).not.toBeCalled()
47 | })
48 | })
49 | })
50 |
51 | async function createAccount(name, balance) {
52 | const spy = jest
53 | .spyOn(FileSystem, "read")
54 | .mockReturnValueOnce(Promise.resolve(balance))
55 | const account = await Account.find(name)
56 | spy.mockRestore()
57 | return account
58 | }
59 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/CommandLine.js:
--------------------------------------------------------------------------------
1 | const readline = require("readline")
2 |
3 | module.exports = class CommandLine {
4 | static ask(question) {
5 | const rl = readline.createInterface({
6 | input: process.stdin,
7 | output: process.stdout,
8 | })
9 |
10 | return new Promise(resolve => {
11 | rl.question(`${question} `, answer => {
12 | resolve(answer)
13 | rl.close()
14 | })
15 | })
16 | }
17 |
18 | static print(text) {
19 | console.log(text)
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/FileSystem.js:
--------------------------------------------------------------------------------
1 | const fs = require("fs")
2 |
3 | module.exports = class FileSystem {
4 | static read(path) {
5 | return new Promise((resolve, reject) => {
6 | fs.readFile(path, (err, data) => {
7 | if (err) return reject(err)
8 | resolve(data)
9 | })
10 | })
11 | }
12 |
13 | static write(path, content) {
14 | return new Promise((resolve, reject) => {
15 | fs.writeFile(path, content.toString(), err => {
16 | if (err) return reject(err)
17 | resolve()
18 | })
19 | })
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "Account.js",
6 | "scripts": {
7 | "test": "jest --coverage"
8 | },
9 | "keywords": [],
10 | "author": "",
11 | "license": "ISC",
12 | "devDependencies": {
13 | "jest": "^26.6.3"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/41-atm-integration-tests/before/script.js:
--------------------------------------------------------------------------------
1 | const Account = require("./Account")
2 | const CommandLine = require("./CommandLine")
3 |
4 | async function main() {
5 | try {
6 | const accountName = await CommandLine.ask(
7 | "Which account would you like to access?"
8 | )
9 | const account = await Account.find(accountName)
10 | if (account == null) account = await promptCreateAccount(accountName)
11 | if (account != null) await promptTask(account)
12 | } catch (e) {
13 | CommandLine.print("ERROR: Please try again")
14 | }
15 | }
16 |
17 | async function promptCreateAccount(accountName) {
18 | const response = await CommandLine.ask(
19 | "That account does not exist. Would you like to create it? (yes/no)"
20 | )
21 |
22 | if (response === "yes") {
23 | return await Account.create(accountName)
24 | }
25 | }
26 |
27 | async function promptTask(account) {
28 | const response = await CommandLine.ask(
29 | "What would you like to do? (view/deposit/withdraw)"
30 | )
31 |
32 | if (response === "deposit") {
33 | const amount = parseFloat(await CommandLine.ask("How much?"))
34 | await account.deposit(amount)
35 | } else if (response === "withdraw") {
36 | const amount = parseFloat(await CommandLine.ask("How much?"))
37 | try {
38 | await account.withdraw(amount)
39 | } catch (e) {
40 | CommandLine.print(
41 | "We were unable to make the withdrawal. Please ensure you have enough money in your account."
42 | )
43 | }
44 | }
45 |
46 | CommandLine.print(`Your balance is ${account.balance}`)
47 | }
48 |
49 | main()
50 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/Calculator.js:
--------------------------------------------------------------------------------
1 | export default class Calculator {
2 | constructor(
3 | primaryOperandDisplay,
4 | secondaryOperandDisplay,
5 | operationDisplay
6 | ) {
7 | this.#primaryOperandDisplay = primaryOperandDisplay
8 | this.#secondaryOperandDisplay = secondaryOperandDisplay
9 | this.#operationDisplay = operationDisplay
10 |
11 | this.clear()
12 | }
13 |
14 | #primaryOperandDisplay
15 | #secondaryOperandDisplay
16 | #operationDisplay
17 |
18 | get primaryOperand() {
19 | return parseFloat(this.#primaryOperandDisplay.dataset.value)
20 | }
21 |
22 | set primaryOperand(value) {
23 | this.#primaryOperandDisplay.dataset.value = value ?? ""
24 | this.#primaryOperandDisplay.textContent = displayNumber(value)
25 | }
26 |
27 | get secondaryOperand() {
28 | return parseFloat(this.#secondaryOperandDisplay.dataset.value)
29 | }
30 |
31 | set secondaryOperand(value) {
32 | this.#secondaryOperandDisplay.dataset.value = value ?? ""
33 | this.#secondaryOperandDisplay.textContent = displayNumber(value)
34 | }
35 |
36 | get operation() {
37 | return this.#operationDisplay.textContent
38 | }
39 |
40 | set operation(value) {
41 | this.#operationDisplay.textContent = value ?? ""
42 | }
43 |
44 | addDigit(digit) {
45 | if (
46 | digit === "." &&
47 | this.#primaryOperandDisplay.dataset.value.includes(".")
48 | ) {
49 | return
50 | }
51 | if (this.primaryOperand === 0) {
52 | this.primaryOperand = digit
53 | return
54 | }
55 | this.primaryOperand = this.#primaryOperandDisplay.dataset.value + digit
56 | }
57 |
58 | removeDigit() {
59 | const numberString = this.#primaryOperandDisplay.dataset.value
60 | if (numberString.length <= 1) {
61 | this.primaryOperand = 0
62 | return
63 | }
64 |
65 | this.primaryOperand = numberString.substring(0, numberString.length - 1)
66 | }
67 |
68 | evaluate() {
69 | let result
70 | switch (this.operation) {
71 | case "*":
72 | result = this.secondaryOperand * this.primaryOperand
73 | break
74 | case "÷":
75 | result = this.secondaryOperand / this.primaryOperand
76 | break
77 | case "+":
78 | result = this.secondaryOperand + this.primaryOperand
79 | break
80 | case "-":
81 | result = this.secondaryOperand - this.primaryOperand
82 | break
83 | default:
84 | return
85 | }
86 |
87 | this.clear()
88 | this.primaryOperand = result
89 |
90 | return result
91 | }
92 |
93 | chooseOperation(operation) {
94 | if (this.operation !== "") return
95 | this.operation = operation
96 | this.secondaryOperand = this.primaryOperand
97 | this.primaryOperand = 0
98 | }
99 |
100 | clear() {
101 | this.primaryOperand = 0
102 | this.secondaryOperand = null
103 | this.operation = null
104 | }
105 | }
106 |
107 | const NUMBER_FORMATTER = new Intl.NumberFormat("en")
108 |
109 | function displayNumber(number) {
110 | const stringNumber = number?.toString() || ""
111 | if (stringNumber === "") return ""
112 | const [integer, decimal] = stringNumber.split(".")
113 | const formattedInteger = NUMBER_FORMATTER.format(integer)
114 | if (decimal == null) return formattedInteger
115 | return formattedInteger + "." + decimal
116 | }
117 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/cypress.json:
--------------------------------------------------------------------------------
1 | {
2 | "baseUrl": "http://localhost:5000",
3 | "viewportWidth": 450,
4 | "viewportHeight": 650
5 | }
6 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/cypress/integration/Calculator.test.js:
--------------------------------------------------------------------------------
1 | describe("calculator", () => {
2 | beforeEach(() => {
3 | cy.visit("/")
4 | })
5 |
6 | it("correctly handles normal calculations", () => {
7 | cy.getCalculatorButton("4").click()
8 | cy.getCalculatorButton(".").click()
9 | cy.getCalculatorButton("1").click()
10 | cy.get(".primary-operand").should("have.text", "4.1")
11 | cy.getCalculatorButton("+").click()
12 | cy.get(".primary-operand").should("have.text", "0")
13 | cy.get(".secondary-operand").should("have.text", "4.1")
14 | cy.get(".history > [data-operation]").should("have.text", "+")
15 | cy.getCalculatorButton("6").click()
16 | cy.get(".primary-operand").should("have.text", "6")
17 | cy.getCalculatorButton("=").click()
18 | cy.get(".primary-operand").should("have.text", "10.1")
19 | cy.get(".secondary-operand").should("have.text", "")
20 | cy.get(".history > [data-operation]").should("have.text", "")
21 | })
22 |
23 | it("correctly handles all clear", () => {
24 | cy.getCalculatorButton("4").click()
25 | cy.getCalculatorButton("+").click()
26 | cy.getCalculatorButton("6").click()
27 | cy.getCalculatorButton("AC").click()
28 | cy.get(".primary-operand").should("have.text", "0")
29 | cy.get(".secondary-operand").should("have.text", "")
30 | cy.get(".history > [data-operation]").should("have.text", "")
31 | })
32 |
33 | it("correctly handles delete", () => {
34 | cy.getCalculatorButton("4").click()
35 | cy.getCalculatorButton("4").click()
36 | cy.getCalculatorButton("4").click()
37 | cy.getCalculatorButton("DEL").click()
38 | cy.get(".primary-operand").should("have.text", "44")
39 | })
40 | })
41 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/cypress/plugins/index.js:
--------------------------------------------------------------------------------
1 | ///
13 |
39 |
40 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "Calculator.js",
6 | "scripts": {
7 | "start": "serve",
8 | "cy:open": "cypress open",
9 | "test": "start-server-and-test start http://localhost:5000 cy:open"
10 | },
11 | "keywords": [],
12 | "author": "",
13 | "license": "ISC",
14 | "devDependencies": {
15 | "cypress": "^6.6.0",
16 | "serve": "^11.3.2",
17 | "start-server-and-test": "^1.12.0"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/script.js:
--------------------------------------------------------------------------------
1 | import Calculator from "./Calculator.js"
2 |
3 | const primaryOperandDisplay = document.querySelector("[data-primary-operand]")
4 | const secondaryOperandDisplay = document.querySelector(
5 | "[data-secondary-operand]"
6 | )
7 | const operationDisplay = document.querySelector("[data-operation]")
8 |
9 | const calculator = new Calculator(
10 | primaryOperandDisplay,
11 | secondaryOperandDisplay,
12 | operationDisplay
13 | )
14 |
15 | document.addEventListener("click", e => {
16 | if (e.target.matches("[data-all-clear]")) {
17 | calculator.clear()
18 | }
19 | if (e.target.matches("[data-number]")) {
20 | calculator.addDigit(e.target.textContent)
21 | }
22 | if (e.target.matches("[data-delete]")) {
23 | calculator.removeDigit()
24 | }
25 | if (e.target.matches("[data-operation]")) {
26 | calculator.chooseOperation(e.target.textContent)
27 | }
28 | if (e.target.matches("[data-equals]")) {
29 | calculator.evaluate()
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/after/styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after {
2 | box-sizing: border-box;
3 | font-family: Gotham Rounded, sans-serif;
4 | font-weight: normal;
5 | }
6 |
7 | body {
8 | padding: 0;
9 | margin: 0;
10 | background: linear-gradient(to right, #7700ff, #008cff);
11 | }
12 |
13 | .calculator-grid {
14 | display: grid;
15 | justify-content: center;
16 | align-content: center;
17 | min-height: 100vh;
18 | grid-template-columns: repeat(4, 100px);
19 | grid-template-rows: minmax(120px, auto) repeat(5, 100px);
20 | }
21 |
22 | .calculator-grid > button {
23 | cursor: pointer;
24 | font-size: 2rem;
25 | border: 1px solid white;
26 | outline: none;
27 | background-color: rgba(255, 255, 255, .75);
28 | }
29 |
30 | .calculator-grid > button:hover {
31 | background-color: rgba(255, 255, 255, .9);
32 | }
33 |
34 | .span-two {
35 | grid-column: span 2;
36 | }
37 |
38 | .output {
39 | grid-column: 1 / -1;
40 | background-color: rgba(0, 0, 0, .75);
41 | display: flex;
42 | align-items: flex-end;
43 | justify-content: space-around;
44 | flex-direction: column;
45 | padding: 10px;
46 | word-wrap: break-word;
47 | word-break: break-all;
48 | }
49 |
50 | .output .history {
51 | color: rgba(255, 255, 255, .75);
52 | font-size: 1.5rem;
53 | display: flex;
54 | }
55 |
56 | .output .secondary-operand {
57 | margin-right: 7px;
58 | }
59 |
60 | .output .primary-operand {
61 | color: white;
62 | font-size: 2.5rem;
63 | }
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/before/Calculator.js:
--------------------------------------------------------------------------------
1 | export default class Calculator {
2 | constructor(
3 | primaryOperandDisplay,
4 | secondaryOperandDisplay,
5 | operationDisplay
6 | ) {
7 | this.#primaryOperandDisplay = primaryOperandDisplay
8 | this.#secondaryOperandDisplay = secondaryOperandDisplay
9 | this.#operationDisplay = operationDisplay
10 |
11 | this.clear()
12 | }
13 |
14 | #primaryOperandDisplay
15 | #secondaryOperandDisplay
16 | #operationDisplay
17 |
18 | get primaryOperand() {
19 | return parseFloat(this.#primaryOperandDisplay.dataset.value)
20 | }
21 |
22 | set primaryOperand(value) {
23 | this.#primaryOperandDisplay.dataset.value = value ?? ""
24 | this.#primaryOperandDisplay.textContent = displayNumber(value)
25 | }
26 |
27 | get secondaryOperand() {
28 | return parseFloat(this.#secondaryOperandDisplay.dataset.value)
29 | }
30 |
31 | set secondaryOperand(value) {
32 | this.#secondaryOperandDisplay.dataset.value = value ?? ""
33 | this.#secondaryOperandDisplay.textContent = displayNumber(value)
34 | }
35 |
36 | get operation() {
37 | return this.#operationDisplay.textContent
38 | }
39 |
40 | set operation(value) {
41 | this.#operationDisplay.textContent = value ?? ""
42 | }
43 |
44 | addDigit(digit) {
45 | if (
46 | digit === "." &&
47 | this.#primaryOperandDisplay.dataset.value.includes(".")
48 | ) {
49 | return
50 | }
51 | if (this.primaryOperand === 0) {
52 | this.primaryOperand = digit
53 | return
54 | }
55 | this.primaryOperand = this.#primaryOperandDisplay.dataset.value + digit
56 | }
57 |
58 | removeDigit() {
59 | const numberString = this.#primaryOperandDisplay.dataset.value
60 | if (numberString.length <= 1) {
61 | this.primaryOperand = 0
62 | return
63 | }
64 |
65 | this.primaryOperand = numberString.substring(0, numberString.length - 1)
66 | }
67 |
68 | evaluate() {
69 | let result
70 | switch (this.operation) {
71 | case "*":
72 | result = this.secondaryOperand * this.primaryOperand
73 | break
74 | case "÷":
75 | result = this.secondaryOperand / this.primaryOperand
76 | break
77 | case "+":
78 | result = this.secondaryOperand + this.primaryOperand
79 | break
80 | case "-":
81 | result = this.secondaryOperand - this.primaryOperand
82 | break
83 | default:
84 | return
85 | }
86 |
87 | this.clear()
88 | this.primaryOperand = result
89 |
90 | return result
91 | }
92 |
93 | chooseOperation(operation) {
94 | if (this.operation !== "") return
95 | this.operation = operation
96 | this.secondaryOperand = this.primaryOperand
97 | this.primaryOperand = 0
98 | }
99 |
100 | clear() {
101 | this.primaryOperand = 0
102 | this.secondaryOperand = null
103 | this.operation = null
104 | }
105 | }
106 |
107 | const NUMBER_FORMATTER = new Intl.NumberFormat("en")
108 |
109 | function displayNumber(number) {
110 | const stringNumber = number?.toString() || ""
111 | if (stringNumber === "") return ""
112 | const [integer, decimal] = stringNumber.split(".")
113 | const formattedInteger = NUMBER_FORMATTER.format(integer)
114 | if (decimal == null) return formattedInteger
115 | return formattedInteger + "." + decimal
116 | }
117 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/before/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
14 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
15 |
16 |
17 |
18 |
19 |
13 |
39 |
40 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/before/script.js:
--------------------------------------------------------------------------------
1 | import Calculator from "./Calculator.js"
2 |
3 | const primaryOperandDisplay = document.querySelector("[data-primary-operand]")
4 | const secondaryOperandDisplay = document.querySelector(
5 | "[data-secondary-operand]"
6 | )
7 | const operationDisplay = document.querySelector("[data-operation]")
8 |
9 | const calculator = new Calculator(
10 | primaryOperandDisplay,
11 | secondaryOperandDisplay,
12 | operationDisplay
13 | )
14 |
15 | document.addEventListener("click", e => {
16 | if (e.target.matches("[data-all-clear]")) {
17 | calculator.clear()
18 | }
19 | if (e.target.matches("[data-number]")) {
20 | calculator.addDigit(e.target.textContent)
21 | }
22 | if (e.target.matches("[data-delete]")) {
23 | calculator.removeDigit()
24 | }
25 | if (e.target.matches("[data-operation]")) {
26 | calculator.chooseOperation(e.target.textContent)
27 | }
28 | if (e.target.matches("[data-equals]")) {
29 | calculator.evaluate()
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/42-calculator-end-to-end-tests/before/styles.css:
--------------------------------------------------------------------------------
1 | *, *::before, *::after {
2 | box-sizing: border-box;
3 | font-family: Gotham Rounded, sans-serif;
4 | font-weight: normal;
5 | }
6 |
7 | body {
8 | padding: 0;
9 | margin: 0;
10 | background: linear-gradient(to right, #7700ff, #008cff);
11 | }
12 |
13 | .calculator-grid {
14 | display: grid;
15 | justify-content: center;
16 | align-content: center;
17 | min-height: 100vh;
18 | grid-template-columns: repeat(4, 100px);
19 | grid-template-rows: minmax(120px, auto) repeat(5, 100px);
20 | }
21 |
22 | .calculator-grid > button {
23 | cursor: pointer;
24 | font-size: 2rem;
25 | border: 1px solid white;
26 | outline: none;
27 | background-color: rgba(255, 255, 255, .75);
28 | }
29 |
30 | .calculator-grid > button:hover {
31 | background-color: rgba(255, 255, 255, .9);
32 | }
33 |
34 | .span-two {
35 | grid-column: span 2;
36 | }
37 |
38 | .output {
39 | grid-column: 1 / -1;
40 | background-color: rgba(0, 0, 0, .75);
41 | display: flex;
42 | align-items: flex-end;
43 | justify-content: space-around;
44 | flex-direction: column;
45 | padding: 10px;
46 | word-wrap: break-word;
47 | word-break: break-all;
48 | }
49 |
50 | .output .history {
51 | color: rgba(255, 255, 255, .75);
52 | font-size: 1.5rem;
53 | display: flex;
54 | }
55 |
56 | .output .secondary-operand {
57 | margin-right: 7px;
58 | }
59 |
60 | .output .primary-operand {
61 | color: white;
62 | font-size: 2.5rem;
63 | }
--------------------------------------------------------------------------------
/45-46-math-solver-unit-tests/after/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env"]
3 | }
--------------------------------------------------------------------------------
/45-46-math-solver-unit-tests/after/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | coverage
--------------------------------------------------------------------------------
/45-46-math-solver-unit-tests/after/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
14 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
15 |
16 |
17 |
18 |
19 | Minesweeper
12 |
13 | Mines Left:
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/after/minesweeper.js:
--------------------------------------------------------------------------------
1 | import { times, range } from "lodash/fp"
2 |
3 | export const TILE_STATUSES = {
4 | HIDDEN: "hidden",
5 | MINE: "mine",
6 | NUMBER: "number",
7 | MARKED: "marked",
8 | }
9 |
10 | export function createBoard(boardSize, minePositions) {
11 | return times(x => {
12 | return times(y => {
13 | return {
14 | x,
15 | y,
16 | mine: minePositions.some(positionMatch.bind(null, { x, y })),
17 | status: TILE_STATUSES.HIDDEN,
18 | }
19 | }, boardSize)
20 | }, boardSize)
21 | }
22 |
23 | export function markedTilesCount(board) {
24 | return board.reduce((count, row) => {
25 | return (
26 | count + row.filter(tile => tile.status === TILE_STATUSES.MARKED).length
27 | )
28 | }, 0)
29 | }
30 |
31 | export function markTile(board, { x, y }) {
32 | const tile = board[x][y]
33 | if (
34 | tile.status !== TILE_STATUSES.HIDDEN &&
35 | tile.status !== TILE_STATUSES.MARKED
36 | ) {
37 | return board
38 | }
39 |
40 | if (tile.status === TILE_STATUSES.MARKED) {
41 | return replaceTile(
42 | board,
43 | { x, y },
44 | { ...tile, status: TILE_STATUSES.HIDDEN }
45 | )
46 | } else {
47 | return replaceTile(
48 | board,
49 | { x, y },
50 | { ...tile, status: TILE_STATUSES.MARKED }
51 | )
52 | }
53 | }
54 |
55 | export function revealTile(board, { x, y }) {
56 | const tile = board[x][y]
57 | if (tile.status !== TILE_STATUSES.HIDDEN) {
58 | return board
59 | }
60 |
61 | if (tile.mine) {
62 | return replaceTile(board, { x, y }, { ...tile, status: TILE_STATUSES.MINE })
63 | }
64 |
65 | const adjacentTiles = nearbyTiles(board, tile)
66 | const mines = adjacentTiles.filter(t => t.mine)
67 | const newBoard = replaceTile(
68 | board,
69 | { x, y },
70 | { ...tile, status: TILE_STATUSES.NUMBER, adjacentMinesCount: mines.length }
71 | )
72 | if (mines.length === 0) {
73 | return adjacentTiles.reduce((b, t) => {
74 | return revealTile(b, t)
75 | }, newBoard)
76 | }
77 | return newBoard
78 | }
79 |
80 | export function checkWin(board) {
81 | return board.every(row => {
82 | return row.every(tile => {
83 | return (
84 | tile.status === TILE_STATUSES.NUMBER ||
85 | (tile.mine &&
86 | (tile.status === TILE_STATUSES.HIDDEN ||
87 | tile.status === TILE_STATUSES.MARKED))
88 | )
89 | })
90 | })
91 | }
92 |
93 | export function checkLose(board) {
94 | return board.some(row => {
95 | return row.some(tile => {
96 | return tile.status === TILE_STATUSES.MINE
97 | })
98 | })
99 | }
100 |
101 | export function positionMatch(a, b) {
102 | return a.x === b.x && a.y === b.y
103 | }
104 |
105 | function replaceTile(board, position, newTile) {
106 | return board.map((row, x) => {
107 | return row.map((tile, y) => {
108 | if (positionMatch(position, { x, y })) {
109 | return newTile
110 | }
111 | return tile
112 | })
113 | })
114 | }
115 |
116 | function nearbyTiles(board, { x, y }) {
117 | const offsets = range(-1, 2)
118 |
119 | return offsets
120 | .flatMap(xOffset => {
121 | return offsets.map(yOffset => {
122 | return board[x + xOffset]?.[y + yOffset]
123 | })
124 | })
125 | .filter(tile => tile != null)
126 | }
127 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/after/minesweeper.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | createBoard,
3 | TILE_STATUSES,
4 | markedTilesCount,
5 | markTile,
6 | revealTile,
7 | checkWin,
8 | checkLose,
9 | positionMatch,
10 | } from "./minesweeper"
11 |
12 | describe("#createBoard", () => {
13 | test("it creates a valid board", () => {
14 | const boardSize = 2
15 | const minePositions = [{ x: 0, y: 1 }]
16 | const expectedBoard = [
17 | [
18 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
19 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
20 | ],
21 | [
22 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
23 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
24 | ],
25 | ]
26 | const board = createBoard(boardSize, minePositions)
27 | expect(board).toEqual(expectedBoard)
28 | })
29 | })
30 |
31 | describe("#markedTilesCount", () => {
32 | test("with some tiles marked", () => {
33 | const board = [
34 | [
35 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: false },
36 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
37 | ],
38 | [
39 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
40 | { x: 1, y: 1, status: TILE_STATUSES.MARKED, mine: false },
41 | ],
42 | ]
43 | expect(markedTilesCount(board)).toEqual(2)
44 | })
45 |
46 | test("with no tiles marked", () => {
47 | const board = [
48 | [
49 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
50 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
51 | ],
52 | [
53 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
54 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
55 | ],
56 | ]
57 | expect(markedTilesCount(board)).toEqual(0)
58 | })
59 |
60 | test("with all tiles marked", () => {
61 | const board = [
62 | [
63 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: false },
64 | { x: 0, y: 1, status: TILE_STATUSES.MARKED, mine: true },
65 | ],
66 | [
67 | { x: 1, y: 0, status: TILE_STATUSES.MARKED, mine: false },
68 | { x: 1, y: 1, status: TILE_STATUSES.MARKED, mine: false },
69 | ],
70 | ]
71 | expect(markedTilesCount(board)).toEqual(4)
72 | })
73 | })
74 |
75 | describe("#markTile", () => {
76 | test("with a hidden tile it marks it", () => {
77 | const board = [
78 | [
79 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
80 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
81 | ],
82 | [
83 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
84 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
85 | ],
86 | ]
87 | const expectedBoard = [
88 | [
89 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: false },
90 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
91 | ],
92 | [
93 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
94 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
95 | ],
96 | ]
97 | expect(markTile(board, { x: 0, y: 0 })).toEqual(expectedBoard)
98 | })
99 |
100 | test("with a marked tile it un-marks it", () => {
101 | const board = [
102 | [
103 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: false },
104 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
105 | ],
106 | [
107 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
108 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
109 | ],
110 | ]
111 | const expectedBoard = [
112 | [
113 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
114 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
115 | ],
116 | [
117 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
118 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
119 | ],
120 | ]
121 | expect(markTile(board, { x: 0, y: 0 })).toEqual(expectedBoard)
122 | })
123 |
124 | test("with a mine tile it does nothing", () => {
125 | const board = [
126 | [
127 | { x: 0, y: 0, status: TILE_STATUSES.MINE, mine: false },
128 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
129 | ],
130 | [
131 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
132 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
133 | ],
134 | ]
135 |
136 | expect(markTile(board, { x: 0, y: 0 })).toEqual(board)
137 | })
138 |
139 | test("with a number tile it does nothing", () => {
140 | const board = [
141 | [
142 | { x: 0, y: 0, status: TILE_STATUSES.NUMBER, mine: false },
143 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
144 | ],
145 | [
146 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
147 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
148 | ],
149 | ]
150 |
151 | expect(markTile(board, { x: 0, y: 0 })).toEqual(board)
152 | })
153 | })
154 |
155 | describe("#revealTile", () => {
156 | describe("with a hidden tile", () => {
157 | const board = [
158 | [
159 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
160 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
161 | ],
162 | [
163 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
164 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
165 | ],
166 | ]
167 |
168 | test("when the tile is a mine it sets its status to mine", () => {
169 | const expectedBoard = [
170 | [
171 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
172 | { x: 0, y: 1, status: TILE_STATUSES.MINE, mine: true },
173 | ],
174 | [
175 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
176 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
177 | ],
178 | ]
179 | expect(revealTile(board, { x: 0, y: 1 })).toEqual(expectedBoard)
180 | })
181 |
182 | describe("when the tile is not a mine", () => {
183 | test("when the tile is adjacent to a mine it counts the number of nearby mines", () => {
184 | const expectedBoard = [
185 | [
186 | {
187 | x: 0,
188 | y: 0,
189 | status: TILE_STATUSES.NUMBER,
190 | mine: false,
191 | adjacentMinesCount: 1,
192 | },
193 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
194 | ],
195 | [
196 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
197 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
198 | ],
199 | ]
200 | expect(revealTile(board, { x: 0, y: 0 })).toEqual(expectedBoard)
201 | })
202 |
203 | test("when the tile is not adjacent to a mine it reveals nearby tiles", () => {
204 | const board = [
205 | [
206 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: true },
207 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
208 | { x: 0, y: 2, status: TILE_STATUSES.HIDDEN, mine: false },
209 | ],
210 | [
211 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
212 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
213 | { x: 1, y: 2, status: TILE_STATUSES.HIDDEN, mine: false },
214 | ],
215 | [
216 | { x: 2, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
217 | { x: 2, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
218 | { x: 2, y: 2, status: TILE_STATUSES.HIDDEN, mine: false },
219 | ],
220 | ]
221 |
222 | const expectedBoard = [
223 | [
224 | { x: 0, y: 0, status: TILE_STATUSES.HIDDEN, mine: true },
225 | {
226 | x: 0,
227 | y: 1,
228 | status: TILE_STATUSES.NUMBER,
229 | mine: false,
230 | adjacentMinesCount: 1,
231 | },
232 | {
233 | x: 0,
234 | y: 2,
235 | status: TILE_STATUSES.NUMBER,
236 | mine: false,
237 | adjacentMinesCount: 0,
238 | },
239 | ],
240 | [
241 | {
242 | x: 1,
243 | y: 0,
244 | status: TILE_STATUSES.NUMBER,
245 | mine: false,
246 | adjacentMinesCount: 1,
247 | },
248 | {
249 | x: 1,
250 | y: 1,
251 | status: TILE_STATUSES.NUMBER,
252 | mine: false,
253 | adjacentMinesCount: 1,
254 | },
255 | {
256 | x: 1,
257 | y: 2,
258 | status: TILE_STATUSES.NUMBER,
259 | mine: false,
260 | adjacentMinesCount: 0,
261 | },
262 | ],
263 | [
264 | {
265 | x: 2,
266 | y: 0,
267 | status: TILE_STATUSES.NUMBER,
268 | mine: false,
269 | adjacentMinesCount: 0,
270 | },
271 | {
272 | x: 2,
273 | y: 1,
274 | status: TILE_STATUSES.NUMBER,
275 | mine: false,
276 | adjacentMinesCount: 0,
277 | },
278 | {
279 | x: 2,
280 | y: 2,
281 | status: TILE_STATUSES.NUMBER,
282 | mine: false,
283 | adjacentMinesCount: 0,
284 | },
285 | ],
286 | ]
287 |
288 | expect(revealTile(board, { x: 2, y: 2 })).toEqual(expectedBoard)
289 | })
290 | })
291 | })
292 |
293 | test("with a marked tile it does nothing", () => {
294 | const board = [
295 | [
296 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: false },
297 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
298 | ],
299 | [
300 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
301 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
302 | ],
303 | ]
304 | expect(revealTile(board, { x: 0, y: 0 })).toEqual(board)
305 | })
306 |
307 | test("with a mine tile it does nothing", () => {
308 | const board = [
309 | [
310 | { x: 0, y: 0, status: TILE_STATUSES.MINE, mine: false },
311 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
312 | ],
313 | [
314 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
315 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
316 | ],
317 | ]
318 |
319 | expect(revealTile(board, { x: 0, y: 0 })).toEqual(board)
320 | })
321 |
322 | test("with a number tile it does nothing", () => {
323 | const board = [
324 | [
325 | { x: 0, y: 0, status: TILE_STATUSES.NUMBER, mine: false },
326 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
327 | ],
328 | [
329 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
330 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
331 | ],
332 | ]
333 |
334 | expect(revealTile(board, { x: 0, y: 0 })).toEqual(board)
335 | })
336 | })
337 |
338 | describe("#checkWin", () => {
339 | test("with only hidden and marked mine tiles it returns true", () => {
340 | const board = [
341 | [
342 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: true },
343 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
344 | ],
345 | [
346 | { x: 1, y: 0, status: TILE_STATUSES.NUMBER, mine: false },
347 | { x: 1, y: 1, status: TILE_STATUSES.NUMBER, mine: false },
348 | ],
349 | ]
350 | expect(checkWin(board)).toBeTruthy()
351 | })
352 |
353 | test("with some hidden non-mine tiles it returns false", () => {
354 | const board = [
355 | [
356 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: true },
357 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
358 | ],
359 | [
360 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
361 | { x: 1, y: 1, status: TILE_STATUSES.NUMBER, mine: false },
362 | ],
363 | ]
364 | expect(checkWin(board)).toBeFalsy()
365 | })
366 | })
367 |
368 | describe("#checkLose", () => {
369 | test("with no mines revealed it returns false", () => {
370 | const board = [
371 | [
372 | { x: 0, y: 0, status: TILE_STATUSES.MARKED, mine: true },
373 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
374 | ],
375 | [
376 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
377 | { x: 1, y: 1, status: TILE_STATUSES.HIDDEN, mine: false },
378 | ],
379 | ]
380 | expect(checkLose(board)).toBeFalsy()
381 | })
382 |
383 | test("with a mine revealed it returns true", () => {
384 | const board = [
385 | [
386 | { x: 0, y: 0, status: TILE_STATUSES.MINE, mine: true },
387 | { x: 0, y: 1, status: TILE_STATUSES.HIDDEN, mine: true },
388 | ],
389 | [
390 | { x: 1, y: 0, status: TILE_STATUSES.HIDDEN, mine: false },
391 | { x: 1, y: 1, status: TILE_STATUSES.NUMBER, mine: false },
392 | ],
393 | ]
394 | expect(checkLose(board)).toBeTruthy()
395 | })
396 | })
397 |
398 | describe("#positionMatch", () => {
399 | test("it returns true when the x and y properties are the same", () => {
400 | const posA = { x: 1, y: 2 }
401 | const posB = { x: 1, y: 2 }
402 | expect(positionMatch(posA, posB)).toBeTruthy()
403 | })
404 |
405 | test("it returns false when the x or y properties are not the same", () => {
406 | const posA = { x: 1, y: 2 }
407 | const posB = { x: 1, y: 1 }
408 | expect(positionMatch(posA, posB)).toBeFalsy()
409 | })
410 | })
411 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/after/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "minesweeper.js",
6 | "scripts": {
7 | "build": "parcel build index.html",
8 | "start": "parcel index.html",
9 | "test": "jest --coverage",
10 | "cy:open": "cypress open",
11 | "test:e2e": "start-server-and-test start http://localhost:1234 cy:open"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "dependencies": {
17 | "lodash": "^4.17.21"
18 | },
19 | "devDependencies": {
20 | "@babel/core": "^7.13.8",
21 | "@babel/plugin-proposal-optional-chaining": "^7.13.8",
22 | "@babel/preset-env": "^7.13.10",
23 | "cypress": "^6.6.0",
24 | "jest": "^26.6.3",
25 | "parcel-bundler": "1.12.3",
26 | "start-server-and-test": "^1.12.0"
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/after/script.js:
--------------------------------------------------------------------------------
1 | // Display/UI
2 |
3 | import {
4 | TILE_STATUSES,
5 | createBoard,
6 | markTile,
7 | revealTile,
8 | checkWin,
9 | checkLose,
10 | positionMatch,
11 | markedTilesCount,
12 | } from "./minesweeper.js"
13 |
14 | let testBoard
15 | if (process.env.NODE_ENV !== "production" && window.testBoard) {
16 | testBoard = window.testBoard
17 | }
18 |
19 | const BOARD_SIZE = testBoard?.length ?? 10
20 | const NUMBER_OF_MINES = testBoard?.flat().filter(t => t.mine).length ?? 3
21 |
22 | let board =
23 | testBoard ??
24 | createBoard(BOARD_SIZE, getMinePositions(BOARD_SIZE, NUMBER_OF_MINES))
25 | const boardElement = document.querySelector(".board")
26 | const minesLeftText = document.querySelector("[data-mine-count]")
27 | const messageText = document.querySelector(".subtext")
28 |
29 | function render() {
30 | boardElement.innerHTML = ""
31 | checkGameEnd()
32 |
33 | getTileElements().forEach(element => {
34 | boardElement.append(element)
35 | })
36 |
37 | listMinesLeft()
38 | }
39 |
40 | function getTileElements() {
41 | return board.flatMap(row => {
42 | return row.map(tileToElement)
43 | })
44 | }
45 |
46 | function tileToElement(tile) {
47 | const element = document.createElement("div")
48 | element.dataset.status = tile.status
49 | element.dataset.x = tile.x
50 | element.dataset.y = tile.y
51 | element.textContent = tile.adjacentMinesCount || ""
52 | return element
53 | }
54 |
55 | boardElement.addEventListener("click", e => {
56 | if (!e.target.matches("[data-status]")) return
57 |
58 | board = revealTile(board, {
59 | x: parseInt(e.target.dataset.x),
60 | y: parseInt(e.target.dataset.y),
61 | })
62 | render()
63 | })
64 |
65 | boardElement.addEventListener("contextmenu", e => {
66 | if (!e.target.matches("[data-status]")) return
67 |
68 | e.preventDefault()
69 | board = markTile(board, {
70 | x: parseInt(e.target.dataset.x),
71 | y: parseInt(e.target.dataset.y),
72 | })
73 | render()
74 | })
75 |
76 | boardElement.style.setProperty("--size", BOARD_SIZE)
77 | render()
78 |
79 | function listMinesLeft() {
80 | minesLeftText.textContent = NUMBER_OF_MINES - markedTilesCount(board)
81 | }
82 |
83 | function checkGameEnd() {
84 | const win = checkWin(board)
85 | const lose = checkLose(board)
86 |
87 | if (win || lose) {
88 | boardElement.addEventListener("click", stopProp, { capture: true })
89 | boardElement.addEventListener("contextmenu", stopProp, { capture: true })
90 | }
91 |
92 | if (win) {
93 | messageText.textContent = "You Win"
94 | }
95 | if (lose) {
96 | messageText.textContent = "You Lose"
97 | board.forEach(row => {
98 | row.forEach(tile => {
99 | if (tile.status === TILE_STATUSES.MARKED) board = markTile(board, tile)
100 | if (tile.mine) board = revealTile(board, tile)
101 | })
102 | })
103 | }
104 | }
105 |
106 | function stopProp(e) {
107 | e.stopImmediatePropagation()
108 | }
109 |
110 | function getMinePositions(boardSize, numberOfMines) {
111 | const positions = []
112 |
113 | while (positions.length < numberOfMines) {
114 | const position = {
115 | x: randomNumber(boardSize),
116 | y: randomNumber(boardSize),
117 | }
118 |
119 | if (!positions.some(positionMatch.bind(null, position))) {
120 | positions.push(position)
121 | }
122 | }
123 |
124 | return positions
125 | }
126 |
127 | function randomNumber(size) {
128 | return Math.floor(Math.random() * size)
129 | }
130 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/after/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background-color: #333;
8 | display: flex;
9 | align-items: center;
10 | font-size: 3rem;
11 | flex-direction: column;
12 | color: white;
13 | }
14 |
15 | .title {
16 | margin: 20px;
17 | }
18 |
19 | .subtext {
20 | color: #CCC;
21 | font-size: 1.5rem;
22 | margin-bottom: 10px;
23 | }
24 |
25 | .board {
26 | display: inline-grid;
27 | padding: 10px;
28 | grid-template-columns: repeat(var(--size), 60px);
29 | grid-template-rows: repeat(var(--size), 60px);
30 | gap: 4px;
31 | background-color: #777;
32 | }
33 |
34 | .board > * {
35 | width: 100%;
36 | height: 100%;
37 | display: flex;
38 | justify-content: center;
39 | align-items: center;
40 | color: white;
41 | border: 2px solid #BBB;
42 | user-select: none;
43 | }
44 |
45 | .board > [data-status="hidden"] {
46 | background-color: #BBB;
47 | cursor: pointer;
48 | }
49 |
50 | .board > [data-status="mine"] {
51 | background-color: red;
52 | }
53 |
54 | .board > [data-status="number"] {
55 | background-color: none;
56 | }
57 |
58 | .board > [data-status="marked"] {
59 | background-color: yellow;
60 | }
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": [
3 | "@babel/plugin-proposal-optional-chaining"
4 | ]
5 | }
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Minesweeper
12 |
13 | Mines Left:
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/minesweeper.js:
--------------------------------------------------------------------------------
1 | import { times, range } from "lodash/fp"
2 |
3 | export const TILE_STATUSES = {
4 | HIDDEN: "hidden",
5 | MINE: "mine",
6 | NUMBER: "number",
7 | MARKED: "marked",
8 | }
9 |
10 | export function createBoard(boardSize, minePositions) {
11 | return times(x => {
12 | return times(y => {
13 | return {
14 | x,
15 | y,
16 | mine: minePositions.some(positionMatch.bind(null, { x, y })),
17 | status: TILE_STATUSES.HIDDEN,
18 | }
19 | }, boardSize)
20 | }, boardSize)
21 | }
22 |
23 | export function markedTilesCount(board) {
24 | return board.reduce((count, row) => {
25 | return (
26 | count + row.filter(tile => tile.status === TILE_STATUSES.MARKED).length
27 | )
28 | }, 0)
29 | }
30 |
31 | export function markTile(board, { x, y }) {
32 | const tile = board[x][y]
33 | if (
34 | tile.status !== TILE_STATUSES.HIDDEN &&
35 | tile.status !== TILE_STATUSES.MARKED
36 | ) {
37 | return board
38 | }
39 |
40 | if (tile.status === TILE_STATUSES.MARKED) {
41 | return replaceTile(
42 | board,
43 | { x, y },
44 | { ...tile, status: TILE_STATUSES.HIDDEN }
45 | )
46 | } else {
47 | return replaceTile(
48 | board,
49 | { x, y },
50 | { ...tile, status: TILE_STATUSES.MARKED }
51 | )
52 | }
53 | }
54 |
55 | function replaceTile(board, position, newTile) {
56 | return board.map((row, x) => {
57 | return row.map((tile, y) => {
58 | if (positionMatch(position, { x, y })) {
59 | return newTile
60 | }
61 | return tile
62 | })
63 | })
64 | }
65 |
66 | export function revealTile(board, { x, y }) {
67 | const tile = board[x][y]
68 | if (tile.status !== TILE_STATUSES.HIDDEN) {
69 | return board
70 | }
71 |
72 | if (tile.mine) {
73 | return replaceTile(board, { x, y }, { ...tile, status: TILE_STATUSES.MINE })
74 | }
75 |
76 | const adjacentTiles = nearbyTiles(board, tile)
77 | const mines = adjacentTiles.filter(t => t.mine)
78 | const newBoard = replaceTile(
79 | board,
80 | { x, y },
81 | { ...tile, status: TILE_STATUSES.NUMBER, adjacentMinesCount: mines.length }
82 | )
83 | if (mines.length === 0) {
84 | return adjacentTiles.reduce((b, t) => {
85 | return revealTile(b, t)
86 | }, newBoard)
87 | }
88 | return newBoard
89 | }
90 |
91 | export function checkWin(board) {
92 | return board.every(row => {
93 | return row.every(tile => {
94 | return (
95 | tile.status === TILE_STATUSES.NUMBER ||
96 | (tile.mine &&
97 | (tile.status === TILE_STATUSES.HIDDEN ||
98 | tile.status === TILE_STATUSES.MARKED))
99 | )
100 | })
101 | })
102 | }
103 |
104 | export function checkLose(board) {
105 | return board.some(row => {
106 | return row.some(tile => {
107 | return tile.status === TILE_STATUSES.MINE
108 | })
109 | })
110 | }
111 |
112 | export function positionMatch(a, b) {
113 | return a.x === b.x && a.y === b.y
114 | }
115 |
116 | function nearbyTiles(board, { x, y }) {
117 | const offsets = range(-1, 2)
118 |
119 | return offsets
120 | .flatMap(xOffset => {
121 | return offsets.map(yOffset => {
122 | return board[x + xOffset]?.[y + yOffset]
123 | })
124 | })
125 | .filter(tile => tile != null)
126 | }
127 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "current-project",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "minesweeper.js",
6 | "scripts": {
7 | "build": "parcel build index.html",
8 | "start": "parcel index.html"
9 | },
10 | "keywords": [],
11 | "author": "",
12 | "license": "ISC",
13 | "dependencies": {
14 | "lodash": "^4.17.21"
15 | },
16 | "devDependencies": {
17 | "@babel/core": "^7.13.8",
18 | "@babel/plugin-proposal-optional-chaining": "^7.13.8",
19 | "parcel-bundler": "1.12.3"
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/script.js:
--------------------------------------------------------------------------------
1 | // Display/UI
2 |
3 | import {
4 | TILE_STATUSES,
5 | createBoard,
6 | markTile,
7 | revealTile,
8 | checkWin,
9 | checkLose,
10 | positionMatch,
11 | markedTilesCount,
12 | } from "./minesweeper.js"
13 |
14 | const BOARD_SIZE = 10
15 | const NUMBER_OF_MINES = 3
16 |
17 | let board = createBoard(
18 | BOARD_SIZE,
19 | getMinePositions(BOARD_SIZE, NUMBER_OF_MINES)
20 | )
21 | const boardElement = document.querySelector(".board")
22 | const minesLeftText = document.querySelector("[data-mine-count]")
23 | const messageText = document.querySelector(".subtext")
24 |
25 | function render() {
26 | boardElement.innerHTML = ""
27 | checkGameEnd()
28 |
29 | getTileElements().forEach(element => {
30 | boardElement.append(element)
31 | })
32 |
33 | listMinesLeft()
34 | }
35 |
36 | function getTileElements() {
37 | return board.flatMap(row => {
38 | return row.map(tileToElement)
39 | })
40 | }
41 |
42 | function tileToElement(tile) {
43 | const element = document.createElement("div")
44 | element.dataset.status = tile.status
45 | element.dataset.x = tile.x
46 | element.dataset.y = tile.y
47 | element.textContent = tile.adjacentMinesCount || ""
48 | return element
49 | }
50 |
51 | boardElement.addEventListener("click", e => {
52 | if (!e.target.matches("[data-status]")) return
53 |
54 | board = revealTile(board, {
55 | x: parseInt(e.target.dataset.x),
56 | y: parseInt(e.target.dataset.y),
57 | })
58 | render()
59 | })
60 |
61 | boardElement.addEventListener("contextmenu", e => {
62 | if (!e.target.matches("[data-status]")) return
63 |
64 | e.preventDefault()
65 | board = markTile(board, {
66 | x: parseInt(e.target.dataset.x),
67 | y: parseInt(e.target.dataset.y),
68 | })
69 | render()
70 | })
71 |
72 | boardElement.style.setProperty("--size", BOARD_SIZE)
73 | render()
74 |
75 | function listMinesLeft() {
76 | minesLeftText.textContent = NUMBER_OF_MINES - markedTilesCount(board)
77 | }
78 |
79 | function checkGameEnd() {
80 | const win = checkWin(board)
81 | const lose = checkLose(board)
82 |
83 | if (win || lose) {
84 | boardElement.addEventListener("click", stopProp, { capture: true })
85 | boardElement.addEventListener("contextmenu", stopProp, { capture: true })
86 | }
87 |
88 | if (win) {
89 | messageText.textContent = "You Win"
90 | }
91 | if (lose) {
92 | messageText.textContent = "You Lose"
93 | board.forEach(row => {
94 | row.forEach(tile => {
95 | if (tile.status === TILE_STATUSES.MARKED) board = markTile(board, tile)
96 | if (tile.mine) board = revealTile(board, tile)
97 | })
98 | })
99 | }
100 | }
101 |
102 | function stopProp(e) {
103 | e.stopImmediatePropagation()
104 | }
105 |
106 | function getMinePositions(boardSize, numberOfMines) {
107 | const positions = []
108 |
109 | while (positions.length < numberOfMines) {
110 | const position = {
111 | x: randomNumber(boardSize),
112 | y: randomNumber(boardSize),
113 | }
114 |
115 | if (!positions.some(positionMatch.bind(null, position))) {
116 | positions.push(position)
117 | }
118 | }
119 |
120 | return positions
121 | }
122 |
123 | function randomNumber(size) {
124 | return Math.floor(Math.random() * size)
125 | }
126 |
--------------------------------------------------------------------------------
/47-48-minesweeper-fp-tests/before/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | body {
6 | margin: 0;
7 | background-color: #333;
8 | display: flex;
9 | align-items: center;
10 | font-size: 3rem;
11 | flex-direction: column;
12 | color: white;
13 | }
14 |
15 | .title {
16 | margin: 20px;
17 | }
18 |
19 | .subtext {
20 | color: #CCC;
21 | font-size: 1.5rem;
22 | margin-bottom: 10px;
23 | }
24 |
25 | .board {
26 | display: inline-grid;
27 | padding: 10px;
28 | grid-template-columns: repeat(var(--size), 60px);
29 | grid-template-rows: repeat(var(--size), 60px);
30 | gap: 4px;
31 | background-color: #777;
32 | }
33 |
34 | .board > * {
35 | width: 100%;
36 | height: 100%;
37 | display: flex;
38 | justify-content: center;
39 | align-items: center;
40 | color: white;
41 | border: 2px solid #BBB;
42 | user-select: none;
43 | }
44 |
45 | .board > [data-status="hidden"] {
46 | background-color: #BBB;
47 | cursor: pointer;
48 | }
49 |
50 | .board > [data-status="mine"] {
51 | background-color: red;
52 | }
53 |
54 | .board > [data-status="number"] {
55 | background-color: none;
56 | }
57 |
58 | .board > [data-status="marked"] {
59 | background-color: yellow;
60 | }
--------------------------------------------------------------------------------
/55-weather-app/after/client/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | .cache
--------------------------------------------------------------------------------
/55-weather-app/after/client/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
14 | 
15 |
20 |
15 |
16 |
19 | 21°
17 | Sunny
18 |
21 |
46 |
22 |
25 | High
23 | 23°
24 |
26 |
29 | FL High
27 | 26°
28 |
30 |
33 | Wind
31 | 12mph
32 |
34 |
37 | LOW
35 | 12°
36 |
38 |
41 | FL Low
39 | 13°
40 |
42 |
45 | Precip
43 | 14%
44 |
49 | 
50 |
53 |
50 | Monday
51 | 23°
52 |
54 |
55 |
58 |
55 | Tuesday
56 | 23°
57 |
59 |
60 |
63 |
60 | Wednesday
61 | 23°
62 |
64 |
65 |
68 |
65 | Thursday
66 | 23°
67 |
69 |
70 |
73 |
70 | Friday
71 | 23°
72 |
74 |
75 |
78 |
75 | Saturday
76 | 23°
77 |
79 |
80 |
83 |
80 | Sunday
81 | 23°
82 | |
88 |
89 |
92 | Sunday
90 | 6AM
91 | |
93 |
94 |
95 | |
96 |
97 |
98 |
101 | TEMP
99 | 22°
100 | |
102 |
103 |
104 |
107 | FL TEMP
105 | 24°
106 | |
108 |
109 |
110 |
113 | WIND
111 | 12mph
112 | |
114 |
115 |
116 |
119 | PRECIP
117 | 10%
118 | |
120 |
|
123 |
124 |
127 | Sunday
125 | 7AM
126 | |
128 |
129 |
130 | |
131 |
132 |
133 |
136 | TEMP
134 | 22°
135 | |
137 |
138 |
139 |
142 | FL TEMP
140 | 24°
141 | |
143 |
144 |
145 |
148 | WIND
146 | 12mph
147 | |
149 |
150 |
151 |
154 | PRECIP
152 | 10%
153 | |
155 |
|
158 |
159 |
162 | Sunday
160 | 8AM
161 | |
163 |
164 |
165 | |
166 |
167 |
168 |
171 | TEMP
169 | 22°
170 | |
172 |
173 |
174 |
177 | FL TEMP
175 | 24°
176 | |
178 |
179 |
180 |
183 | WIND
181 | 12mph
182 | |
184 |
185 |
186 |
189 | PRECIP
187 | 10%
188 | |
190 |
|
193 |
194 |
197 | Sunday
195 | 9AM
196 | |
198 |
199 |
200 | |
201 |
202 |
203 |
206 | TEMP
204 | 22°
205 | |
207 |
208 |
209 |
212 | FL TEMP
210 | 24°
211 | |
213 |
214 |
215 |
218 | WIND
216 | 12mph
217 | |
219 |
220 |
221 |
224 | PRECIP
222 | 10%
223 | |
225 |
|
228 |
229 |
232 | Sunday
230 | 10AM
231 | |
233 |
234 |
235 | |
236 |
237 |
238 |
241 | TEMP
239 | 22°
240 | |
242 |
243 |
244 |
247 | FL TEMP
245 | 24°
246 | |
248 |
249 |
250 |
253 | WIND
251 | 12mph
252 | |
254 |
255 |
256 |
259 | PRECIP
257 | 10%
258 | |
260 |
|
263 |
264 |
267 | Sunday
265 | 11AM
266 | |
268 |
269 |
270 | |
271 |
272 |
273 |
276 | TEMP
274 | 22°
275 | |
277 |
278 |
279 |
282 | FL TEMP
280 | 24°
281 | |
283 |
284 |
285 |
288 | WIND
286 | 12mph
287 | |
289 |
290 |
291 |
294 | PRECIP
292 | 10%
293 | |
295 |
|
298 |
299 |
302 | Sunday
300 | 12PM
301 | |
303 |
304 |
305 | |
306 |
307 |
308 |
311 | TEMP
309 | 22°
310 | |
312 |
313 |
314 |
317 | FL TEMP
315 | 24°
316 | |
318 |
319 |
320 |
323 | WIND
321 | 12mph
322 | |
324 |
325 |
326 |
329 | PRECIP
327 | 10%
328 | |
330 |
|
333 |
334 |
337 | Sunday
335 | 1PM
336 | |
338 |
339 |
340 | |
341 |
342 |
343 |
346 | TEMP
344 | 22°
345 | |
347 |
348 |
349 |
352 | FL TEMP
350 | 24°
351 | |
353 |
354 |
355 |
358 | WIND
356 | 12mph
357 | |
359 |
360 |
361 |
364 | PRECIP
362 | 10%
363 | |
365 |
372 |
373 |
376 |
377 |
378 |
379 |
373 | Monday
374 | 23°
375 |
382 |
385 | Sunday
383 | 6AM
384 |
388 |
391 |
394 | TEMP
392 | 22°
393 |
397 |
400 | FL TEMP
398 | 24°
399 |
403 |
406 | WIND
404 | 12mph
405 |
409 |
412 | PRECIP
410 | 10%
411 |
13 |
14 |
19 |
14 |
15 |
18 | 21°
16 | Sunny
17 |
20 |
45 |
21 |
24 | High
22 | 23°
23 |
25 |
28 | FL High
26 | 26°
27 |
29 |
32 | Wind
30 | 12mph
31 |
33 |
36 | LOW
34 | 12°
35 |
37 |
40 | FL Low
38 | 13°
39 |
41 |
44 | Precip
42 | 14%
43 |
48 |
49 |
52 |
49 | Monday
50 | 23°
51 |
53 |
54 |
57 |
54 | Tuesday
55 | 23°
56 |
58 |
59 |
62 |
59 | Wednesday
60 | 23°
61 |
63 |
64 |
67 |
64 | Thursday
65 | 23°
66 |
68 |
69 |
72 |
69 | Friday
70 | 23°
71 |
73 |
74 |
77 |
74 | Saturday
75 | 23°
76 |
78 |
79 |
82 |
79 | Sunday
80 | 23°
81 | |
87 |
88 |
91 | Sunday
89 | 6AM
90 | |
92 |
93 |
94 | |
95 |
96 |
97 |
100 | TEMP
98 | 22°
99 | |
101 |
102 |
103 |
106 | FL TEMP
104 | 24°
105 | |
107 |
108 |
109 |
112 | WIND
110 | 12mph
111 | |
113 |
114 |
115 |
118 | PRECIP
116 | 10%
117 | |
119 |
|
122 |
123 |
126 | Sunday
124 | 7AM
125 | |
127 |
128 |
129 | |
130 |
131 |
132 |
135 | TEMP
133 | 22°
134 | |
136 |
137 |
138 |
141 | FL TEMP
139 | 24°
140 | |
142 |
143 |
144 |
147 | WIND
145 | 12mph
146 | |
148 |
149 |
150 |
153 | PRECIP
151 | 10%
152 | |
154 |
|
157 |
158 |
161 | Sunday
159 | 8AM
160 | |
162 |
163 |
164 | |
165 |
166 |
167 |
170 | TEMP
168 | 22°
169 | |
171 |
172 |
173 |
176 | FL TEMP
174 | 24°
175 | |
177 |
178 |
179 |
182 | WIND
180 | 12mph
181 | |
183 |
184 |
185 |
188 | PRECIP
186 | 10%
187 | |
189 |
|
192 |
193 |
196 | Sunday
194 | 9AM
195 | |
197 |
198 |
199 | |
200 |
201 |
202 |
205 | TEMP
203 | 22°
204 | |
206 |
207 |
208 |
211 | FL TEMP
209 | 24°
210 | |
212 |
213 |
214 |
217 | WIND
215 | 12mph
216 | |
218 |
219 |
220 |
223 | PRECIP
221 | 10%
222 | |
224 |
|
227 |
228 |
231 | Sunday
229 | 10AM
230 | |
232 |
233 |
234 | |
235 |
236 |
237 |
240 | TEMP
238 | 22°
239 | |
241 |
242 |
243 |
246 | FL TEMP
244 | 24°
245 | |
247 |
248 |
249 |
252 | WIND
250 | 12mph
251 | |
253 |
254 |
255 |
258 | PRECIP
256 | 10%
257 | |
259 |
|
262 |
263 |
266 | Sunday
264 | 11AM
265 | |
267 |
268 |
269 | |
270 |
271 |
272 |
275 | TEMP
273 | 22°
274 | |
276 |
277 |
278 |
281 | FL TEMP
279 | 24°
280 | |
282 |
283 |
284 |
287 | WIND
285 | 12mph
286 | |
288 |
289 |
290 |
293 | PRECIP
291 | 10%
292 | |
294 |
|
297 |
298 |
301 | Sunday
299 | 12PM
300 | |
302 |
303 |
304 | |
305 |
306 |
307 |
310 | TEMP
308 | 22°
309 | |
311 |
312 |
313 |
316 | FL TEMP
314 | 24°
315 | |
317 |
318 |
319 |
322 | WIND
320 | 12mph
321 | |
323 |
324 |
325 |
328 | PRECIP
326 | 10%
327 | |
329 |
|
332 |
333 |
336 | Sunday
334 | 1PM
335 | |
337 |
338 |
339 | |
340 |
341 |
342 |
345 | TEMP
343 | 22°
344 | |
346 |
347 |
348 |
351 | FL TEMP
349 | 24°
350 | |
352 |
353 |
354 |
357 | WIND
355 | 12mph
356 | |
358 |
359 |
360 |
363 | PRECIP
361 | 10%
362 | |
364 |
Color Game
14 |rgb(255, 0, 0)
15 | 39 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
52 |
53 |
--------------------------------------------------------------------------------
/64-65-color-game/after/script.js:
--------------------------------------------------------------------------------
1 | import Rgb from "./Rgb.js"
2 | import Hex from "./Hex.js"
3 | import Hsl from "./Hsl.js"
4 |
5 | const COLOR_MAP = {
6 | rgb: Rgb,
7 | hex: Hex,
8 | hsl: Hsl,
9 | }
10 |
11 | const DIFFICULTY_MAP = {
12 | easy: { withinTolerance: 1, outsideTolerance: 0.2 },
13 | medium: { withinTolerance: 0.5, outsideTolerance: 0.2 },
14 | hard: { withinTolerance: 0.3, outsideTolerance: 0.2 },
15 | }
16 | const nextButton = document.querySelector("[data-next-btn]")
17 | nextButton.addEventListener("click", render)
18 | document.addEventListener("change", e => {
19 | if (e.target.matches('input[type="radio"]')) render()
20 | })
21 |
22 | // Formatter
23 | // Difficulty - Config for the formatter
24 |
25 | // Render - every time page loads, on change of format, on change of difficulty
26 | // 1. Get a formatter
27 | // 2. Configure formatter based on difficulty
28 | // 3. Generate colors
29 | // 4. Render colors
30 | // 5. Handle clicking a color
31 |
32 | // Generate correct color
33 | // Generate similar colors based on difficulty
34 |
35 | const colorGrid = document.querySelector("[data-color-grid]")
36 | const colorStringElement = document.querySelector("[data-color-string]")
37 | const resultsElement = document.querySelector("[data-results]")
38 | const resultsText = document.querySelector("[data-results-text]")
39 | function render() {
40 | const format = document.querySelector('[name="format"]:checked').value
41 | const difficulty = document.querySelector('[name="difficulty"]:checked').value
42 | const { colors, correctColor } = generateColors({ format, difficulty })
43 |
44 | colorGrid.innerHTML = ""
45 | colorStringElement.textContent = correctColor.toCss()
46 | resultsElement.classList.add("hide")
47 | const colorElements = colors
48 | .sort(() => Math.random() - 0.5)
49 | .map(color => {
50 | const element = document.createElement("button")
51 | element.style.backgroundColor = color.toCss()
52 | return { color, element }
53 | })
54 | colorElements.forEach(({ color, element }) => {
55 | element.addEventListener("click", () => {
56 | resultsElement.classList.remove("hide")
57 | resultsText.textContent = color === correctColor ? "Correct" : "Wrong"
58 |
59 | colorElements.forEach(({ color: c, element: e }) => {
60 | e.disabled = true
61 | e.classList.toggle("wrong", c !== correctColor)
62 | })
63 | })
64 | colorGrid.append(element)
65 | })
66 | }
67 | render()
68 |
69 | function generateColors({ format, difficulty }) {
70 | const colorClass = COLOR_MAP[format]
71 | const difficultyRules = DIFFICULTY_MAP[difficulty]
72 | const correctColor = colorClass.generate()
73 | const colors = [correctColor]
74 | for (let i = 0; i < 5; i++) {
75 | colors.push(correctColor.generateSimilar(difficultyRules))
76 | }
77 | return { colors, correctColor }
78 | }
79 |
80 | const rgb = Rgb.generate()
81 | console.log(
82 | rgb,
83 | rgb.generateSimilar({ withinTolerance: 0.3, outsideTolerance: 0.2 })
84 | )
85 |
--------------------------------------------------------------------------------
/64-65-color-game/after/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | }
4 |
5 | .title, .color-string {
6 | text-align: center;
7 | margin: .5rem;
8 | }
9 |
10 | .title {
11 | color: #777;
12 | }
13 |
14 | .form {
15 | display: flex;
16 | }
17 |
18 | .form fieldset {
19 | flex-grow: 1;
20 | text-align: center;
21 | }
22 |
23 | .radio-group {
24 | display: grid;
25 | justify-content: center;
26 | justify-items: flex-start;
27 | grid-template-columns: auto auto;
28 | gap: .25rem;
29 | }
30 |
31 | .radio-group > * {
32 | cursor: pointer;
33 | }
34 |
35 | .color-grid {
36 | display: grid;
37 | gap: .5rem;
38 | justify-content: center;
39 | max-width: 16rem;
40 | margin: auto;
41 | padding: .5rem;
42 | grid-template-columns: repeat(auto-fill, 5rem);
43 | grid-auto-rows: 5rem;
44 | }
45 |
46 | .color-grid > * {
47 | border-radius: .5rem;
48 | border: 1px solid black;
49 | padding: 0;
50 | margin: 0;
51 | }
52 |
53 | .color-grid > :disabled {
54 | cursor: default;
55 | }
56 |
57 | .color-grid > .wrong {
58 | opacity: .3;
59 | }
60 |
61 | .results {
62 | text-align: center;
63 | font-size: 1.5rem;
64 | }
65 |
66 | .results.hide {
67 | display: none;
68 | }
69 |
70 | button {
71 | cursor: pointer;
72 | }
--------------------------------------------------------------------------------
/64-65-color-game/after/utils.js:
--------------------------------------------------------------------------------
1 | export function randomNumber({ min = 0, max }) {
2 | return Math.floor(Math.random() * (max - min + 1)) + min
3 | }
4 |
5 | export function randomValueInRange(options) {
6 | const ranges = validRanges(options)
7 |
8 | const range = ranges[randomNumber({ max: ranges.length - 1 })]
9 | return randomNumber(range)
10 | }
11 |
12 | function validRanges({
13 | startingValue,
14 | maxCutoff,
15 | withinTolerance,
16 | outsideTolerance,
17 | }) {
18 | const withinToleranceIncrementor = Math.floor(withinTolerance * maxCutoff)
19 | const outsideToleranceIncrementor = Math.ceil(outsideTolerance * maxCutoff)
20 |
21 | const aboveRangeMin = startingValue + outsideToleranceIncrementor
22 | const aboveRangeMax = Math.min(
23 | startingValue + withinToleranceIncrementor,
24 | maxCutoff
25 | )
26 |
27 | const belowRangeMin = Math.max(startingValue - withinToleranceIncrementor, 0)
28 | const belowRangeMax = startingValue - outsideToleranceIncrementor
29 |
30 | const ranges = []
31 | if (aboveRangeMax > aboveRangeMin) {
32 | ranges.push({ min: aboveRangeMin, max: aboveRangeMax })
33 | }
34 | if (belowRangeMax > belowRangeMin) {
35 | ranges.push({ min: belowRangeMin, max: belowRangeMax })
36 | }
37 | return ranges
38 | }
39 |
--------------------------------------------------------------------------------
/64-65-color-game/before/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Correct
50 |
51 | Color Game
13 |rgb(255, 0, 0)
14 | 38 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
51 |
52 |
--------------------------------------------------------------------------------
/64-65-color-game/before/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: sans-serif;
3 | }
4 |
5 | .title, .color-string {
6 | text-align: center;
7 | margin: .5rem;
8 | }
9 |
10 | .title {
11 | color: #777;
12 | }
13 |
14 | .form {
15 | display: flex;
16 | }
17 |
18 | .form fieldset {
19 | flex-grow: 1;
20 | text-align: center;
21 | }
22 |
23 | .radio-group {
24 | display: grid;
25 | justify-content: center;
26 | justify-items: flex-start;
27 | grid-template-columns: auto auto;
28 | gap: .25rem;
29 | }
30 |
31 | .radio-group > * {
32 | cursor: pointer;
33 | }
34 |
35 | .color-grid {
36 | display: grid;
37 | gap: .5rem;
38 | justify-content: center;
39 | max-width: 16rem;
40 | margin: auto;
41 | padding: .5rem;
42 | grid-template-columns: repeat(auto-fill, 5rem);
43 | grid-auto-rows: 5rem;
44 | }
45 |
46 | .color-grid > * {
47 | border-radius: .5rem;
48 | border: 1px solid black;
49 | padding: 0;
50 | margin: 0;
51 | }
52 |
53 | .color-grid > :disabled {
54 | cursor: default;
55 | }
56 |
57 | .color-grid > .wrong {
58 | opacity: .3;
59 | }
60 |
61 | .results {
62 | text-align: center;
63 | font-size: 1.5rem;
64 | }
65 |
66 | .results.hide {
67 | display: none;
68 | }
69 |
70 | button {
71 | cursor: pointer;
72 | }
--------------------------------------------------------------------------------
Correct
49 |
50 |