Quick tutorial

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 (
+    <Accordion
+      open={open === 1}
+      icon={<Icon id={1} open={open} />}
+      className={clsx(open && "-mt-64", "w-96", "z-40")}
+      animate={animate}
+    >
+      <AccordionHeader
+        onClick={() => 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")}
+      >
+        <div className="flex flex-row space-x-2.5 items-center px-2.5">
+          <Book />
+          <p className="text-xl text-[#FCE3AA] font-semibold">
+            Quick Tutorial
+          </p>
+        </div>
+      </AccordionHeader>
+      <AccordionBody className="rounded-b-xl h-[400px] bg-[#B96539] border-2 border-t-0 border-[#602714] px-2.5">
+        <div className="w-full h-full space-y-2.5">
+          <div className="flex-1 overflow-y-scroll max-h-[370px] space-y-2.5 hide-scrollbar">
+            <div className="flex flex-col space-y-2.5">
+              <div className="bg-[#9E462E80] border-2 border-[#6027144D] w-full h-fit rounded-lg p-1.5">
+                <h6 className="font-semibold text-white text-lg">Game Objective</h6>
+                <p className="text-white font-medium">The objective of Mancala is to capture more stones than your opponent by the end of the game.</p>
+              </div>
+              <div className="bg-[#9E462E80] border-2 border-[#6027144D] w-full h-fit rounded-lg p-1.5">
+                <h6 className="font-semibold text-white text-lg">How to Get Extra Moves</h6>
+                <p className="text-white font-medium">You can get an extra turn if your last stone lands in your Mancala (seeds move in a counterclockwise direction)</p>
+              </div>
+              <div className="bg-[#9E462E80] border-2 border-[#6027144D] w-full h-fit rounded-lg p-1.5">
+                <h6 className="font-semibold text-white text-lg">How to Capture Opponent Seeds</h6>
+                <p className="text-white font-medium">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.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </AccordionBody>
+    </Accordion>
+  );
+}

client/src/components/pits.tsx

@@ -88,7 +88,7 @@ export function BottomPit({
       <div className="flex flex-col items-center justify-center flex-1 w-full h-full">
         <div
           className={clsx(
-            "w-[90px] h-[80px] flex flex-col items-center justify-center hover:cursor-pointer rounded-full z-40 hover:bg-black/20",
+            "w-[90px] h-[80px] flex flex-col items-center justify-center hover:cursor-pointer rounded-full z-30 hover:bg-black/20",
             pit == 1 && "ml-0.5 -mt-1",
             pit == 2 && "ml-1 -mt-1",
             pit == 3 && "ml-1.5 -mt-1",

client/src/components/ui/svgs/book.tsx

@@ -0,0 +1,18 @@
+const Book = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="20"
+    fill="none"
+    viewBox="0 0 16 20"
+  >
+    <path
+      fill="#FCE3AA"
+      fillRule="evenodd"
+      d="M8.052 0h-.104c-1.68 0-3.01 0-4.052.142-1.072.147-1.94.456-2.624 1.152S.284 2.874.14 3.964C0 5.024 0 6.378 0 8.087v3.826c0 1.71 0 3.064.14 4.123.144 1.09.448 1.974 1.132 2.67s1.552 1.005 2.624 1.152C4.937 20 6.268 20 7.948 20h.104c1.68 0 3.01 0 4.052-.142 1.072-.147 1.94-.456 2.624-1.152s.988-1.58 1.132-2.67c.14-1.06.14-2.414.14-4.123V8.087c0-1.71 0-3.064-.14-4.123-.144-1.09-.448-1.974-1.132-2.67S13.176.29 12.104.142C11.063 0 9.732 0 8.052 0m-3.48 16.512c0-.386.306-.698.685-.698h5.486c.379 0 .686.312.686.698a.69.69 0 0 1-.686.697H5.257a.69.69 0 0 1-.686-.697"
+      clipRule="evenodd"
+    ></path>
+  </svg>
+);
+
+export default Book;

client/src/pages/Tutorial.tsx

@@ -10,7 +10,7 @@ import {
 } from "@/lib/constants";
 import { useQuery } from "@apollo/client";
 import AudioSection from "@/components/gameplay/audio-section";
-import GameChat from "@/components/gameplay/game-chat";
+import GameChat from "@/components/gameplay/quick-tutorial";
 import EndgameButton from "@/components/gameplay/end-game-button";
 import TimeoutButton from "@/components/gameplay/timeout-button";
 import TutorialGameBoard from "@/components/tutorial/tutorial-board";

client/src/pages/games/Gameplay.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/lib/constants";
 import { useQuery } from "@apollo/client";
 import AudioSection from "@/components/gameplay/audio-section";
-import GameChat from "@/components/gameplay/game-chat";
+import QuickTutorial from "@/components/gameplay/quick-tutorial";
 import RestartButton from "@/components/gameplay/restart-button";
 import EndgameButton from "@/components/gameplay/end-game-button";
 import GameNavigation from "@/components/gameplay/game-navigation";
@@ -133,7 +133,7 @@ export default function Gameplay() {
               setAction={setAction}
             />
             <div className="flex flex-row items-start justify-center pb-5 space-x-5">
-              <GameChat />
+              <QuickTutorial />
             </div>
           </div>
         </div>