Merge pull request #6 from oslabs-beta/robby/demo-app

Robby/demo app - added a demo application folder for users to test Reactime without building out a new app.

demo-app/.babelrc

@@ -0,0 +1,7 @@
+
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

demo-app/.gitignore

@@ -0,0 +1 @@
+node_modules/

demo-app/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "typescript-module",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.7",
+    "@babel/preset-env": "^7.16.7",
+    "@babel/preset-react": "^7.16.7",
+    "@types/express": "^4.17.13",
+    "@types/node": "^17.0.8",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "babel-loader": "^8.2.3",
+    "copy-webpack-plugin": "^10.2.0",
+    "css-loader": "^6.5.1",
+    "html-webpack-plugin": "^5.5.0",
+    "nodemon": "^2.0.15",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.4",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.7.2"
+  },
+  "dependencies": {
+    "express": "^4.17.2",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-router-dom": "^6.3.0",
+    "ts-node": "^10.4.0"
+  }
+}

demo-app/src/client/Components/Board.tsx

@@ -0,0 +1,157 @@
+import React, { Component } from 'react';
+import Row from './Row';
+import { BoardText, BoardContent, Scoreboard, Player } from './../../types';
+
+type BoardState = {
+  board: BoardContent;
+  currentPlayer: Player;
+  gameOver: boolean;
+  message: string;
+  scoreboard: Scoreboard;
+};
+
+class Board extends Component<{}, BoardState> {
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      board: this.newBoard(),
+      currentPlayer: 'X',
+      gameOver: false,
+      message: '',
+      scoreboard: { X: 0, O: 0 },
+    };
+
+    this.resetBoard = this.resetBoard.bind(this);
+    this.handleBoxClick = this.handleBoxClick.bind(this);
+  }
+
+  componentDidUpdate() {
+    this.checkForWinner();
+  }
+
+  /**
+   * @method newBoard
+   * @description - returns a blank BoardContent array,
+   *  for the start of a new game
+   */
+  newBoard(): BoardContent {
+    return [
+      ['-', '-', '-'],
+      ['-', '-', '-'],
+      ['-', '-', '-'],
+    ];
+  }
+
+  /**
+   * @method resetBoard
+   * @description - sets to board object to be all '-',
+   *  and sets gameOver and message to default state
+   */
+  resetBoard(): void {
+    this.setState({
+      gameOver: false,
+      board: this.newBoard(),
+      message: '',
+    });
+  }
+
+  /**
+   * @method checkForWinner
+   * @description - checks to see if either player has filled a row
+   *  if so, ends the game and updates the message to declare winner
+   */
+  checkForWinner(): void {
+    const { board, gameOver, currentPlayer } = this.state;
+
+    const spacesLeft = (): boolean => {
+      for (let i of board) {
+        if (i.includes('-')) return true;
+      }
+      return false;
+    };
+
+    if (!gameOver) {
+      // win conditions: matching rows, columns, or diagonals, that are not empty('-')
+      if (
+        (board[0][0] === board[0][1] &&
+          board[0][1] === board[0][2] &&
+          board[0][2] !== '-') ||
+        (board[1][0] === board[1][1] &&
+          board[1][1] === board[1][2] &&
+          board[1][2] !== '-') ||
+        (board[2][0] === board[2][1] &&
+          board[2][1] === board[2][2] &&
+          board[2][2] !== '-') ||
+        (board[0][0] === board[1][0] &&
+          board[1][0] === board[2][0] &&
+          board[2][0] !== '-') ||
+        (board[0][1] === board[1][1] &&
+          board[1][1] === board[2][1] &&
+          board[2][1] !== '-') ||
+        (board[0][2] === board[1][2] &&
+          board[1][2] === board[2][2] &&
+          board[2][2] !== '-') ||
+        (board[0][0] === board[1][1] &&
+          board[1][1] === board[2][2] &&
+          board[2][2] !== '-') ||
+        (board[2][0] === board[1][1] &&
+          board[1][1] === board[0][2] &&
+          board[0][2] !== '-')
+      ) {
+        // winner is the person who's turn was previous
+        const winner: Player = currentPlayer === 'X' ? 'O' : 'X';
+
+        this.setState({
+          gameOver: true,
+          message: `Player ${winner} wins!`,
+        });
+
+        // draw condition: no '-' remaining in board without above win condition triggering
+      } else if (!spacesLeft()) {
+        this.setState({
+          gameOver: true,
+          message: 'Draw!',
+        });
+      }
+    }
+  }
+
+  handleBoxClick(row: number, column: number): void {
+    const boardCopy: BoardContent = [
+      [...this.state.board[0]],
+      [...this.state.board[1]],
+      [...this.state.board[2]],
+    ];
+    boardCopy[row][column] = this.state.currentPlayer;
+    const newPlayer: Player = this.state.currentPlayer === 'X' ? 'O' : 'X';
+    this.setState({ board: boardCopy, currentPlayer: newPlayer });
+  }
+
+  render() {
+    const rows: Array<JSX.Element> = [];
+    for (let i = 0; i < 3; i++) {
+      rows.push(
+        <Row
+          key={i}
+          row={i}
+          handleBoxClick={this.handleBoxClick}
+          values={this.state.board[i]}
+        />
+      );
+    }
+    const { X, O }: Scoreboard = this.state.scoreboard;
+
+    return (
+      <div className="board">
+        <h1>Tic Tac Toe</h1>
+        {this.state.gameOver && <h4>{this.state.message}</h4>}
+        {rows}
+        <button id="reset" onClick={this.resetBoard}>
+          Reset
+        </button>
+      </div>
+    );
+  }
+}
+
+export default Board;

demo-app/src/client/Components/Box.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BoardText } from '../../types';
+
+type BoxProps = {
+  value: BoardText;
+  row: number;
+  column: number;
+  handleBoxClick: (row: number, column: number) => void;
+};
+
+const Box = (props: BoxProps) => {
+  return (
+    <button
+      className="box"
+      onClick={(e) => props.handleBoxClick(props.row, props.column)}
+    >
+      {props.value}
+    </button>
+  );
+};
+
+export default Box;

demo-app/src/client/Components/Buttons.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Increment from "./Increment";
+
+function Buttons() {
+  const buttons = [];
+  for (let i = 0; i < 4; i++){
+    buttons.push(<Increment />)
+  }
+
+  return(
+    <div className="buttons">
+      <h1>Stateful Buttons</h1>
+      <h4>These buttons are functional components that each manage their own state with the useState hook.</h4>
+      {buttons}
+    </div>
+  )
+}
+
+export default Buttons;

demo-app/src/client/Components/Home.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+function Home() {
+  return (
+    <div className="about">
+      <h1>Lorem Ipsum</h1>
+      <p>
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum."
+      </p>
+      <p>
+        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum."
+      </p>
+    </div>
+  );
+}
+
+export default Home;

demo-app/src/client/Components/Increment.tsx

@@ -0,0 +1,13 @@
+import React, { useState } from 'react';
+
+function Increment() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <button className="increment" onClick={() => setCount(count + 1)}>
+      You clicked me {count} times.
+    </button>
+  );
+}
+
+export default Increment;

demo-app/src/client/Components/Nav.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+function Nav() {
+  return(
+    <div className="nav">
+      <Link className="link" to="/">About</Link>
+      <Link id="tictactoe" className="link" to="/tictactoe">Tic-Tac-Toe</Link>
+      <Link className="link" to="/buttons">Counter</Link>
+    </div>
+  )
+}
+
+export default Nav;

demo-app/src/client/Components/Row.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Box from './Box';
+import { BoardText } from '../../types';
+
+type RowProps = {
+  handleBoxClick: (row: number, column: number) => void;
+  values: Array<BoardText>;
+  row: number;
+};
+
+const Row = (props: RowProps) => {
+  const boxes: Array<JSX.Element> = [];
+  for (let i = 0; i < 3; i++) {
+    boxes.push(
+      <Box
+        key={i}
+        row={props.row}
+        column={i}
+        handleBoxClick={props.handleBoxClick}
+        value={props.values[i]}
+      ></Box>
+    );
+  }
+
+  return <div className="row">{boxes}</div>;
+};
+
+export default Row;

demo-app/src/client/Router.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import Nav from "./Components/Nav";
+import Board from "./Components/Board";
+import Home from "./Components/Home";
+import Buttons from "./Components/Buttons";
+
+const root = document.getElementById("root");
+
+ReactDOM.render(
+    <BrowserRouter>
+      <Nav />
+      <Routes>
+        <Route path="/tictactoe" element={<Board />}/>
+        <Route path="/" element={<Home />}/>
+        <Route path="/buttons" element={<Buttons />}/>
+      </Routes>
+    </BrowserRouter>, root);

demo-app/src/client/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Reactime MVP</title>
+    <link rel="stylesheet" type="text/css" href="./style.css">
+  </head>
+  <body>
+    <main id="root"></main>
+  </body>
+</html>