Skip to content

Commit d7acdb7

Browse files
arthurguedes375arthurguedes375
committed
Routes
1 parent e338751 commit d7acdb7

23 files changed

+463
-202
lines changed

‎.gitignore

100644100755
File mode changed.

‎README.md

100644100755
File mode changed.

‎package.json

100644100755
+2-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^7.1.2",
99
"react": "^16.13.1",
1010
"react-dom": "^16.13.1",
11+
"react-router-dom": "^5.2.0",
1112
"react-scripts": "3.4.1",
1213
"sweetalert2": "^9.15.1"
1314
},
@@ -32,4 +33,4 @@
3233
"last 1 safari version"
3334
]
3435
}
35-
}
36+
}

‎public/index.html

100644100755
File mode changed.

‎public/manifest.json

100644100755
File mode changed.

‎readme/tictactoe.gif

100644100755
File mode changed.

‎src/App.jsx

100644100755
+3-168
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,18 @@
11
import React, { Component } from 'react';
22

3-
// Alerts
4-
import Swal from 'sweetalert2';
53

64
// Styles
75
import './app.css';
86

9-
// Bootstrap
10-
import './assets/lib/bootstrap.min.css';
117

128
// Components
13-
import Board from './components/board';
14-
import Field from './components/field';
15-
16-
class App extends Component {
17-
18-
state = {
19-
20-
board: ['', '', '', '', '', '', '', '', ''],
21-
symbols: {
22-
options: ['X', 'O'],
23-
turn_index: Math.round(Math.random(0, 1)),
24-
change() {
25-
this.turn_index = (this.turn_index === 0) ? 1 : 0;
26-
}
27-
},
28-
29-
winning_sequences: [
30-
[0, 1, 2],
31-
[3, 4, 5],
32-
[6, 7, 8],
33-
[0, 3, 6],
34-
[1, 4, 7],
35-
[2, 5, 8],
36-
[0, 4, 8],
37-
[2, 4, 6]
38-
],
39-
gameover: false,
40-
41-
}
42-
43-
constructor(props) {
44-
super(props);
45-
46-
this.make_play = this.make_play.bind(this);
47-
this.check_winning_sequences = this.check_winning_sequences.bind(this);
48-
this.check_tied = this.check_tied.bind(this);
49-
this.start = this.start.bind(this);
50-
this.alert = this.alert.bind(this);
51-
}
52-
53-
54-
make_play(position) {
55-
56-
if (this.state.gameover) return false;
57-
if (this.state.board[position] === '') {
58-
const board = this.state.board;
59-
board[position] = this.state.symbols.options[this.state.symbols.turn_index];
60-
this.setState({ board })
61-
const check_winning_sequences_index = this.check_winning_sequences(this.state.symbols.options[this.state.symbols.turn_index])
62-
if (check_winning_sequences_index >= 0) {
63-
this.setState({ gameover: true })
64-
65-
const data = {
66-
title: `Winner: ${this.state.symbols.options[this.state.symbols.turn_index]}`,
67-
text: 'Restart?',
68-
icon: 'success',
69-
confirmText: 'Yes!',
70-
cancelText: 'No!',
71-
canceledValue() { }
72-
73-
}
74-
75-
setTimeout(() => this.alert(data), 150);
76-
77-
78-
} else {
79-
this.state.symbols.change();
80-
if (this.check_tied()) {
81-
this.setState({ gameover: true })
82-
83-
84-
const data = {
85-
title: 'We Tied',
86-
text: 'Restart?',
87-
icon: 'info',
88-
confirmText: 'Yes!',
89-
cancelText: 'No!',
90-
canceledValue() { }
91-
}
92-
93-
setTimeout(() => this.alert(data), 150);
94-
}
95-
}
96-
return true;
97-
} else {
98-
return false;
99-
}
100-
101-
}
102-
103-
check_winning_sequences(symbol) {
104-
console.log(this.state.winning_sequences);
105-
106-
let returned = -1;
107-
108-
this.state.winning_sequences.map((value, i) => {
109-
if (this.state.board[this.state.winning_sequences[i][0]] === symbol &&
110-
this.state.board[this.state.winning_sequences[i][1]] === symbol &&
111-
this.state.board[this.state.winning_sequences[i][2]] === symbol) {
112-
console.log("Sequencia vencedora: " + i);
113-
returned = i;
114-
}
115-
});
116-
return returned;
117-
}
118-
119-
// If tied return true
120-
check_tied() {
121-
console.log(this.state.board);
122-
let returned = true;
123-
this.state.board.map((value, i) => {
124-
if (this.state.board[i] === '') returned = false;
125-
});
126-
return returned;
127-
}
128-
129-
alert(data) {
130-
const swalWithBootstrapButtons = Swal.mixin({
131-
customClass: {
132-
confirmButton: 'btn btn-success confirmBtn',
133-
cancelButton: 'btn btn-secondary cancelBtn'
134-
},
135-
buttonsStyling: false
136-
})
137-
138-
swalWithBootstrapButtons.fire({
139-
title: data.title,
140-
text: data.text,
141-
icon: data.icon,
142-
showCancelButton: true,
143-
confirmButtonText: data.confirmText,
144-
cancelButtonText: data.cancelText,
145-
reverseButtons: true
146-
}).then((result) => {
147-
if (result.value) {
148-
// Accept
149-
this.start()
150-
} else if (result.dismiss === Swal.DismissReason.cancel) {
151-
// Canceled
152-
data.canceledValue();
153-
}
154-
155-
})
156-
}
157-
158-
start() {
159-
160-
const symbols = this.state.symbols;
161-
let board = this.state.board;
162-
symbols.turn_index = Math.round(Math.random(0, 1));
163-
board.fill('');
164-
165-
this.setState({ symbols, board, gameover: false });
166-
}
167-
9+
import Routes from './routes';
16810

16911

12+
class App extends Component {
17013
render() {
17114
return (
172-
<div className="App">
173-
<h1 className="player">Player: {this.state.symbols.options[this.state.symbols.turn_index]}</h1>
174-
<Board>
175-
{this.state.board.map((value, index) =>
176-
<Field key={index} click={() => this.make_play(index)}>{value}</Field>)
177-
}
178-
</Board>
179-
<input onClick={() => this.start()} type="button" className="btnRst" value="Restart" />
180-
</div>
15+
<Routes />
18116
);
18217
}
18318
}

‎src/app.css

100644100755
-28
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,7 @@
11
.App {
2-
font-family: Helvetica, sans-serif;
32
display: flex;
43
flex-direction: column;
54
align-items: center;
65
justify-content: center;
76
height: 100vh;
8-
background-color: var(--bgc);
9-
}
10-
11-
.player {
12-
color: var(--player)
13-
}
14-
15-
.btnRst {
16-
border: 4px solid var(--border);
17-
background-color: var(--bgc);
18-
color: #fff;
19-
cursor: pointer;
20-
padding: 10px 20px;
21-
transition: background-color .2s;
22-
outline: none;
23-
}
24-
25-
.btnRst:hover {
26-
background-color: var(--hover);
27-
}
28-
29-
.confirmBtn {
30-
margin-left: 7px;
31-
}
32-
33-
.cancelBtn {
34-
margin-right: 7px;
357
}

‎src/assets/lib/bootstrap.min.css

100644100755
File mode changed.

‎src/boot.css

100644100755
+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
--bgc: #2367ac;
44
--hover: #4981b9;
55
--border: #0c59a7;
6-
--player: white;
6+
--text-color: white;
77
}
88

99
/*

‎src/components/board/index.jsx

100644100755
File mode changed.

‎src/components/board/styles.css

100644100755
+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
height: 600px;
44
margin: 15px auto;
55
background-color: var(--bgc);
6-
color: #fff;
6+
color: var(--text-color);
77
border: 6px solid var(--border);
88
border-radius: 10px;
99
display: grid;

‎src/components/button/index.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React, { Component } from 'react';
2+
3+
import './styles.css';
4+
5+
class Button extends Component {
6+
render() {
7+
return (
8+
<input onClick={this.props.onClick} type="button" className="btnRst" value={this.props.value} />
9+
);
10+
}
11+
}
12+
13+
export default Button;

‎src/components/button/styles.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.btnRst {
2+
border: 4px solid var(--border);
3+
background-color: var(--bgc);
4+
color: var(--text-color);
5+
cursor: pointer;
6+
padding: 10px 20px;
7+
transition: background-color .2s;
8+
outline: none;
9+
}
10+
11+
.btnRst:hover {
12+
background-color: var(--hover);
13+
}

‎src/components/field/index.jsx

100644100755
File mode changed.

‎src/components/field/styles.css

100644100755
File mode changed.

‎src/index.js

100644100755
File mode changed.

0 commit comments

Comments
 (0)