Update Manager/Color/Logo

src/components/game/GameWrapper.jsx

@@ -29,7 +29,7 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
 
       <div className="p-4 w-full flex justify-between">
         {questionState && (
-          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg">
+          <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg p-2">
             {`${questionState.current} / ${questionState.total}`}
           </div>
         )}

src/components/game/states/Answers.jsx

@@ -69,7 +69,7 @@ export default function Answers({
   return (
     <div className="flex h-full flex-col justify-between flex-1">
       <div className="h-full max-w-7xl mx-auto w-full inline-flex flex-col items-center justify-center gap-5 flex-1">
-        <h2 className="text-white text-2xl md:text-4xl font-bold drop-shadow-lg text-center">
+        <h2 className="text-white text-2xl md:text-4xl lg:text-5xl font-bold drop-shadow-lg text-center">
           {question}
         </h2>
 
@@ -101,12 +101,12 @@ export default function Answers({
         {!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="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
-              <span className="text-sm">Time</span>
-              <span className="-translate-y-1">{cooldown}</span>
+              <span className="text-sm translate-y-1">Time</span>
+              <span>{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">Answers</span>
-              <span className="-translate-y-1">{totalAnswer}</span>
+              <span className="text-sm translate-y-1">Answers</span>
+              <span>{totalAnswer}</span>
             </div>
           </div>
         )}

src/components/game/states/Leaderboard.jsx

@@ -6,7 +6,7 @@ export default function Leaderboard({ data: { leaderboard } }) {
       </h2>
       <div className="w-full flex-col flex gap-2">
         {leaderboard.map(({ username, points }) => (
-          <div className="bg-primary rounded-md p-3 flex justify-between w-full text-white font-bold text-2xl">
+          <div className="bg-primary rounded-md p-3 flex justify-between w-full font-bold text-white text-2xl">
             <span className="drop-shadow-md">{username}</span>
             <span className="drop-shadow-md">{points}</span>
           </div>

src/components/game/states/Question.jsx

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

src/components/game/states/Start.jsx

@@ -1,8 +1,7 @@
-import Loader from "@/components/Loader"
 import { useSocketContext } from "@/context/socket"
-import { useEffect, useState } from "react"
+import { useState } from "react"
 
-export default function Start({ data: { text } }) {
+export default function Start({ data: { text, inviteCode } }) {
   const { socket } = useSocketContext()
   const [playerList, setPlayerList] = useState([])
 
@@ -10,12 +9,12 @@ export default function Start({ data: { text } }) {
     setPlayerList([...playerList, player])
   })
 
-  useEffect(() => {
-    socket.emit("manager:createRoom")
-  }, [])
-
   return (
     <section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col px-2">
+      <div className="py-4 px-6 mb-10 rotate-3 bg-white rounded-md text-6xl font-extrabold">
+        {inviteCode}
+      </div>
+
       <h2 className="text-white font-bold text-4xl drop-shadow-lg mb-4">
         {text}
       </h2>

src/components/icons/CricleCheck.jsx

@@ -1,12 +1,12 @@
 export default function CricleCheck({ className }) {
   return (
     <svg
-      fill="#28d524"
+      fill="#22c55e"
       width="800px"
       height="800px"
       viewBox="0 0 56.00 56.00"
       xmlns="http://www.w3.org/2000/svg"
-      stroke="#28d524"
+      stroke="#22c55e"
       strokeWidth="0.00056"
       className={className}
     >

src/components/icons/CricleXmark.jsx

@@ -1,12 +1,12 @@
 export default function CricleXmark({ className }) {
   return (
     <svg
-      fill="#fb1e1e"
+      fill="#ef4444"
       width="800px"
       height="800px"
       viewBox="0 0 56.00 56.00"
       xmlns="http://www.w3.org/2000/svg"
-      stroke="#fb1e1e"
+      stroke="#ef4444"
       className={className}
     >
       <g strokeWidth="0" transform="translate(12.4,12.4), scale(0.6)">

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:5057", {
+export const socket = io("http://localhost:5157", {
   path: "/ws/",
   //addTrailingSlash: false,
   transports: ["websocket"],

src/pages/_document.js

@@ -3,7 +3,10 @@ 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/index.js

@@ -28,7 +28,7 @@ export default function Home() {
         </div>
       )}
 
-      <Image src={logo} className="h-10 mb-6" />
+      <Image src={logo} className="h-32 mb-6" />
 
       {!player ? <Room /> : <Username />}
     </section>

src/pages/manager.jsx

@@ -1,3 +1,4 @@
+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"
@@ -24,6 +25,7 @@ export default function Manager() {
 
   const [nextText, setNextText] = useState("Start")
   const [state, setState] = useState({
+    created: false,
     status: {
       name: "SHOW_START",
       data: { text: "Waiting for the players" },
@@ -45,6 +47,24 @@ export default function Manager() {
     })
   })
 
+  socket.on("manager:inviteCode", (inviteCode) => {
+    setState({
+      ...state,
+      created: true,
+      status: {
+        ...state.status,
+        data: {
+          ...state.status.data,
+          inviteCode: inviteCode,
+        },
+      },
+    })
+  })
+
+  const handleCreate = () => {
+    socket.emit("manager:createRoom")
+  }
+
   const handleSkip = () => {
     setNextText("Skip")
 
@@ -64,11 +84,19 @@ export default function Manager() {
   }
 
   return (
-    <GameWrapper textNext={nextText} onNext={handleSkip} manager>
-      {gameStateComponent[state.status.name] &&
-        createElement(gameStateComponent[state.status.name], {
-          data: state.status.data,
-        })}
-    </GameWrapper>
+    <>
+      {!state.created ? (
+        <div>
+          <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>
+      )}
+    </>
   )
 }