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 (
+
+

+
+ );
+};
+
+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 (
-
-

-
+
@@ -59,9 +60,17 @@ export default function Dashboard() {
-
-
-
+
+
+
+
+
+