Merge pull request #4 from oslabs-beta/dev

Second to last merge before launch

Author: jrosengrant

.gitignore

@@ -14,4 +14,6 @@ bower_components
 sandboxes/manual-tests/NextJS/.next
 .vscode
 package-lock.json
-yarn.lock
+yarn.lock
+docs/**/*
+docs/*

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

@@ -1,6 +1,6 @@
-import React, { Component } from "react";
-import Row from "./Row";
-import { BoardContent, Scoreboard, Player } from "../types/types";
+import React, { Component } from 'react';
+import Row from './Row';
+import { BoardContent, Scoreboard, Player } from '../types/types';
 
 type BoardState = {
   board: BoardContent;
@@ -15,17 +15,17 @@ class Board extends Component<{}, BoardState> {
     super(props);
     this.state = {
       board: this.newBoard(),
-      currentPlayer: "X",
+      currentPlayer: 'X',
       gameOver: false,
-      message: "",
+      message: '',
       scoreboard: { X: 0, O: 0 },
     };
 
     this.resetBoard = this.resetBoard.bind(this);
     this.handleBoxClick = this.handleBoxClick.bind(this);
   }
 
-  componentDidUpdate():void {
+  componentDidUpdate(): void {
     this.checkForWinner();
   }
 
@@ -36,9 +36,9 @@ class Board extends Component<{}, BoardState> {
    */
   newBoard(): BoardContent {
     return [
-      ["-", "-", "-"],
-      ["-", "-", "-"],
-      ["-", "-", "-"],
+      ['-', '-', '-'],
+      ['-', '-', '-'],
+      ['-', '-', '-'],
     ];
   }
 
@@ -51,7 +51,7 @@ class Board extends Component<{}, BoardState> {
     this.setState({
       gameOver: false,
       board: this.newBoard(),
-      message: "",
+      message: '',
     });
   }
 
@@ -65,41 +65,25 @@ class Board extends Component<{}, BoardState> {
 
     const spacesLeft = (): boolean => {
       for (let i of board) {
-        if (i.includes("-")) return true;
+        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] !== "-")
+        (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";
+        const winner: Player = currentPlayer === 'X' ? 'O' : 'X';
 
         this.setState({
           gameOver: true,
@@ -110,7 +94,7 @@ class Board extends Component<{}, BoardState> {
       } else if (!spacesLeft()) {
         this.setState({
           gameOver: true,
-          message: "Draw!",
+          message: 'Draw!',
         });
       }
     }
@@ -123,30 +107,25 @@ class Board extends Component<{}, BoardState> {
       [...this.state.board[2]],
     ];
     boardCopy[row][column] = this.state.currentPlayer;
-    const newPlayer: Player = this.state.currentPlayer === "X" ? "O" : "X";
+    const newPlayer: Player = this.state.currentPlayer === 'X' ? 'O' : 'X';
     this.setState({ board: boardCopy, currentPlayer: newPlayer });
   }
 
   render(): JSX.Element {
     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]}
-        />
+        <Row key={i} row={i} handleBoxClick={this.handleBoxClick} values={this.state.board[i]} />,
       );
     }
     // const { X, O }: Scoreboard = this.state.scoreboard;
 
     return (
-      <div className="board">
+      <div className='board'>
         <h1>Tic Tac Toe</h1>
         {this.state.gameOver && <h4>{this.state.message}</h4>}
         {rows}
-        <button id="reset" onClick={this.resetBoard}>
+        <button id='reset' onClick={this.resetBoard}>
           Reset
         </button>
       </div>

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

@@ -1,4 +1,4 @@
-import { BoardText } from "../types/types";
+import { BoardText } from '../types/types';
 
 type BoxProps = {
   value: BoardText;
@@ -9,10 +9,7 @@ type BoxProps = {
 
 const Box = (props: BoxProps): JSX.Element => {
   return (
-    <button
-      className="box"
-      onClick={(e) => props.handleBoxClick(props.row, props.column)}
-    >
+    <button className='box' onClick={(e) => props.handleBoxClick(props.row, props.column)}>
       {props.value}
     </button>
   );

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

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

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

@@ -1,5 +1,5 @@
-import Box from "./Box";
-import { BoardText } from "../types/types";
+import Box from './Box';
+import { BoardText } from '../types/types';
 
 type RowProps = {
   handleBoxClick: (row: number, column: number) => void;
@@ -17,11 +17,11 @@ const Row = (props: RowProps) => {
         column={i}
         handleBoxClick={props.handleBoxClick}
         value={props.values[i]}
-      ></Box>
+      ></Box>,
     );
   }
 
-  return <div className="row">{boxes}</div>;
+  return <div className='row'>{boxes}</div>;
 };
 
 export default Row;

demo-app-next/src/pages/_app.tsx

@@ -1,5 +1,5 @@
-import "../../styles/style.css";
-import React from "react"
+import '../../styles/style.css';
+import React from 'react';
 
 export default function MyApp({ Component, pageProps }): JSX.Element {
   return <Component {...pageProps} />;

demo-app-next/src/pages/buttons/index.tsx

@@ -1,5 +1,5 @@
-import Buttons from "../../components/Buttons";
-import Navbar from "../../components/navbar";
+import Buttons from '../../components/Buttons';
+import Navbar from '../../components/navbar';
 
 export default function ButtonsPage(): JSX.Element {
   return (

demo-app-next/src/pages/index.tsx

@@ -1,29 +1,27 @@
-import Navbar from "../components/navbar";
-import React from "react"
+import Navbar from '../components/navbar';
+import React from 'react';
 
-export default function Home():JSX.Element {
+export default function Home(): JSX.Element {
   return (
     <div>
       <Navbar />
-      <div className="about">
+      <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."
+          "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."
+          "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>
     </div>

demo-app-next/src/pages/tictactoe/index.tsx

@@ -1,7 +1,7 @@
 import Board from '../../components/Board';
 import Navbar from '../../components/navbar';
 
-export default function BoardPage():JSX.Element {
+export default function BoardPage(): JSX.Element {
   return (
     <div>
       <Navbar />

demo-app-next/src/types/types.ts

@@ -3,8 +3,8 @@ export type Scoreboard = {
   O: number;
 };
 
-export type Player = "X" | "O";
+export type Player = 'X' | 'O';
 
-export type BoardText = "X" | "O" | "-";
+export type BoardText = 'X' | 'O' | '-';
 
 export type BoardContent = Array<Array<BoardText>>;