2022_12_12 Prepare for AWS

nboswell216 · Dec 13, 2022 · 286f8c0 · 286f8c0
1 parent ef500c0
commit 286f8c0
Show file tree

Hide file tree

Showing 3 changed files with 298 additions and 21 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <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"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <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" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
@@ -24,12 +22,16 @@
       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>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+  <title>React App</title>
+  <!-- CSS only -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.
 
@@ -39,5 +41,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  </body>
-</html>
+</body>
+
+</html>
diff --git a/src/index.css b/src/index.css
@@ -0,0 +1,67 @@
+body {
+    font: 14px "Century Gothic", Futura, sans-serif;
+    margin: 20px;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ol, ul {
+    padding-left: 30px;
+  }
+
+  .board {
+    text-align: center;
+  }
+
+  .board-row:after {
+    clear: both;
+    content: "";
+    display: table;
+  }
+
+  .status {
+    margin-bottom: 10px;
+    font-size: larger;
+  }
+
+  .square {
+    background: #fff;
+    border: 1px solid #999;
+    float: left;
+    font-size: 24px;
+    font-weight: bold;
+    line-height: 34px;
+    height: 34px;
+    margin-right: -1px;
+    margin-top: -1px;
+    padding: 0;
+    text-align: center;
+    width: 34px;
+  }
+
+  .square:focus {
+    outline: none;
+  }
+
+  .kbd-navigation .square:focus {
+    background: #ddd;
+  }
+
+  .game {
+    display: flex;
+    flex-direction: row;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .game-info {
+    margin-left: 20px;
+  }
+
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,207 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+// class Square extends React.Component {
+//     render() {
+//         return (
+//             <button
+//                 className="square"
+//                 onClick={() => this.props.onClick()}
+//             >
+//             {this.props.value}
+//             </button>
+//         );
+//     }
+// }
+
+function Square(props) {
+    return (
+        <button className='square' onClick={props.onClick}>
+        {props.value}
+        </button>
+    );
+}
+
+class Board extends React.Component {
+    // constructor(props) {
+    //     super(props);
+    //     this.state = {
+    //         squares: Array(9).fill(null),
+    //         xIsNext: true,
+    //     };
+    // }
+
+    // handleClick(i) {
+    //     const squares = this.state.squares.slice();
+    //     if (calculateWinner(squares) || squares[i]) {
+    //         return;
+    //     }
+    //     squares[i] = this.state.xIsNext ? 'X' : 'O';
+    //     this.setState({
+    //         squares: squares,
+    //         xIsNext: !this.state.xIsNext,
+    //     });
+    // }
+
+    renderSquare(i) {
+        return (
+        <Square 
+            value={this.props.squares[i]} 
+            onClick={() => this.props.onClick(i)}
+        />
+        );
+    }
+
+    render() {
+        // const winner = calculateWinner(this.state.squares);
+        // let status;
+        // if (winner) {
+        //     status = `Winner is Player ${winner}!`;
+        // } else if (this.state.squares.every(e => e !== null)) {
+        //     status = `Game is a draw :(`;
+        // } else {
+        //     status = `It is Player ${this.state.xIsNext ? 'X' : 'O'}'s turn!`;//'Next player: X';
+        // }
+
+        return (
+            <div className='board'>
+                <div className="board-row">
+                    {this.renderSquare(0)}
+                    {this.renderSquare(1)}
+                    {this.renderSquare(2)}
+                </div>
+                <div className="board-row">
+                    {this.renderSquare(3)}
+                    {this.renderSquare(4)}
+                    {this.renderSquare(5)}
+                </div>
+                <div className="board-row">
+                    {this.renderSquare(6)}
+                    {this.renderSquare(7)}
+                    {this.renderSquare(8)}
+                </div>
+            </div>
+        );
+    }
+}
+
+class Game extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            history: [{
+                squares: Array(9).fill(null),
+            }],
+            stepNumber: 0,
+            xIsNext: true,
+        };
+    }
+
+    handleClick(i) {
+        const locations = [
+            [1,1],
+            [2,1],
+            [3,1],
+            [1,2],
+            [2,2],
+            [3,2],
+            [1,3],
+            [2,3],
+            [3,3]
+        ]
+
+        const history = this.state.history.slice(0,this.state.stepNumber+1);
+        const current = history[history.length-1];
+        const squares = current.squares.slice();
+        const location = locations[i];
+        if (calculateWinner(squares) || squares[i]) {
+            return;
+        }
+        squares[i] = this.state.xIsNext ? 'X' : 'O';
+        this.setState({
+            history: history.concat([{
+                squares: squares,
+                location: location,
+                player: squares[i],
+            }]),
+            stepNumber: history.length,
+            xIsNext: !this.state.xIsNext,
+        });
+    }
+
+    jumpTo(step) {
+        this.setState({
+            stepNumber: step,
+            xIsNext: (step % 2) === 0,
+        });
+    }
+
+    render() {
+        const history = this.state.history;
+        const current = history[this.state.stepNumber];
+        const winner = calculateWinner(current.squares);
+
+        const moves = history.map((step,move) => {
+            const desc = move ?
+                `Go to move #${move} (${history[move].player} - ${history[move].location})` :
+                `Go to game start`;
+            return (
+                <li key={move}>
+                    <button className={move === this.state.stepNumber ? 'btn btn-primary btn-sm my-1' : 'btn btn-secondary btn-sm my-1'} onClick={() => this.jumpTo(move)}>{desc}</button>
+                </li>
+            );
+        });
+
+        let status;
+        if (winner) {
+            status = `Winner is Player ${winner}!`;
+        } else if (current.squares.every(e => e !== null)) {
+            status = `Game is a draw :(`;
+        } else {
+            status = `It is Player ${this.state.xIsNext ? 'X' : 'O'}'s turn!`;//'Next player: X';
+        }
+
+        return (
+            <main className="game">
+
+                <div className="game-board d-flex justify-content-center flex-column">
+                <div className='status'>{status}</div>
+                    <Board
+                        squares={current.squares}
+                        onClick={(i) => this.handleClick(i)}
+                    />
+                </div>
+                <div className="game-info d-flex justify-content-center align-items-start flex-column">
+
+                    <ol>{moves}</ol>
+                </div>
+            </main>
+        );
+    }
+}
+
+// ========================================
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(<Game />);
+
+function calculateWinner(squares) {
+    const lines = [
+      [0, 1, 2],
+      [3, 4, 5],
+      [6, 7, 8],
+      [0, 3, 6],
+      [1, 4, 7],
+      [2, 5, 8],
+      [0, 4, 8],
+      [2, 4, 6],
+    ];
+    for (let i = 0; i < lines.length; i++) {
+      const [a, b, c] = lines[i];
+      if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+        return squares[a];
+      }
+    }
+    return null;
+  }