Update Manager/Color/Logo

public/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="100%" height="100%" viewBox="5.989999771118164 -63.970001220703125 88.26000213623047 65.80000305175781"><g fill="#ff9900"><path d="M65.97 -41.84C65.97 -45.17 65.2 -48.32 63.68 -51.28C62.15 -54.25 59.98 -56.62 57.15 -58.4C55.98 -59.12 54.67 -59.7 53.2 -60.14C51.73 -60.59 50.2 -60.93 48.62 -61.18C47.04 -61.43 45.48 -61.59 43.92 -61.64C42.37 -61.7 40.93 -61.72 39.6 -61.72C34.38 -61.72 29.18 -61.56 24 -61.23C18.81 -60.89 13.61 -60.59 8.4 -60.31C8.07 -51.33 7.82 -42.34 7.65 -33.36C7.6 -28.31 7.4 -23.25 7.07 -18.18C6.74 -13.1 6.38 -8.01 5.99 -2.91C7.54 -2.75 9.08 -2.63 10.61 -2.58C12.13 -2.52 13.7 -2.5 15.31 -2.5C18.47 -2.5 21.63 -2.58 24.79 -2.75L24.37 -21.63C26.15 -21.74 27.94 -21.88 29.74 -22.04C31.54 -22.21 33.36 -22.35 35.19 -22.46C36.8 -18.3 38.04 -14.34 38.93 -10.56C39.82 -6.79 40.48 -2.66 40.93 1.83L65.22 1.25C61.11 -8.35 56.32 -17.72 50.83 -26.87C55.37 -27.09 59.04 -28.51 61.81 -31.11C64.58 -33.72 65.97 -37.3 65.97 -41.84ZM46.67 -43.17C46.67 -42.9 46.65 -42.43 46.63 -41.76C46.6 -41.09 46.57 -40.42 46.54 -39.72C46.52 -39.03 46.45 -38.36 46.34 -37.73C46.22 -37.09 46.09 -36.66 45.92 -36.44C45.53 -35.94 44.85 -35.53 43.88 -35.23C42.91 -34.92 41.86 -34.69 40.72 -34.52C39.58 -34.36 38.47 -34.25 37.39 -34.19C36.31 -34.13 35.49 -34.11 34.94 -34.11C33.66 -34.11 32.36 -34.16 31.03 -34.27C29.7 -34.38 28.42 -34.58 27.2 -34.86L24.96 -50.99C27.06 -51.33 29.18 -51.6 31.32 -51.83C33.46 -52.05 35.63 -52.16 37.85 -52.16C38.13 -52.16 38.61 -52.14 39.31 -52.12C40 -52.09 40.72 -52.03 41.47 -51.95C42.22 -51.87 42.92 -51.77 43.59 -51.66C44.26 -51.55 44.73 -51.38 45 -51.16C45.39 -50.83 45.7 -50.31 45.92 -49.62C46.14 -48.93 46.31 -48.18 46.42 -47.38C46.53 -46.57 46.6 -45.78 46.63 -45C46.65 -44.23 46.67 -43.62 46.67 -43.17Z M94.25 -63.97L74.87 -62.39C75.09 -58.56 75.28 -54.75 75.45 -50.95C75.62 -47.15 75.89 -43.37 76.28 -39.6L78.36 -18.63L87.51 -19.47C88.34 -23.63 89.19 -27.73 90.05 -31.78C90.91 -35.83 91.76 -39.93 92.59 -44.09C92.86 -45.53 93.1 -47.1 93.29 -48.79C93.49 -50.48 93.64 -52.21 93.75 -53.99C93.86 -55.76 93.96 -57.51 94.04 -59.23C94.13 -60.95 94.2 -62.53 94.25 -63.97ZM92.75 -6.65C92.75 -6.88 92.74 -7.08 92.71 -7.28C92.69 -7.47 92.62 -7.68 92.5 -7.9C91.89 -9.34 90.97 -10.43 89.72 -11.15C88.47 -11.87 87.07 -12.23 85.52 -12.23C84.57 -12.23 83.56 -12.08 82.48 -11.77C81.4 -11.47 80.4 -11.02 79.49 -10.44C78.57 -9.86 77.79 -9.14 77.16 -8.28C76.52 -7.42 76.2 -6.46 76.2 -5.41C76.2 -4.41 76.44 -3.52 76.91 -2.75C77.38 -1.97 77.99 -1.32 78.74 -0.79C79.49 -0.26 80.32 0.15 81.23 0.46C82.15 0.76 83.02 0.92 83.85 0.92C84.74 0.92 85.71 0.71 86.76 0.29C87.82 -0.12 88.79 -0.69 89.68 -1.41C90.56 -2.14 91.3 -2.95 91.88 -3.87C92.46 -4.78 92.75 -5.71 92.75 -6.65Z"></path></g></svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

socket/src/index.js

@@ -12,7 +12,7 @@ const io = new Server({
   path: "/ws/",
 })
 
-io.listen(5057)
+io.listen(5157)
 
 io.on("connection", (socket) => {
   console.log(`A user connected ${socket.id}`)

socket/src/roles/manager.js

@@ -9,7 +9,7 @@ const Manager = {
       return
     }
 
-    let roomInvite = "207223" //generateRoomId()
+    let roomInvite = generateRoomId()
     game.room = roomInvite
     game.manager = socket.id
 

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>
+      )}
+    </>
   )
 }

tailwind.config.js

@@ -13,5 +13,6 @@ module.exports = {
       },
     },
   },
+  safelist: ["grid-cols-4", "grid-cols-3", "grid-cols-2"],
   plugins: [],
 }