feat: add animated characters on start screen

components/StartScreen/index.tsx

@@ -5,6 +5,7 @@ import { client } from "../../libs/apis";
 import { JoinGame } from "./JoinGame";
 import { MatchMaking } from "../MatchMaking";
 import Link from "next/link";
+import { Transition } from "@headlessui/react";
 
 export const StartScreen = () => {
   const { gameState, setGameId, setPlayerToken } = useGameContext();
@@ -87,22 +88,71 @@ export const StartScreen = () => {
 
   return (
     <>
+      <Image
+        src="/assets/images/background.png"
+        fill
+        alt="Theme"
+        className="object-cover"
+      />
       <div className="fixed top-0 left-0 w-full h-full flex flex-col text-white text-base p-4 items-center gap-y-10 md:gap-y-20">
+        <div className="scale-[0.6] fixed top-1/2 left-1/2 translate-x-[-670px] translate-y-[-10px]">
+          <Image
+            className="animate-hover-1"
+            src="/assets/images/drone.gif"
+            alt="drone character"
+            width={227}
+            height={202}
+          />
+        </div>
+        <div className="scale-[1.5] fixed top-1/2 left-1/2 translate-x-[0px] translate-y-[-250px]">
+          <Image
+            className="animate-hover-2"
+            src="/assets/images/neko.gif"
+            alt="drone character"
+            width={227}
+            height={202}
+          />
+        </div>
+        <div className="scale-[2] fixed top-1/2 left-1/2 translate-x-[-450px] translate-y-[-40px]">
+          <Image
+            className="animate-hover-3"
+            src="/assets/images/rabby.gif"
+            alt="drone character"
+            width={227}
+            height={202}
+          />
+        </div>
+        <div className="scale-[1.8] fixed top-1/2 left-1/2 translate-x-[210px] translate-y-[20px]">
+          <Image
+            className="animate-hover-2"
+            src="/assets/images/owl.gif"
+            alt="drone character"
+            width={227}
+            height={202}
+          />
+        </div>
         <Link href="/" className="h-8 md:h-16 w-full mt-16 md:mt-28">
           <Image
-            className="object-contain hover:scale-105 cursor-pointer"
+            className="object-contain hover:scale-[1.02] transition-all duration-100 ease-out cursor-pointer"
             src="/heading.png"
             alt="Hunger Game"
             fill
           />
         </Link>
 
-        <div className="max-w-full w-[384px] max-h-[80vh] rounded-md bg-background-primary/95 overflow-auto p-4 md:p-6 flex flex-col gap-y-4 md:gap-y-8">
+        <Transition
+          show
+          appear
+          enter="transition-opacity duration-200 ease-in-out delay-700"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          className="max-w-full w-[384px] max-h-[80vh] rounded-md bg-background-primary/95 overflow-auto p-4 md:p-6 flex flex-col gap-y-4 md:gap-y-8"
+        >
           <div className="w-32 h-32 mx-auto">
             <Image src="/assets/images/logo.png" fill alt="Logo" />
           </div>
           {render}
-        </div>
+        </Transition>
       </div>
       {/* <FoundMatch /> */}
     </>

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "@dwarvesf/react-hooks": "^0.7.0",
     "@dwarvesf/react-utils": "^0.4.1",
+    "@headlessui/react": "^1.7.11",
     "@iconify/react": "^4.0.1",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",

pages/index.tsx

@@ -27,10 +27,7 @@ export default function Home() {
           <RightCorner />
         </>
       ) : (
-        <>
-          <Image src="/theme.png" fill alt="Theme" className="object-cover" />
-          <StartScreen />
-        </>
+        <StartScreen />
       )}
     </div>
   );

tailwind.config.js

@@ -12,6 +12,37 @@ module.exports = {
           secondary: "#4c628a",
         },
       },
+      keyframes: {
+        "hover-1": {
+          "0%, 100%": {
+            transform: "translateY(0%)",
+          },
+          "50%": {
+            transform: "translateY(-10%)",
+          },
+        },
+        "hover-2": {
+          "0%, 100%": {
+            transform: "translateY(0%)",
+          },
+          "50%": {
+            transform: "translateY(-5%)",
+          },
+        },
+        "hover-3": {
+          "0%, 100%": {
+            transform: "translateY(0%)",
+          },
+          "50%": {
+            transform: "translateY(-2%)",
+          },
+        },
+      },
+      animation: {
+        "hover-1": "hover-1 1s ease-in-out infinite",
+        "hover-2": "hover-2 1s ease-in-out infinite",
+        "hover-3": "hover-3 1s ease-in-out infinite",
+      },
     },
   },
   plugins: [],

yarn.lock

@@ -74,6 +74,13 @@
     minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@headlessui/react@^1.7.11":
+  version "1.7.11"
+  resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.11.tgz#1cc5750226abe5af2c94f72e975c0c8d2f5cc5a6"
+  integrity sha512-EaDbVgcyiylhtskZZf4Qb/JiiByY7cYbd0qgZ9xm2pm2X7hKojG0P4TaQYKgPOV3vojPhd/pZyQh3nmRkkcSyw==
+  dependencies:
+    client-only "^0.0.1"
+
 "@humanwhocodes/config-array@^0.11.6":
   version "0.11.7"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.7.tgz#38aec044c6c828f6ed51d5d7ae3d9b9faf6dbb0f"
@@ -588,7 +595,7 @@ classnames@^2.3.2:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
   integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
-[email protected]:
+[email protected], client-only@^0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==