Merge pull request #307 from oslabs-beta/main

Merging Reactime v18 into OS Labs main, initial

Author: zacharydfreeman

.eslintrc

@@ -1,9 +1,10 @@
 {
   "extends": [
-    "airbnb", 
+    "airbnb",
     "plugin:jest/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"],
+    "plugin:@typescript-eslint/recommended"
+  ],
   "root": true,
   "plugins": ["jest", "react", "react-hooks", "@typescript-eslint"],
   "rules": {
@@ -13,7 +14,8 @@
     "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
     "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
     "react/jsx-filename-extension": [0],
-    "linebreak-style": "off"
+    "linebreak-style": "off",
+    "max-len": [{ "ignoreComments": true }]
   },
   "env": {
     "es6": true,
@@ -33,4 +35,4 @@
     "ecmaVersion": 2018,
     "sourceType": "module"
   }
-}
+}

.gitignore

@@ -5,7 +5,6 @@ node_modules/
 .DS_Store
 src/extension/build/bundles
 package/reactime-*.tgz
-tictactoe
 parents
 coverage
 src/extension/build.zip
@@ -15,4 +14,5 @@ bower_components
 sandboxes/manual-tests/NextJS/.next
 .vscode
 src/app/components/Map.tsx
-package-lock.json
+package-lock.json
+yarn.lock

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "tests/manual-tests/recoilTest"]
 	path = tests/manual-tests/recoilTest
 	url = https://github.com/kevinfey/recoilTest
+[submodule "reactime-website"]
+	path = reactime-website
+	url = https://github.com/reactimetravel/reactime-website

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "trailingComma": "all"
+}

demo-app-next/.gitignore

@@ -0,0 +1,30 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local

demo-app-next/README.md

@@ -0,0 +1 @@
+This is a starter template for [Learn Next.js](https://nextjs.org/learn).

demo-app-next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

demo-app-next/package.json

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "18.15.0",
+    "@types/react": "18.0.28",
+    "typescript": "4.9.5"
+  }
+}

demo-app-next/public/favicon.ico

@@ -0,0 +1,157 @@
+import React, { Component } from "react";
+import Row from "./Row";
+import { BoardText, BoardContent, Scoreboard, Player } from "../types/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-next/public/vercel.svg

@@ -0,0 +1,21 @@
+import { BoardText } from "../types/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-next/src/components/Board.tsx

@@ -0,0 +1,19 @@
+import Increment from './Increment';
+
+export default function Buttons() {
+  const buttons = [];
+  for (let i = 0; i < 4; i++) {
+    buttons.push(<Increment key={i} />);
+  }
+
+  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>
+  );
+}

demo-app-next/src/components/Box.tsx

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

demo-app-next/src/components/Buttons.tsx

@@ -0,0 +1,27 @@
+import Box from "./Box";
+import { BoardText } from "../types/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-next/src/components/Increment.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link';
+
+export default function Navbar() {
+  return (
+    <div className='nav'>
+      <Link className='link' href='/'>
+        About
+      </Link>
+      <Link id='tictactoe' className='link' href='/tictactoe'>
+        Tic-Tac-Toe
+      </Link>
+      <Link className='link' href='/buttons'>
+        Counter
+      </Link>
+    </div>
+  );
+}

demo-app-next/src/components/Row.tsx

@@ -0,0 +1,5 @@
+import "../../styles/style.css";
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}