The-Marcy-Lab-School · julian-carvajal-gh · May 1, 2020
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "minimal-template",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "bootstrap": "^4.4.1",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "3.4.1",
+    "reactstrap": "^8.4.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="stylesheet" href="%PUBLIC_URL%/styles.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/styles.css b/public/styles.css
@@ -0,0 +1,11 @@
+.game-cell {
+  background-color: aliceblue;
+  text-align: center;
+  min-height: 140px;
+  max-height: 30vw;
+  border: 1px dotted red;
+}
+
+.game-cell {
+  width: 10vw;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+import GameContext from './context/GameContext';
+import NoughtsCrosses from './components/NoughtsCrosses';
+
+function App() {
+  /**
+   * Don't mind deep rerenders at this level, mind premature optimization
+   */
+  const [game, setGame] = useState({
+    isXNext: true,
+    board: [null, null, null, null, null, null, null, null, null],
+    winner: ''
+  });
+  return (
+    <div>
+      <GameContext.Provider value={{ game, setGame }}>
+        <NoughtsCrosses />
+      </GameContext.Provider>
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/Cell.js b/src/components/Cell.js
@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import GameContext from '../context/GameContext';
+import { Col } from 'reactstrap';
+
+function Cell({ index }) {
+  const { game, setGame } = useContext(GameContext);
+  const { board, isXNext } = game;
+  function checkWinner() {
+    const cells = board;
+    if (cells[0] !== null && cells[0] === cells[1] && cells[1] === cells[2]) {
+      return cells[0];
+    }
+
+    if (cells[3] !== null && cells[3] === cells[4] && cells[4] === cells[5]) {
+      return cells[3];
+    }
+
+    if (cells[6] !== null && cells[6] === cells[7] && cells[7] === cells[8]) {
+      return cells[6];
+    }
+
+    // diagonal wins
+    if (cells[0] !== null && cells[0] === cells[4] && cells[4] === cells[8]) {
+      return cells[0];
+    }
+
+    if (cells[2] !== null && cells[2] === cells[4] && cells[4] === cells[6]) {
+      return cells[2];
+    }
+    // vertical wins
+    if (cells[0] !== null && cells[0] === cells[3] && cells[3] === cells[6]) {
+      return cells[0];
+    }
+
+    if (cells[1] !== null && cells[1] === cells[4] && cells[4] === cells[7]) {
+      return cells[1];
+    }
+
+    if (cells[2] !== null && cells[2] === cells[5] && cells[5] === cells[8]) {
+      return cells[2];
+    }
+  }
+  const handleClick = i => {
+    const winner = checkWinner();
+    if (winner) {
+      setGame({
+        ...game,
+        winner: winner
+      });
+      return;
+    }
+    const newBoard = [...board];
+    newBoard[i] = isXNext ? 'X' : 'O';
+    setGame({ ...game, board: newBoard, isXNext: !isXNext });
+  };
+  return (
+    <Col className="game-cell" onClick={() => handleClick(index)}>
+      {(index, board[index] ? board[index] : '...')}
+    </Col>
+  );
+  // take data from context, use it with useState, use setFn to update it and trigger rerender
+}
+
+export default Cell;
diff --git a/src/components/NoughtsCrosses.js b/src/components/NoughtsCrosses.js
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react';
+import { Button, Container, Row } from 'reactstrap';
+import GameContext from '../context/GameContext';
+import Cell from './Cell';
+
+const NoughtsCrosses = () => {
+  const { game } = useContext(GameContext);
+  const { board, isXNext, winner } = game;
+  return (
+    <>
+      <h1>Noughts and Crosses</h1>
+      <Button color="primary" disabled>
+        New Game
+      </Button>
+      <h2>Up next: {isXNext ? 'X' : 'O'}</h2>
+      {winner && <h2>Winner: {winner}</h2>}
+      <Container className="game-board">
+        <Row xs="3">
+          {board.map((slot, i) => {
+            return <Cell key={i} index={i} />;
+          })}
+        </Row>
+      </Container>
+    </>
+  );
+};
+
+export default NoughtsCrosses;
diff --git a/src/context/GameContext.js b/src/context/GameContext.js
@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const GameContext = createContext(null);
+
+export default GameContext;
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import App from './App';
+
+ReactDOM.render(<App />, document.getElementById('root'));