tharveypa · shreeya0 · Oct 25, 2022 · Oct 25, 2022 · Oct 25, 2022 · Oct 27, 2022
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -0,0 +1,52 @@
+# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+    push:
+        branches: [main]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+
+        strategy:
+            matrix:
+                node-version: [16.x]
+                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+        steps:
+            - uses: actions/checkout@v2
+            - name: Use Node.js ${{ matrix.node-version }}
+              uses: actions/setup-node@v2
+              with:
+                  node-version: ${{ matrix.node-version }}
+                  cache: "npm"
+            - id: get-repo-values
+              run: |
+                  url=https://$(echo "${{github.repository}}" | sed "s/\//.github.io\//")
+                  echo "::set-output name=url::$url"
+            - name: Update package.json homepage
+              uses: jossef/action-set-json-field@v1
+              with:
+                  file: package.json
+                  field: homepage
+                  value: ${{ steps.get-repo-values.outputs.url }}
+            - run: npm ci
+            - run: npm run lint
+            - run: npm run test -- --coverage |& tee ./public/test_report.txt
+            - run: echo "<html><head><meta http-equiv='refresh' content='0; URL=${{github.server_url}}/${{github.repository}}' /></head><body>Redirecting to repository</body></html>" > ./public/github.html
+            - run: npm run build --if-present
+
+            - name: Deploy
+              run: |
+                  git config --global user.name ${user_name}
+                  git config --global user.email ${user_email}
+                  git remote set-url origin https://${github_token}@github.com/${repository}
+                  npm run deploy
+              env:
+                  user_name: "github-actions[bot]"
+                  user_email: "github-actions[bot]@users.noreply.github.com"
+                  github_token: ${{ secrets.GH_TOKEN }}
+                  repository: ${{ github.repository }}
diff --git a/Personas.md b/Personas.md
@@ -0,0 +1,15 @@
+
+Person 1: 
+  - Student who likes to look at fish 
+  - Learn about fish while playing a game 
+  - No access to fish or aquarium  
+
+Person 2: 
+  - Teacher 
+  - Wants to teach about fish via visual aids 
+  - No access to fish or effective game 
+
+ Person 3: 
+  - Fish Tycoon/Interior Decorator 
+  - Plan out aquariums 
+  - Takes too many resources to physically plan out aquarium
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,17 +2,7 @@ import React from "react";
 import "./App.css";
 
 function App(): JSX.Element {
-    return (
-        <div className="App">
-            <header className="App-header">
-                UD CISC275 with React Hooks and TypeScript
-            </header>
-            <p>
-                Edit <code>src/App.tsx</code> and save. This page will
-                automatically reload.
-            </p>
-        </div>
-    );
+    return <div className="App"></div>;
 }
 
 export default App;
diff --git a/src/Board.tsx b/src/Board.tsx
@@ -10,12 +10,23 @@ const renderPiece = (x: number, y: number, [picX, picY]: [number, number]) => {
     }
 };
 
-const renderSquare = (i: number, picPosition: [number, number]) => {
+const renderSquare = (
+    i: number,
+    picPosition: [number, number],
+    width: number,
+    height: number
+) => {
     const x = i;
     const y = 0;
 
     return (
-        <div key={i} style={{ width: "50%", height: "100%" }}>
+        <div
+            key={i}
+            style={{
+                width: width.toString() + "%",
+                height: height.toString() + "%"
+            }}
+        >
             <BoardSquare x={x} y={y}>
                 {renderPiece(x, y, picPosition)}
             </BoardSquare>
@@ -25,13 +36,17 @@ const renderSquare = (i: number, picPosition: [number, number]) => {
 
 type BoardProps = {
     picPosition: [number, number];
+    numSquares: number;
 };
 
 const Board: React.FC<BoardProps> = (props) => {
-    const { picPosition } = props;
+    const { picPosition, numSquares } = props;
+    const numCol = Math.ceil(Math.sqrt(numSquares));
+    const width = 100 / numCol;
+    const height = 100 / Math.ceil(numSquares / numCol);
     const squares = [];
-    for (let i = 0; i < 2; i++) {
-        squares.push(renderSquare(i, picPosition));
+    for (let i = 0; i < numSquares; i++) {
+        squares.push(renderSquare(i, picPosition, width, height));
     }
     return (
         <DndProvider backend={HTML5Backend}>

diff --git a/src/BoardSquare.tsx b/src/BoardSquare.tsx
@@ -12,10 +12,11 @@ type BoardSquareProps = {
 
 const BoardSquare: React.FC<BoardSquareProps> = (props) => {
     const { x, y, children } = props;
-    const black = false; /*(x + y) % 2 === 1;*/
+    const salt = x % 2 === 1;
+    const pred = x % 3 === 0;
     const [{ isOver, canDrop }, drop] = useDrop({
         accept: ItemTypes.PIC,
-        canDrop: () => canMovePic(x, y),
+        canDrop: () => canMovePic(x, y, salt, pred),
         drop: () => movePic(x, y),
         collect: (monitor) => ({
             isOver: !!monitor.isOver(),
@@ -26,12 +27,19 @@ const BoardSquare: React.FC<BoardSquareProps> = (props) => {
     return (
         <div
             ref={drop}
-            style={{ position: "relative", width: "100%", height: "100%" }}
+            style={{
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                border: "2px solid black"
+            }}
         >
-            <Square black={black}>{children}</Square>
-            {isOver && !canDrop && <Overlay color="red" />}
-            {!isOver && canDrop && <Overlay color="yellow" />}
-            {isOver && canDrop && <Overlay color="green" />}
+            <Square salt={salt} pred={pred}>
+                {children}
+            </Square>
+            {isOver && !canDrop && <Overlay color="red" opacity={0.5} />}
+            {!isOver && canDrop && <Overlay color="yellow" opacity={0.5} />}
+            {isOver && canDrop && <Overlay color="green" opacity={0.5} />}
         </div>
     );
 };

diff --git a/src/Components/Menu.tsx b/src/Components/Menu.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { Container } from "react-bootstrap";
+//import { useDrop } from "react-dnd";
+import fish_data_json from "../data/fish.json";
+//import { Fish } from "../interfaces/Fish";
+
+const Menu: React.FC = () => {
+    return (
+        <div className="bg-blue border m-2 p-2">
+            <Container>
+                <b>Menu</b>
+                {fish_data_json.map((f) => {
+                    <img src={require(f.image)} width="100%" height="100%" />;
+                })}
+            </Container>
+        </div>
+    );
+};
+export default Menu;
diff --git a/src/NumSquareForm.tsx b/src/NumSquareForm.tsx
@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { Form } from "react-bootstrap";
+import Board from "./Board";
+
+interface NumSquareFormProps {
+    picPosition: [number, number];
+}
+
+export function NumSquareForm({
+    picPosition
+}: NumSquareFormProps): JSX.Element {
+    const [numSquares, setNumSquares] = useState(12);
+    return (
+        <div>
+            <div>
+                <Form.Group
+                    controlId="numSquareForm"
+                    style={{
+                        position: "absolute",
+                        width: "130px",
+                        right: "5%",
+                        bottom: "3%"
+                    }}
+                >
+                    <Form.Label>Number of Tanks:</Form.Label>
+                    <Form.Control
+                        type="number"
+                        value={numSquares}
+                        onChange={(
+                            event: React.ChangeEvent<HTMLInputElement>
+                        ) => setNumSquares(parseInt(event.target.value))}
+                    />
+                </Form.Group>
+            </div>
+            <div
+                style={{
+                    position: "absolute",
+                    top: "10%",
+                    left: "25%",
+                    width: "70%",
+                    height: "80%",
+                    border: "2px solid black",
+                    backgroundColor: "gray"
+                }}
+            >
+                <Board picPosition={picPosition} numSquares={numSquares} />
+            </div>
+        </div>
+    );
+}
+
+export default NumSquareForm;
diff --git a/src/Overlay.tsx b/src/Overlay.tsx
@@ -2,6 +2,7 @@ import React from "react";
 
 type OverlayProps = {
     color: string;
+    opacity: number;
 };
 
 const Overlay: React.FC<OverlayProps> = (props) => {
@@ -14,7 +15,7 @@ const Overlay: React.FC<OverlayProps> = (props) => {
                 height: "100%",
                 width: "100%",
                 zIndex: 1,
-                opacity: 0.5,
+                opacity: props.opacity,
                 backgroundColor: props.color
             }}
         />

diff --git a/src/Pic.tsx b/src/Pic.tsx
@@ -15,18 +15,20 @@ const Pic: React.FC = () => {
             <div
                 ref={drag}
                 style={{
+                    position: "relative",
+                    bottom: "80%",
+                    zIndex: 1,
                     opacity: isDragging ? 1 : 0.5,
-                    fontSize: 50,
+                    fontSize: 0,
                     fontWeight: "bold",
                     cursor: "move",
-                    textAlign: "center"
+                    width: "30%"
                 }}
             >
-                {/*♘*/}
                 <img
-                    src={require("./bosun_tally.jpg")}
-                    width="80"
-                    height="80"
+                    src={require("./images/pixelFish.png")}
+                    width="100%"
+                    height="100%"
                 />
             </div>
         </Fragment>

diff --git a/src/Square.tsx b/src/Square.tsx
@@ -1,22 +1,38 @@
 import React from "react";
+import Overlay from "./Overlay";
 
 type SquareProps = {
-    black: boolean;
+    salt: boolean;
+    pred: boolean;
 };
 
 const Square: React.FC<SquareProps> = (props) => {
-    const fill = props.black ? "black" : "white";
-    const stroke = props.black ? "white" : "black";
-
+    const { salt, pred } = props;
+    let tankPic = "";
+    if (salt) {
+        tankPic = "salt.png";
+    } else {
+        tankPic = "fresh.png";
+    }
     return (
         <div
             style={{
-                backgroundColor: fill,
-                color: stroke,
+                position: "absolute",
+                zIndex: 0,
+                opacity: "0.85",
                 width: "100%",
                 height: "100%"
             }}
         >
+            {
+                <img
+                    src={require("./images/" + tankPic)}
+                    alt="tankPic"
+                    width="100%"
+                    height="100%"
+                />
+            }
+            {pred && <Overlay color="red" opacity={0.25} />}
             {props.children}
         </div>
     );

diff --git a/src/bosun_tally.jpg b/src/bosun_tally.jpg
diff --git a/src/data/fish.json b/src/data/fish.json
@@ -0,0 +1,20 @@
+[
+    {
+        "id": 1,
+        "freshwater": true,
+        "name": "fish1",
+        "predator": false,
+        "size": 1,
+        "position": [0, 0],
+        "image": "../images/pixelFish.png"
+    },
+    {
+        "id": 1,
+        "freshwater": true,
+        "name": "fish1",
+        "predator": false,
+        "size": 1,
+        "position": [0, 0],
+        "image": "../images/squid.png"
+    }
+]
diff --git a/src/game.ts b/src/game.ts
@@ -5,6 +5,7 @@ const emitChange = () => {
     observer && observer(picPosition);
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const observe = (o: any) => {
     if (observer) {
         throw new Error("Multiple observers not implemented.");
@@ -19,9 +20,11 @@ export const movePic = (toX: number, toY: number) => {
     emitChange();
 };
 
-export const canMovePic = (toX: number, toY: number) => {
-    const [x, y] = picPosition;
-    const dx = toX - x;
-
-    return Math.abs(dx) === 1;
+export const canMovePic = (
+    toX: number,
+    toY: number,
+    salt: boolean,
+    pred: boolean
+) => {
+    return salt === false && pred === false;
 };
diff --git a/src/images/fresh.png b/src/images/fresh.png
diff --git a/src/images/pixelFish.jpeg b/src/images/pixelFish.jpeg
diff --git a/src/images/pixelFish.png b/src/images/pixelFish.png
diff --git a/src/images/pixelFishTransparent.jpg b/src/images/pixelFishTransparent.jpg
diff --git a/src/images/salt.png b/src/images/salt.png
diff --git a/src/images/squid.png b/src/images/squid.png
diff --git a/src/images/tank.png b/src/images/tank.png