randyjc/Rahoot
1
0
Fork 0
mirror of https://github.com/randyjc/Rahoot.git synced 2026-03-13 20:15:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix EsLint config & update packages

Browse Source
This commit is contained in:
Ralex
2025-09-28 12:58:51 +02:00
parent dd841c813e
commit 89c39fac52
33 changed files with 2416 additions and 1641 deletions
Download Patch File Download Diff File Expand all files Collapse all files

245
.eslintrc.json
View File

@@ -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"
}
}
}

11
.vscode/extensions.json vendored Normal file
View File

@@ -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"
]
}

19
.vscode/settings.json vendored Normal file
View File

@@ -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"
]
}

223
eslint.config.mjs Normal file
View File

@@ -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",
},
},
])

3268
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
package.json
View File

@@ -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-config-next": "14.1.0",
"eslint": "^9.36.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"
}
}

55
rahoot.code-workspace
View File

@@ -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"
}
}

1
socket/index.js
View File

@@ -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")

10
socket/roles/manager.js
View File

@@ -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
}

9
socket/roles/player.js
View File

@@ -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) {

7
socket/utils/cooldown.js
View File

@@ -1,5 +1,5 @@
let cooldownTimeout
let cooldownResolve
let cooldownTimeout = null
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))

2
socket/utils/deepClone.js
View File

@@ -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])
}
}

2
socket/utils/generateRoomId.js
View File

@@ -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)
}

36
socket/utils/round.js
View File

@@ -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
let aheadPlayer = sortPlayers[rank - 2]
const rank = sortPlayers.findIndex((p) => p.id === player.id) + 1
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

1
src/components/AnswerButton.jsx
View File

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

4
src/components/Loader.jsx
View File

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

14
src/components/ManagerPassword.jsx
View File

@@ -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 = () => {

10
src/components/game/GameWrapper.jsx
View File

@@ -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>
)}

8
src/components/game/join/Room.jsx
View File

@@ -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 = () => {

8
src/components/game/join/Username.jsx
View File

@@ -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) => {

38
src/components/game/states/Answers.jsx
View File

@@ -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) => {
result[key] = ((objectResponses[key] / totalSum) * 100).toFixed() + "%"
keys.forEach((key) => {
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(() => {
return () => {
useEffect(
() => () => {
stopMusic()
}
}, [playMusic, stopMusic])
},
[playMusic, stopMusic],
)
useEffect(() => {
socket.on("game:cooldown", (sec) => {
@@ -121,8 +123,12 @@ export default function Answers({
{question}
</h2>
{!!image && !responses && (
<img src={image} className="h-48 max-h-60 w-auto rounded-md" />
{Boolean(image) && !responses && (
<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>
)}

13
src/components/game/states/Podium.jsx
View File

@@ -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])

10
src/components/game/states/Question.jsx
View File

@@ -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 && (
<img src={image} className="h-48 max-h-60 w-auto rounded-md" />
{Boolean(image) && (
<img
alt={question}
src={image}
className="h-48 max-h-60 w-auto rounded-md"
/>
)}
</div>
<div

4
src/components/game/states/Result.jsx
View File

@@ -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">

1
src/components/icons/Pentagon.jsx
View File

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

4
src/context/player.jsx
View File

@@ -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
}

4
src/context/socket.jsx
View File

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

3
src/hook/useScreenSize.js
View File

@@ -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)
}

2
src/pages/_app.js
View File

@@ -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"] })

2
src/pages/game.jsx
View File

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

15
src/pages/index.js
View File

@@ -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">

15
src/pages/manager.jsx
View File

@@ -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
}
}

2
tailwind.config.js
View File

@@ -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: [],