From d6731623343c9a08e57ebbb060ca96d2f819283a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Danko=20Lu=C4=8Di=C4=87?= <dlucic33@gmail.com>
Date: Sun, 9 Sep 2018 16:02:10 +0200
Subject: [PATCH] * created a presentational component to house Game and
 UltimateGame * tweaked css a little

---
 src/components/App.jsx          | 20 ++++++++++++++++++++
 src/components/Board.jsx        |  6 +++---
 src/components/Game.jsx         | 18 +++++++-----------
 src/components/Title.jsx        |  2 +-
 src/components/UltimateGame.jsx |  2 +-
 src/index.css                   | 21 ++++++++++++++++++---
 src/index.jsx                   | 12 ++++--------
 7 files changed, 54 insertions(+), 27 deletions(-)
 create mode 100644 src/components/App.jsx

diff --git a/src/components/App.jsx b/src/components/App.jsx
new file mode 100644
index 0000000..cc21e34
--- /dev/null
+++ b/src/components/App.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Game from './Game';
+import Title from './Title';
+import UltimateGame from './UltimateGame';
+
+export default function App() {
+  return (
+    <div>
+      <Title name="React" />
+      <div className="table">
+        <div className="table-cell">
+          <UltimateGame />
+        </div>
+        <div className="table-cell table-large-padding">
+          <Game />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Board.jsx b/src/components/Board.jsx
index d1a2f14..592e18f 100644
--- a/src/components/Board.jsx
+++ b/src/components/Board.jsx
@@ -10,17 +10,17 @@ export default function Board({
 
   return (
     <div data-testid={testId} className={className}>
-      <div className="board-row">
+      <div className="table-row">
         {renderSquare('0', 'topLeftSquare')}
         {renderSquare('1', 'topMiddleSquare')}
         {renderSquare('2', 'topRightSquare')}
       </div>
-      <div className="board-row">
+      <div className="table-row">
         {renderSquare('3', 'centerLeftSquare')}
         {renderSquare('4', 'centerMiddleSquare')}
         {renderSquare('5', 'centerRightSquare')}
       </div>
-      <div className="board-row">
+      <div className="table-row">
         {renderSquare('6', 'bottomLeftSquare')}
         {renderSquare('7', 'bottomMiddleSquare')}
         {renderSquare('8', 'bottomRightSquare')}
diff --git a/src/components/Game.jsx b/src/components/Game.jsx
index 318297b..5236f5a 100644
--- a/src/components/Game.jsx
+++ b/src/components/Game.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import Title from './Title';
 import Board from './Board';
 import Status from './Status';
 import { calculateWinner } from '../helpers';
@@ -61,16 +60,13 @@ export default class Game extends React.Component {
     });
 
     return (
-      <div>
-        <Title name="React" />
-        <div className="game">
-          <div className="game-board">
-            <Board squares={squares} onClick={i => this.handleClick(i)} />
-          </div>
-          <div className="game-info">
-            <Status gameInfo={status} />
-            <ol>{moves}</ol>
-          </div>
+      <div className="game">
+        <div className="game-board">
+          <Board squares={squares} onClick={i => this.handleClick(i)} />
+        </div>
+        <div className="game-info">
+          <Status gameInfo={status} />
+          <ol>{moves}</ol>
         </div>
       </div>
     );
diff --git a/src/components/Title.jsx b/src/components/Title.jsx
index 0ded955..667f8c0 100644
--- a/src/components/Title.jsx
+++ b/src/components/Title.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
 
 export default function Title({ name }) {
-  return <h1>Hello {name}</h1>;
+  return <h1>Tic-tac-toe in {name}!</h1>;
 }
diff --git a/src/components/UltimateGame.jsx b/src/components/UltimateGame.jsx
index 14ee0c0..50ffcad 100644
--- a/src/components/UltimateGame.jsx
+++ b/src/components/UltimateGame.jsx
@@ -30,7 +30,7 @@ export default class UltimateGame extends React.Component {
 
   renderBoard(boardIndex, boards, testId) {
     const currentBoard = boards[boardIndex];
-    const boardClass = `board-cell ${getColorClass(currentBoard)}`;
+    const boardClass = `table-cell table-board-border ${getColorClass(currentBoard)}`;
 
     return (
       <Board
diff --git a/src/index.css b/src/index.css
index e943aa5..2336696 100644
--- a/src/index.css
+++ b/src/index.css
@@ -15,15 +15,30 @@ ol, ul {
   padding-left: 30px;
 }
 
-.board-row {
+.table {
+  display: table;
+}
+
+.table-row {
   display: table-row;
 }
 
-.board-cell {
-  border: 2px solid #fff;
+.table-column {
+  display: table-column;
+}
+
+.table-cell {
   display: table-cell;
 }
 
+.table-large-padding {
+  padding-left: 50px;
+}
+
+.table-board-border {
+  border: 2px solid #fff;
+}
+
 .status {
   margin-bottom: 10px;
 }
diff --git a/src/index.jsx b/src/index.jsx
index 0776f9a..f63d677 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -1,12 +1,8 @@
 import React from 'react';
 import ReactDom from 'react-dom';
-import Game from './components/Game';
-import UltimateGame from './components/UltimateGame';
+import App from './components/App';
 import './index.css';
 
-const ultimateGameApp = document.createElement('div');
-const normalGameApp = document.createElement('div');
-document.body.appendChild(ultimateGameApp);
-document.body.appendChild(normalGameApp);
-ReactDom.render(<UltimateGame />, ultimateGameApp);
-ReactDom.render(<Game />, normalGameApp);
+const app = document.createElement('div');
+document.body.appendChild(app);
+ReactDom.render(<App />, app);