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

Add prettierc/workspace config

Browse Source
This commit is contained in:
Ralex91
2024-02-01 19:10:40 +01:00
parent c2db3810ac
commit 6c7f31a6d4
33 changed files with 278 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc
View File

@@ -1,3 +0,0 @@
{
"semi": false
}

9
.prettierrc.json Normal file
View File

@@ -0,0 +1,9 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": false,
"printWidth": 80,
"trailingComma": "all",
"plugins": ["prettier-plugin-tailwindcss"]
}

6
jsconfig.json
View File

@@ -1,7 +1,7 @@
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"]
}
}
"@/*": ["./src/*"],
},
},
}

86
package-lock.json generated
View File

@@ -20,6 +20,7 @@
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.3.0"
}
},
@@ -3671,6 +3672,91 @@
"node": ">= 0.8.0"
}
},
"node_modules/prettier": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
"integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==",
"dev": true,
"peer": true,
"bin": {
"prettier": "bin/prettier.cjs"
},
"engines": {
"node": ">=14"
},
"funding": {
"url": "https://github.com/prettier/prettier?sponsor=1"
}
},
"node_modules/prettier-plugin-tailwindcss": {
"version": "0.5.11",
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.11.tgz",
"integrity": "sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==",
"dev": true,
"engines": {
"node": ">=14.21.3"
},
"peerDependencies": {
"@ianvs/prettier-plugin-sort-imports": "*",
"@prettier/plugin-pug": "*",
"@shopify/prettier-plugin-liquid": "*",
"@trivago/prettier-plugin-sort-imports": "*",
"prettier": "^3.0",
"prettier-plugin-astro": "*",
"prettier-plugin-css-order": "*",
"prettier-plugin-import-sort": "*",
"prettier-plugin-jsdoc": "*",
"prettier-plugin-marko": "*",
"prettier-plugin-organize-attributes": "*",
"prettier-plugin-organize-imports": "*",
"prettier-plugin-style-order": "*",
"prettier-plugin-svelte": "*"
},
"peerDependenciesMeta": {
"@ianvs/prettier-plugin-sort-imports": {
"optional": true
},
"@prettier/plugin-pug": {
"optional": true
},
"@shopify/prettier-plugin-liquid": {
"optional": true
},
"@trivago/prettier-plugin-sort-imports": {
"optional": true
},
"prettier-plugin-astro": {
"optional": true
},
"prettier-plugin-css-order": {
"optional": true
},
"prettier-plugin-import-sort": {
"optional": true
},
"prettier-plugin-jsdoc": {
"optional": true
},
"prettier-plugin-marko": {
"optional": true
},
"prettier-plugin-organize-attributes": {
"optional": true
},
"prettier-plugin-organize-imports": {
"optional": true
},
"prettier-plugin-style-order": {
"optional": true
},
"prettier-plugin-svelte": {
"optional": true
},
"prettier-plugin-twig-melody": {
"optional": true
}
}
},
"node_modules/prop-types": {
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

1
package.json
View File

@@ -21,6 +21,7 @@
"eslint": "^8",
"eslint-config-next": "14.1.0",
"postcss": "^8",
"prettier-plugin-tailwindcss": "^0.5.11",
"tailwindcss": "^3.3.0"
}
}

2
postcss.config.js
View File

@@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
};
}

55
rahoot.code-workspace Normal file
View File

@@ -0,0 +1,55 @@
{
"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"
}
}

3
socket/package.json
View File

@@ -2,6 +2,9 @@
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"start": "node ./src/index.js"
},
"dependencies": {
"socket.io": "^4.7.4"
}

12
socket/src/index.js
View File

@@ -18,28 +18,28 @@ io.on("connection", (socket) => {
console.log(`A user connected ${socket.id}`)
socket.on("player:join", (player) =>
Player.join(gameState, io, socket, player)
Player.join(gameState, io, socket, player),
)
socket.on("manager:createRoom", () =>
Manager.createRoom(gameState, io, socket)
Manager.createRoom(gameState, io, socket),
)
socket.on("manager:kickPlayer", (playerId) =>
Manager.kickPlayer(gameState, socket, io, playerId)
Manager.kickPlayer(gameState, socket, io, playerId),
)
socket.on("manager:startGame", () => Manager.startGame(gameState, io, socket))
socket.on("player:selectedAnswer", (answerKey) =>
Player.selectedAnswer(gameState, io, socket, answerKey)
Player.selectedAnswer(gameState, io, socket, answerKey),
)
socket.on("manager:nextQuestion", () =>
Manager.nextQuestion(gameState, io, socket)
Manager.nextQuestion(gameState, io, socket),
)
socket.on("manager:showLeaderboard", () =>
Manager.showLoaderboard(gameState, io, socket)
Manager.showLoaderboard(gameState, io, socket),
)
socket.on("disconnect", () => {

10
socket/src/utils/round.js
View File

@@ -33,6 +33,16 @@ export const startRound = async (game, io, socket) => {
total: game.questions.length,
})
io.to(game.room).emit("game:status", {
name: "SHOW_PREPARED",
data: {
totalAnswers: game.questions[game.currentQuestion].answers.length,
questionNumber: game.currentQuestion + 1,
},
})
await sleep(4)
io.to(game.room).emit("game:status", {
name: "SHOW_QUESTION",
data: {

14
socket/web.js
View File

@@ -1,14 +0,0 @@
import { Server } from "socket.io"
const io = new Server({
cors: {
origin: "*",
},
})
io.on("connection", (socket) => {
console.log("a user connected")
io.to(socket.id).emit("message", "Hello from server")
})
io.listen(5057)

4
src/components/AnswerButton.jsx
View File

@@ -10,8 +10,8 @@ export default function AnswerButton({
return (
<button
className={clsx(
"text-left px-4 py-6 rounded shadow-inset flex items-center gap-3",
className
"shadow-inset flex items-center gap-3 rounded px-4 py-6 text-left",
className,
)}
{...otherProps}
>

4
src/components/Button.jsx
View File

@@ -4,8 +4,8 @@ export default function Button({ children, className, ...otherProps }) {
return (
<button
className={clsx(
"p-2 bg-primary rounded-md text-white font-semibold text-lg btn-shadow",
className
"btn-shadow rounded-md bg-primary p-2 text-lg font-semibold text-white",
className,
)}
{...otherProps}
>

2
src/components/Form.jsx
View File

@@ -1,6 +1,6 @@
export default function Form({ children }) {
return (
<div className="bg-white rounded-md shadow-sm p-4 z-10 flex-col flex gap-4 w-full max-w-80">
<div className="z-10 flex w-full max-w-80 flex-col gap-4 rounded-md bg-white p-4 shadow-sm">
{children}
</div>
)

4
src/components/Input.jsx
View File

@@ -4,8 +4,8 @@ export default function Input({ className, ...otherProps }) {
return (
<input
className={clsx(
"outline outline-gray-300 outline-2 rounded-sm p-2 font-semibold text-lg",
className
"rounded-sm p-2 text-lg font-semibold outline outline-2 outline-gray-300",
className,
)}
{...otherProps}
/>

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

@@ -19,24 +19,24 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
})
return (
<section className="relative flex justify-between flex-col w-full min-h-screen">
<div className="fixed h-full w-full top-0 left-0 bg-orange-600 opacity-70 -z-10">
<section className="relative flex min-h-screen w-full flex-col justify-between">
<div className="fixed left-0 top-0 -z-10 h-full w-full bg-orange-600 opacity-70">
<Image
className="object-cover h-full w-full opacity-60 pointer-events-none"
className="pointer-events-none h-full w-full object-cover opacity-60"
src={background}
/>
</div>
<div className="p-4 w-full flex justify-between">
<div className="flex w-full justify-between p-4">
{questionState && (
<div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex items-center text-lg p-2">
<div className="shadow-inset flex items-center rounded-md bg-white p-2 px-4 text-lg font-bold text-black">
{`${questionState.current} / ${questionState.total}`}
</div>
)}
{manager && (
<Button
className="bg-white !text-black px-4 self-end"
className="self-end bg-white px-4 !text-black"
onClick={() => onNext()}
>
{textNext}
@@ -47,9 +47,9 @@ export default function GameWrapper({ children, textNext, onNext, manager }) {
{children}
{!manager && (
<div className="bg-white py-2 px-4 flex items-center text-lg justify-between font-bold text-white">
<div className="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>
<div className="bg-gray-800 rounded-sm py-1 px-3 text-lg">
<div className="rounded-sm bg-gray-800 px-3 py-1 text-lg">
{!!player && player.points}
</div>
</div>

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

@@ -16,7 +16,7 @@ export default function Room() {
return (
<>
{loading && (
<div className="absolute w-full h-full z-30 bg-black/40 flex justify-center items-center">
<div className="absolute z-30 flex h-full w-full items-center justify-center bg-black/40">
<Loader />
</div>
)}

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

@@ -26,7 +26,7 @@ export default function Username() {
return (
<>
{loading && (
<div className="absolute w-full h-full z-30 bg-black/40 flex justify-center items-center">
<div className="absolute z-30 flex h-full w-full items-center justify-center bg-black/40">
<Loader />
</div>
)}

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

@@ -27,7 +27,7 @@ const calculatePercentages = (objectResponses) => {
const totalSum = values.reduce(
(accumulator, currentValue) => accumulator + currentValue,
0
0,
)
let result = {}
@@ -67,9 +67,9 @@ export default function Answers({
})
return (
<div className="flex h-full flex-col justify-between flex-1">
<div className="h-full max-w-7xl mx-auto w-full inline-flex flex-col items-center justify-center gap-5 flex-1">
<h2 className="text-white text-2xl md:text-4xl lg:text-5xl font-bold drop-shadow-lg text-center">
<div className="flex h-full flex-1 flex-col justify-between">
<div className="mx-auto inline-flex h-full w-full max-w-7xl flex-1 flex-col items-center justify-center gap-5">
<h2 className="text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
{question}
</h2>
@@ -77,18 +77,18 @@ export default function Answers({
{responses && (
<div
className={`w-full gap-4 grid grid-cols-${answers.length} px-2 max-w-3xl h-40 mt-8`}
className={`grid w-full gap-4 grid-cols-${answers.length} mt-8 h-40 max-w-3xl px-2`}
>
{answers.map((_, key) => (
<div
key={key}
className={clsx(
"flex flex-col rounded-md overflow-hidden self-end justify-end",
answersColors[key]
"flex flex-col justify-end self-end overflow-hidden rounded-md",
answersColors[key],
)}
style={{ height: percentages[key] }}
>
<span className="text-white font-bold drop-shadow-md text-lg bg-black/10 w-full text-center">
<span className="w-full bg-black/10 text-center text-lg font-bold text-white drop-shadow-md">
{responses[key] || 0}
</span>
</div>
@@ -99,19 +99,19 @@ export default function Answers({
<div>
{!responses && (
<div className="max-w-7xl mx-auto mb-4 w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
<div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
<span className="text-sm translate-y-1">Time</span>
<span className="anim-timer">{cooldown}</span>
<div className="mx-auto mb-4 flex w-full max-w-7xl justify-between gap-1 px-2 text-lg font-bold text-white md:text-xl">
<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">Time</span>
<span>{cooldown}</span>
</div>
<div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
<span className="text-sm translate-y-1">Answers</span>
<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}</span>
</div>
</div>
)}
<div className="max-w-7xl mx-auto mb-4 rounded-full w-full grid grid-cols-2 gap-1 font-bold text-white text-lg md:text-xl px-2">
<div className="mx-auto mb-4 grid w-full max-w-7xl grid-cols-2 gap-1 rounded-full px-2 text-lg font-bold text-white md:text-xl">
{answers.map((answer, key) => (
<AnswerButton
key={key}

8
src/components/game/states/Leaderboard.jsx
View File

@@ -1,12 +1,12 @@
export default function Leaderboard({ data: { leaderboard } }) {
return (
<section className="max-w-7xl mx-auto w-full flex-1 flex-col relative items-center justify-center flex px-2">
<h2 className="text-white drop-shadow-md text-5xl font-bold mb-6">
<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="w-full flex-col flex gap-2">
<div className="flex w-full flex-col gap-2">
{leaderboard.map(({ username, points }) => (
<div className="bg-primary rounded-md p-3 flex justify-between w-full font-bold text-white text-2xl">
<div className="flex w-full justify-between rounded-md bg-primary p-3 text-2xl font-bold text-white">
<span className="drop-shadow-md">{username}</span>
<span className="drop-shadow-md">{points}</span>
</div>

31
src/components/game/states/Prepared.jsx
View File

@@ -1,29 +1,26 @@
import Circle from "@/components/icons/Circle"
import CricleCheck from "@/components/icons/CricleCheck"
import CricleXmark from "@/components/icons/CricleXmark"
import Rhombus from "@/components/icons/Rhombus"
import Square from "@/components/icons/Square"
import Triangle from "@/components/icons/Triangle"
import { usePlayerContext } from "@/context/player"
import { useEffect } from "react"
/*{ data: { number, total, question } }*/
export default function Prepared() {
const { dispatch } = usePlayerContext()
export default function Prepared({ data: { totalAnswers, questionNumber } }) {
return (
<section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
<div className="anim-quizz bg-gray-700 p-5 gap-4 rounded-2xl w-80 h-[400px] grid grid-cols-2 shadow-[10px_10px_0_rgba(20,24,29,1)] ">
<div className="button flex justify-center items-center bg-red-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Triangle className="h-14" />
<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-10 text-center text-2xl font-bold text-white drop-shadow-lg md:text-4xl lg:text-5xl">
Question #{questionNumber}
</h2>
<div className="anim-quizz grid h-[300px] w-60 grid-cols-2 gap-4 rounded-2xl bg-gray-700 p-5 md:h-[400px] md:w-80 ">
<div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-red-500">
<Triangle className="h-10 md:h-14" />
</div>
<div className="button flex justify-center items-center bg-blue-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Rhombus className="h-14" />
<div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-blue-500">
<Rhombus className="h-10 md:h-14" />
</div>
<div className="button flex justify-center items-center bg-yellow-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Square className="h-14" />
<div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-yellow-500">
<Square className="h-10 md:h-14" />
</div>
<div className="button flex justify-center items-center bg-green-500 w-full h-full aspect-square shadow-inset rounded-2xl">
<Circle className="h-14" />
<div className="button shadow-inset flex aspect-square h-full w-full items-center justify-center rounded-2xl bg-green-500">
<Circle className="h-10 md:h-14" />
</div>
</div>
</section>

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

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

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

@@ -16,20 +16,20 @@ export default function Result({
}, [])
return (
<section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col anim-show">
<section className="anim-show relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
{correct ? (
<CricleCheck className="max-h-60 aspect-square w-full" />
<CricleCheck className="aspect-square max-h-60 w-full" />
) : (
<CricleXmark className=" max-h-60 aspect-square w-full" />
<CricleXmark className=" aspect-square max-h-60 w-full" />
)}
<h2 className="text-white font-bold text-4xl mt-1 drop-shadow-lg">
<h2 className="mt-1 text-4xl font-bold text-white drop-shadow-lg">
{message}
</h2>
<p className="text-white font-bold text-xl mt-1 drop-shadow-lg">
<p className="mt-1 text-xl font-bold text-white drop-shadow-lg">
{`You are top ${rank}` + (aheadOfMe ? ", behind " + aheadOfMe : "")}
</p>
{correct && (
<span className="py-2 px-4 text-white font-bold text-2xl drop-shadow-lg bg-black/40 rounded mt-2">
<span className="mt-2 rounded bg-black/40 px-4 py-2 text-2xl font-bold text-white drop-shadow-lg">
+{points}
</span>
)}

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

@@ -10,12 +10,12 @@ export default function Start({ data: { text, inviteCode } }) {
})
return (
<section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col px-2">
<div className="py-4 px-6 mb-10 rotate-3 bg-white rounded-md text-6xl font-extrabold">
<section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-2">
<div className="mb-10 rotate-3 rounded-md bg-white px-6 py-4 text-6xl font-extrabold">
{inviteCode}
</div>
<h2 className="text-white font-bold text-4xl drop-shadow-lg mb-4">
<h2 className="mb-4 text-4xl font-bold text-white drop-shadow-lg">
{text}
</h2>
@@ -23,10 +23,10 @@ export default function Start({ data: { text, inviteCode } }) {
{playerList.map((player) => (
<div
key={player.id}
className="py-3 px-4 bg-primary shadow-inset rounded-md text-white font-bold"
className="shadow-inset rounded-md bg-primary px-4 py-3 font-bold text-white"
onClick={() => socket.emit("manager:kickPlayer", player.id)}
>
<span className="drop-shadow-md text-xl hover:line-through cursor-pointer">
<span className="cursor-pointer text-xl drop-shadow-md hover:line-through">
{player.username}
</span>
</div>

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

@@ -2,9 +2,9 @@ import Loader from "@/components/Loader"
export default function Wait({ data: { text } }) {
return (
<section className="max-w-7xl mx-auto w-full flex-1 relative items-center justify-center flex flex-col">
<section className="relative mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center">
<Loader />
<h2 className="text-white font-bold text-4xl mt-5 drop-shadow-lg">
<h2 className="mt-5 text-4xl font-bold text-white drop-shadow-lg">
{text}
</h2>
</section>

31
src/pages/_app.js
View File

@@ -3,22 +3,29 @@ import { SocketContextProvider } from "@/context/socket"
import "@/styles/globals.css"
import clsx from "clsx"
import { Montserrat, Plaster } from "next/font/google"
import Head from "next/head"
const montserrat = Montserrat({ subsets: ["latin"] })
export default function App({ Component, pageProps }) {
return (
<SocketContextProvider>
<PlayerContextProvider>
<main
className={clsx(
"flex flex-col text-base-[8px]",
montserrat.className
)}
>
<Component {...pageProps} />
</main>
</PlayerContextProvider>
</SocketContextProvider>
<>
<Head>
<link rel="shortcut icon" href="/icon.svg" />
<title>Rahoot !</title>
</Head>
<SocketContextProvider>
<PlayerContextProvider>
<main
className={clsx(
"text-base-[8px] flex flex-col",
montserrat.className,
)}
>
<Component {...pageProps} />
</main>
</PlayerContextProvider>
</SocketContextProvider>
</>
)
}

5
src/pages/_document.js
View File

@@ -3,10 +3,7 @@ import { Html, Head, Main, NextScript } from "next/document"
export default function Document() {
return (
<Html lang="en">
<Head>
<link rel="shortcut icon" href="/icon.svg" />
<title>Rahoot !</title>
</Head>
<Head />
<body className="bg-secondary">
<Main />
<NextScript />

2
src/pages/api/hello.js
View File

@@ -1,5 +1,5 @@
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
export default function handler(req, res) {
res.status(200).json({ name: "John Doe" });
res.status(200).json({ name: "John Doe" })
}

27
src/pages/api/socket.js
View File

@@ -1,27 +0,0 @@
import { Server } from "socket.io"
const socketHandler = (req, res) => {
if (!res.socket.server.io) {
const path = "/api/socket"
const httpServer = res.socket.server
//const io = createIOServer(httpServer, path)
const io = new Server(httpServer, {
path: path,
addTrailingSlash: false,
})
res.socket.server.io = io
console.log("SocketIO server started at " + path)
}
res.end()
}
export const config = {
api: {
bodyParser: false,
},
}
export default socketHandler

2
src/pages/game.jsx
View File

@@ -1,6 +1,7 @@
import GameWrapper from "@/components/game/GameWrapper"
import Answers from "@/components/game/states/Answers"
import Leaderboard from "@/components/game/states/Leaderboard"
import Prepared from "@/components/game/states/Prepared"
import Question from "@/components/game/states/Question"
import Result from "@/components/game/states/Result"
import Wait from "@/components/game/states/Wait"
@@ -14,6 +15,7 @@ const gameStateComponent = {
SHOW_QUESTION: Question,
WAIT: Wait,
SHOW_RESULT: Result,
SHOW_PREPARED: Prepared,
}
export default function Game() {

12
src/pages/index.js
View File

@@ -16,19 +16,19 @@ export default function Home() {
const { player } = usePlayerContext()
return (
<section className="min-h-screen relative flex justify-center items-center flex-col">
<div className="absolute w-full h-full overflow-hidden">
<div className="absolute min-w-[75vmin] min-h-[75vmin] -top-[15vmin] -left-[15vmin] bg-primary/15 rounded-full"></div>
<div className="absolute min-w-[75vmin] min-h-[75vmin] -bottom-[15vmin] -right-[15vmin] bg-primary/15 rotate-45"></div>
<section className="relative flex min-h-screen flex-col items-center justify-center">
<div className="absolute h-full w-full overflow-hidden">
<div className="absolute -left-[15vmin] -top-[15vmin] min-h-[75vmin] min-w-[75vmin] rounded-full bg-primary/15"></div>
<div className="absolute -bottom-[15vmin] -right-[15vmin] min-h-[75vmin] min-w-[75vmin] rotate-45 bg-primary/15"></div>
</div>
{loading && (
<div className="absolute w-full h-full z-30 bg-black/40 flex justify-center items-center">
<div className="absolute z-30 flex h-full w-full items-center justify-center bg-black/40">
<Loader />
</div>
)}
<Image src={logo} className="h-32 mb-6" />
<Image src={logo} className="mb-6 h-32" />
{!player ? <Room /> : <Username />}
</section>

6
src/pages/manager.jsx
View File

@@ -18,6 +18,7 @@ const gameStateComponent = {
WAIT: Wait,
SHOW_RESPONSES: Answers,
SHOW_LEADERBOARD: Leaderboard,
SHOW_PREPARED: Prepared,
}
export default function Manager() {
@@ -93,11 +94,10 @@ export default function Manager() {
) : (
<>
<GameWrapper textNext={nextText} onNext={handleSkip} manager>
<Prepared />
{/*gameStateComponent[state.status.name] &&
{gameStateComponent[state.status.name] &&
createElement(gameStateComponent[state.status.name], {
data: state.status.data,
})*/}
})}
</GameWrapper>
</>
)}

8
src/styles/globals.css
View File

@@ -41,13 +41,14 @@
}
.anim-quizz {
animation: quizz 1s ease-out;
animation: quizz 0.8s linear;
transform: perspective(1200px) rotateY(-15deg) rotateX(15deg)
translateZ(100px);
box-shadow: 10px 10px 0 rgba(20, 24, 29, 1);
}
.anim-quizz .button {
animation: quizzButton 1s ease-out;
animation: quizzButton 0.8s ease-out;
}
@keyframes show {
@@ -91,8 +92,9 @@
@keyframes quizz {
0% {
transform: scale(0) perspective(1200px) rotateY(-35deg) rotateX(15deg)
transform: scale(0) perspective(1200px) rotateY(-60deg) rotateX(60deg)
translateZ(100px);
box-shadow: 40px 10px 0 rgba(20, 24, 29, 1);
}
100% {
transform: scale(1) perspective(1200px) rotateY(-15deg) rotateX(15deg)