diff --git a/.eslintrc.json.orig b/.eslintrc.json.orig
new file mode 100644
index 00000000..7827965a
--- /dev/null
+++ b/.eslintrc.json.orig
@@ -0,0 +1,59 @@
+{
+ "env": {
+ "browser": true,
+ "es2021": true,
+ "node": true
+ },
+ "settings": {
+ "react": {
+ "version": "detect"
+ }
+ },
+ "extends": [
+ "eslint:recommended",
+ "plugin:react/recommended",
+ "plugin:@typescript-eslint/eslint-recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier"
+ ],
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaFeatures": {
+ "jsx": true
+ },
+ "ecmaVersion": 12,
+ "sourceType": "module"
+ },
+ "plugins": ["react", "@typescript-eslint", "prettier"],
+ "rules": {
+ "prettier/prettier": [
+ "error",
+ {
+ "endOfLine": "auto"
+ }
+ ],
+ "no-extra-parens": [
+ "warn",
+ "all",
+ {
+ "nestedBinaryExpressions": false,
+ "returnAssign": false,
+<<<<<<< HEAD
+ "enforceForArrowConditionals": false
+ }
+ ],
+ "brace-style": ["error", "1tbs"],
+ "indent": ["error", 4],
+ "quotes": ["error", "double"],
+=======
+ "enforceForArrowConditionals": false,
+ "ignoreJSX": "all"
+ }
+ ],
+ "brace-style": ["error", "1tbs"],
+ "indent": ["error", 4, { "SwitchCase": 1 }],
+ "quotes": ["error", "double", { "avoidEscape": true }],
+>>>>>>> ad6c400 (Initial commit)
+ "semi": ["error", "always"]
+ }
+}
diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 00000000..06dbd255
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1,51 @@
+ # .gitattributes snippet to force users to use same line endings for project.
+ #
+ # Handle line endings automatically for files detected as text
+ # and leave all files detected as binary untouched.
+ * text=auto
+
+ #
+ # The above will handle all files NOT found below
+ # https://help.github.com/articles/dealing-with-line-endings/
+ # https://github.com/Danimoth/gitattributes/blob/master/Web.gitattributes
+
+
+
+ # These files are text and should be normalized (Convert crlf => lf)
+ *.php text
+ *.css text
+ *.js text
+ *.json text
+ *.htm text
+ *.html text
+ *.xml text
+ *.txt text
+ *.ini text
+ *.inc text
+ *.pl text
+ *.rb text
+ *.py text
+ *.scm text
+ *.sql text
+ .htaccess text
+ *.sh text
+ *.svg text
+
+ # These files are binary and should be left untouched
+ # (binary is a macro for -text -diff)
+ *.png binary
+ *.jpg binary
+ *.jpeg binary
+ *.gif binary
+ *.ico binary
+ *.mov binary
+ *.mp4 binary
+ *.mp3 binary
+ *.flv binary
+ *.fla binary
+ *.swf binary
+ *.gz binary
+ *.zip binary
+ *.7z binary
+ *.ttf binary
+ *.pyc binary
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
new file mode 100644
index 00000000..5193bf44
--- /dev/null
+++ b/.github/workflows/node.js.yml
@@ -0,0 +1,60 @@
+# 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 "
UD CISC275 with React Hooks and TypeScript
+
+
+
+
+
Edit src/App.tsx and save. This page will
automatically reload.
diff --git a/src/App.tsx.orig b/src/App.tsx.orig
new file mode 100644
index 00000000..34570af0
--- /dev/null
+++ b/src/App.tsx.orig
@@ -0,0 +1,33 @@
+import React from "react";
+import "./App.css";
+import PimpVsDestroy from "./components/PimpVsDestroy";
+//import Car from "./components/Car";
+//import DirtTool from "./components/Destroy Tools/DirtTool";
+import CarSpace from "./components/CarSpace";
+
+function App(): JSX.Element {
+ return (
+
+<<<<<<< HEAD
+
+ UD CISC275 with React Hooks and TypeScript
+
+
+=======
+
+>>>>>>> 81f8a5da11b43bec7cd160cbb8c2271f793e9907
+
+
+
+
+
+ Edit src/App.tsx and save. This page will
+ automatically reload.
+
+
+
(0);
+
+ // function moreTools(): void {
+ // setTool(tool + 1);
+ // // tool;
+ // }
return (
-
-
- {renderPiece(x, y, picPosition)}
-
-
+ <>
+
+ | board squares x={x}-{picPosition[0]}, y={y}-{picPosition[1]}
+
+
+ {renderPiece(x, y, "yeet", picPosition)}
+
+ {
+ //each square needs 2 states
+ //image name
+ // --- saves tool name and displays string
+ //ifcandrop or empty
+ // --- boolean that doesnt allow 1 or more things to be dropped
+ }
+
+
= (props) => {
const { picPosition } = props;
+ const { pics } = props;
const squares = [];
+ //let i=0;
+ //pics.map((p:string)=>( ));
+ //squares.push(renderSquare(0, picPosition, pics));
for (let i = 0; i < 2; i++) {
- squares.push(renderSquare(i, picPosition));
+ for (let j = 0; j < 2; j++) {
+ squares.push(renderSquare(j, i, pics, picPosition));
+ }
}
+
return (
+ hey
{squares}
+
+ Choose a pic
+
+ {pics.map(
+ (p: string): JSX.Element => (
+
+
+ )
+ )}
+
+
);
};
diff --git a/src/BoardSquare.tsx b/src/BoardSquare.tsx
index 6f617919..509a33c2 100644
--- a/src/BoardSquare.tsx
+++ b/src/BoardSquare.tsx
@@ -1,38 +1,72 @@
-import React from "react";
+import React, { useState } from "react";
import { useDrop } from "react-dnd";
import { ItemTypes } from "./constants";
-import { canMovePic, movePic } from "./game";
+import { canAddPic, addPic, canMovePic, movePic } from "./game";
+import Pic from "./Pic";
import Overlay from "./Overlay";
import Square from "./Square";
+import { Type } from "typescript";
type BoardSquareProps = {
x: number;
y: number;
+ pics: string[];
};
const BoardSquare: React.FC = (props) => {
- const { x, y, children } = props;
- const black = false; /*(x + y) % 2 === 1;*/
+ const { x, y, pics, children } = props;
+ const black = (x + y) % 2 === 1;
+ const [square, setSquare] = useState([]);
+ //const [square, setSquare] = useState([]);
const [{ isOver, canDrop }, drop] = useDrop({
accept: ItemTypes.PIC,
canDrop: () => canMovePic(x, y),
- drop: () => movePic(x, y),
+ drop: (item: { type: string; pic: string }) =>
+ addImageToBoard(item.pic),
collect: (monitor) => ({
isOver: !!monitor.isOver(),
canDrop: !!monitor.canDrop()
})
});
+ const addImageToBoard = (pic: string) => {
+ const p = pics.filter((picture) => pic === picture);
+ setSquare((square) => [...square, p[0]]);
+ };
+ // const [{ canAdd }, drop] = useDrop({
+ // accept: ItemTypes.PIC,
+ // canDrop: () => canAddPic(x, y),
+ // drop: () => addPic(x, y),
+ // collect: (monitor) => ({
+ // isOver: !!monitor.isOver(),
+ // canDrop: !!monitor.canDrop()
+ // })
+ // });
return (
-
- {children}
- {isOver && !canDrop &&
+ <>
+
+ yo
+
{children}
+ {isOver && !canDrop &&
}
+ {!isOver && canDrop &&
}
+ {isOver && canDrop &&
}
+
+ {square.map(
+ (p: string): JSX.Element => (
+
+ {p}
+ }
+
+ )
+ )}
+
+
= (props) => {
+ const { pic } = props;
const [{ isDragging }, drag] = useDrag({
- item: { type: ItemTypes.PIC },
- collect: (monitor) => ({
- isDragging: !!monitor.isDragging
+ item: { type: ItemTypes.PIC, pic: pic },
+ collect: (monitor: DragSourceMonitor) => ({
+ isDragging: !!monitor.isDragging()
})
});
@@ -23,6 +29,7 @@ const Pic: React.FC = () => {
}}
>
{/*♘*/}
+
= (props) => {
+ const backgrounds = [Street, City, Forest];
+ const [colorNum, setColorNum] = useState(0);
+ const [backgroundIndex, setBackgroundIndex] = useState(0);
+ return (
+
+
+ {colorNum == 0 &&
}
+ {colorNum == 1 &&
}
+ {colorNum == 2 &&
}
+
+
+ setColorNum((colorNum + 1) % 3)}>
+ Change Color (Red/Blue/Green)
+
+
+ setBackgroundIndex((backgroundIndex + 1) % 3)
+ }
+ >
+ Change Background (Street/City/Forest)
+
+
+ {props.children}
+
+ {piece}
+
+ );
+}
+export const CarSpace: React.FC = (props) => {
+ return {renderDestroy(1000, 1000, props.DirtPosition)}
;
+};
+export default CarSpace;
diff --git a/src/components/CarSquare.tsx b/src/components/CarSquare.tsx
new file mode 100644
index 00000000..984060ed
--- /dev/null
+++ b/src/components/CarSquare.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function CarSquare() {
+ return ♘ ;
+}
diff --git a/src/components/Destroy Tools/DirtTool.tsx b/src/components/Destroy Tools/DirtTool.tsx
new file mode 100644
index 00000000..2fd95398
--- /dev/null
+++ b/src/components/Destroy Tools/DirtTool.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Dirt from "./dirt.png";
+
+export default function DirtTool() {
+ return (
+
+
+ );
+}
diff --git a/src/components/Destroy Tools/dirt.png b/src/components/Destroy Tools/dirt.png
new file mode 100644
index 00000000..710c6235
Binary files /dev/null and b/src/components/Destroy Tools/dirt.png differ
diff --git a/src/components/Destroy.tsx b/src/components/Destroy.tsx
new file mode 100644
index 00000000..57ceed66
--- /dev/null
+++ b/src/components/Destroy.tsx
@@ -0,0 +1,45 @@
+import React from "react";
+import Dirt from "./images/dirt.png";
+import BirdPoop from "./images/birdpoop.png";
+import Slash from "./images/slash.png";
+import Hammer from "./images/hammer.png";
+
+const destroy = ["./images/dirt.png", "Birdpoop", "Slash", "Hammer,"];
+
+const Destroy = () => {
+ return (
+
+
Destroy Mode
+
+ Destroy Mode Options:
+ {destroy.map(
+ (t: string): JSX.Element => (
+
+
+ heee
+
+ )
+ )}
+ {/*
+
+ Dirty Car
+
+
+
+ Bird Poop
+
+
+
+ Slash Tires
+
+
+
+ Break Windows
+
*/}
+
etc
+
+
+//
+// {
+// //const tools=["Wipe Car","Shine Car","Fill Tires","Repair Windows","etc"];
+// }
+//
+// ,
+// document.getElementById("root")
+// );
+// });
+import React from "react";
+import Towel from "./images/towel.png";
+import Shine from "./images/shine.png";
+import Pump from "./images/pump.png";
+import GlassRepair from "./images/glassrepair.png";
+
+const Pimp = () => {
+ return (
+
+
Pimp Mode
+
+ Pimp Mode Options:
+
+
+ Wipe Car
+
+
+
+ Shine Car
+
+
+
+ Fill Tires
+
+
+
+ Repair Windows
+
+
etc
+
+
+//
+// {
+// //const tools=["Wipe Car","Shine Car","Fill Tires","Repair Windows","etc"];
+// }
+//
+// ,
+// document.getElementById("root")
+// );
+// });
+
+import Towel from "./towel.png";
+import Shine from "./shine.png";
+import Pump from "./pump.png";
+import GlassRepair from "./glass repair.png";
+>>>>>>> vicbranch
+
+const Pimp = () => {
+ return (
+
+
Pimp Mode
+
+ Pimp Mode Options:
+
+
+ Wipe Car
+
+
+
+ Shine Car
+
+
+
+ Fill Tires
+
+
+
+ Repair Windows
+
+
etc
+
+
+ {isPimp &&
{Pimp()}
}
+ {isPimp ||
{Destroy()}
}
+
setIsPimp(!isPimp)}>Pimp Vs Destroy
+
-
+
+ x={picPosition[0]}
+ y={picPosition[1]}
+
,
document.getElementById("root")
);
});
-
+//vic was here
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
diff --git a/src/index.tsx.orig b/src/index.tsx.orig
new file mode 100644
index 00000000..5d6ded6c
--- /dev/null
+++ b/src/index.tsx.orig
@@ -0,0 +1,42 @@
+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 App from "./App";
+
+observe((picPosition: [number, number]) => {
+ const arr: string[] = ["goofy", "AAh"];
+ ReactDOM.render(
+
+
+
+ x={picPosition[0]}
+ y={picPosition[1]}
+
+
,
+ document.getElementById("root")
+ );
+});
+//vic was here
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
![]({require("./bosun_tally.jpg")})
= (props) => {
backgroundColor: fill,
color: stroke,
width: "100%",
- height: "100%"
+ height: "50%"
}}
>
{props.children}
+ {props.black ? "black" : "white"} Square
);
};
diff --git a/src/components/Car.tsx b/src/components/Car.tsx
new file mode 100644
index 00000000..1fe4c95a
--- /dev/null
+++ b/src/components/Car.tsx
@@ -0,0 +1,49 @@
+import RedCar from "./images/redcar.png";
+import BlueCar from "./images/bluecar.png";
+import GreenCar from "./images/greencar.png";
+import React, { useState } from "react";
+import { Button } from "react-bootstrap";
+import Street from "./images/street.jpg";
+import City from "./images/city.jpg";
+import Forest from "./images/forest.jpg";
+
+type CarProps = {
+ color: number;
+ clean: boolean;
+ tirefill: boolean;
+ window: boolean;
+};
+
+const Car: React.FC
}
+ {colorNum == 1 && 
}
+ {colorNum == 2 && 
}
+ 
+ heee
+ 
+ Dirty Car
+ 
+ Bird Poop
+ 
+ Slash Tires
+ 
+ Break Windows
+ 
+ Wipe Car
+ 
+ Shine Car
+ 
+ Fill Tires
+ 
+ Repair Windows
+