From dbefaa0557b67187d0cba72fe3a14d6ea77fea2f Mon Sep 17 00:00:00 2001
From: Ralex <95540504+Ralex91@users.noreply.github.com>
Date: Sat, 25 Oct 2025 15:04:03 +0200
Subject: [PATCH] refactor(components): use arrow function syntax and improve
 consistency

---
 packages/web/src/app/(auth)/manager/page.tsx  |  4 +-
 packages/web/src/app/(auth)/page.tsx          |  4 +-
 packages/web/src/app/game/[gameId]/page.tsx   |  4 +-
 .../src/app/game/manager/[gameId]/page.tsx    |  4 +-
 packages/web/src/app/layout.tsx               | 24 +++----
 packages/web/src/components/AnswerButton.tsx  | 30 ++++----
 packages/web/src/components/Button.tsx        | 27 +++----
 packages/web/src/components/Form.tsx          | 14 ++--
 packages/web/src/components/Input.tsx         | 28 ++++----
 .../web/src/components/game/GameWrapper.tsx   | 13 ++--
 .../game/create/ManagerPassword.tsx           |  4 +-
 .../components/game/create/SelectQuizz.tsx    |  4 +-
 .../web/src/components/game/join/Room.tsx     |  4 +-
 .../web/src/components/game/join/Username.tsx |  4 +-
 .../src/components/game/states/Answers.tsx    |  6 +-
 .../components/game/states/Leaderboard.tsx    | 40 +++++------
 .../web/src/components/game/states/Podium.tsx | 10 +--
 .../src/components/game/states/Prepared.tsx   | 46 ++++++------
 .../src/components/game/states/Question.tsx   |  6 +-
 .../src/components/game/states/Responses.tsx  | 33 ++-------
 .../web/src/components/game/states/Result.tsx |  6 +-
 .../web/src/components/game/states/Room.tsx   |  4 +-
 .../web/src/components/game/states/Start.tsx  |  4 +-
 .../web/src/components/game/states/Wait.tsx   | 20 +++---
 packages/web/src/components/icons/Circle.tsx  | 42 +++++------
 .../web/src/components/icons/CricleCheck.tsx  | 70 +++++++++----------
 .../web/src/components/icons/CricleXmark.tsx  | 58 +++++++--------
 .../web/src/components/icons/Pentagon.tsx     | 70 +++++++++----------
 packages/web/src/components/icons/Rhombus.tsx | 34 ++++-----
 packages/web/src/components/icons/Square.tsx  | 24 +++----
 .../web/src/components/icons/Triangle.tsx     | 24 +++----
 packages/web/src/utils/score.ts               | 23 ++++++
 32 files changed, 351 insertions(+), 337 deletions(-)
 create mode 100644 packages/web/src/utils/score.ts

diff --git a/packages/web/src/app/(auth)/manager/page.tsx b/packages/web/src/app/(auth)/manager/page.tsx
index b7c3b05..0b77bfc 100644
--- a/packages/web/src/app/(auth)/manager/page.tsx
+++ b/packages/web/src/app/(auth)/manager/page.tsx
@@ -8,7 +8,7 @@ import { useManagerStore } from "@rahoot/web/stores/manager"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
 
-export default function Manager() {
+const Manager = () => {
   const { setGameId, setStatus } = useManagerStore()
   const router = useRouter()
   const { socket } = useSocket()
@@ -40,3 +40,5 @@ export default function Manager() {
 
   return <SelectQuizz quizzList={quizzList} onSelect={handleCreate} />
 }
+
+export default Manager
diff --git a/packages/web/src/app/(auth)/page.tsx b/packages/web/src/app/(auth)/page.tsx
index 546b3b8..976f754 100644
--- a/packages/web/src/app/(auth)/page.tsx
+++ b/packages/web/src/app/(auth)/page.tsx
@@ -7,7 +7,7 @@ import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useEffect } from "react"
 import toast from "react-hot-toast"
 
-export default function Home() {
+const Home = () => {
   const { isConnected, connect } = useSocket()
   const { player } = usePlayerStore()
 
@@ -27,3 +27,5 @@ export default function Home() {
 
   return <Room />
 }
+
+export default Home
diff --git a/packages/web/src/app/game/[gameId]/page.tsx b/packages/web/src/app/game/[gameId]/page.tsx
index 1ab789a..df8ed01 100644
--- a/packages/web/src/app/game/[gameId]/page.tsx
+++ b/packages/web/src/app/game/[gameId]/page.tsx
@@ -15,7 +15,7 @@ import { GAME_STATE_COMPONENTS } from "@rahoot/web/utils/constants"
 import { useParams, useRouter } from "next/navigation"
 import toast from "react-hot-toast"
 
-export default function Game() {
+const Game = () => {
   const router = useRouter()
   const { socket } = useSocket()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
@@ -95,3 +95,5 @@ export default function Game() {
 
   return <GameWrapper statusName={status.name}>{component}</GameWrapper>
 }
+
+export default Game
diff --git a/packages/web/src/app/game/manager/[gameId]/page.tsx b/packages/web/src/app/game/manager/[gameId]/page.tsx
index 24bcddd..ab4f86e 100644
--- a/packages/web/src/app/game/manager/[gameId]/page.tsx
+++ b/packages/web/src/app/game/manager/[gameId]/page.tsx
@@ -17,7 +17,7 @@ import { GAME_STATE_COMPONENTS_MANAGER } from "@rahoot/web/utils/constants"
 import { useParams, useRouter } from "next/navigation"
 import toast from "react-hot-toast"
 
-export default function ManagerGame() {
+const ManagerGame = () => {
   const router = useRouter()
   const { gameId: gameIdParam }: { gameId?: string } = useParams()
   const { socket } = useSocket()
@@ -131,3 +131,5 @@ export default function ManagerGame() {
     </GameWrapper>
   )
 }
+
+export default ManagerGame
diff --git a/packages/web/src/app/layout.tsx b/packages/web/src/app/layout.tsx
index 99c9970..e61d32c 100644
--- a/packages/web/src/app/layout.tsx
+++ b/packages/web/src/app/layout.tsx
@@ -15,15 +15,15 @@ export const metadata: Metadata = {
   icons: "/icon.svg",
 }
 
-export default function RootLayout({ children }: PropsWithChildren) {
-  return (
-    <html lang="en" suppressHydrationWarning={true} data-lt-installed="true">
-      <body className={`${montserrat.variable} bg-secondary antialiased`}>
-        <SocketProvider>
-          <main className="text-base-[8px] flex flex-col">{children}</main>
-          <Toaster />
-        </SocketProvider>
-      </body>
-    </html>
-  )
-}
+const RootLayout = ({ children }: PropsWithChildren) => (
+  <html lang="en" suppressHydrationWarning={true} data-lt-installed="true">
+    <body className={`${montserrat.variable} bg-secondary antialiased`}>
+      <SocketProvider>
+        <main className="text-base-[8px] flex flex-col">{children}</main>
+        <Toaster />
+      </SocketProvider>
+    </body>
+  </html>
+)
+
+export default RootLayout
diff --git a/packages/web/src/components/AnswerButton.tsx b/packages/web/src/components/AnswerButton.tsx
index 9706e84..7b757ab 100644
--- a/packages/web/src/components/AnswerButton.tsx
+++ b/packages/web/src/components/AnswerButton.tsx
@@ -6,22 +6,22 @@ type Props = PropsWithChildren &
     icon: ElementType
   }
 
-export default function AnswerButton({
+const AnswerButton = ({
   className,
   icon: Icon,
   children,
   ...otherProps
-}: Props) {
-  return (
-    <button
-      className={clsx(
-        "shadow-inset flex items-center gap-3 rounded px-4 py-6 text-left",
-        className,
-      )}
-      {...otherProps}
-    >
-      <Icon className="h-6 w-6" />
-      <span className="drop-shadow-md">{children}</span>
-    </button>
-  )
-}
+}: Props) => (
+  <button
+    className={clsx(
+      "shadow-inset flex items-center gap-3 rounded px-4 py-6 text-left",
+      className,
+    )}
+    {...otherProps}
+  >
+    <Icon className="h-6 w-6" />
+    <span className="drop-shadow-md">{children}</span>
+  </button>
+)
+
+export default AnswerButton
diff --git a/packages/web/src/components/Button.tsx b/packages/web/src/components/Button.tsx
index 9505e7b..b6c5b56 100644
--- a/packages/web/src/components/Button.tsx
+++ b/packages/web/src/components/Button.tsx
@@ -2,16 +2,17 @@ import clsx from "clsx"
 import { ButtonHTMLAttributes, PropsWithChildren } from "react"
 
 type Props = ButtonHTMLAttributes<HTMLButtonElement> & PropsWithChildren
-export default function Button({ children, className, ...otherProps }: Props) {
-  return (
-    <button
-      className={clsx(
-        "btn-shadow bg-primary rounded-md p-2 text-lg font-semibold text-white",
-        className,
-      )}
-      {...otherProps}
-    >
-      <span>{children}</span>
-    </button>
-  )
-}
+
+const Button = ({ children, className, ...otherProps }: Props) => (
+  <button
+    className={clsx(
+      "btn-shadow bg-primary rounded-md p-2 text-lg font-semibold text-white",
+      className,
+    )}
+    {...otherProps}
+  >
+    <span>{children}</span>
+  </button>
+)
+
+export default Button
diff --git a/packages/web/src/components/Form.tsx b/packages/web/src/components/Form.tsx
index bd584f6..7df80d5 100644
--- a/packages/web/src/components/Form.tsx
+++ b/packages/web/src/components/Form.tsx
@@ -1,9 +1,9 @@
 import { PropsWithChildren } from "react"
 
-export default function Form({ children }: PropsWithChildren) {
-  return (
-    <div className="z-10 flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
-      {children}
-    </div>
-  )
-}
+const Form = ({ children }: PropsWithChildren) => (
+  <div className="z-10 flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
+    {children}
+  </div>
+)
+
+export default Form
diff --git a/packages/web/src/components/Input.tsx b/packages/web/src/components/Input.tsx
index 6b83b23..0246d9a 100644
--- a/packages/web/src/components/Input.tsx
+++ b/packages/web/src/components/Input.tsx
@@ -3,19 +3,15 @@ import React from "react"
 
 type Props = React.InputHTMLAttributes<HTMLInputElement>
 
-export default function Input({
-  className,
-  type = "text",
-  ...otherProps
-}: Props) {
-  return (
-    <input
-      type={type}
-      className={clsx(
-        "rounded-sm p-2 text-lg font-semibold outline-2 outline-gray-300",
-        className,
-      )}
-      {...otherProps}
-    />
-  )
-}
+const Input = ({ className, type = "text", ...otherProps }: Props) => (
+  <input
+    type={type}
+    className={clsx(
+      "rounded-sm p-2 text-lg font-semibold outline-2 outline-gray-300",
+      className,
+    )}
+    {...otherProps}
+  />
+)
+
+export default Input
diff --git a/packages/web/src/components/game/GameWrapper.tsx b/packages/web/src/components/game/GameWrapper.tsx
index 49eb8ed..dff2b4e 100644
--- a/packages/web/src/components/game/GameWrapper.tsx
+++ b/packages/web/src/components/game/GameWrapper.tsx
@@ -3,13 +3,13 @@
 import { Status } from "@rahoot/common/types/game/status"
 import background from "@rahoot/web/assets/background.webp"
 import Button from "@rahoot/web/components/Button"
+import Loader from "@rahoot/web/components/Loader"
 import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useQuestionStore } from "@rahoot/web/stores/question"
 import { MANAGER_SKIP_BTN } from "@rahoot/web/utils/constants"
 import Image from "next/image"
 import { PropsWithChildren } from "react"
-import Loader from "../Loader"
 
 type Props = PropsWithChildren & {
   statusName: Status
@@ -17,12 +17,7 @@ type Props = PropsWithChildren & {
   manager?: boolean
 }
 
-export default function GameWrapper({
-  children,
-  statusName,
-  onNext,
-  manager,
-}: Props) {
+const GameWrapper = ({ children, statusName, onNext, manager }: Props) => {
   const { isConnected } = useSocket()
   const { player } = usePlayerStore()
   const { questionStates, setQuestionStates } = useQuestionStore()
@@ -61,7 +56,7 @@ export default function GameWrapper({
 
             {manager && next && (
               <Button
-                className="self-end bg-white px-4 !text-black"
+                className="self-end bg-white px-4 text-black!"
                 onClick={onNext}
               >
                 {next}
@@ -84,3 +79,5 @@ export default function GameWrapper({
     </section>
   )
 }
+
+export default GameWrapper
diff --git a/packages/web/src/components/game/create/ManagerPassword.tsx b/packages/web/src/components/game/create/ManagerPassword.tsx
index 653e8e5..3ac5b7f 100644
--- a/packages/web/src/components/game/create/ManagerPassword.tsx
+++ b/packages/web/src/components/game/create/ManagerPassword.tsx
@@ -9,7 +9,7 @@ type Props = {
   onSubmit: (_password: string) => void
 }
 
-export default function ManagerPassword({ onSubmit }: Props) {
+const ManagerPassword = ({ onSubmit }: Props) => {
   const [password, setPassword] = useState("")
 
   const handleSubmit = () => {
@@ -38,3 +38,5 @@ export default function ManagerPassword({ onSubmit }: Props) {
     </Form>
   )
 }
+
+export default ManagerPassword
diff --git a/packages/web/src/components/game/create/SelectQuizz.tsx b/packages/web/src/components/game/create/SelectQuizz.tsx
index 2fc6b81..bec8be2 100644
--- a/packages/web/src/components/game/create/SelectQuizz.tsx
+++ b/packages/web/src/components/game/create/SelectQuizz.tsx
@@ -11,7 +11,7 @@ type Props = {
   onSelect: (_id: string) => void
 }
 
-export default function SelectQuizz({ quizzList, onSelect }: Props) {
+const SelectQuizz = ({ quizzList, onSelect }: Props) => {
   const [selected, setSelected] = useState<string | null>(null)
 
   const handleSelect = (id: string) => () => {
@@ -62,3 +62,5 @@ export default function SelectQuizz({ quizzList, onSelect }: Props) {
     </div>
   )
 }
+
+export default SelectQuizz
diff --git a/packages/web/src/components/game/join/Room.tsx b/packages/web/src/components/game/join/Room.tsx
index 2a9af6d..f9adeb4 100644
--- a/packages/web/src/components/game/join/Room.tsx
+++ b/packages/web/src/components/game/join/Room.tsx
@@ -5,7 +5,7 @@ import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
 import { usePlayerStore } from "@rahoot/web/stores/player"
 import { KeyboardEvent, useState } from "react"
 
-export default function Room() {
+const Room = () => {
   const { socket } = useSocket()
   const { join } = usePlayerStore()
   const [invitation, setInvitation] = useState("")
@@ -35,3 +35,5 @@ export default function Room() {
     </Form>
   )
 }
+
+export default Room
diff --git a/packages/web/src/components/game/join/Username.tsx b/packages/web/src/components/game/join/Username.tsx
index 4567cb2..aae0f0b 100644
--- a/packages/web/src/components/game/join/Username.tsx
+++ b/packages/web/src/components/game/join/Username.tsx
@@ -9,7 +9,7 @@ import { usePlayerStore } from "@rahoot/web/stores/player"
 import { useRouter } from "next/navigation"
 import { KeyboardEvent, useState } from "react"
 
-export default function Username() {
+const Username = () => {
   const { socket } = useSocket()
   const { gameId, login } = usePlayerStore()
   const router = useRouter()
@@ -46,3 +46,5 @@ export default function Username() {
     </Form>
   )
 }
+
+export default Username
diff --git a/packages/web/src/components/game/states/Answers.tsx b/packages/web/src/components/game/states/Answers.tsx
index f8d1253..0ad7c82 100644
--- a/packages/web/src/components/game/states/Answers.tsx
+++ b/packages/web/src/components/game/states/Answers.tsx
@@ -19,9 +19,9 @@ type Props = {
   data: CommonStatusDataMap["SELECT_ANSWER"]
 }
 
-export default function Answers({
+const Answers = ({
   data: { question, answers, image, time, totalPlayer },
-}: Props) {
+}: Props) => {
   const { gameId }: { gameId?: string } = useParams()
   const { socket } = useSocket()
   const { player } = usePlayerStore()
@@ -116,3 +116,5 @@ export default function Answers({
     </div>
   )
 }
+
+export default Answers
diff --git a/packages/web/src/components/game/states/Leaderboard.tsx b/packages/web/src/components/game/states/Leaderboard.tsx
index cfa27a6..58a1a16 100644
--- a/packages/web/src/components/game/states/Leaderboard.tsx
+++ b/packages/web/src/components/game/states/Leaderboard.tsx
@@ -4,23 +4,23 @@ type Props = {
   data: ManagerStatusDataMap["SHOW_LEADERBOARD"]
 }
 
-export default function Leaderboard({ data: { leaderboard } }: Props) {
-  return (
-    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-2">
-      <h2 className="mb-6 text-5xl font-bold text-white drop-shadow-md">
-        Leaderboard
-      </h2>
-      <div className="flex w-full flex-col gap-2">
-        {leaderboard.map(({ username, points }, key) => (
-          <div
-            key={key}
-            className="bg-primary flex w-full justify-between rounded-md p-3 text-2xl font-bold text-white"
-          >
-            <span className="drop-shadow-md">{username}</span>
-            <span className="drop-shadow-md">{points}</span>
-          </div>
-        ))}
-      </div>
-    </section>
-  )
-}
+const Leaderboard = ({ data: { leaderboard } }: Props) => (
+  <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-2">
+    <h2 className="mb-6 text-5xl font-bold text-white drop-shadow-md">
+      Leaderboard
+    </h2>
+    <div className="flex w-full flex-col gap-2">
+      {leaderboard.map(({ username, points }, key) => (
+        <div
+          key={key}
+          className="bg-primary flex w-full justify-between rounded-md p-3 text-2xl font-bold text-white"
+        >
+          <span className="drop-shadow-md">{username}</span>
+          <span className="drop-shadow-md">{points}</span>
+        </div>
+      ))}
+    </div>
+  </section>
+)
+
+export default Leaderboard
diff --git a/packages/web/src/components/game/states/Podium.tsx b/packages/web/src/components/game/states/Podium.tsx
index 8934713..30da760 100644
--- a/packages/web/src/components/game/states/Podium.tsx
+++ b/packages/web/src/components/game/states/Podium.tsx
@@ -17,7 +17,7 @@ type Props = {
   data: ManagerStatusDataMap["FINISHED"]
 }
 
-export default function Podium({ data: { subject, top } }: Props) {
+const Podium = ({ data: { subject, top } }: Props) => {
   const [apparition, setApparition] = useState(0)
 
   const { width, height } = useScreenSize()
@@ -112,7 +112,7 @@ export default function Podium({ data: { subject, top } }: Props) {
             <div
               className={clsx(
                 "z-20 flex h-[50%] w-full translate-y-full flex-col items-center justify-center gap-3 opacity-0 transition-all",
-                { "!translate-y-0 opacity-100": apparition >= 2 },
+                { "translate-y-0! opacity-100": apparition >= 2 },
               )}
             >
               <p
@@ -140,7 +140,7 @@ export default function Podium({ data: { subject, top } }: Props) {
             className={clsx(
               "z-30 flex h-[60%] w-full translate-y-full flex-col items-center gap-3 opacity-0 transition-all",
               {
-                "!translate-y-0 opacity-100": apparition >= 3,
+                "translate-y-0! opacity-100": apparition >= 3,
               },
               {
                 "md:min-w-64": top.length < 2,
@@ -170,7 +170,7 @@ export default function Podium({ data: { subject, top } }: Props) {
               className={clsx(
                 "z-10 flex h-[40%] w-full translate-y-full flex-col items-center gap-3 opacity-0 transition-all",
                 {
-                  "!translate-y-0 opacity-100": apparition >= 1,
+                  "translate-y-0! opacity-100": apparition >= 1,
                 },
               )}
             >
@@ -200,3 +200,5 @@ export default function Podium({ data: { subject, top } }: Props) {
     </>
   )
 }
+
+export default Podium
diff --git a/packages/web/src/components/game/states/Prepared.tsx b/packages/web/src/components/game/states/Prepared.tsx
index 1053e12..9ceba61 100644
--- a/packages/web/src/components/game/states/Prepared.tsx
+++ b/packages/web/src/components/game/states/Prepared.tsx
@@ -7,27 +7,25 @@ type Props = {
   data: CommonStatusDataMap["SHOW_PREPARED"]
 }
 
-export default function Prepared({
-  data: { totalAnswers, questionNumber },
-}: Props) {
-  return (
-    <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
-      <h2 className="anim-show mb-20 text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
-        Question #{questionNumber}
-      </h2>
-      <div className="anim-quizz grid aspect-square w-60 grid-cols-2 gap-4 rounded-2xl bg-gray-700 p-5 md:w-60">
-        {[...Array(totalAnswers)].map((_, key) => (
-          <div
-            key={key}
-            className={clsx(
-              "button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl",
-              ANSWERS_COLORS[key],
-            )}
-          >
-            {createElement(ANSWERS_ICONS[key], { className: "h-10 md:h-14" })}
-          </div>
-        ))}
-      </div>
-    </section>
-  )
-}
+const Prepared = ({ data: { totalAnswers, questionNumber } }: Props) => (
+  <section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
+    <h2 className="anim-show mb-20 text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+      Question #{questionNumber}
+    </h2>
+    <div className="anim-quizz grid aspect-square w-60 grid-cols-2 gap-4 rounded-2xl bg-gray-700 p-5 md:w-60">
+      {[...Array(totalAnswers)].map((_, key) => (
+        <div
+          key={key}
+          className={clsx(
+            "button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl",
+            ANSWERS_COLORS[key],
+          )}
+        >
+          {createElement(ANSWERS_ICONS[key], { className: "h-10 md:h-14" })}
+        </div>
+      ))}
+    </div>
+  </section>
+)
+
+export default Prepared
diff --git a/packages/web/src/components/game/states/Question.tsx b/packages/web/src/components/game/states/Question.tsx
index 2c1ea90..d177a00 100644
--- a/packages/web/src/components/game/states/Question.tsx
+++ b/packages/web/src/components/game/states/Question.tsx
@@ -9,9 +9,7 @@ type Props = {
   data: CommonStatusDataMap["SHOW_QUESTION"]
 }
 
-export default function Question({
-  data: { question, image, cooldown },
-}: Props) {
+const Question = ({ data: { question, image, cooldown } }: Props) => {
   const [sfxShow] = useSound(SFX_SHOW_SOUND, { volume: 0.5 })
 
   useEffect(() => {
@@ -40,3 +38,5 @@ export default function Question({
     </section>
   )
 }
+
+export default Question
diff --git a/packages/web/src/components/game/states/Responses.tsx b/packages/web/src/components/game/states/Responses.tsx
index c16156f..8bd5229 100644
--- a/packages/web/src/components/game/states/Responses.tsx
+++ b/packages/web/src/components/game/states/Responses.tsx
@@ -1,48 +1,25 @@
 "use client"
 
 import { ManagerStatusDataMap } from "@rahoot/common/types/game/status"
+import AnswerButton from "@rahoot/web/components/AnswerButton"
 import {
   ANSWERS_COLORS,
   ANSWERS_ICONS,
   SFX_ANSWERS_MUSIC,
   SFX_RESULTS_SOUND,
 } from "@rahoot/web/utils/constants"
+import { calculatePercentages } from "@rahoot/web/utils/score"
 import clsx from "clsx"
 import { useEffect, useState } from "react"
 import useSound from "use-sound"
-import AnswerButton from "../../AnswerButton"
-
-const calculatePercentages = (
-  objectResponses: Record<string, number>,
-): Record<string, string> => {
-  const keys = Object.keys(objectResponses)
-  const values = Object.values(objectResponses)
-
-  if (!values.length) {
-    return {}
-  }
-
-  const totalSum = values.reduce(
-    (accumulator, currentValue) => accumulator + currentValue,
-    0,
-  )
-
-  const result: Record<string, string> = {}
-
-  keys.forEach((key) => {
-    result[key] = `${((objectResponses[key] / totalSum) * 100).toFixed()}%`
-  })
-
-  return result
-}
 
 type Props = {
   data: ManagerStatusDataMap["SHOW_RESPONSES"]
 }
 
-export default function Responses({
+const Responses = ({
   data: { question, answers, responses, correct },
-}: Props) {
+}: Props) => {
   const [percentages, setPercentages] = useState<Record<string, string>>({})
   const [isMusicPlaying, setIsMusicPlaying] = useState(false)
 
@@ -123,3 +100,5 @@ export default function Responses({
     </div>
   )
 }
+
+export default Responses
diff --git a/packages/web/src/components/game/states/Result.tsx b/packages/web/src/components/game/states/Result.tsx
index 357fa81..d94d4c5 100644
--- a/packages/web/src/components/game/states/Result.tsx
+++ b/packages/web/src/components/game/states/Result.tsx
@@ -12,9 +12,9 @@ type Props = {
   data: CommonStatusDataMap["SHOW_RESULT"]
 }
 
-export default function Result({
+const Result = ({
   data: { correct, message, points, myPoints, rank, aheadOfMe },
-}: Props) {
+}: Props) => {
   const player = usePlayerStore()
 
   const [sfxResults] = useSound(SFX_RESULTS_SOUND, {
@@ -48,3 +48,5 @@ export default function Result({
     </section>
   )
 }
+
+export default Result
diff --git a/packages/web/src/components/game/states/Room.tsx b/packages/web/src/components/game/states/Room.tsx
index 533dcdb..998efcf 100644
--- a/packages/web/src/components/game/states/Room.tsx
+++ b/packages/web/src/components/game/states/Room.tsx
@@ -10,7 +10,7 @@ type Props = {
   data: ManagerStatusDataMap["SHOW_ROOM"]
 }
 
-export default function Room({ data: { text, inviteCode } }: Props) {
+const Room = ({ data: { text, inviteCode } }: Props) => {
   const { socket } = useSocket()
   const { players } = useManagerStore()
   const [playerList, setPlayerList] = useState<Player[]>(players)
@@ -70,3 +70,5 @@ export default function Room({ data: { text, inviteCode } }: Props) {
     </section>
   )
 }
+
+export default Room
diff --git a/packages/web/src/components/game/states/Start.tsx b/packages/web/src/components/game/states/Start.tsx
index a85ab01..528a097 100644
--- a/packages/web/src/components/game/states/Start.tsx
+++ b/packages/web/src/components/game/states/Start.tsx
@@ -11,7 +11,7 @@ type Props = {
   data: CommonStatusDataMap["SHOW_START"]
 }
 
-export default function Start({ data: { time, subject } }: Props) {
+const Start = ({ data: { time, subject } }: Props) => {
   const [showTitle, setShowTitle] = useState(true)
   const [cooldown, setCooldown] = useState(time)
 
@@ -53,3 +53,5 @@ export default function Start({ data: { time, subject } }: Props) {
     </section>
   )
 }
+
+export default Start
diff --git a/packages/web/src/components/game/states/Wait.tsx b/packages/web/src/components/game/states/Wait.tsx
index 71fc35a..88b728c 100644
--- a/packages/web/src/components/game/states/Wait.tsx
+++ b/packages/web/src/components/game/states/Wait.tsx
@@ -5,13 +5,13 @@ type Props = {
   data: PlayerStatusDataMap["WAIT"]
 }
 
-export default function Wait({ data: { text } }: Props) {
-  return (
-    <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
-      <Loader />
-      <h2 className="mt-5 text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
-        {text}
-      </h2>
-    </section>
-  )
-}
+const Wait = ({ data: { text } }: Props) => (
+  <section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
+    <Loader />
+    <h2 className="mt-5 text-center text-3xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
+      {text}
+    </h2>
+  </section>
+)
+
+export default Wait
diff --git a/packages/web/src/components/icons/Circle.tsx b/packages/web/src/components/icons/Circle.tsx
index 4925030..da8973b 100644
--- a/packages/web/src/components/icons/Circle.tsx
+++ b/packages/web/src/components/icons/Circle.tsx
@@ -3,28 +3,22 @@ type Props = {
   fill?: string
 }
 
-export default function Circle({ className, fill = "#FFF" }: Props) {
-  return (
-    <svg
-      className={className}
-      viewBox="0 0 512 512"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        id="Page-1"
-        stroke="none"
-        strokeWidth="1"
-        fill="none"
-        fillRule="evenodd"
-      >
-        <g id="icon" fill={fill} transform="translate(42.666667, 42.666667)">
-          <path
-            d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z"
-            id="Combined-Shape"
-          ></path>
-        </g>
+const Circle = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    viewBox="0 0 512 512"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="icon" fill={fill} transform="translate(42.666667, 42.666667)">
+        <path
+          d="M213.333333,3.55271368e-14 C331.15408,3.55271368e-14 426.666667,95.5125867 426.666667,213.333333 C426.666667,331.15408 331.15408,426.666667 213.333333,426.666667 C95.5125867,426.666667 3.55271368e-14,331.15408 3.55271368e-14,213.333333 C3.55271368e-14,95.5125867 95.5125867,3.55271368e-14 213.333333,3.55271368e-14 Z"
+          id="Combined-Shape"
+        ></path>
       </g>
-    </svg>
-  )
-}
+    </g>
+  </svg>
+)
+
+export default Circle
diff --git a/packages/web/src/components/icons/CricleCheck.tsx b/packages/web/src/components/icons/CricleCheck.tsx
index 4deb78c..beb030c 100644
--- a/packages/web/src/components/icons/CricleCheck.tsx
+++ b/packages/web/src/components/icons/CricleCheck.tsx
@@ -2,40 +2,40 @@ type Props = {
   className?: string
 }
 
-export default function CricleCheck({ className }: Props) {
-  return (
-    <svg
-      fill="#22c55e"
-      width="800px"
-      height="800px"
-      viewBox="0 0 56.00 56.00"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="#22c55e"
-      strokeWidth="0.00056"
-      className={className}
-    >
-      <g strokeWidth="0" transform="translate(11.2,11.2), scale(0.6)">
-        <rect
-          x="0"
-          y="0"
-          width="56.00"
-          height="56.00"
-          rx="28"
-          fill="#ffffff"
-          strokeWidth="0"
-        />
-      </g>
-
-      <g
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        stroke="#CCCCCC"
-        strokeWidth="0.6719999999999999"
+const CricleCheck = ({ className }: Props) => (
+  <svg
+    fill="#22c55e"
+    width="800px"
+    height="800px"
+    viewBox="0 0 56.00 56.00"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#22c55e"
+    strokeWidth="0.00056"
+    className={className}
+  >
+    <g strokeWidth="0" transform="translate(11.2,11.2), scale(0.6)">
+      <rect
+        x="0"
+        y="0"
+        width="56.00"
+        height="56.00"
+        rx="28"
+        fill="#ffffff"
+        strokeWidth="0"
       />
+    </g>
 
-      <g>
-        <path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 24.7655 40.0234 C 23.9687 40.0234 23.3593 39.6719 22.6796 38.8750 L 15.9296 30.5312 C 15.5780 30.0859 15.3671 29.5234 15.3671 29.0078 C 15.3671 27.9063 16.2343 27.0625 17.2655 27.0625 C 17.9452 27.0625 18.5077 27.3203 19.0702 28.0469 L 24.6718 35.2890 L 35.5702 17.8281 C 36.0155 17.1016 36.6249 16.75 37.2343 16.75 C 38.2655 16.75 39.2733 17.4297 39.2733 18.5547 C 39.2733 19.0703 38.9687 19.6328 38.6640 20.1016 L 26.7577 38.8750 C 26.2421 39.6484 25.5858 40.0234 24.7655 40.0234 Z" />
-      </g>
-    </svg>
-  )
-}
+    <g
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      stroke="#CCCCCC"
+      strokeWidth="0.6719999999999999"
+    />
+
+    <g>
+      <path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 24.7655 40.0234 C 23.9687 40.0234 23.3593 39.6719 22.6796 38.8750 L 15.9296 30.5312 C 15.5780 30.0859 15.3671 29.5234 15.3671 29.0078 C 15.3671 27.9063 16.2343 27.0625 17.2655 27.0625 C 17.9452 27.0625 18.5077 27.3203 19.0702 28.0469 L 24.6718 35.2890 L 35.5702 17.8281 C 36.0155 17.1016 36.6249 16.75 37.2343 16.75 C 38.2655 16.75 39.2733 17.4297 39.2733 18.5547 C 39.2733 19.0703 38.9687 19.6328 38.6640 20.1016 L 26.7577 38.8750 C 26.2421 39.6484 25.5858 40.0234 24.7655 40.0234 Z" />
+    </g>
+  </svg>
+)
+
+export default CricleCheck
diff --git a/packages/web/src/components/icons/CricleXmark.tsx b/packages/web/src/components/icons/CricleXmark.tsx
index 144a28b..8700820 100644
--- a/packages/web/src/components/icons/CricleXmark.tsx
+++ b/packages/web/src/components/icons/CricleXmark.tsx
@@ -2,34 +2,34 @@ type Props = {
   className?: string
 }
 
-export default function CricleXmark({ className }: Props) {
-  return (
-    <svg
-      fill="#ef4444"
-      width="800px"
-      height="800px"
-      viewBox="0 0 56.00 56.00"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="#ef4444"
-      className={className}
-    >
-      <g strokeWidth="0" transform="translate(12.4,12.4), scale(0.6)">
-        <rect
-          x="0"
-          y="0"
-          width="56.00"
-          height="56.00"
-          rx="28"
-          fill="#ffffff"
-          strokeWidth="0"
-        />
-      </g>
+const CricleXmark = ({ className }: Props) => (
+  <svg
+    fill="#ef4444"
+    width="800px"
+    height="800px"
+    viewBox="0 0 56.00 56.00"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#ef4444"
+    className={className}
+  >
+    <g strokeWidth="0" transform="translate(12.4,12.4), scale(0.6)">
+      <rect
+        x="0"
+        y="0"
+        width="56.00"
+        height="56.00"
+        rx="28"
+        fill="#ffffff"
+        strokeWidth="0"
+      />
+    </g>
 
-      <g strokeLinecap="round" strokeLinejoin="round" />
+    <g strokeLinecap="round" strokeLinejoin="round" />
 
-      <g>
-        <path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 19.5858 38.4063 C 18.4843 38.4063 17.5936 37.5156 17.5936 36.4141 C 17.5936 35.8750 17.8280 35.4063 18.2030 35.0547 L 25.1874 28.0234 L 18.2030 20.9922 C 17.8280 20.6641 17.5936 20.1719 17.5936 19.6328 C 17.5936 18.5547 18.4843 17.6875 19.5858 17.6875 C 20.1249 17.6875 20.5936 17.8984 20.9452 18.2734 L 27.9765 25.2812 L 35.0546 18.25 C 35.4530 17.8281 35.8749 17.6406 36.3905 17.6406 C 37.4921 17.6406 38.3827 18.5312 38.3827 19.6094 C 38.3827 20.1484 38.1952 20.5937 37.7968 20.9688 L 30.7655 28.0234 L 37.7733 35.0078 C 38.1249 35.3828 38.3593 35.8516 38.3593 36.4141 C 38.3593 37.5156 37.4687 38.4063 36.3671 38.4063 C 35.8046 38.4063 35.3358 38.1719 34.9843 37.8203 L 27.9765 30.7890 L 20.9921 37.8203 C 20.6405 38.1953 20.1249 38.4063 19.5858 38.4063 Z" />
-      </g>
-    </svg>
-  )
-}
+    <g>
+      <path d="M 27.9999 51.9063 C 41.0546 51.9063 51.9063 41.0781 51.9063 28 C 51.9063 14.9453 41.0312 4.0937 27.9765 4.0937 C 14.8983 4.0937 4.0937 14.9453 4.0937 28 C 4.0937 41.0781 14.9218 51.9063 27.9999 51.9063 Z M 19.5858 38.4063 C 18.4843 38.4063 17.5936 37.5156 17.5936 36.4141 C 17.5936 35.8750 17.8280 35.4063 18.2030 35.0547 L 25.1874 28.0234 L 18.2030 20.9922 C 17.8280 20.6641 17.5936 20.1719 17.5936 19.6328 C 17.5936 18.5547 18.4843 17.6875 19.5858 17.6875 C 20.1249 17.6875 20.5936 17.8984 20.9452 18.2734 L 27.9765 25.2812 L 35.0546 18.25 C 35.4530 17.8281 35.8749 17.6406 36.3905 17.6406 C 37.4921 17.6406 38.3827 18.5312 38.3827 19.6094 C 38.3827 20.1484 38.1952 20.5937 37.7968 20.9688 L 30.7655 28.0234 L 37.7733 35.0078 C 38.1249 35.3828 38.3593 35.8516 38.3593 36.4141 C 38.3593 37.5156 37.4687 38.4063 36.3671 38.4063 C 35.8046 38.4063 35.3358 38.1719 34.9843 37.8203 L 27.9765 30.7890 L 20.9921 37.8203 C 20.6405 38.1953 20.1249 38.4063 19.5858 38.4063 Z" />
+    </g>
+  </svg>
+)
+
+export default CricleXmark
diff --git a/packages/web/src/components/icons/Pentagon.tsx b/packages/web/src/components/icons/Pentagon.tsx
index 63e9cef..061b9b7 100644
--- a/packages/web/src/components/icons/Pentagon.tsx
+++ b/packages/web/src/components/icons/Pentagon.tsx
@@ -4,43 +4,43 @@ type Props = {
   stroke?: string
 }
 
-export default function Pentagon({ className, fill, stroke }: Props) {
-  return (
-    <svg
-      className={className}
-      fill={fill}
-      height="800px"
-      width="800px"
-      version="1.1"
-      id="Layer_1"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="-40.96 -40.96 593.93 593.93"
-      transform="rotate(180)"
-      stroke={fill}
-      strokeWidth="0.005120100000000001"
+const Pentagon = ({ className, fill, stroke }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    height="800px"
+    width="800px"
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-40.96 -40.96 593.93 593.93"
+    transform="rotate(180)"
+    stroke={fill}
+    strokeWidth="0.005120100000000001"
+  >
+    <g strokeWidth="0" />
+
+    <g
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      stroke={stroke}
+      strokeWidth="71.6814"
     >
-      <g strokeWidth="0" />
-
-      <g
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        stroke={stroke}
-        strokeWidth="71.6814"
-      >
-        <g>
-          <g>
-            <path d="M507.804,200.28L262.471,12.866c-3.84-2.923-9.131-2.923-12.949,0L4.188,200.28c-3.605,2.773-5.077,7.531-3.648,11.84 l93.717,281.92c1.451,4.373,5.525,7.296,10.133,7.296h303.253c4.587,0,8.683-2.944,10.133-7.296l93.717-281.92 C512.882,207.789,511.41,203.053,507.804,200.28z" />{" "}
-          </g>
-        </g>
-      </g>
-
       <g>
         <g>
-          <g>
-            <path d="M507.804,200.28L262.471,12.866c-3.84-2.923-9.131-2.923-12.949,0L4.188,200.28c-3.605,2.773-5.077,7.531-3.648,11.84 l93.717,281.92c1.451,4.373,5.525,7.296,10.133,7.296h303.253c4.587,0,8.683-2.944,10.133-7.296l93.717-281.92 C512.882,207.789,511.41,203.053,507.804,200.28z" />{" "}
-          </g>
+          <path d="M507.804,200.28L262.471,12.866c-3.84-2.923-9.131-2.923-12.949,0L4.188,200.28c-3.605,2.773-5.077,7.531-3.648,11.84 l93.717,281.92c1.451,4.373,5.525,7.296,10.133,7.296h303.253c4.587,0,8.683-2.944,10.133-7.296l93.717-281.92 C512.882,207.789,511.41,203.053,507.804,200.28z" />{" "}
         </g>
       </g>
-    </svg>
-  )
-}
+    </g>
+
+    <g>
+      <g>
+        <g>
+          <path d="M507.804,200.28L262.471,12.866c-3.84-2.923-9.131-2.923-12.949,0L4.188,200.28c-3.605,2.773-5.077,7.531-3.648,11.84 l93.717,281.92c1.451,4.373,5.525,7.296,10.133,7.296h303.253c4.587,0,8.683-2.944,10.133-7.296l93.717-281.92 C512.882,207.789,511.41,203.053,507.804,200.28z" />{" "}
+        </g>
+      </g>
+    </g>
+  </svg>
+)
+
+export default Pentagon
diff --git a/packages/web/src/components/icons/Rhombus.tsx b/packages/web/src/components/icons/Rhombus.tsx
index 2e90736..940866b 100644
--- a/packages/web/src/components/icons/Rhombus.tsx
+++ b/packages/web/src/components/icons/Rhombus.tsx
@@ -3,22 +3,22 @@ type Props = {
   fill?: string
 }
 
-export default function Rhombus({ className, fill = "#FFF" }: Props) {
-  return (
-    <svg
-      className={className}
-      fill={fill}
-      viewBox="-56.32 -56.32 624.64 624.64"
-      xmlns="http://www.w3.org/2000/svg"
-      transform="rotate(45)"
-    >
-      <g strokeWidth="0" />
+const Rhombus = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    viewBox="-56.32 -56.32 624.64 624.64"
+    xmlns="http://www.w3.org/2000/svg"
+    transform="rotate(45)"
+  >
+    <g strokeWidth="0" />
 
-      <g strokeLinecap="round" strokeLinejoin="round" />
+    <g strokeLinecap="round" strokeLinejoin="round" />
 
-      <g>
-        <rect x="48" y="48" width="416" height="416" />
-      </g>
-    </svg>
-  )
-}
+    <g>
+      <rect x="48" y="48" width="416" height="416" />
+    </g>
+  </svg>
+)
+
+export default Rhombus
diff --git a/packages/web/src/components/icons/Square.tsx b/packages/web/src/components/icons/Square.tsx
index 2f8f460..fb42303 100644
--- a/packages/web/src/components/icons/Square.tsx
+++ b/packages/web/src/components/icons/Square.tsx
@@ -3,15 +3,15 @@ type Props = {
   fill?: string
 }
 
-export default function Square({ className, fill = "#FFF" }: Props) {
-  return (
-    <svg
-      className={className}
-      fill={fill}
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect x="48" y="48" width="416" height="416" />
-    </svg>
-  )
-}
+const Square = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect x="48" y="48" width="416" height="416" />
+  </svg>
+)
+
+export default Square
diff --git a/packages/web/src/components/icons/Triangle.tsx b/packages/web/src/components/icons/Triangle.tsx
index fe1eb54..877a23c 100644
--- a/packages/web/src/components/icons/Triangle.tsx
+++ b/packages/web/src/components/icons/Triangle.tsx
@@ -3,15 +3,15 @@ type Props = {
   fill?: string
 }
 
-export default function Triangle({ className, fill = "#FFF" }: Props) {
-  return (
-    <svg
-      className={className}
-      fill={fill}
-      viewBox="0 0 512 512"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <polygon points="256 32 20 464 492 464 256 32" />
-    </svg>
-  )
-}
+const Triangle = ({ className, fill = "#FFF" }: Props) => (
+  <svg
+    className={className}
+    fill={fill}
+    viewBox="0 0 512 512"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <polygon points="256 32 20 464 492 464 256 32" />
+  </svg>
+)
+
+export default Triangle
diff --git a/packages/web/src/utils/score.ts b/packages/web/src/utils/score.ts
new file mode 100644
index 0000000..ea1b1a1
--- /dev/null
+++ b/packages/web/src/utils/score.ts
@@ -0,0 +1,23 @@
+export const calculatePercentages = (
+  objectResponses: Record<string, number>,
+): Record<string, string> => {
+  const keys = Object.keys(objectResponses)
+  const values = Object.values(objectResponses)
+
+  if (!values.length) {
+    return {}
+  }
+
+  const totalSum = values.reduce(
+    (accumulator, currentValue) => accumulator + currentValue,
+    0,
+  )
+
+  const result: Record<string, string> = {}
+
+  keys.forEach((key) => {
+    result[key] = `${((objectResponses[key] / totalSum) * 100).toFixed()}%`
+  })
+
+  return result
+}