-
-
- );
-}
diff --git a/client/src/components/gameplay/quick-tutorial.tsx b/client/src/components/gameplay/quick-tutorial.tsx
new file mode 100644
index 00000000..a50d3a71
--- /dev/null
+++ b/client/src/components/gameplay/quick-tutorial.tsx
@@ -0,0 +1,58 @@
+import {
+ Accordion,
+ AccordionBody,
+ AccordionHeader,
+ Button,
+} from "@material-tailwind/react";
+
+import Icon from "@/components/gameplay/Icon.tsx";
+import { PaperAirplaneIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { animate, chat, players } from "@/lib/constants";
+import { useState } from "react";
+import Book from "../ui/svgs/book";
+
+export default function QuickTutorial() {
+ const handleOpen = (value: number) => setOpen(open === value ? 0 : value);
+ const [open, setOpen] = useState(0);
+ return (
+ }
+ className={clsx(open && "-mt-64", "w-96", "z-40")}
+ animate={animate}
+ >
+ handleOpen(1)}
+ className={clsx("bg-[#B96539] border-2 border-[#602714] px-2.5", open ? "rounded-b-none rounded-t-xl" : "rounded-b-full rounded-t-full")}
+ >
+
+
+
+ Quick Tutorial
+
+
+
+
+
+
+
+
+
Game Objective
+
The objective of Mancala is to capture more stones than your opponent by the end of the game.
+
+
+
How to Get Extra Moves
+
You can get an extra turn if your last stone lands in your Mancala (seeds move in a counterclockwise direction)
+
+
+
How to Capture Opponent Seeds
+
If your last stone lands in an empty pit on your side, and the opposite pit on your opponent’s side has stones, you capture all the stones in that opposite pit, along with your last stone.
-