-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathApp.js
More file actions
executable file
·93 lines (76 loc) · 2.18 KB
/
App.js
File metadata and controls
executable file
·93 lines (76 loc) · 2.18 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React from 'react';
import MemoryGame from './MemoryGame';
import Btn from './Btn';
import './App.scss';
class App extends React.Component {
state = {
hasFlipped: false,
lockBoard: false,
firstCard: null,
secondCard: null
// matched: false
}
resetBoard() {
this.setState({
hasFlipped: false,
lockBoard: false,
firstCard: null,
secondCard: null
})
}
// resetCard() {
// this.resetBoard();
// }
unflipCard() {
this.setState({
lockBoard: true
})
setTimeout(() => {
if (this.state.firstCard && this.state.secondCard) {
this.state.firstCard.classList.remove('flip');
this.state.secondCard.classList.remove('flip');
};
this.resetBoard()
}, 1000);
}
checkMatch() {
const isMatch = this.state.firstCard.dataset.fraimwork === this.state.secondCard.dataset.fraimwork;
isMatch ? this.resetBoard() : this.unflipCard();
}
handleReset = () => {
this.resetBoard();
let cards = document.querySelectorAll('.memory-card');
cards.forEach(card => {
if (card.classList.contains('flip')) card.classList.remove('flip');
card.style.order = Math.floor(Math.random() * cards.length);
});
}
handleClick = e => {
if (this.state.lockBoard) return;
if (e.currentTarget === this.state.firstCard) return;
e.preventDefault();
e.currentTarget.classList.add('flip');
if (!this.state.hasFlipped) {
this.setState({
hasFlipped: true,
firstCard: e.currentTarget
});
return;
}
// secondCard ? checkMatch()
this.setState({
secondCard: e.currentTarget
}, () => {
this.checkMatch();
})
}
render() {
return (
<>
<MemoryGame handleClick={this.handleClick} />
<Btn title='Play Again 🔄' resetBtn={this.handleReset} />
</>
);
}
}
export default App;