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';
|
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>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user