Fix EsLint config & update packages

.eslintrc.json

@@ -1,245 +0,0 @@
-{
-  "root": true,
-  "extends": [
-    "eslint:recommended",
-    "prettier",
-    "next/core-web-vitals",
-    "plugin:react/recommended"
-  ],
-  "plugins": ["react"],
-  "env": {
-    "browser": true,
-    "node": true,
-    "es6": true
-  },
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "rules": {
-    "array-callback-return": [
-      "error",
-      {
-        "allowImplicit": false,
-        "checkForEach": true,
-        "allowVoid": true
-      }
-    ],
-    "no-await-in-loop": "error",
-    "no-constant-binary-expression": "error",
-    "no-constructor-return": "error",
-    "no-duplicate-imports": ["error", { "includeExports": true }],
-    "no-new-native-nonconstructor": "error",
-    "no-promise-executor-return": ["error", { "allowVoid": true }],
-    "no-self-compare": "error",
-    "no-template-curly-in-string": "error",
-    "no-unmodified-loop-condition": "error",
-    "no-unreachable-loop": "error",
-    "no-unused-private-class-members": "error",
-    "arrow-body-style": ["error", "as-needed"],
-    "camelcase": [
-      "error",
-      {
-        "properties": "always",
-        "ignoreDestructuring": true,
-        "ignoreImports": true,
-        "ignoreGlobals": true
-      }
-    ],
-    "capitalized-comments": [
-      "error",
-      "always",
-      { "ignoreConsecutiveComments": true }
-    ],
-    "class-methods-use-this": ["error", { "enforceForClassFields": true }],
-    "complexity": ["warn", 40],
-    "consistent-return": "error",
-    "curly": ["error", "all"],
-    "default-param-last": "error",
-    "dot-notation": "error",
-    "eqeqeq": ["error", "always"],
-    "func-name-matching": "error",
-    "func-names": "error",
-    "func-style": ["error", "declaration", { "allowArrowFunctions": true }],
-    "grouped-accessor-pairs": ["error", "getBeforeSet"],
-    "guard-for-in": "error",
-    "init-declarations": ["error", "always"],
-    "logical-assignment-operators": [
-      "error",
-      "always",
-      { "enforceForIfStatements": true }
-    ],
-    "max-classes-per-file": ["error", { "ignoreExpressions": true }],
-    "max-depth": ["error", 3],
-    "max-lines": [
-      "error",
-      { "max": 150, "skipBlankLines": true, "skipComments": true }
-    ],
-    "max-lines-per-function": [
-      "warn",
-      { "max": 50, "skipBlankLines": true, "skipComments": true }
-    ],
-    "max-nested-callbacks": ["error", 3],
-    "max-params": ["error", 3],
-    "multiline-comment-style": ["error", "separate-lines"],
-    "new-cap": "error",
-    "no-alert": "error",
-    "no-bitwise": "error",
-    "no-caller": "error",
-    "no-console": "error",
-    "no-else-return": "error",
-    "no-empty-function": "error",
-    "no-empty-static-block": "error",
-    "no-eq-null": "error",
-    "no-eval": "error",
-    "no-extend-native": "error",
-    "no-extra-label": "error",
-    "no-implicit-coercion": "error",
-    "no-implicit-globals": "error",
-    "no-implied-eval": "error",
-    "no-inline-comments": "error",
-    "no-invalid-this": "error",
-    "no-iterator": "error",
-    "no-labels": "error",
-    "no-lone-blocks": "error",
-    "no-lonely-if": "error",
-    "no-loop-func": "error",
-    "no-multi-assign": "error",
-    "no-multi-str": "error",
-    "no-nested-ternary": "error",
-    "no-new": "error",
-    "no-new-func": "error",
-    "no-new-wrappers": "error",
-    "no-object-constructor": "error",
-    "no-octal-escape": "error",
-    "no-param-reassign": "error",
-    "no-plusplus": "error",
-    "no-proto": "error",
-    "no-return-assign": ["error", "always"],
-    "no-script-url": "error",
-    "no-sequences": "error",
-    "no-shadow": "error",
-    "no-throw-literal": "error",
-    "no-undef-init": "error",
-    "no-undefined": "error",
-    "no-underscore-dangle": ["error", { "allowFunctionParams": false }],
-    "no-unneeded-ternary": ["error", { "defaultAssignment": false }],
-    "no-unused-expressions": ["error", { "enforceForJSX": true }],
-    "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }],
-    "no-useless-call": "error",
-    "no-useless-computed-key": ["error", { "enforceForClassMembers": true }],
-    "no-useless-concat": "error",
-    "no-useless-constructor": "error",
-    "no-useless-rename": "error",
-    "no-useless-return": "error",
-    "no-var": "error",
-    "no-warning-comments": [
-      "error",
-      {
-        "terms": ["todo"]
-      }
-    ],
-    "object-shorthand": ["error", "always"],
-    "one-var": ["error", "never"],
-    "operator-assignment": ["error", "always"],
-    "prefer-arrow-callback": "error",
-    "prefer-const": [
-      "error",
-      {
-        "destructuring": "any",
-        "ignoreReadBeforeAssign": false
-      }
-    ],
-    "prefer-destructuring": "error",
-    "prefer-exponentiation-operator": "error",
-    "prefer-numeric-literals": "error",
-    "prefer-object-has-own": "error",
-    "prefer-object-spread": "error",
-    "prefer-promise-reject-errors": "error",
-    "prefer-regex-literals": ["error", { "disallowRedundantWrapping": true }],
-    "prefer-rest-params": "error",
-    "prefer-spread": "error",
-    "prefer-template": "error",
-    "radix": "error",
-    "require-await": "error",
-    "require-unicode-regexp": "error",
-    "symbol-description": "error",
-    "yoda": "error",
-    "line-comment-position": ["error", { "position": "above" }],
-    // recommended rules overwrite
-    "indent": "off",
-    "linebreak-style": ["error", "unix"],
-    "newline-before-return": "error",
-    "no-undef": "error",
-    "padded-blocks": ["error", "never"],
-    "padding-line-between-statements": [
-      "error",
-      {
-        "blankLine": "always",
-        "prev": "*",
-        "next": [
-          "break",
-          "case",
-          "cjs-export",
-          "class",
-          "continue",
-          "do",
-          "if",
-          "switch",
-          "try",
-          "while",
-          "return"
-        ]
-      },
-      {
-        "blankLine": "always",
-        "prev": [
-          "break",
-          "case",
-          "cjs-export",
-          "class",
-          "continue",
-          "do",
-          "if",
-          "switch",
-          "try",
-          "while",
-          "return"
-        ],
-        "next": "*"
-      },
-      {
-        "blankLine": "never",
-        "prev": ["const", "export"],
-        "next": "const"
-      }
-    ],
-    "quotes": [
-      "error",
-      "double",
-      {
-        "avoidEscape": true,
-        "allowTemplateLiterals": true
-      }
-    ],
-    "space-before-blocks": "error",
-    "semi": ["error", "never"],
-    // extra
-    "@next/next/no-html-link-for-pages": ["error", "./src/app"],
-    "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn",
-    "react/no-unescaped-entities": [
-      "error",
-      {
-        "forbid": [">", "}"]
-      }
-    ],
-    "react/react-in-jsx-scope": "off",
-    "react/prop-types": "off"
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
-  }
-}

.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "meganrogge.template-string-converter",
+    "vincaslt.highlight-matching-tag",
+    "formulahendry.auto-rename-tag",
+    "naumovs.color-highlight"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "explicit",
+    "source.fixAll.eslint": "explicit"
+  },
+  "files.associations": {
+    "*.css": "tailwindcss",
+    "*.scss": "tailwindcss"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ]
+}

eslint.config.mjs

@@ -0,0 +1,223 @@
+// eslint.config.js
+import nextPlugin from "@next/eslint-plugin-next"
+import reactPlugin from "eslint-plugin-react"
+import reactHooksPlugin from "eslint-plugin-react-hooks"
+import { defineConfig } from "eslint/config"
+import globals from "globals"
+
+export default defineConfig([
+  {
+    ignores: ["**/node_modules/**", "**/.next/**"],
+  },
+  {
+    files: ["**/*.js", "**/*.jsx"],
+    languageOptions: {
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+    plugins: {
+      react: reactPlugin,
+      "react-hooks": reactHooksPlugin,
+      "@next/next": nextPlugin,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+    rules: {
+      "array-callback-return": [
+        "error",
+        { allowImplicit: false, checkForEach: true, allowVoid: true },
+      ],
+      "no-await-in-loop": "error",
+      "no-constant-binary-expression": "error",
+      "no-constructor-return": "error",
+      "no-duplicate-imports": ["error", { includeExports: true }],
+      "no-new-native-nonconstructor": "error",
+      "no-promise-executor-return": ["error", { allowVoid: true }],
+      "no-self-compare": "error",
+      "no-template-curly-in-string": "error",
+      "no-unmodified-loop-condition": "error",
+      "no-unreachable-loop": "error",
+      "no-unused-private-class-members": "error",
+      "arrow-body-style": ["error", "as-needed"],
+      camelcase: [
+        "error",
+        {
+          properties: "always",
+          ignoreDestructuring: true,
+          ignoreImports: true,
+          ignoreGlobals: true,
+        },
+      ],
+      "capitalized-comments": [
+        "error",
+        "always",
+        { ignoreConsecutiveComments: true },
+      ],
+      "class-methods-use-this": ["error", { enforceForClassFields: true }],
+      complexity: ["warn", 40],
+      "consistent-return": "error",
+      curly: ["error", "all"],
+      "default-param-last": "error",
+      "dot-notation": "error",
+      eqeqeq: ["error", "always"],
+      "func-name-matching": "error",
+      "func-names": "error",
+      "func-style": ["error", "declaration", { allowArrowFunctions: true }],
+      "grouped-accessor-pairs": ["error", "getBeforeSet"],
+      "guard-for-in": "error",
+      "init-declarations": ["error", "always"],
+      "logical-assignment-operators": [
+        "error",
+        "always",
+        { enforceForIfStatements: true },
+      ],
+      "max-classes-per-file": ["error", { ignoreExpressions: true }],
+      "max-depth": ["error", 3],
+      "max-lines": [
+        "error",
+        { max: 500, skipBlankLines: true, skipComments: true },
+      ],
+      "max-nested-callbacks": ["error", 3],
+      "max-params": ["error", 4],
+      "multiline-comment-style": ["error", "separate-lines"],
+      "no-alert": "error",
+      "no-bitwise": "error",
+      "no-caller": "error",
+      "no-else-return": "error",
+      "no-empty-function": "error",
+      "no-empty-static-block": "error",
+      "no-eq-null": "error",
+      "no-eval": "error",
+      "no-extend-native": "error",
+      "no-extra-label": "error",
+      "no-implicit-coercion": "error",
+      "no-implicit-globals": "error",
+      "no-implied-eval": "error",
+      "no-inline-comments": "error",
+      "no-invalid-this": "error",
+      "no-iterator": "error",
+      "no-labels": "error",
+      "no-lone-blocks": "error",
+      "no-lonely-if": "error",
+      "no-loop-func": "error",
+      "no-multi-assign": "error",
+      "no-multi-str": "error",
+      "no-nested-ternary": "error",
+      "no-new": "error",
+      "no-new-func": "error",
+      "no-new-wrappers": "error",
+      "no-object-constructor": "error",
+      "no-octal-escape": "error",
+      "no-param-reassign": "error",
+      "no-plusplus": "error",
+      "no-proto": "error",
+      "no-return-assign": ["error", "always"],
+      "no-script-url": "error",
+      "no-sequences": "error",
+      "no-throw-literal": "error",
+      "no-undef-init": "error",
+      "no-unneeded-ternary": ["error", { defaultAssignment: false }],
+      "no-unused-expressions": ["error", { enforceForJSX: true }],
+      "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+      "no-useless-call": "error",
+      "no-useless-computed-key": ["error", { enforceForClassMembers: true }],
+      "no-useless-concat": "error",
+      "no-useless-constructor": "error",
+      "no-useless-rename": "error",
+      "no-useless-return": "error",
+      "no-var": "error",
+      "no-warning-comments": ["error", { terms: ["todo"] }],
+      "object-shorthand": ["error", "always"],
+      "one-var": ["error", "never"],
+      "operator-assignment": ["error", "always"],
+      "prefer-arrow-callback": "error",
+      "prefer-const": [
+        "error",
+        { destructuring: "any", ignoreReadBeforeAssign: false },
+      ],
+      "prefer-destructuring": "error",
+      "prefer-exponentiation-operator": "error",
+      "prefer-numeric-literals": "error",
+      "prefer-object-has-own": "error",
+      "prefer-object-spread": "error",
+      "prefer-promise-reject-errors": "error",
+      "prefer-regex-literals": ["error", { disallowRedundantWrapping: true }],
+      "prefer-rest-params": "error",
+      "prefer-spread": "error",
+      "prefer-template": "error",
+      radix: "error",
+      "require-await": "error",
+      "require-unicode-regexp": "error",
+      "symbol-description": "error",
+      yoda: "error",
+      "line-comment-position": ["error", { position: "above" }],
+      indent: "off",
+      "newline-before-return": "error",
+      "no-undef": "error",
+      "padded-blocks": ["error", "never"],
+      "padding-line-between-statements": [
+        "error",
+        {
+          blankLine: "always",
+          prev: "*",
+          next: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+        },
+        {
+          blankLine: "always",
+          prev: [
+            "break",
+            "case",
+            "cjs-export",
+            "class",
+            "continue",
+            "do",
+            "if",
+            "switch",
+            "try",
+            "while",
+            "return",
+          ],
+          next: "*",
+        },
+      ],
+      quotes: [
+        "error",
+        "double",
+        { avoidEscape: true, allowTemplateLiterals: true },
+      ],
+      "space-before-blocks": "error",
+      semi: ["error", "never"],
+
+      // Extra rules
+      "react-hooks/rules-of-hooks": "error",
+      "react-hooks/exhaustive-deps": "off",
+      "react/no-unescaped-entities": ["error", { forbid: [">", "}"] }],
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "react/jsx-uses-vars": "error",
+      "react/jsx-uses-react": "off",
+    },
+  },
+])

package.json

@@ -9,7 +9,8 @@
     "socket": "node ./socket/index.js",
     "all": "npm run build && concurrently --kill-others \"npm run start\" \"npm run socket\"",
     "all-dev": "concurrently --kill-others \"npm run dev\" \"npm run socket\"",
-    "lint": "next lint"
+    "lint": "eslint .",
+    "next:lint": "next lint"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -26,10 +27,10 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "eslint": "^8",
+    "eslint": "^9.36.0",
-    "eslint-config-next": "14.1.0",
+    "eslint-config-next": "^15.5.4",
     "postcss": "^8",
-    "prettier-plugin-tailwindcss": "^0.5.11",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "tailwindcss": "^3.3.0"
   }
 }

rahoot.code-workspace

@@ -1,55 +0,0 @@
-{
-  "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/index.js

@@ -52,6 +52,7 @@ io.on("connection", (socket) => {
 
   socket.on("disconnect", () => {
     console.log(`user disconnected ${socket.id}`)
+
     if (gameState.manager === socket.id) {
       console.log("Reset game")
       io.to(gameState.room).emit("game:reset")

socket/roles/manager.js

@@ -8,22 +8,24 @@ const Manager = {
   createRoom: (game, io, socket, password) => {
     if (game.password !== password) {
       io.to(socket.id).emit("game:errorMessage", "Bad Password")
+
       return
     }
 
     if (game.manager || game.room) {
       io.to(socket.id).emit("game:errorMessage", "Already manager")
+
       return
     }
 
-    let roomInvite = generateRoomId()
+    const roomInvite = generateRoomId()
     game.room = roomInvite
     game.manager = socket.id
 
     socket.join(roomInvite)
     io.to(socket.id).emit("manager:inviteCode", roomInvite)
 
-    console.log("New room created: " + roomInvite)
+    console.log(`New room created: ${roomInvite}`)
   },
 
   kickPlayer: (game, io, socket, playerId) => {
@@ -75,7 +77,7 @@ const Manager = {
       return
     }
 
-    game.currentQuestion++
+    game.currentQuestion += 1
     startRound(game, io, socket)
   },
 
@@ -101,7 +103,9 @@ const Manager = {
         },
       })
 
+      // eslint-disable-next-line no-param-reassign
       game = deepClone(GAME_STATE_INIT)
+
       return
     }
 

socket/roles/player.js

@@ -8,11 +8,13 @@ const Player = {
       await inviteCodeValidator.validate(roomId)
     } catch (error) {
       socket.emit("game:errorMessage", error.errors[0])
+
       return
     }
 
     if (!game.room || roomId !== game.room) {
       socket.emit("game:errorMessage", "Room not found")
+
       return
     }
 
@@ -24,21 +26,25 @@ const Player = {
       await usernameValidator.validate(player.username)
     } catch (error) {
       socket.emit("game:errorMessage", error.errors[0])
+
       return
     }
 
     if (!game.room || player.room !== game.room) {
       socket.emit("game:errorMessage", "Room not found")
+
       return
     }
 
     if (game.players.find((p) => p.username === player.username)) {
       socket.emit("game:errorMessage", "Username already exists")
+
       return
     }
 
     if (game.started) {
       socket.emit("game:errorMessage", "Game already started")
+
       return
     }
 
@@ -46,7 +52,7 @@ const Player = {
 
     socket.join(player.room)
 
-    let playerData = {
+    const playerData = {
       username: player.username,
       room: player.room,
       id: socket.id,
@@ -64,6 +70,7 @@ const Player = {
 
   selectedAnswer: (game, io, socket, answerKey) => {
     const player = game.players.find((player) => player.id === socket.id)
+
     const question = game.questions[game.currentQuestion]
 
     if (!player) {

socket/utils/cooldown.js

@@ -1,5 +1,5 @@
-let cooldownTimeout
+let cooldownTimeout = null
-let cooldownResolve
+let cooldownResolve = null
 
 export const abortCooldown = () => {
   clearInterval(cooldownTimeout)
@@ -20,10 +20,11 @@ export const cooldown = (ms, io, room) => {
         clearInterval(cooldownTimeout)
         resolve()
       }
+
       io.to(room).emit("game:cooldown", count)
       count -= 1
     }, 1000)
   })
 }
 
-export const sleep = (sec) => new Promise((r) => setTimeout(r, sec * 1000))
+export const sleep = (sec) => new Promise((r) => void setTimeout(r, sec * 1000))

socket/utils/deepClone.js

@@ -9,7 +9,7 @@ const deepClone = (obj) => {
 
   const clonedObj = {}
   for (const key in obj) {
-    if (obj.hasOwnProperty(key)) {
+    if (Object.hasOwn(obj, key)) {
       clonedObj[key] = deepClone(obj[key])
     }
   }

socket/utils/generateRoomId.js

@@ -3,7 +3,7 @@ const generateRoomId = (length = 6) => {
   const characters = "0123456789"
   const charactersLength = characters.length
 
-  for (let i = 0; i < length; i++) {
+  for (let i = 0; i < length; i += 1) {
     const randomIndex = Math.floor(Math.random() * charactersLength)
     result += characters.charAt(randomIndex)
   }

socket/utils/round.js

@@ -1,9 +1,11 @@
 import { cooldown, sleep } from "./cooldown.js"
 
-export const startRound = async (game, io, socket) => {
+export const startRound = async (game, io) => {
   const question = game.questions[game.currentQuestion]
 
-  if (!game.started) return
+  if (!game.started) {
+    return
+  }
 
   io.to(game.room).emit("game:updateQuestion", {
     current: game.currentQuestion + 1,
@@ -20,7 +22,9 @@ export const startRound = async (game, io, socket) => {
 
   await sleep(2)
 
-  if (!game.started) return
+  if (!game.started) {
+    return
+  }
 
   io.to(game.room).emit("game:status", {
     name: "SHOW_QUESTION",
@@ -33,7 +37,9 @@ export const startRound = async (game, io, socket) => {
 
   await sleep(question.cooldown)
 
-  if (!game.started) return
+  if (!game.started) {
+    return
+  }
 
   game.roundStartTime = Date.now()
 
@@ -50,31 +56,35 @@ export const startRound = async (game, io, socket) => {
 
   await cooldown(question.time, io, game.room)
 
-  if (!game.started) return
+  if (!game.started) {
+    return
+  }
 
   game.players.map(async (player) => {
-    let playerAnswer = await game.playersAnswer.find((p) => p.id === player.id)
+    const playerAnswer = await game.playersAnswer.find(
+      (p) => p.id === player.id,
+    )
 
-    let isCorrect = playerAnswer
+    const isCorrect = playerAnswer
       ? playerAnswer.answer === question.solution
       : false
 
-    let points =
+    const points =
       (isCorrect && Math.round(playerAnswer && playerAnswer.points)) || 0
 
     player.points += points
 
-    let sortPlayers = game.players.sort((a, b) => b.points - a.points)
+    const sortPlayers = game.players.sort((a, b) => b.points - a.points)
 
-    let rank = sortPlayers.findIndex((p) => p.id === player.id) + 1
+    const rank = sortPlayers.findIndex((p) => p.id === player.id) + 1
-    let aheadPlayer = sortPlayers[rank - 2]
+    const aheadPlayer = sortPlayers[rank - 2]
 
     io.to(player.id).emit("game:status", {
       name: "SHOW_RESULT",
       data: {
         correct: isCorrect,
         message: isCorrect ? "Nice !" : "Too bad",
-        points: points,
+        points,
         myPoints: player.points,
         rank,
         aheadOfMe: aheadPlayer ? aheadPlayer.username : null,
@@ -82,7 +92,7 @@ export const startRound = async (game, io, socket) => {
     })
   })
 
-  let totalType = {}
+  const totalType = {}
 
   game.playersAnswer.forEach(({ answer }) => {
     totalType[answer] = (totalType[answer] || 0) + 1

src/components/AnswerButton.jsx

@@ -1,5 +1,4 @@
 import clsx from "clsx"
-import Triangle from "./icons/Triangle"
 
 export default function AnswerButton({
   className,

src/components/Loader.jsx

@@ -1,6 +1,6 @@
 import loader from "@/assets/loader.svg"
 import Image from "next/image"
 
-export default function Loader({ ...otherProps }) {
+export default function Loader() {
-  return <Image src={loader} />
+  return <Image alt="loader" src={loader} />
 }

src/components/ManagerPassword.jsx

@@ -1,15 +1,13 @@
-import Image from "next/image"
-import { usePlayerContext } from "@/context/player"
-import Form from "@/components/Form"
-import Button from "@/components/Button"
-import Input from "@/components/Input"
-import { useEffect, useState } from "react"
-import { socket } from "@/context/socket"
 import logo from "@/assets/logo.svg"
+import Button from "@/components/Button"
+import Form from "@/components/Form"
+import Input from "@/components/Input"
+import { socket } from "@/context/socket"
+import Image from "next/image"
+import { useEffect, useState } from "react"
 import toast from "react-hot-toast"
 
 export default function ManagerPassword() {
-  const [loading, setLoading] = useState(false)
   const [password, setPassword] = useState("")
 
   const handleCreate = () => {

src/components/game/GameWrapper.jsx

@@ -1,10 +1,10 @@
-import Image from "next/image"
-import Button from "@/components/Button"
 import background from "@/assets/background.webp"
+import Button from "@/components/Button"
 import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
-import { useEffect, useState } from "react"
+import Image from "next/image"
 import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
 
 export default function GameWrapper({ children, textNext, onNext, manager }) {
   const { socket } = useSocketContext()
@@ -66,9 +66,9 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
 
       {!manager && (
         <div className="z-50 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>
+          <p className="text-gray-800">{Boolean(player) && player.username}</p>
           <div className="rounded-sm bg-gray-800 px-3 py-1 text-lg">
-            {!!player && player.points}
+            {Boolean(player) && player.points}
           </div>
         </div>
       )}

src/components/game/join/Room.jsx

@@ -1,12 +1,12 @@
-import { usePlayerContext } from "@/context/player"
-import Form from "@/components/Form"
 import Button from "@/components/Button"
+import Form from "@/components/Form"
 import Input from "@/components/Input"
-import { useEffect, useState } from "react"
+import { usePlayerContext } from "@/context/player"
 import { socket } from "@/context/socket"
+import { useEffect, useState } from "react"
 
 export default function Room() {
-  const { player, dispatch } = usePlayerContext()
+  const { dispatch } = usePlayerContext()
   const [roomId, setRoomId] = useState("")
 
   const handleLogin = () => {

src/components/game/join/Username.jsx

@@ -1,10 +1,10 @@
-import { usePlayerContext } from "@/context/player"
-import Form from "@/components/Form"
 import Button from "@/components/Button"
+import Form from "@/components/Form"
 import Input from "@/components/Input"
-import { useEffect, useState } from "react"
+import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
 import { useRouter } from "next/router"
+import { useEffect, useState } from "react"
 
 export default function Username() {
   const { socket } = useSocketContext()
@@ -13,7 +13,7 @@ export default function Username() {
   const [username, setUsername] = useState("")
 
   const handleJoin = () => {
-    socket.emit("player:join", { username: username, room: player.room })
+    socket.emit("player:join", { username, room: player.room })
   }
 
   const handleKeyDown = (event) => {

src/components/game/states/Answers.jsx

@@ -1,7 +1,3 @@
-import AnswerButton from "../../AnswerButton"
-import { useSocketContext } from "@/context/socket"
-import { useEffect, useRef, useState } from "react"
-import clsx from "clsx"
 import {
   ANSWERS_COLORS,
   ANSWERS_ICONS,
@@ -9,8 +5,12 @@ import {
   SFX_ANSWERS_SOUND,
   SFX_RESULTS_SOUND,
 } from "@/constants"
-import useSound from "use-sound"
 import { usePlayerContext } from "@/context/player"
+import { useSocketContext } from "@/context/socket"
+import clsx from "clsx"
+import { useEffect, useState } from "react"
+import useSound from "use-sound"
+import AnswerButton from "../../AnswerButton"
 
 const calculatePercentages = (objectResponses) => {
   const keys = Object.keys(objectResponses)
@@ -25,10 +25,10 @@ const calculatePercentages = (objectResponses) => {
     0,
   )
 
-  let result = {}
+  const result = {}
 
-  keys.map((key) => {
+  keys.forEach((key) => {
-    result[key] = ((objectResponses[key] / totalSum) * 100).toFixed() + "%"
+    result[key] = `${((objectResponses[key] / totalSum) * 100).toFixed()}%`
   })
 
   return result
@@ -72,6 +72,7 @@ export default function Answers({
   useEffect(() => {
     if (!responses) {
       playMusic()
+
       return
     }
 
@@ -87,11 +88,12 @@ export default function Answers({
     }
   }, [isPlaying])
 
-  useEffect(() => {
+  useEffect(
-    return () => {
+    () => () => {
       stopMusic()
-    }
+    },
-  }, [playMusic, stopMusic])
+    [playMusic, stopMusic],
+  )
 
   useEffect(() => {
     socket.on("game:cooldown", (sec) => {
@@ -121,8 +123,12 @@ export default function Answers({
           {question}
         </h2>
 
-        {!!image && !responses && (
+        {Boolean(image) && !responses && (
-          <img src={image} className="h-48 max-h-60 w-auto rounded-md" />
+          <img
+            alt={question}
+            src={image}
+            className="h-48 max-h-60 w-auto rounded-md"
+          />
         )}
 
         {responses && (
@@ -156,7 +162,9 @@ export default function Answers({
             </div>
             <div className="flex flex-col items-center rounded-full bg-black/40 px-4 text-lg font-bold">
               <span className="translate-y-1 text-sm">Answers</span>
-              <span>{totalAnswer}/{totalPlayer}</span>
+              <span>
+                {totalAnswer}/{totalPlayer}
+              </span>
             </div>
           </div>
         )}

src/components/game/states/Podium.jsx

@@ -1,4 +1,3 @@
-import Loader from "@/components/Loader"
 import {
   SFX_PODIUM_FIRST,
   SFX_PODIUM_SECOND,
@@ -34,19 +33,27 @@ export default function Podium({ data: { subject, top } }) {
 
   useEffect(() => {
     console.log(apparition)
+
     switch (apparition) {
       case 4:
         sfxRoolStop()
         sfxFirst()
+
         break
+
       case 3:
         sfxRool()
+
         break
+
       case 2:
         sfxSecond()
+
         break
+
       case 1:
         sfxtThree()
+
         break
     }
   }, [apparition, sfxFirst, sfxSecond, sfxtThree, sfxRool])
@@ -54,17 +61,21 @@ export default function Podium({ data: { subject, top } }) {
   useEffect(() => {
     if (top.length < 3) {
       setApparition(4)
+
       return
     }
 
     const interval = setInterval(() => {
       if (apparition > 4) {
         clearInterval(interval)
+
         return
       }
+
       setApparition((value) => value + 1)
     }, 2000)
 
+    // eslint-disable-next-line consistent-return
     return () => clearInterval(interval)
   }, [apparition])
 

src/components/game/states/Question.jsx

@@ -1,5 +1,5 @@
 import { SFX_SHOW_SOUND } from "@/constants"
-import { useEffect, useRef } from "react"
+import { useEffect } from "react"
 import useSound from "use-sound"
 
 export default function Question({ data: { question, image, cooldown } }) {
@@ -16,8 +16,12 @@ export default function Question({ data: { question, image, cooldown } }) {
           {question}
         </h2>
 
-        {!!image && (
+        {Boolean(image) && (
-          <img src={image} className="h-48 max-h-60 w-auto rounded-md" />
+          <img
+            alt={question}
+            src={image}
+            className="h-48 max-h-60 w-auto rounded-md"
+          />
         )}
       </div>
       <div

src/components/game/states/Result.jsx

@@ -6,7 +6,7 @@ import { useEffect } from "react"
 import useSound from "use-sound"
 
 export default function Result({
-  data: { correct, message, points, myPoints, totalPlayer, rank, aheadOfMe },
+  data: { correct, message, points, myPoints, rank, aheadOfMe },
 }) {
   const { dispatch } = usePlayerContext()
 
@@ -34,7 +34,7 @@ export default function Result({
         {message}
       </h2>
       <p className="mt-1 text-xl font-bold text-white drop-shadow-lg">
-        {`You are top ${rank}` + (aheadOfMe ? ", behind " + aheadOfMe : "")}
+        {`You are top ${rank}${aheadOfMe ? `, behind ${aheadOfMe}` : ""}`}
       </p>
       {correct && (
         <span className="mt-2 rounded bg-black/40 px-4 py-2 text-2xl font-bold text-white drop-shadow-lg">

src/components/icons/Pentagon.jsx

@@ -1,6 +1,7 @@
 export default function Pentagon({ className, fill, stroke }) {
   return (
     <svg
+      className={className}
       fill={fill}
       height="800px"
       width="800px"

src/context/player.jsx

@@ -6,6 +6,7 @@ export function playerReducer(state, action) {
   switch (action.type) {
     case "JOIN":
       return { player: { ...state.player, room: action.payload } }
+
     case "LOGIN":
       return {
         player: {
@@ -14,10 +15,13 @@ export function playerReducer(state, action) {
           points: 0,
         },
       }
+
     case "UPDATE":
       return { player: { ...state.player, ...action.payload } }
+
     case "LOGOUT":
       return { player: null }
+
     default:
       return state
   }

src/context/socket.jsx

@@ -8,11 +8,9 @@ export const socket = io(WEBSOCKET_PUBLIC_URL, {
 
 export const SocketContext = createContext()
 
-export const SocketContextProvider = ({ children }) => {
+export const SocketContextProvider = ({ children }) => (
-  return (
+  <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
-    <SocketContext.Provider value={socket}>{children}</SocketContext.Provider>
+)
-  )
-}
 
 export function useSocketContext() {
   const context = useContext(SocketContext)

src/hook/useScreenSize.js

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react"
+import { useEffect, useState } from "react"
 
 const useScreenSize = () => {
   const [screenSize, setScreenSize] = useState({
@@ -15,6 +15,7 @@ const useScreenSize = () => {
     }
 
     window.addEventListener("resize", handleResize)
+
     return () => {
       window.removeEventListener("resize", handleResize)
     }

src/pages/_app.js

@@ -3,7 +3,7 @@ import { PlayerContextProvider } from "@/context/player"
 import { SocketContextProvider } from "@/context/socket"
 import "@/styles/globals.css"
 import clsx from "clsx"
-import { Montserrat, Plaster } from "next/font/google"
+import { Montserrat } from "next/font/google"
 import Head from "next/head"
 
 const montserrat = Montserrat({ subsets: ["latin"] })

src/pages/game.jsx

@@ -24,7 +24,7 @@ export default function Game() {
     socket.on("game:status", (status) => {
       setState({
         ...state,
-        status: status,
+        status,
         question: {
           ...state.question,
           current: status.question,

src/pages/index.js

@@ -1,19 +1,14 @@
-import Image from "next/image"
-import { Montserrat } from "next/font/google"
-import Form from "@/components/Form"
-import Button from "@/components/Button"
-import Input from "@/components/Input"
 import logo from "@/assets/logo.svg"
-import { useEffect, useState } from "react"
-import Loader from "@/components/Loader"
-import { usePlayerContext } from "@/context/player"
 import Room from "@/components/game/join/Room"
 import Username from "@/components/game/join/Username"
+import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
+import Image from "next/image"
+import { useEffect } from "react"
 import toast from "react-hot-toast"
 
 export default function Home() {
-  const { player, dispatch } = usePlayerContext()
+  const { player } = usePlayerContext()
   const { socket } = useSocketContext()
 
   useEffect(() => {
@@ -24,7 +19,7 @@ export default function Home() {
     return () => {
       socket.off("game:errorMessage")
     }
-  }, [])
+  }, [socket])
 
   return (
     <section className="relative flex min-h-screen flex-col items-center justify-center">

src/pages/manager.jsx

@@ -1,10 +1,7 @@
-import Button from "@/components/Button"
 import GameWrapper from "@/components/game/GameWrapper"
 import ManagerPassword from "@/components/ManagerPassword"
 import { GAME_STATES, GAME_STATE_COMPONENTS_MANAGER } from "@/constants"
-import { usePlayerContext } from "@/context/player"
 import { useSocketContext } from "@/context/socket"
-import { useRouter } from "next/router"
 import { createElement, useEffect, useState } from "react"
 
 export default function Manager() {
@@ -23,7 +20,7 @@ export default function Manager() {
     socket.on("game:status", (status) => {
       setState({
         ...state,
-        status: status,
+        status,
         question: {
           ...state.question,
           current: status.question,
@@ -39,7 +36,7 @@ export default function Manager() {
           ...state.status,
           data: {
             ...state.status.data,
-            inviteCode: inviteCode,
+            inviteCode,
           },
         },
       })
@@ -51,28 +48,28 @@ export default function Manager() {
     }
   }, [state])
 
-  const handleCreate = () => {
-    socket.emit("manager:createRoom")
-  }
-
   const handleSkip = () => {
     setNextText("Skip")
 
     switch (state.status.name) {
       case "SHOW_ROOM":
         socket.emit("manager:startGame")
+
         break
 
       case "SELECT_ANSWER":
         socket.emit("manager:abortQuiz")
+
         break
 
       case "SHOW_RESPONSES":
         socket.emit("manager:showLeaderboard")
+
         break
 
       case "SHOW_LEADERBOARD":
         socket.emit("manager:nextQuestion")
+
         break
     }
   }

tailwind.config.js

@@ -18,7 +18,7 @@ module.exports = {
     "grid-cols-3",
     "grid-cols-2",
     {
-      pattern: /bg-(red|blue|yellow|green)/,
+      pattern: /bg-(red|blue|yellow|green)/u,
     },
   ],
   plugins: [],