Add a button that toggles move list sorting order
This commit is contained in:
parent
2c77245889
commit
6dcfb7ba49
17
src/index.js
17
src/index.js
@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
|
||||
/*TODO
|
||||
Add a toggle button that lets you sort the moves in either ascending or descending order.
|
||||
When someone wins, highlight the three squares that caused the win.
|
||||
When no one wins, display a message about the result being a draw.
|
||||
*/
|
||||
@ -49,6 +48,7 @@ class Game extends React.Component {
|
||||
}],
|
||||
xIsNext: true,
|
||||
currentMoveIndex: 0,
|
||||
reverseHistoryOrder: false,
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,6 +81,12 @@ class Game extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
toggleReverseHistoryOrder() {
|
||||
this.setState({
|
||||
reverseHistoryOrder: !this.state.reverseHistoryOrder,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const history = this.state.history;
|
||||
const currentState = history[this.state.currentMoveIndex];
|
||||
@ -93,7 +99,7 @@ class Game extends React.Component {
|
||||
status = `Next player ${nextPlayer}`;
|
||||
}
|
||||
|
||||
const moves = history.map((state, index) => {
|
||||
let moves = history.map((state, index) => {
|
||||
const description = index === 0 ?
|
||||
'Go to game start' :
|
||||
`Go to move #${index} [${state.playX}, ${state.playY}]`;
|
||||
@ -104,6 +110,10 @@ class Game extends React.Component {
|
||||
);
|
||||
});
|
||||
|
||||
if (this.state.reverseHistoryOrder) {
|
||||
moves = moves.reverse();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="game">
|
||||
<div className="game-board">
|
||||
@ -115,7 +125,8 @@ class Game extends React.Component {
|
||||
</div>
|
||||
<div className="game-info">
|
||||
<div>{status}</div>
|
||||
<ol>{moves}</ol>
|
||||
<button onClick={() => this.toggleReverseHistoryOrder()}>Reverse order</button>
|
||||
<ol reversed={this.state.reverseHistoryOrder}>{moves}</ol>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user