Add a button that toggles move list sorting order

This commit is contained in:
Alice Gaudon 2022-03-13 19:14:39 +01:00
parent 2c77245889
commit 6dcfb7ba49
1 changed files with 14 additions and 3 deletions

View File

@ -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>
);