Add prettierc/workspace config

.prettierrc

@@ -1,3 +0,0 @@
-{
-  "semi": false
-}

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

jsconfig.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
-    }
+    },
-  }
+  },
 }

package-lock.json

@@ -20,6 +20,7 @@
         "eslint": "^8",
         "eslint-config-next": "14.1.0",
         "postcss": "^8",
+        "prettier-plugin-tailwindcss": "^0.5.11",
         "tailwindcss": "^3.3.0"
       }
     },
@@ -3671,6 +3672,91 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
+      "integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
+      "dev": true,
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
+      "integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "prettier-plugin-twig-melody": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json

@@ -21,6 +21,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.1.0",
     "postcss": "^8",
+    "prettier-plugin-tailwindcss": "^0.5.11",
     "tailwindcss": "^3.3.0"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-};
+}

rahoot.code-workspace

@@ -0,0 +1,55 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "extensions": {
+    "recommendations": [
+      "dbaeumer.vscode-eslint",
+      "esbenp.prettier-vscode",
+      "formulahendry.auto-rename-tag",
+      "naumovs.color-highlight",
+      "usernamehw.errorlens",
+      "bradlc.vscode-tailwindcss"
+    ]
+  },
+  "settings": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.formatOnSave": true,
+    "editor.detectIndentation": true,
+    "editor.rulers": [80],
+    "[javascript]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode",
+      "editor.suggestSelection": "recentlyUsed",
+      "editor.suggest.showKeywords": false
+    },
+    "[html]": {
+      "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
+    "editor.renderWhitespace": "selection",
+    "files.exclude": {
+      "USE_GITIGNORE": true
+    },
+    "javascript.validate.enable": false,
+    "search.exclude": {
+      "**/node_modules": true,
+      "**/bower_components": true,
+      "**/coverage": true,
+      "**/dist": true,
+      "**/build": true,
+      "**/.build": true,
+      "**/.gh-pages": true
+    },
+    "npm.runSilent": true,
+    "explorer.confirmDragAndDrop": false,
+    "editor.formatOnPaste": false,
+    "files.autoSave": "onFocusChange",
+    "editor.cursorSmoothCaretAnimation": "off",
+    "editor.smoothScrolling": true,
+    "explorer.confirmDelete": false,
+    "git.autofetch": true,
+    "editor.tabSize": 2,
+    "scss.lint.unknownAtRules": "ignore"
+  }
+}

socket/package.json

@@ -2,6 +2,9 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "scripts": {
+    "start": "node ./src/index.js"
+  },
   "dependencies": {
     "socket.io": "^4.7.4"
   }

socket/src/index.js

@@ -18,28 +18,28 @@ io.on("connection", (socket) => {
   console.log(`A user connected ${socket.id}`)
 
   socket.on("player:join", (player) =>
-    Player.join(gameState, io, socket, player)
+    Player.join(gameState, io, socket, player),
   )
 
   socket.on("manager:createRoom", () =>
-    Manager.createRoom(gameState, io, socket)
+    Manager.createRoom(gameState, io, socket),
   )
   socket.on("manager:kickPlayer", (playerId) =>
-    Manager.kickPlayer(gameState, socket, io, playerId)
+    Manager.kickPlayer(gameState, socket, io, playerId),
   )
 
   socket.on("manager:startGame", () => Manager.startGame(gameState, io, socket))
 
   socket.on("player:selectedAnswer", (answerKey) =>
-    Player.selectedAnswer(gameState, io, socket, answerKey)
+    Player.selectedAnswer(gameState, io, socket, answerKey),
   )
 
   socket.on("manager:nextQuestion", () =>
-    Manager.nextQuestion(gameState, io, socket)
+    Manager.nextQuestion(gameState, io, socket),
   )
 
   socket.on("manager:showLeaderboard", () =>
-    Manager.showLoaderboard(gameState, io, socket)
+    Manager.showLoaderboard(gameState, io, socket),
   )
 
   socket.on("disconnect", () => {

socket/src/utils/round.js

@@ -33,6 +33,16 @@ export const startRound = async (game, io, socket) => {
     total: game.questions.length,
   })
 
+  io.to(game.room).emit("game:status", {
+    name: "SHOW_PREPARED",
+    data: {
+      totalAnswers: game.questions[game.currentQuestion].answers.length,
+      questionNumber: game.currentQuestion + 1,
+    },
+  })
+
+  await sleep(4)
+
   io.to(game.room).emit("game:status", {
     name: "SHOW_QUESTION",
     data: {

socket/web.js

@@ -1,14 +0,0 @@
-import { Server } from "socket.io"
-
-const io = new Server({
-  cors: {
-    origin: "*",
-  },
-})
-
-io.on("connection", (socket) => {
-  console.log("a user connected")
-  io.to(socket.id).emit("message", "Hello from server")
-})
-
-io.listen(5057)

src/components/AnswerButton.jsx

@@ -10,8 +10,8 @@ export default function AnswerButton({
   return (
     <button
       className={clsx(
-        "text-left px-4 py-6 rounded shadow-inset flex items-center gap-3",
+        "shadow-inset flex items-center gap-3 rounded px-4 py-6 text-left",
-        className
+        className,
       )}
       {...otherProps}
     >

src/components/Button.jsx

@@ -4,8 +4,8 @@ export default function Button({ children, className, ...otherProps }) {
   return (
     <button
       className={clsx(
-        "p-2 bg-primary rounded-md text-white font-semibold text-lg btn-shadow",
+        "btn-shadow rounded-md bg-primary p-2 text-lg font-semibold text-white",
-        className
+        className,
       )}
       {...otherProps}
     >

src/components/Form.jsx

@@ -1,6 +1,6 @@
 export default function Form({ children }) {
   return (
-    <div className="bg-white rounded-md shadow-sm p-4 z-10 flex-col flex gap-4 w-full max-w-80">
+    <div className="z-10 flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
       {children}
     </div>
   )

src/components/Input.jsx

@@ -4,8 +4,8 @@ export default function Input({ className, ...otherProps }) {
   return (
     <input
       className={clsx(
-        "outline outline-gray-300 outline-2 rounded-sm p-2 font-semibold text-lg",
+        "rounded-sm p-2 text-lg font-semibold outline outline-2 outline-gray-300",
-        className
+        className,
       )}
       {...otherProps}
     />

src/components/game/GameWrapper.jsx

@@ -19,24 +19,24 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
   })
 
   return (
-    <section className="relative flex justify-between flex-col w-full min-h-screen">
+    <section className="relative flex min-h-screen w-full flex-col justify-between">
-      <div className="fixed h-full w-full top-0 left-0 bg-orange-600 opacity-70 -z-10">
+      <div className="fixed left-0 top-0 -z-10 h-full w-full bg-orange-600 opacity-70">
         <Image
-          className="object-cover h-full w-full opacity-60 pointer-events-none"
+          className="pointer-events-none h-full w-full object-cover opacity-60"
           src={background}
         />
       </div>
 
-      <div className="p-4 w-full flex justify-between">
+      <div className="flex w-full justify-between p-4">
         {questionState && (
-          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg p-2">
+          <div className="shadow-inset flex items-center rounded-md bg-white p-2 px-4 text-lg font-bold text-black">
             {`${questionState.current} / ${questionState.total}`}
           </div>
         )}
 
         {manager && (
           <Button
-            className="bg-white !text-black px-4 self-end"
+            className="self-end bg-white px-4 !text-black"
             onClick={() => onNext()}
           >
             {textNext}
@@ -47,9 +47,9 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
       {children}
 
       {!manager && (
-        <div className="bg-white py-2 px-4 flex items-center text-lg justify-between font-bold text-white">
+        <div className="flex items-center justify-between bg-white px-4 py-2 text-lg font-bold text-white">
           <p className="text-gray-800">{!!player && player.username}</p>
-          <div className="bg-gray-800 rounded-sm py-1 px-3 text-lg">
+          <div className="rounded-sm bg-gray-800 px-3 py-1 text-lg">
             {!!player && player.points}
           </div>
         </div>

src/components/game/join/Room.jsx

@@ -16,7 +16,7 @@ export default function Room() {
   return (
     <>
       {loading && (
-        <div className="absolute w-full h-full z-30 bg-black/40 flex justify-center items-center">
+        <div className="absolute z-30 flex h-full w-full items-center justify-center bg-black/40">
           <Loader />
         </div>
       )}

src/components/game/join/Username.jsx

@@ -26,7 +26,7 @@ export default function Username() {
   return (
     <>
       {loading && (
-        <div className="absolute w-full h-full z-30 bg-black/40 flex justify-center items-center">
+        <div className="absolute z-30 flex h-full w-full items-center justify-center bg-black/40">
           <Loader />
         </div>
       )}

src/components/game/states/Answers.jsx

@@ -27,7 +27,7 @@ const calculatePercentages = (objectResponses) => {
 
   const totalSum = values.reduce(
     (accumulator, currentValue) => accumulator + currentValue,
-    0
+    0,
   )
 
   let result = {}
@@ -67,9 +67,9 @@ export default function Answers({
   })
 
   return (
-    <div className="flex h-full flex-col justify-between flex-1">
+    <div className="flex h-full flex-1 flex-col justify-between">
-      <div className="h-full max-w-7xl mx-auto w-full inline-flex flex-col items-center justify-center gap-5 flex-1">
+      <div className="mx-auto inline-flex h-full w-full max-w-7xl flex-1 flex-col items-center justify-center gap-5">
-        <h2 className="text-white text-2xl md:text-4xl lg:text-5xl font-bold drop-shadow-lg text-center">
+        <h2 className="text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
           {question}
         </h2>
 
@@ -77,18 +77,18 @@ export default function Answers({
 
         {responses && (
           <div
-            className={`w-full gap-4 grid grid-cols-${answers.length} px-2 max-w-3xl h-40 mt-8`}
+            className={`grid w-full gap-4 grid-cols-${answers.length} mt-8 h-40 max-w-3xl px-2`}
           >
             {answers.map((_, key) => (
               <div
                 key={key}
                 className={clsx(
-                  "flex flex-col rounded-md overflow-hidden self-end justify-end",
+                  "flex flex-col justify-end self-end overflow-hidden rounded-md",
-                  answersColors[key]
+                  answersColors[key],
                 )}
                 style={{ height: percentages[key] }}
               >
-                <span className="text-white font-bold drop-shadow-md text-lg bg-black/10 w-full text-center">
+                <span className="w-full bg-black/10 text-center text-lg font-bold text-white drop-shadow-md">
                   {responses[key] || 0}
                 </span>
               </div>
@@ -99,19 +99,19 @@ export default function Answers({
 
       <div>
         {!responses && (
-          <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="mx-auto mb-4 flex w-full max-w-7xl justify-between gap-1 px-2 text-lg font-bold text-white md:text-xl">
-            <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
+            <div className="flex flex-col items-center rounded-full bg-black/40 px-4 text-lg font-bold">
-              <span className="text-sm translate-y-1">Time</span>
+              <span className="translate-y-1 text-sm">Time</span>
-              <span className="anim-timer">{cooldown}</span>
+              <span>{cooldown}</span>
             </div>
-            <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
+            <div className="flex flex-col items-center rounded-full bg-black/40 px-4 text-lg font-bold">
-              <span className="text-sm translate-y-1">Answers</span>
+              <span className="translate-y-1 text-sm">Answers</span>
               <span>{totalAnswer}</span>
             </div>
           </div>
         )}
 
-        <div className="max-w-7xl mx-auto mb-4 rounded-full w-full grid grid-cols-2 gap-1 font-bold text-white text-lg md:text-xl px-2">
+        <div className="mx-auto mb-4 grid w-full max-w-7xl grid-cols-2 gap-1 rounded-full px-2 text-lg font-bold text-white md:text-xl">
           {answers.map((answer, key) => (
             <AnswerButton
               key={key}

src/components/game/states/Leaderboard.jsx

@@ -1,12 +1,12 @@
 export default function Leaderboard({ data: { leaderboard } }) {
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 flex-col relative items-center justify-center flex px-2">
+    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-2">
-      <h2 className="text-white drop-shadow-md text-5xl font-bold mb-6">
+      <h2 className="mb-6 text-5xl font-bold text-white drop-shadow-md">
         Leaderboard
       </h2>
-      <div className="w-full flex-col flex gap-2">
+      <div className="flex w-full flex-col gap-2">
         {leaderboard.map(({ username, points }) => (
-          <div className="bg-primary rounded-md p-3 flex justify-between w-full font-bold text-white text-2xl">
+          <div className="flex w-full justify-between rounded-md bg-primary p-3 text-2xl font-bold text-white">
             <span className="drop-shadow-md">{username}</span>
             <span className="drop-shadow-md">{points}</span>
           </div>

src/components/game/states/Prepared.jsx

@@ -1,29 +1,26 @@
 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()
 
+export default function Prepared({ data: { totalAnswers, questionNumber } }) {
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
+    <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
-      <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)] ">
+      <h2 className="anim-show mb-10 text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
-        <div className="button flex justify-center items-center bg-red-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+        Question #{questionNumber}
-          <Triangle className="h-14" />
+      </h2>
+      <div className="anim-quizz grid h-[300px] w-60 grid-cols-2 gap-4 rounded-2xl bg-gray-700 p-5 md:h-[400px] md:w-80 ">
+        <div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-red-500">
+          <Triangle className="h-10 md:h-14" />
         </div>
-        <div className="button flex justify-center items-center bg-blue-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+        <div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-blue-500">
-          <Rhombus className="h-14" />
+          <Rhombus className="h-10 md:h-14" />
         </div>
-        <div className="button flex justify-center items-center bg-yellow-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+        <div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-yellow-500">
-          <Square className="h-14" />
+          <Square className="h-10 md:h-14" />
         </div>
-        <div className="button flex justify-center items-center bg-green-500 w-full h-full aspect-square shadow-inset rounded-2xl">
+        <div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-green-500">
-          <Circle className="h-14" />
+          <Circle className="h-10 md:h-14" />
         </div>
       </div>
     </section>

src/components/game/states/Question.jsx

@@ -4,15 +4,15 @@ export default function Question({ data: { question } }) {
   const barRef = useRef(null)
 
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center flex flex-col px-4 h-full">
+    <section className="relative mx-auto flex h-full w-full max-w-7xl flex-1 flex-col items-center px-4">
-      <div className="flex items-center flex-1">
+      <div className="flex flex-1 items-center">
-        <h2 className="text-white text-2xl md:text-4xl lg:text-5xl anim-show font-bold drop-shadow-lg text-center">
+        <h2 className="anim-show text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
           {question}
         </h2>
       </div>
       <div
         ref={barRef}
-        className="h-4 bg-primary mb-20 rounded-full self-start justify-self-end"
+        className="mb-20 h-4 self-start justify-self-end rounded-full bg-primary"
         style={{ animation: `progressBar ${6}s linear forwards` }}
       ></div>
     </section>

src/components/game/states/Result.jsx

@@ -16,20 +16,20 @@ export default function Result({
   }, [])
 
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
+    <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
       {correct ? (
-        <CricleCheck className="max-h-60 aspect-square w-full" />
+        <CricleCheck className="aspect-square max-h-60 w-full" />
       ) : (
-        <CricleXmark className=" max-h-60 aspect-square w-full" />
+        <CricleXmark className=" aspect-square max-h-60 w-full" />
       )}
-      <h2 className="text-white font-bold text-4xl mt-1 drop-shadow-lg">
+      <h2 className="mt-1 text-4xl font-bold text-white drop-shadow-lg">
         {message}
       </h2>
-      <p className="text-white font-bold text-xl mt-1 drop-shadow-lg">
+      <p className="mt-1 text-xl font-bold text-white drop-shadow-lg">
         {`You are top ${rank}` + (aheadOfMe ? ", behind " + aheadOfMe : "")}
       </p>
       {correct && (
-        <span className="py-2 px-4 text-white font-bold text-2xl drop-shadow-lg bg-black/40 rounded mt-2">
+        <span className="mt-2 rounded bg-black/40 px-4 py-2 text-2xl font-bold text-white drop-shadow-lg">
           +{points}
         </span>
       )}

src/components/game/states/Start.jsx

@@ -10,12 +10,12 @@ export default function Start({ data: { text, inviteCode } }) {
   })
 
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col px-2">
+    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-2">
-      <div className="py-4 px-6 mb-10 rotate-3 bg-white rounded-md text-6xl font-extrabold">
+      <div className="mb-10 rotate-3 rounded-md bg-white px-6 py-4 text-6xl font-extrabold">
         {inviteCode}
       </div>
 
-      <h2 className="text-white font-bold text-4xl drop-shadow-lg mb-4">
+      <h2 className="mb-4 text-4xl font-bold text-white drop-shadow-lg">
         {text}
       </h2>
 
@@ -23,10 +23,10 @@ export default function Start({ data: { text, inviteCode } }) {
         {playerList.map((player) => (
           <div
             key={player.id}
-            className="py-3 px-4 bg-primary shadow-inset rounded-md text-white font-bold"
+            className="shadow-inset rounded-md bg-primary px-4 py-3 font-bold text-white"
             onClick={() => socket.emit("manager:kickPlayer", player.id)}
           >
-            <span className="drop-shadow-md text-xl hover:line-through cursor-pointer">
+            <span className="cursor-pointer text-xl drop-shadow-md hover:line-through">
               {player.username}
             </span>
           </div>

src/components/game/states/Wait.jsx

@@ -2,9 +2,9 @@ import Loader from "@/components/Loader"
 
 export default function Wait({ data: { text } }) {
   return (
-    <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col">
+    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
       <Loader />
-      <h2 className="text-white font-bold text-4xl mt-5 drop-shadow-lg">
+      <h2 className="mt-5 text-4xl font-bold text-white drop-shadow-lg">
         {text}
       </h2>
     </section>

src/pages/_app.js

@@ -3,22 +3,29 @@ import { SocketContextProvider } from "@/context/socket"
 import "@/styles/globals.css"
 import clsx from "clsx"
 import { Montserrat, Plaster } from "next/font/google"
+import Head from "next/head"
 
 const montserrat = Montserrat({ subsets: ["latin"] })
 
 export default function App({ Component, pageProps }) {
   return (
+    <>
+      <Head>
+        <link rel="shortcut icon" href="/icon.svg" />
+        <title>Rahoot !</title>
+      </Head>
       <SocketContextProvider>
         <PlayerContextProvider>
           <main
             className={clsx(
-            "flex flex-col text-base-[8px]",
+              "text-base-[8px] flex flex-col",
-            montserrat.className
+              montserrat.className,
             )}
           >
             <Component {...pageProps} />
           </main>
         </PlayerContextProvider>
       </SocketContextProvider>
+    </>
   )
 }

src/pages/_document.js

@@ -3,10 +3,7 @@ import { Html, Head, Main, NextScript } from "next/document"
 export default function Document() {
   return (
     <Html lang="en">
-      <Head>
+      <Head />
-        <link rel="shortcut icon" href="/icon.svg" />
-        <title>Rahoot !</title>
-      </Head>
       <body className="bg-secondary">
         <Main />
         <NextScript />

src/pages/api/hello.js

@@ -1,5 +1,5 @@
 // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
 
 export default function handler(req, res) {
-  res.status(200).json({ name: "John Doe" });
+  res.status(200).json({ name: "John Doe" })
 }

src/pages/api/socket.js

@@ -1,27 +0,0 @@
-import { Server } from "socket.io"
-
-const socketHandler = (req, res) => {
-  if (!res.socket.server.io) {
-    const path = "/api/socket"
-    const httpServer = res.socket.server
-
-    //const io = createIOServer(httpServer, path)
-    const io = new Server(httpServer, {
-      path: path,
-      addTrailingSlash: false,
-    })
-
-    res.socket.server.io = io
-    console.log("SocketIO server started at " + path)
-  }
-
-  res.end()
-}
-
-export const config = {
-  api: {
-    bodyParser: false,
-  },
-}
-
-export default socketHandler

src/pages/game.jsx

@@ -1,6 +1,7 @@
 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 Result from "@/components/game/states/Result"
 import Wait from "@/components/game/states/Wait"
@@ -14,6 +15,7 @@ const gameStateComponent = {
   SHOW_QUESTION: Question,
   WAIT: Wait,
   SHOW_RESULT: Result,
+  SHOW_PREPARED: Prepared,
 }
 
 export default function Game() {

src/pages/index.js

@@ -16,19 +16,19 @@ export default function Home() {
   const { player } = usePlayerContext()
 
   return (
-    <section className="min-h-screen relative flex justify-center items-center flex-col">
+    <section className="relative flex min-h-screen flex-col items-center justify-center">
-      <div className="absolute w-full h-full overflow-hidden">
+      <div className="absolute h-full w-full overflow-hidden">
-        <div className="absolute min-w-[75vmin] min-h-[75vmin] -top-[15vmin] -left-[15vmin] bg-primary/15 rounded-full"></div>
+        <div className="absolute -left-[15vmin] -top-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full bg-primary/15"></div>
-        <div className="absolute min-w-[75vmin] min-h-[75vmin] -bottom-[15vmin] -right-[15vmin] bg-primary/15 rotate-45"></div>
+        <div className="absolute -bottom-[15vmin] -right-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45 bg-primary/15"></div>
       </div>
 
       {loading && (
-        <div className="absolute w-full h-full z-30 bg-black/40 flex justify-center items-center">
+        <div className="absolute z-30 flex h-full w-full items-center justify-center bg-black/40">
           <Loader />
         </div>
       )}
 
-      <Image src={logo} className="h-32 mb-6" />
+      <Image src={logo} className="mb-6 h-32" />
 
       {!player ? <Room /> : <Username />}
     </section>

src/pages/manager.jsx

@@ -18,6 +18,7 @@ const gameStateComponent = {
   WAIT: Wait,
   SHOW_RESPONSES: Answers,
   SHOW_LEADERBOARD: Leaderboard,
+  SHOW_PREPARED: Prepared,
 }
 
 export default function Manager() {
@@ -93,11 +94,10 @@ export default function Manager() {
       ) : (
         <>
           <GameWrapper textNext={nextText} onNext={handleSkip} manager>
-            <Prepared />
+            {gameStateComponent[state.status.name] &&
-            {/*gameStateComponent[state.status.name] &&
               createElement(gameStateComponent[state.status.name], {
                 data: state.status.data,
-              })*/}
+              })}
           </GameWrapper>
         </>
       )}

src/styles/globals.css

@@ -41,13 +41,14 @@
 }
 
 .anim-quizz {
-  animation: quizz 1s ease-out;
+  animation: quizz 0.8s linear;
   transform: perspective(1200px) rotateY(-15deg) rotateX(15deg)
     translateZ(100px);
+  box-shadow: 10px 10px 0 rgba(20, 24, 29, 1);
 }
 
 .anim-quizz .button {
-  animation: quizzButton 1s ease-out;
+  animation: quizzButton 0.8s ease-out;
 }
 
 @keyframes show {
@@ -91,8 +92,9 @@
 
 @keyframes quizz {
   0% {
-    transform: scale(0) perspective(1200px) rotateY(-35deg) rotateX(15deg)
+    transform: scale(0) perspective(1200px) rotateY(-60deg) rotateX(60deg)
       translateZ(100px);
+    box-shadow: 40px 10px 0 rgba(20, 24, 29, 1);
   }
   100% {
     transform: scale(1) perspective(1200px) rotateY(-15deg) rotateX(15deg)