diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 00000000..7bebc78b --- /dev/null +++ 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 "Redirecting to repository" > ./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 new file mode 100644 index 00000000..9e2f4069 --- /dev/null +++ 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 index a171870e..a68bde6e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,17 +2,7 @@ import React from "react"; import "./App.css"; function App(): JSX.Element { - return ( -
-
- UD CISC275 with React Hooks and TypeScript -
-

- Edit src/App.tsx and save. This page will - automatically reload. -

-
- ); + return
; } export default App; diff --git a/src/Board.tsx b/src/Board.tsx index b0100e8a..93b5eb1b 100644 --- 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 ( -
+
{renderPiece(x, y, picPosition)} @@ -25,13 +36,17 @@ const renderSquare = (i: number, picPosition: [number, number]) => { type BoardProps = { picPosition: [number, number]; + numSquares: number; }; const Board: React.FC = (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 ( diff --git a/src/BoardSquare.tsx b/src/BoardSquare.tsx index 6f617919..4986cba3 100644 --- a/src/BoardSquare.tsx +++ b/src/BoardSquare.tsx @@ -12,10 +12,11 @@ type BoardSquareProps = { const BoardSquare: React.FC = (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 = (props) => { return (
- {children} - {isOver && !canDrop && } - {!isOver && canDrop && } - {isOver && canDrop && } + + {children} + + {isOver && !canDrop && } + {!isOver && canDrop && } + {isOver && canDrop && }
); }; diff --git a/src/Components/Menu.tsx b/src/Components/Menu.tsx new file mode 100644 index 00000000..21fc40f7 --- /dev/null +++ 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 ( +
+ + Menu + {fish_data_json.map((f) => { + ; + })} + +
+ ); +}; +export default Menu; diff --git a/src/NumSquareForm.tsx b/src/NumSquareForm.tsx new file mode 100644 index 00000000..05427fe8 --- /dev/null +++ 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 ( +
+
+ + Number of Tanks: + + ) => setNumSquares(parseInt(event.target.value))} + /> + +
+
+ +
+
+ ); +} + +export default NumSquareForm; diff --git a/src/Overlay.tsx b/src/Overlay.tsx index 3ec8daf4..0039f34e 100644 --- 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 = (props) => { @@ -14,7 +15,7 @@ const Overlay: React.FC = (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 index 9653a73c..d6aea7d1 100644 --- a/src/Pic.tsx +++ b/src/Pic.tsx @@ -15,18 +15,20 @@ const Pic: React.FC = () => {
- {/*♘*/}
diff --git a/src/Square.tsx b/src/Square.tsx index 70ad27a4..c274c254 100644 --- 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 = (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 (
+ { + tankPic + } + {pred && } {props.children}
); diff --git a/src/bosun_tally.jpg b/src/bosun_tally.jpg deleted file mode 100755 index a9d53fae..00000000 Binary files a/src/bosun_tally.jpg and /dev/null differ diff --git a/src/data/fish.json b/src/data/fish.json new file mode 100644 index 00000000..a786f134 --- /dev/null +++ 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 index 02668609..9f7e387b 100644 --- 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 new file mode 100644 index 00000000..9776cd00 Binary files /dev/null and b/src/images/fresh.png differ diff --git a/src/images/pixelFish.jpeg b/src/images/pixelFish.jpeg new file mode 100644 index 00000000..07dc1c8b Binary files /dev/null and b/src/images/pixelFish.jpeg differ diff --git a/src/images/pixelFish.png b/src/images/pixelFish.png new file mode 100644 index 00000000..f8ce2ef3 Binary files /dev/null and b/src/images/pixelFish.png differ diff --git a/src/images/pixelFishTransparent.jpg b/src/images/pixelFishTransparent.jpg new file mode 100644 index 00000000..eb737532 Binary files /dev/null and b/src/images/pixelFishTransparent.jpg differ diff --git a/src/images/salt.png b/src/images/salt.png new file mode 100644 index 00000000..805d512b Binary files /dev/null and b/src/images/salt.png differ diff --git a/src/images/squid.png b/src/images/squid.png new file mode 100644 index 00000000..7ea9366d Binary files /dev/null and b/src/images/squid.png differ diff --git a/src/images/tank.png b/src/images/tank.png new file mode 100644 index 00000000..57635f09 Binary files /dev/null and b/src/images/tank.png differ diff --git a/src/index.tsx b/src/index.tsx index b9629b2c..65a86acc 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,21 +1,36 @@ import React from "react"; import ReactDOM from "react-dom"; -import Board from "./Board"; import "./index.css"; import { observe } from "./game"; import reportWebVitals from "./reportWebVitals"; +import NumSquareForm from "./NumSquareForm"; +import Menu from "./Components/Menu"; observe((picPosition: [number, number]) => { ReactDOM.render( -
- + FISHDOM + +

+ Shreeya, Daniel , Jason +

+
+ +
+
+
, document.getElementById("root") diff --git a/src/interfaces/Fish.ts b/src/interfaces/Fish.ts new file mode 100644 index 00000000..c9e494e4 --- /dev/null +++ b/src/interfaces/Fish.ts @@ -0,0 +1,16 @@ +export interface Fish { + /** To differentiated when there is multiples of the same fish */ + id: number; + /** True if the fish lives in freshwater, false if the fish lives in saltwater */ + freshwater: boolean; + /** Species name */ + name: string; + /** True if the fish is a predator, false if the fish is prey */ + predator: boolean; + /** how big or small the fish will appear on the screen (pixels) */ + size: number; + /** x,y coordinate of the fish on the screen */ + position: [number, number]; + /** Filepath of the fish image to render on screen */ + image: string; +} diff --git a/src/interfaces/Tank.ts b/src/interfaces/Tank.ts new file mode 100644 index 00000000..47fdd167 --- /dev/null +++ b/src/interfaces/Tank.ts @@ -0,0 +1,12 @@ +type Tank = { + /** To differentiated when there is multiples of the same fish */ + id: number; + /** True if the fish lives in freshwater, false if the fish lives in saltwater */ + freshwater: boolean; + /** True if the fish is a predator, false if the fish is prey */ + predator: boolean; + /** how many pixels of fish the tank can hold */ + capacity: number; +}; + +export default Tank;