Skip to content

Commit 5ccf4ff

Browse files
author
ernestodebesto
committed
kilka bugow poszlos sie
1 parent a47c90d commit 5ccf4ff

File tree

12 files changed

+171
-96
lines changed

12 files changed

+171
-96
lines changed

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎backup‎

Lines changed: 106 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
const entryState = []
43
document.addEventListener('DOMContentLoaded', function() {
54
class TicTacBoard extends React.Component {
6-
//zrobic wejsciowy stan gry const entrySetup = [0]
7-
//zrobic rowniez cos zeby nie wywalalo bledu kiedy czlowiek robi ostatni ruch na planszy i ai nie ma gdzie sie ruszyc
8-
95
constructor(props) {
106
super(props);
117
this.state = {
@@ -21,43 +17,63 @@ document.addEventListener('DOMContentLoaded', function() {
2117
takenFieldsX: [],
2218
takenFieldsY: [],
2319
moveNumber: 0,
24-
player: 'human',
20+
player: 'computer',
2521
computerPoints: 0,
26-
humanPoints: 0
22+
humanPoints: 0,
23+
end: false,
24+
2725
}
2826
}
2927
render() {
3028
return (
3129
<div>
32-
{this.props.children}
33-
<div className='game-container'>
34-
<div className='row'>
35-
<div data-tag='1' className={this.state.fieldOne + ' field'} id='fieldOne' onClick={this.makeMove}></div>
36-
<div data-tag='2' className={this.state.fieldTwo + ' field'} id='fieldTwo' onClick={this.makeMove}></div>
37-
<div data-tag='3' className={this.state.fieldThree + ' field'} id='fieldThree' onClick={this.makeMove}></div>
38-
</div>
39-
<div className='row'>
40-
<div data-tag='4' className={this.state.fieldFour + ' field'} id='fieldFour' onClick={this.makeMove}></div>
41-
<div data-tag='5' className={this.state.fieldFive + ' field'} id='fieldFive' onClick={this.makeMove}></div>
42-
<div data-tag='6' className={this.state.fieldSix + ' field'} id='fieldSix' onClick={this.makeMove}></div>
43-
</div>
44-
<div className='row'>
45-
<div data-tag='7' className={this.state.fieldSeven + ' field'} id='fieldSeven' onClick={this.makeMove}></div>
46-
<div data-tag='8' className={this.state.fieldEight + ' field'} id='fieldEight' onClick={this.makeMove}></div>
47-
<div data-tag='9' className={this.state.fieldNine + ' field'} id='fieldNine' onClick={this.makeMove}></div>
48-
</div>
49-
<div className='buttons'>
50-
<button onClick={this.moveAI}> Switch- SIdes</button>
51-
</div>
30+
<Intro onStart={this.moveAI}/>
31+
<div>
32+
<div className='header-container'>
33+
<div className='game-title'>
34+
<h1>Tic Tac Toe 9000</h1>
35+
</div>
36+
</div>
37+
<div className='points-ai'>
38+
<h3>User Points : <span>{this.state.humanPoints}</span>
39+
</h3>
40+
</div>
41+
<div className='points-human'>
42+
<h3>AI Points : <span>{this.state.computerPoints}</span>
43+
</h3>
44+
</div>
5245
</div>
46+
<div className='game-container'>
47+
<div className='experimental-container'>
48+
<div className='row'>
49+
<div data-tag='1' className={this.state.fieldOne + ' field'} id='fieldOne' onClick={this.makeMove}></div>
50+
<div data-tag='2' className={this.state.fieldTwo + ' field'} id='fieldTwo' onClick={this.makeMove}></div>
51+
<div data-tag='3' className={this.state.fieldThree + ' field'} id='fieldThree' onClick={this.makeMove}></div>
52+
</div>
53+
<div className='row'>
54+
<div data-tag='4' className={this.state.fieldFour + ' field'} id='fieldFour' onClick={this.makeMove}></div>
55+
<div data-tag='5' className={this.state.fieldFive + ' field'} id='fieldFive' onClick={this.makeMove}></div>
56+
<div data-tag='6' className={this.state.fieldSix + ' field'} id='fieldSix' onClick={this.makeMove}></div>
57+
</div>
58+
<div className='row'>
59+
<div data-tag='7' className={this.state.fieldSeven + ' field'} id='fieldSeven' onClick={this.makeMove}></div>
60+
<div data-tag='8' className={this.state.fieldEight + ' field'} id='fieldEight' onClick={this.makeMove}></div>
61+
<div data-tag='9' className={this.state.fieldNine + ' field'} id='fieldNine' onClick={this.makeMove}></div>
62+
</div>
63+
<div className='buttons'>
64+
<button onClick={this.stopAndReset} className='restart-btn'>
65+
REMATCH
66+
</button>
67+
</div>
68+
</div>
5369
</div>
70+
</div>
5471

5572
)
5673
}
57-
//zrobic metode ktora jesli ostatnio gracz/komputer sie pierwszy ruszal to teraz rusza sie pirwszy drugi gracz.
5874
// kiedy gracz zaczyna
5975
makeMove = (e) => {
60-
if (e.currentTarget.className === 'y field' || e.currentTarget.className === 'x field') {
76+
if (e.currentTarget.className === 'y field' || e.currentTarget.className === 'x field' || this.state.end) {
6177
console.log('zajete'); //byc moze trzeba bedzie zmodyfikowac te metode jesli do stylowania uzyjemy klas
6278
} else {
6379
let arr = this.state.takenFieldsX.slice();
@@ -71,29 +87,62 @@ document.addEventListener('DOMContentLoaded', function() {
7187
this.checkDraw();
7288
this.checkStatusPlayer();
7389
})
74-
90+
setTimeout(this.moveAI, 200)
7591
// console.log($('.field[data-tag=1]') )
7692
// console.log($('.field[data-tag=1]').attr('data-tag'));
77-
78-
setTimeout(this.moveAI, 150); //przenies do callbacku
7993
}
8094
}
8195

82-
//niech gra sie zaczyna - 2 divy - graj pierwszy (obrazek) graj drugi(obrezaek) jeden pod drugim.
83-
// Jesli bedzie czas to dodac licznik. podzielic jakos plansze na czlowiek kontra komputer.
84-
85-
//jeden przycisk - zamien strony. kroy zaczyna dzialanie ai. dwa rodzaje buttonow - ludzki i komputerowy. i wtedy klasa x zawsze bedzie dla komputera i wyeliminuje to problem zmiany klas.
86-
//dodaj tez do kazdego z tych warunkow to ze przy wygranej ukazuje sie animacja
87-
8896
// akcja dla wygranej
8997
endGame = (winner) => {
90-
console.log(winner + ' wygral');
91-
} //zatrzymaj cala gre, dodaj punkt, pokaz przycisk restart, pokaz animacje w miejscu gdzie trzeba zrobic animacje
98+
$('.experimental-container').css('background-image', 'url(./img/koniecgry.gif)')
99+
if (winner === 'human') {
100+
let num = this.state.humanPoints + 1;
101+
this.setState({humanPoints: num, end: true});
102+
} else {
103+
let num = this.state.computerPoints + 1;
104+
this.setState({computerPoints: num, end: true});
105+
}
106+
}
92107

93108

109+
firstRun = () => {
110+
setTimeout(() => {$('.intro').hide()}, 2000)
111+
} //dodaj ze wrzuca klase obrazek - pozniknieciu menu
94112
//tu bedzie caly ai
95113
moveAI = () => {
96-
this.checkWinAI();
114+
if (this.state.end) {
115+
console.log('koniec gry');
116+
} else {
117+
setTimeout(this.checkWinAI, 200)
118+
}
119+
}
120+
121+
stopAndReset = () => {
122+
$('.experimental-container').css('background-image', 'url(./img/poczatek(1).gif)')
123+
this.setState({
124+
fieldOne: '',
125+
fieldTwo: '',
126+
fieldThree: '',
127+
fieldFour: '',
128+
fieldFive: '',
129+
fieldSix: '',
130+
fieldSeven: '',
131+
fieldEight: '',
132+
fieldNine: '',
133+
takenFieldsX: [],
134+
takenFieldsY: [],
135+
moveNumber: 0,
136+
end: false
137+
});
138+
139+
if (this.state.player === 'human') {
140+
this.setState({
141+
player: 'computer'
142+
}, () => this.moveAI())
143+
} else {
144+
this.setState({player: 'human'})
145+
}
97146
}
98147

99148
//generator losowego ruchu
@@ -121,13 +170,9 @@ document.addEventListener('DOMContentLoaded', function() {
121170
//sprawdz remis
122171
checkDraw = () => {
123172
if (this.state.moveNumber === 9) {
124-
console.log('remis');
125-
} //pokaz przycisk restart, zatrzymaj gre, wywolaj metode endgame(remis, kazdy po punkcie)
126-
}
127-
restartGame = () => {}
128-
129-
endGame = (winner) => {
130-
console.log(winner + 'wins');
173+
$('.experimental-container').css('background-image', 'url(./img/koniecgry.gif)')
174+
this.setState({end: true});
175+
}
131176
}
132177

133178
checkWinAI = () => {
@@ -306,37 +351,28 @@ document.addEventListener('DOMContentLoaded', function() {
306351
}
307352
}
308353

309-
class Menu extends React.Component {
310-
render() {
311-
return <div>
312-
<div className='header-container'>
313-
<div className='game-title'><h1>Tic Tac Toe 9000</h1> </div>
314-
</div>
315-
<div className='points-ai'> <h3>punkty uzytkownika</h3> </div>
316-
<div className='points-human'> <h3>Punkty komputera </h3> </div>
317-
</div>
318-
319-
320-
}
321-
}
322-
323354
class Intro extends React.Component {
355+
handleStartClick = () => {
356+
if (typeof this.props.onStart === 'function') {
357+
$('.intro').addClass('fade-out')
358+
setTimeout(this.props.onStart, 300)
359+
setTimeout(() => {$('.intro').hide()}, 2000)
360+
}
361+
}
324362
render() {
325-
return <div className='intro'></div>
363+
return <div className='intro'>
364+
<button className= 'start-btn' onClick={this.handleStartClick}>
365+
START
366+
</button>
367+
</div>
326368
}
327369
}
328370

329371
class App extends React.Component {
330372
render() {
331-
return <div className='background-all'>
332-
<div className='main-container'>
333-
<Menu />
334-
<TicTacBoard>
335-
<Intro />
336-
</TicTacBoard>
337-
</div>
373+
return <div className='main-container'>
374+
<TicTacBoard/>
338375
</div>
339-
340376
}
341377
}
342378

‎css/style.css‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
}
44

55
body {
6-
background-color:blue;
6+
background-image:url('../img/source.gif');
77
}
88
.row {
99
display:flex;
@@ -13,40 +13,60 @@ body {
1313
height: 150px;
1414
width:150px;
1515
border:1px solid black;
16+
/*position: relative;
17+
z-index: -1;*/
1618
}
1719

1820
.x{
19-
background-color: green;
21+
background-image: url('../img/rozowyx.gif');
22+
background-size: cover;
2023
}
2124

2225
.y {
23-
background-color: red;
26+
background-image: url('../img/czerwonekolo.gif');
27+
background-size: cover;
2428
}
2529

30+
h1 {
31+
font-size: 50px;
32+
color: #18CAE6;
33+
margin-bottom: 5px;
34+
}
35+
36+
h3 {
37+
color: #18CAE6;
38+
}
39+
40+
h3 span {
41+
color: #AA00FF;
42+
font-size: 28px;
43+
}
2644
.experimental-container {
27-
background-image: url('../img/poczatek (1).gif');
45+
background-image: url('../img/poczatek.gif');
2846
background-size:cover;
2947
position:absolute;
3048
z-index:10;
3149
width:456px;
3250
height:456px
33-
3451
}
3552

53+
54+
3655
.restart-btn {
3756
width: 100px;
3857
height: 50px;
3958
margin: 30px;
4059
left: 22%;
4160
position: relative;
4261
border-radius: 5px;
43-
background-color: #4BEDEA;
62+
background-color: #18CAE6;
4463
width:200px;
4564
height:100px;
4665
transition: 0.5s;
4766
box-shadow: inset 0 0 0 0 #222;
4867
font-weight:500;
4968
font-size: 18px;
69+
margin-top: 5px;
5070
}
5171
.restart-btn:hover {
5272
box-shadow:0 0 0 25px black inset;
@@ -56,7 +76,7 @@ body {
5676

5777
.start-btn {
5878
border-radius: 5px;
59-
background-color: #4BEDEA;
79+
background-color: #18CAE6;
6080
width:200px;
6181
height:100px;
6282
transition: 0.5s;
@@ -95,8 +115,8 @@ body {
95115
width: 763px;
96116
height: 628px;
97117
position: relative;
98-
z-index: 1;
99-
background-image:url('../img/bck.gif');
118+
z-index: 999;
119+
background-color:black;
100120
opacity: 1;
101121
transition: 2s ease-in;
102122
position: absolute;
@@ -106,7 +126,7 @@ body {
106126
justify-content:center;
107127
align-items: center;
108128
border-radius: 10px;
109-
visibility:hidden;
129+
visibility: hidden;
110130
}
111131

112132
.fade-out {

‎img/.DS_Store‎

0 Bytes
Binary file not shown.

‎img/czerwonekolo.gif‎

41.4 KB
Loading

‎img/kolko.gif‎

39.9 KB
Loading

‎img/poczatek (1).gif‎ renamed to ‎img/poczatek.gif‎

File renamed without changes.

‎img/rozowyx.gif‎

17.5 KB
Loading

‎img/source.gif‎

5.96 MB
Loading

‎img/xx.gif‎

17.6 KB
Loading

0 commit comments

Comments
 (0)