Skip to content

Commit fae3394

Browse files
author
ernestodebesto
committed
transition
1 parent 5d563d4 commit fae3394

File tree

3 files changed

+89
-105
lines changed

3 files changed

+89
-105
lines changed

‎css/style.css‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ button {
3939

4040
}
4141

42+
4243
.game-title {
4344
text-align: center;
4445
}
@@ -50,11 +51,19 @@ button {
5051
}
5152

5253
.intro {
53-
background-color: red;
54-
width: 1000px;
55-
height: 1000px;
54+
border:1px solid grey;
55+
width: 500px;
56+
height: 500px;
5657
position: absolute;
5758
z-index: 1;
59+
background-color: grey;
60+
opacity: 1;
61+
transition: opacity 2s linear;
62+
}
63+
64+
65+
.fade-out {
66+
opacity: 0;
5867
}
5968

6069
.points-human {

‎js/out.js‎

Lines changed: 11 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9805,16 +9805,10 @@ document.addEventListener('DOMContentLoaded', function () {
98059805
_this.endGame = function (winner) {
98069806
if (winner === 'human') {
98079807
var num = _this.state.humanPoints + 1;
9808-
_this.setState({
9809-
humanPoints: num,
9810-
end: true
9811-
});
9808+
_this.setState({ humanPoints: num, end: true });
98129809
} else {
98139810
var _num = _this.state.computerPoints + 1;
9814-
_this.setState({
9815-
computerPoints: _num,
9816-
end: true
9817-
});
9811+
_this.setState({ computerPoints: _num, end: true });
98189812
}
98199813
};
98209814

@@ -9850,9 +9844,7 @@ document.addEventListener('DOMContentLoaded', function () {
98509844
return _this.moveAI();
98519845
});
98529846
} else {
9853-
_this.setState({
9854-
player: 'human'
9855-
});
9847+
_this.setState({ player: 'human' });
98569848
}
98579849
};
98589850

@@ -9878,9 +9870,7 @@ document.addEventListener('DOMContentLoaded', function () {
98789870

98799871
_this.checkDraw = function () {
98809872
if (_this.state.moveNumber === 9) {
9881-
_this.setState({
9882-
end: true
9883-
});
9873+
_this.setState({ end: true });
98849874
} //pokaz przycisk restart, zatrzymaj gre, wywolaj metode endgame(remis, kazdy po punkcie)
98859875
};
98869876

@@ -10094,41 +10084,36 @@ document.addEventListener('DOMContentLoaded', function () {
1009410084
'h1',
1009510085
null,
1009610086
'Tic Tac Toe 9000'
10097-
),
10098-
' '
10087+
)
1009910088
)
1010010089
),
1010110090
_react2.default.createElement(
1010210091
'div',
1010310092
{ className: 'points-ai' },
10104-
' ',
1010510093
_react2.default.createElement(
1010610094
'h3',
1010710095
null,
10108-
'punkty uzytkownika ',
10096+
'punkty uzytkownika: ',
1010910097
_react2.default.createElement(
1011010098
'span',
1011110099
null,
1011210100
this.state.humanPoints
1011310101
)
10114-
),
10115-
' '
10102+
)
1011610103
),
1011710104
_react2.default.createElement(
1011810105
'div',
1011910106
{ className: 'points-human' },
10120-
' ',
1012110107
_react2.default.createElement(
1012210108
'h3',
1012310109
null,
10124-
'Punkty komputera ',
10110+
'Punkty komputera: ',
1012510111
_react2.default.createElement(
1012610112
'span',
1012710113
null,
1012810114
this.state.computerPoints
1012910115
)
10130-
),
10131-
' '
10116+
)
1013210117
)
1013310118
),
1013410119
_react2.default.createElement(
@@ -10161,7 +10146,7 @@ document.addEventListener('DOMContentLoaded', function () {
1016110146
_react2.default.createElement(
1016210147
'button',
1016310148
{ onClick: this.stopAndReset },
10164-
' Zacznij jeszcze raz '
10149+
'Zacznij jeszcze raz'
1016510150
)
1016610151
)
1016710152
)
@@ -10174,7 +10159,6 @@ document.addEventListener('DOMContentLoaded', function () {
1017410159
// akcja dla wygranej
1017510160
//zatrzymaj cala gre, dodaj punkt, pokaz przycisk restart, pokaz animacje w miejscu gdzie trzeba zrobic animacje
1017610161

10177-
1017810162
//tu bedzie caly ai
1017910163

1018010164

@@ -10205,10 +10189,8 @@ document.addEventListener('DOMContentLoaded', function () {
1020510189

1020610190
return _ret = (_temp = (_this2 = _possibleConstructorReturn(this, (_ref = Intro.__proto__ || Object.getPrototypeOf(Intro)).call.apply(_ref, [this].concat(args))), _this2), _this2.handleStartClick = function () {
1020710191
if (typeof _this2.props.onStart === 'function') {
10208-
$('.intro').css('visibility', 'hidden');
10192+
$('.intro').addClass('fade-out');
1020910193
setTimeout(_this2.props.onStart, 300);
10210-
10211-
// this.props.onStart();
1021210194
}
1021310195
}, _temp), _possibleConstructorReturn(_this2, _ret);
1021410196
}

‎js/zadanie01.jsx‎

Lines changed: 66 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ document.addEventListener('DOMContentLoaded', function() {
2020
player: 'computer',
2121
computerPoints: 0,
2222
humanPoints: 0,
23-
end : false
23+
end: false
2424
}
2525
}
2626
render() {
@@ -29,32 +29,42 @@ document.addEventListener('DOMContentLoaded', function() {
2929
<Intro onStart={this.moveAI}/>
3030
<div>
3131
<div className='header-container'>
32-
<div className='game-title'><h1>Tic Tac Toe 9000</h1> </div>
32+
<div className='game-title'>
33+
<h1>Tic Tac Toe 9000</h1>
3334
</div>
34-
<div className='points-ai'> <h3>punkty uzytkownika <span>{this.state.humanPoints}</span></h3> </div>
35-
<div className='points-human'> <h3>Punkty komputera <span>{this.state.computerPoints}</span></h3> </div>
3635
</div>
37-
<div className='game-container'>
38-
<div className='row'>
39-
<div data-tag='1' className={this.state.fieldOne + ' field'} id='fieldOne' onClick={this.makeMove}></div>
40-
<div data-tag='2' className={this.state.fieldTwo + ' field'} id='fieldTwo' onClick={this.makeMove}></div>
41-
<div data-tag='3' className={this.state.fieldThree + ' field'} id='fieldThree' onClick={this.makeMove}></div>
42-
</div>
43-
<div className='row'>
44-
<div data-tag='4' className={this.state.fieldFour + ' field'} id='fieldFour' onClick={this.makeMove}></div>
45-
<div data-tag='5' className={this.state.fieldFive + ' field'} id='fieldFive' onClick={this.makeMove}></div>
46-
<div data-tag='6' className={this.state.fieldSix + ' field'} id='fieldSix' onClick={this.makeMove}></div>
47-
</div>
48-
<div className='row'>
49-
<div data-tag='7' className={this.state.fieldSeven + ' field'} id='fieldSeven' onClick={this.makeMove}></div>
50-
<div data-tag='8' className={this.state.fieldEight + ' field'} id='fieldEight' onClick={this.makeMove}></div>
51-
<div data-tag='9' className={this.state.fieldNine + ' field'} id='fieldNine' onClick={this.makeMove}></div>
52-
</div>
53-
<div className='buttons'>
54-
<button onClick={this.stopAndReset}> Zacznij jeszcze raz </button>
55-
</div>
36+
<div className='points-ai'>
37+
<h3>punkty uzytkownika: <span>{this.state.humanPoints}</span>
38+
</h3>
39+
</div>
40+
<div className='points-human'>
41+
<h3>Punkty komputera: <span>{this.state.computerPoints}</span>
42+
</h3>
43+
</div>
5644
</div>
45+
<div className='game-container'>
46+
<div className='row'>
47+
<div data-tag='1' className={this.state.fieldOne + ' field'} id='fieldOne' onClick={this.makeMove}></div>
48+
<div data-tag='2' className={this.state.fieldTwo + ' field'} id='fieldTwo' onClick={this.makeMove}></div>
49+
<div data-tag='3' className={this.state.fieldThree + ' field'} id='fieldThree' onClick={this.makeMove}></div>
50+
</div>
51+
<div className='row'>
52+
<div data-tag='4' className={this.state.fieldFour + ' field'} id='fieldFour' onClick={this.makeMove}></div>
53+
<div data-tag='5' className={this.state.fieldFive + ' field'} id='fieldFive' onClick={this.makeMove}></div>
54+
<div data-tag='6' className={this.state.fieldSix + ' field'} id='fieldSix' onClick={this.makeMove}></div>
55+
</div>
56+
<div className='row'>
57+
<div data-tag='7' className={this.state.fieldSeven + ' field'} id='fieldSeven' onClick={this.makeMove}></div>
58+
<div data-tag='8' className={this.state.fieldEight + ' field'} id='fieldEight' onClick={this.makeMove}></div>
59+
<div data-tag='9' className={this.state.fieldNine + ' field'} id='fieldNine' onClick={this.makeMove}></div>
60+
</div>
61+
<div className='buttons'>
62+
<button onClick={this.stopAndReset}>
63+
Zacznij jeszcze raz
64+
</button>
65+
</div>
5766
</div>
67+
</div>
5868

5969
)
6070
}
@@ -81,65 +91,52 @@ document.addEventListener('DOMContentLoaded', function() {
8191
}
8292
}
8393

84-
85-
8694
// akcja dla wygranej
8795
endGame = (winner) => {
88-
if (winner === 'human'){
89-
let num = this.state.humanPoints+1
90-
this.setState({
91-
humanPoints : num,
92-
end : true
93-
});
96+
if (winner === 'human') {
97+
let num = this.state.humanPoints + 1
98+
this.setState({humanPoints: num, end: true});
9499
} else {
95-
let num = this.state.computerPoints+1
96-
this.setState({
97-
computerPoints : num,
98-
end : true,
99-
});
100+
let num = this.state.computerPoints + 1
101+
this.setState({computerPoints: num, end: true});
100102
}
101-
} //zatrzymaj cala gre, dodaj punkt, pokaz przycisk restart, pokaz animacje w miejscu gdzie trzeba zrobic animacje
102-
103+
} //zatrzymaj cala gre, dodaj punkt, pokaz przycisk restart, pokaz animacje w miejscu gdzie trzeba zrobic animacje
103104

104105
//tu bedzie caly ai
105106
moveAI = () => {
106107
if (this.state.end) {
107108
console.log('koniec gry');
108109
} else {
109-
setTimeout(this.checkWinAI, 200)
110-
}
110+
setTimeout(this.checkWinAI, 200)
111+
}
111112
}
112113

113-
114114
stopAndReset = () => {
115115
this.setState({
116-
fieldOne: '',
117-
fieldTwo: '',
118-
fieldThree: '',
119-
fieldFour: '',
120-
fieldFive: '',
121-
fieldSix: '',
122-
fieldSeven: '',
123-
fieldEight: '',
124-
fieldNine: '',
125-
takenFieldsX: [],
126-
takenFieldsY: [],
127-
moveNumber: 0,
128-
end : false
129-
});
116+
fieldOne: '',
117+
fieldTwo: '',
118+
fieldThree: '',
119+
fieldFour: '',
120+
fieldFive: '',
121+
fieldSix: '',
122+
fieldSeven: '',
123+
fieldEight: '',
124+
fieldNine: '',
125+
takenFieldsX: [],
126+
takenFieldsY: [],
127+
moveNumber: 0,
128+
end: false
129+
});
130130

131-
if (this.state.player === 'human'){
131+
if (this.state.player === 'human') {
132132
this.setState({
133-
player : 'computer'
133+
player: 'computer'
134134
}, () => this.moveAI())
135135
} else {
136-
this.setState({
137-
player : 'human'
138-
})
136+
this.setState({player: 'human'})
139137
}
140138
}
141139

142-
143140
//generator losowego ruchu
144141
randomMove = () => {
145142
let randomMove = Math.floor(Math.random() * 9);
@@ -165,9 +162,7 @@ document.addEventListener('DOMContentLoaded', function() {
165162
//sprawdz remis
166163
checkDraw = () => {
167164
if (this.state.moveNumber === 9) {
168-
this.setState({
169-
end : true,
170-
});
165+
this.setState({end: true});
171166
} //pokaz przycisk restart, zatrzymaj gre, wywolaj metode endgame(remis, kazdy po punkcie)
172167
}
173168

@@ -349,15 +344,13 @@ document.addEventListener('DOMContentLoaded', function() {
349344

350345
class Intro extends React.Component {
351346
handleStartClick = () => {
352-
if ( typeof this.props.onStart === 'function' ){
353-
$('.intro').css('visibility' , 'hidden')
354-
setTimeout(this.props.onStart, 300)
355-
356-
// this.props.onStart();
347+
if (typeof this.props.onStart === 'function') {
348+
$('.intro').addClass('fade-out')
349+
setTimeout(this.props.onStart, 300)
357350
}
358351
}
359-
render() {
360-
return <div className='intro'>
352+
render() {
353+
return <div className='intro'>
361354
<button onClick={this.handleStartClick}>
362355
START
363356
</button>
@@ -367,8 +360,8 @@ document.addEventListener('DOMContentLoaded', function() {
367360

368361
class App extends React.Component {
369362
render() {
370-
return <div className='main-container'>
371-
<TicTacBoard />
363+
return <div className='main-container'>
364+
<TicTacBoard/>
372365
</div>
373366
}
374367
}

0 commit comments

Comments
 (0)