Merge pull request #14 from oslabs-beta/backend

Remix Compatibility + Optimize Backend

Author: dev-plam

demo-app-remix/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ["@remix-run/eslint-config", "@remix-run/eslint-config/node"],
+};

demo-app-remix/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

demo-app-remix/README.md

@@ -0,0 +1,51 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+Start the Remix development asset server and the Express server by running:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, which will purge the server require cache when Remix rebuilds assets so you don't need a process manager restarting the express server.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying express applications you should be right at home just make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```

demo-app-remix/app/components/Board.tsx

@@ -0,0 +1,158 @@
+import React, { Component } from "react";
+import Row from "./Row";
+import type { BoardContent, Scoreboard, Player } from "../types/types";
+import type { BoardText } 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-remix/app/components/Box.tsx

@@ -0,0 +1,21 @@
+import type { 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-remix/app/components/Buttons.tsx

@@ -0,0 +1,21 @@
+import Increment from './Increment';
+
+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>
+  );
+}
+
+export default Buttons;

demo-app-remix/app/components/Buttons2.tsx

@@ -0,0 +1,38 @@
+// import StateButton from "./StateButton";
+// import EffectButton from "./EffectButton";
+// import RefComponent from "./RefComponent";
+// import ContextButton from "./ContextButton";
+// import { useState, useEffect, useRef, createContext } from "react";
+
+// export const ButtonContext: any = createContext(null);
+
+// export default function Buttons() {
+//   const [count, setCount] = useState(0);
+//   const [effectCount, setEffectCount] = useState(0);
+//   const renders = useRef(-1);
+
+//   useEffect(() => {
+//     renders.current = renders.current + 1;
+//     document.title = `You clicked ${effectCount} times`;
+//   }, [count, effectCount]);
+
+//   return (
+//     <div className="buttons">
+//       <h1>React Hook Buttons</h1>
+//       <h4 className="description">
+//         These buttons are functional components that manage their own state with
+//         different react hooks.
+//       </h4>
+//       {/* {buttons} */}
+//       <StateButton count={count} setCount={setCount} />
+//       <EffectButton effectCount={effectCount} setEffectCount={setEffectCount} />
+//       <h4> A box renders once useRef count is 3</h4>
+//       <div className={renders.current >= 3 ? "show" : "hide"}>
+//         <RefComponent counter={renders.current} />
+//       </div>
+//       <ButtonContext.Provider value={{ value: [count, setCount] }}>
+//         <ContextButton />
+//       </ButtonContext.Provider>
+//     </div>
+//   );
+// }

demo-app-remix/app/components/ContextButton.tsx

@@ -0,0 +1,20 @@
+// import { validateHeaderValue } from "http";
+// import { useContext } from "react";
+// import { ButtonContext } from "./Buttons";
+
+// export default function ContextButton() {
+//   //const [count, setCount] = useState(0);
+
+//   //   const [count, setCount] = useContext(ButtonContext);
+//   const { value }: any = useContext(ButtonContext);
+//   const [count, setCount] = value;
+
+//   return (
+//     <div>
+//       <h4>This button tests the useContext hook</h4>
+//       <button className="buttonstyle" onClick={() => setCount(count + 1)}>
+//         Click to increment: {count}
+//       </button>
+//     </div>
+//   );
+// }

demo-app-remix/app/components/EffectButton.tsx

@@ -0,0 +1,18 @@
+// import React, { useState, useEffect, useRef } from "react";
+
+// export default function StateButton(props: any) {
+//   //const [count, setCount] = useState(0);
+
+//   return (
+//     <div>
+//       <h4>This button tests the UseEffect hook</h4>
+//       <button
+//         className="buttonstyle"
+//         onClick={() => props.setEffectCount(props.effectCount + 1)}
+//       >
+//         {/* You clicked me {count} times. */}
+//         Click to update doc title
+//       </button>
+//     </div>
+//   );
+// }

demo-app-remix/app/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;