Display the move coordinates in the move history

src/index.js

@@ -3,7 +3,6 @@ import ReactDOM from 'react-dom';
 import './index.css';
 
 /*TODO
-    Display the location for each move in the format (col, row) in the move history list.
     Bold the currently selected item in the move list.
     Rewrite Board to use two loops to make the squares instead of hardcoding them.
     Add a toggle button that lets you sort the moves in either ascending or descending order.
@@ -72,9 +71,12 @@ class Game extends React.Component {
         const newSquares = [...currentState.squares];
         newSquares[i] = this.state.xIsNext ? 'X' : 'O';
 
+        const playPosition = squareIndexToPosition(i);
         this.setState({
             history: [...history, {
                 squares: newSquares,
+                playX: playPosition[0],
+                playY: playPosition[1],
             }],
             xIsNext: !this.state.xIsNext,
             currentMoveIndex: history.length,
@@ -103,7 +105,7 @@ class Game extends React.Component {
         const moves = history.map((state, index) => {
             const description = index === 0 ?
                 'Go to game start' :
-                `Go to move #${index}`;
+                `Go to move #${index} [${state.playX}, ${state.playY}]`;
             return (
                 <li key={index}>
                     <button onClick={() => this.jumpTo(index)}>{description}</button>
@@ -149,6 +151,13 @@ function calculateWinner(squares) {
     return null;
 }
 
+function squareIndexToPosition(index){
+    return [
+        index % 3,
+        Math.floor(index / 3),
+    ];
+}
+
 // ========================================
 
 ReactDOM.render(