diff --git a/src/index.js b/src/index.js index 2d4632f..8e104d2 100644 --- a/src/index.js +++ b/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 (
@@ -115,7 +125,8 @@ class Game extends React.Component {
{status}
-
    {moves}
+ +
    {moves}
);