Add Prepared Animation

src/components/game/GameWrapper.jsx

@@ -1,6 +1,6 @@
 import Image from "next/image"
 import Button from "@/components/Button"
-import background from "@/assets/2238431_1694.jpg"
+import background from "@/assets/background.webp"
 import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
 import { useState } from "react"

src/components/game/states/Answers.jsx

@@ -102,7 +102,7 @@ export default function Answers({
           <div className="max-w-7xl mx-auto mb-4 w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
             <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
               <span className="text-sm translate-y-1">Time</span>
-              <span>{cooldown}</span>
+              <span className="anim-timer">{cooldown}</span>
             </div>
             <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
               <span className="text-sm translate-y-1">Answers</span>

src/components/game/states/Prepared.jsx

@@ -0,0 +1,31 @@
+import Circle from "@/components/icons/Circle"
+import CricleCheck from "@/components/icons/CricleCheck"
+import CricleXmark from "@/components/icons/CricleXmark"
+import Rhombus from "@/components/icons/Rhombus"
+import Square from "@/components/icons/Square"
+import Triangle from "@/components/icons/Triangle"
+import { usePlayerContext } from "@/context/player"
+import { useEffect } from "react"
+/*{ data: { number, total, question } }*/
+export default function Prepared() {
+  const { dispatch } = usePlayerContext()
+
+  return (
+    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
+      <div className="anim-quizz bg-gray-700 p-5 gap-4 rounded-2xl w-80 h-[400px] grid grid-cols-2 shadow-[10px_10px_0_rgba(20,24,29,1)] ">
+        <div className="button flex justify-center items-center bg-red-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+          <Triangle className="h-14" />
+        </div>
+        <div className="button flex justify-center items-center bg-blue-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+          <Rhombus className="h-14" />
+        </div>
+        <div className="button flex justify-center items-center bg-yellow-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+          <Square className="h-14" />
+        </div>
+        <div className="button flex justify-center items-center bg-green-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+          <Circle className="h-14" />
+        </div>
+      </div>
+    </section>
+  )
+}

src/components/game/states/Question.jsx

@@ -1,5 +1,4 @@
-import { useSocketContext } from "@/context/socket"
-import { useEffect, useRef } from "react"
+import { useRef } from "react"
 
 export default function Question({ data: { question } }) {
   const barRef = useRef(null)

src/constants.js

@@ -1 +1 @@
-export const WEBSOCKET_URL = "http://localhost:3000" ///"https://rahoot.ralex.app"
+export const WEBSOCKET_URL = "http://localhost:5157" ///"https://rahoot.ralex.app"

src/context/socket.jsx

@@ -2,7 +2,7 @@ import { io } from "socket.io-client"
 import { createContext, useContext, useState } from "react"
 import { WEBSOCKET_URL } from "@/constants"
 
-export const socket = io("http://localhost:5157", {
+export const socket = io(WEBSOCKET_URL, {
   path: "/ws/",
   //addTrailingSlash: false,
   transports: ["websocket"],

src/pages/manager.jsx

@@ -2,6 +2,7 @@ import Button from "@/components/Button"
 import GameWrapper from "@/components/game/GameWrapper"
 import Answers from "@/components/game/states/Answers"
 import Leaderboard from "@/components/game/states/Leaderboard"
+import Prepared from "@/components/game/states/Prepared"
 import Question from "@/components/game/states/Question"
 import Start from "@/components/game/states/Start"
 import Wait from "@/components/game/states/Wait"
@@ -90,12 +91,15 @@ export default function Manager() {
           <Button onClick={handleCreate}>Create Room</Button>
         </div>
       ) : (
-        <GameWrapper textNext={nextText} onNext={handleSkip} manager>
-          {gameStateComponent[state.status.name] &&
-            createElement(gameStateComponent[state.status.name], {
-              data: state.status.data,
-            })}
-        </GameWrapper>
+        <>
+          <GameWrapper textNext={nextText} onNext={handleSkip} manager>
+            <Prepared />
+            {/*gameStateComponent[state.status.name] &&
+              createElement(gameStateComponent[state.status.name], {
+                data: state.status.data,
+              })*/}
+          </GameWrapper>
+        </>
       )}
     </>
   )

src/styles/globals.css

@@ -36,6 +36,20 @@
   animation: show 0.5s ease-out;
 }
 
+.anim-timer {
+  animation: timer 1s ease-out infinite;
+}
+
+.anim-quizz {
+  animation: quizz 1s ease-out;
+  transform: perspective(1200px) rotateY(-15deg) rotateX(15deg)
+    translateZ(100px);
+}
+
+.anim-quizz .button {
+  animation: quizzButton 1s ease-out;
+}
+
 @keyframes show {
   0% {
     transform: scale(0);
@@ -59,3 +73,38 @@
     width: 100%;
   }
 }
+
+@keyframes timer {
+  0% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1.4) rotate(-6deg);
+  }
+  60% {
+    transform: scale(0.8) rotate(6deg);
+  }
+  80% {
+    transform: scale(1);
+  }
+}
+
+@keyframes quizz {
+  0% {
+    transform: scale(0) perspective(1200px) rotateY(-35deg) rotateX(15deg)
+      translateZ(100px);
+  }
+  100% {
+    transform: scale(1) perspective(1200px) rotateY(-15deg) rotateX(15deg)
+      translateZ(100px);
+  }
+}
+
+@keyframes quizzButton {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}