HugoCapocci · NicoSar · Feb 5, 2019 · Feb 6, 2019 · Feb 6, 2019 · Feb 6, 2019
diff --git a/README.md b/README.md
@@ -1,5 +1,15 @@
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
+## Pré-requis
+
+Pour ce projet il faut installer FontAwesome dans le répertoire du projet:
+
+```
+npm i --save @fortawesome/fontawesome-svg-core \
+npm i --save @fortawesome/free-solid-svg-icons \
+npm i --save @fortawesome/react-fontawesome
+```
+
 ## Available Scripts
 
 In the project directory, you can run:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.14",
+    "@fortawesome/free-solid-svg-icons": "^5.7.1",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "react": "^16.7.0",
     "react-dom": "^16.7.0",
     "react-scripts": "2.1.3"

diff --git a/public/App.css b/public/App.css
@@ -0,0 +1,66 @@
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.cell {
+  background: black;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  float: left;
+  font-size: 50px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 100px;
+  padding: 0;
+  text-align: center;
+  width: 100px;
+  margin: 3px;
+  color: white;
+}
+
+.cell:focus {
+  outline: none;
+}
+
+.kbd-navigation .cell:focus {
+  background: #ddd;
+}
+
+.game {
+  display: block;
+}
+
+.game-info {
+  margin-left: 560px;
+  margin-top: -20px;
+  color: black;
+}
+
+h1{
+  font-size: 40px;
+  text-align: center;
+}
+
+.game-board{
+  margin-left: 540px;
+}
+
+.game-night{
+  margin-left: 755px;
+  margin-top: 20px;
+}
diff --git a/public/App2.css b/public/App2.css
@@ -0,0 +1,68 @@
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+  background-color: black;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
+}
+
+.status {
+  margin-bottom: 10px;
+}
+
+.cell {
+  background: white;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  float: left;
+  font-size: 50px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 100px;
+  padding: 0;
+  text-align: center;
+  width: 100px;
+  margin: 3px;
+  color: black;
+}
+
+.cell:focus {
+  outline: none;
+}
+
+.kbd-navigation .cell:focus {
+  background: #ddd;
+}
+
+.game {
+  display: block;
+}
+
+.game-info {
+  margin-left: 560px;
+  margin-top: -20px;
+  color: white;
+}
+
+h1{
+  font-size: 40px;
+  text-align: center;
+  color: white;
+}
+
+.game-board{
+  margin-left: 540px;
+}
+
+.game-night{
+  margin-left: 755px;
+  margin-top: 20px;
+}
diff --git a/public/Tic_tac_toe.svg b/public/Tic_tac_toe.svg
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/Tic_tac_toe.svg" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -22,7 +22,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>TicTacToe</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -1,32 +1,60 @@
-.App {
-  text-align: center;
+body {
+  font: 14px "Century Gothic", Futura, sans-serif;
+  margin: 20px;
+}
+
+ol, ul {
+  padding-left: 30px;
+}
+
+.board-row:after {
+  clear: both;
+  content: "";
+  display: table;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
+.status {
+  margin-bottom: 10px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
+.cell {
+  background: black;
+  border: 2px solid #fff;
+  border-radius: 50px;
+  float: left;
+  font-size: 50px;
+  font-weight: bold;
+  line-height: 34px;
+  height: 100px;
+  padding: 0;
+  text-align: center;
+  width: 100px;
+  margin: 3px;
   color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.cell:focus {
+  outline: none;
+}
+
+.kbd-navigation .cell:focus {
+  background: #ddd;
+}
+
+.game {
+  display: block;
+}
+
+.game-info {
+  margin-left: 540px;
+  margin-top: 20px;
+}
+
+h1{
+  font-size: 40px;
+  text-align: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.game-board{
+  margin-left: 540px;
 }