refactor: tic-tac-toe.js

kaylakremer · kaylakremer · commit c1288dd43ebe · 2021-11-06T04:11:20.000-04:00
diff --git a/solutions/tic-tac-toe.js b/solutions/tic-tac-toe.js
@@ -158,12 +158,37 @@ const Board = () => {
   }, [playerXSquares, playerOSquares]);
 
   return (
-    <div style={containerStyle} className="gameBoard">
-      <div id="statusArea" className="status" style={instructionsStyle}>Next player: <span>{currentPlayer === 'Player X' ? 'Player O' : 'Player X'}</span></div>
-      <div id="winnerArea" className="winner" style={instructionsStyle}>Winner: <span>{winner}</span></div>
-      <button onClick={reset} style={buttonStyle}>Reset</button>
-      <div style={boardStyle}>
-        <div className="board-row" style={rowStyle}>
+    <div 
+      style={containerStyle} 
+      className="gameBoard"
+    >
+      <div 
+        id="statusArea" 
+        className="status" 
+        style={instructionsStyle}
+      >
+        Next player: <span>{currentPlayer === 'Player X' ? 'Player O' : 'Player X'}</span>
+      </div>
+      <div 
+        id="winnerArea" 
+        className="winner" 
+        style={instructionsStyle}
+      >
+        Winner: <span>{winner}</span>
+      </div>
+      <button 
+        onClick={reset} 
+        style={buttonStyle}
+      >
+        Reset
+      </button>
+      <div 
+        style={boardStyle}
+      >
+        <div 
+          className="board-row" 
+          style={rowStyle}
+        >
           <Square 
             disabled={playerXSquares.includes(0) || playerOSquares.includes(0) || winner !== 'None'} 
             playerXSquares={playerXSquares} 
@@ -186,7 +211,10 @@ const Board = () => {
             value={2} 
           />
         </div>
-        <div className="board-row" style={rowStyle}>
+        <div 
+          className="board-row" 
+          style={rowStyle}
+        >
           <Square 
             disabled={playerXSquares.includes(2) || playerOSquares.includes(3) || winner !== 'None'} 
             playerXSquares={playerXSquares} 
@@ -209,7 +237,10 @@ const Board = () => {
             value={5} 
           />
         </div>
-        <div className="board-row" style={rowStyle}>
+        <div 
+          className="board-row" 
+          style={rowStyle}
+        >
           <Square 
             disabled={playerXSquares.includes(2) || playerOSquares.includes(6) || winner !== 'None'} 
             playerXSquares={playerXSquares} 
@@ -239,8 +270,12 @@ const Board = () => {
 
 const Game = () => {
   return (
-    <div className="game">
-      <div className="game-board">
+    <div 
+      className="game"
+    >
+      <div 
+        className="game-board"
+      >
         <Board />
       </div>
     </div>
