diff --git a/public/img/imposter.png b/public/img/imposter.png new file mode 100644 index 0000000..8d8ab61 Binary files /dev/null and b/public/img/imposter.png differ diff --git a/src/components/Amogus/Amogus.tsx b/src/components/Amogus/Amogus.tsx new file mode 100644 index 0000000..df39146 --- /dev/null +++ b/src/components/Amogus/Amogus.tsx @@ -0,0 +1,93 @@ +import { useEffect, useState } from "react"; + +import style from "./style.module.css"; + +import amogus from "/img/amogus.png"; +import imposter from "/img/imposter.png"; + +type Amogus = { + isImposter: boolean; + posX: number; + posY: number; + speedX: number; + speedY: number; +}; + +const getImage = (sus: Amogus) => (sus.isImposter ? imposter : amogus); + +const initialCrewmates: Amogus[] = [ + { key: "a", isImposter: true, posX: 10, posY: 20, speedX: 10, speedY: 30 }, + { + key: "b", + isImposter: false, + posX: 400, + posY: 200, + speedX: 10, + speedY: -20, + }, + { + key: "c", + isImposter: false, + posX: 900, + posY: 200, + speedX: -20, + speedY: 10, + }, +]; + +const makeCrewmate = (crewmate: Amogus) => { + const image = getImage(crewmate); + return ( +
+ Amogus +
+ ); +}; + +const stepCrewmates = (list: Amogus[]) => { + const { innerWidth: width, innerHeight: height } = window; + const newCrewmates = list.slice(); + for (const c of newCrewmates) { + let newX = c.posX + c.speedX; + let newY = c.posY + c.speedY; + if (newX > width - 90) { + newX = width - 90; + c.speedX *= -1; + } + if (newX < 0) { + newX = 0; + c.speedX *= -1; + } + if (newY > height - 120) { + newY = height - 120; + c.speedY *= -1; + } + if (newY < 0) { + newY = 0; + c.speedY *= -1; + } + c.posX = newX; + c.posY = newY; + } + return newCrewmates; +}; + +export default function Amogus() { + const [crewmates, setCrewmates] = useState(initialCrewmates); + + useEffect(() => { + const timer = setInterval(() => { + const c = crewmates; + setCrewmates(stepCrewmates(c)); + }, 100); + return () => { + clearInterval(timer); + }; + }, [crewmates]); + + return <>{crewmates.map((c) => makeCrewmate(c))}; +} diff --git a/src/components/Amogus/style.module.css b/src/components/Amogus/style.module.css new file mode 100644 index 0000000..02b7665 --- /dev/null +++ b/src/components/Amogus/style.module.css @@ -0,0 +1,4 @@ +.container { + z-index: 100; + position: absolute; +} diff --git a/src/components/Dashboard/Dashboard.tsx b/src/components/Dashboard/Dashboard.tsx index 70429eb..2855229 100644 --- a/src/components/Dashboard/Dashboard.tsx +++ b/src/components/Dashboard/Dashboard.tsx @@ -1,3 +1,5 @@ +import classNames from "classnames"; + import FourTwenty from "@components/FourTwenty/FourTwenty"; import { useEffect, useState } from "react"; import Card from "@/components/Card/Card"; @@ -11,7 +13,8 @@ import Footer from "@/components/Footer/Footer"; import Terminal from "@/components/Terminal/Terminal"; import Timetable from "@/components/Timetable/Timetable"; import Weather from "@/components/Weather/Weather"; -import amogus from "/img/amogus.png"; +import Amogus from "@/components/Amogus/Amogus"; + import style from "./style.module.css"; export default function Dashboard() { @@ -42,9 +45,7 @@ export default function Dashboard() { return (
-
- Amogus -
+
@@ -59,9 +60,17 @@ export default function Dashboard() { - - - + +
+ + + +