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'; import './index.css';
/*TODO /*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 someone wins, highlight the three squares that caused the win.
When no one wins, display a message about the result being a draw. When no one wins, display a message about the result being a draw.
*/ */
@ -49,6 +48,7 @@ class Game extends React.Component {
}], }],
xIsNext: true, xIsNext: true,
currentMoveIndex: 0, currentMoveIndex: 0,
reverseHistoryOrder: false,
} }
} }
@ -81,6 +81,12 @@ class Game extends React.Component {
}); });
} }
toggleReverseHistoryOrder() {
this.setState({
reverseHistoryOrder: !this.state.reverseHistoryOrder,
});
}
render() { render() {
const history = this.state.history; const history = this.state.history;
const currentState = history[this.state.currentMoveIndex]; const currentState = history[this.state.currentMoveIndex];
@ -93,7 +99,7 @@ class Game extends React.Component {
status = `Next player ${nextPlayer}`; status = `Next player ${nextPlayer}`;
} }
const moves = history.map((state, index) => { let moves = history.map((state, index) => {
const description = index === 0 ? const description = index === 0 ?
'Go to game start' : 'Go to game start' :
`Go to move #${index} [${state.playX}, ${state.playY}]`; `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 ( return (
<div className="game"> <div className="game">
<div className="game-board"> <div className="game-board">
@ -115,7 +125,8 @@ class Game extends React.Component {
</div> </div>
<div className="game-info"> <div className="game-info">
<div>{status}</div> <div>{status}</div>
<ol>{moves}</ol> <button onClick={() => this.toggleReverseHistoryOrder()}>Reverse order</button>
<ol reversed={this.state.reverseHistoryOrder}>{moves}</ol>
</div> </div>
</div> </div>
); );