From ce614c136acc8151659816f15a0324ea5a779918 Mon Sep 17 00:00:00 2001 From: Alice Gaudon Date: Sun, 13 Mar 2022 18:58:03 +0100 Subject: [PATCH] Display the move coordinates in the move history --- src/index.js | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/index.js b/src/index.js index bafdacc..1a68685 100644 --- a/src/index.js +++ b/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 (
  • @@ -149,6 +151,13 @@ function calculateWinner(squares) { return null; } +function squareIndexToPosition(index){ + return [ + index % 3, + Math.floor(index / 3), + ]; +} + // ======================================== ReactDOM.render(