Game setup implementation and question model simplification

src/pages/QuestionCreator/ChoiceQuestionCreator.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { createQuestion } from "../../services/questions-store"
 import { initializeEmptyQuestionFields, splitAndTrim } from "../../utils/utils"
+import { QuestionType } from "../../utils/types"
 
 export const ChoiceQuestionCreator = () => {
 	const [title, setTitle] = useState("")
@@ -10,14 +11,21 @@ export const ChoiceQuestionCreator = () => {
 
 	const createQuestionHandler = () => {
 		const question = {
+			type: QuestionType.CHOICE,
 			title,
-			choices: splitAndTrim(choices),
+			body: splitAndTrim(choices),
 			answers: splitAndTrim(answers),
 			tags: splitAndTrim(tags),
 			...initializeEmptyQuestionFields(),
 		}
 
-		createQuestion(question)
+		createQuestion(question).then((response) => {
+			if (!response.success) {
+				console.error(response.error)
+			} else {
+				console.log(response.data)
+			}
+		})
 	}
 
 	return (

src/pages/QuestionCreator/CompleteQuestionCreator.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { createQuestion } from "../../services/questions-store"
 import { initializeEmptyQuestionFields, splitAndTrim } from "../../utils/utils"
+import { QuestionType } from "../../utils/types"
 
 export const CompleteQuestionCreator = () => {
 	const [title, setTitle] = useState("")
@@ -10,14 +11,21 @@ export const CompleteQuestionCreator = () => {
 
 	const createQuestionHandler = () => {
 		const question = {
+			type: QuestionType.COMPLETE,
 			title,
-			description,
+			body: [description],
 			answers: splitAndTrim(answers, ","),
 			tags: splitAndTrim(tags),
 			...initializeEmptyQuestionFields(),
 		}
 
-		createQuestion(question)
+		createQuestion(question).then((response) => {
+			if (!response.success) {
+				console.error(response.error)
+			} else {
+				console.log(response.data)
+			}
+		})
 	}
 
 	return (

src/pages/QuestionCreator/SimpleQuestionCreator.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react"
 import { createQuestion } from "../../services/questions-store"
 import { initializeEmptyQuestionFields, splitAndTrim } from "../../utils/utils"
+import { QuestionType } from "../../utils/types"
 
 export const SimpleQuestionCreator = () => {
 	const [title, setTitle] = useState("")
@@ -9,13 +10,21 @@ export const SimpleQuestionCreator = () => {
 
 	const createQuestionHandler = () => {
 		const question = {
+			type: QuestionType.SIMPLE,
 			title,
+			body: [],
 			answers: splitAndTrim(answers),
 			tags: splitAndTrim(tags),
 			...initializeEmptyQuestionFields(),
 		}
 
-		createQuestion(question)
+		createQuestion(question).then((response) => {
+			if (!response.success) {
+				console.error(response.error)
+			} else {
+				console.log(response.data)
+			}
+		})
 	}
 
 	return (

src/pages/TestsPage.tsx

@@ -1,13 +1,10 @@
-import { useState } from "react"
-import { findQuestionById } from "../services/questions-store"
+import { findQuestionByTags } from "../services/questions-store"
 
 export const TestsPage = () => {
-	const [questionId, setQuestionId] = useState("")
-
-	function find() {
-		findQuestionById(questionId).then((response) => {
+	function action() {
+		findQuestionByTags(["histoire", "enigme"]).then((response) => {
 			if (response.success) {
-				console.log("Docs nb : " + response.data.length)
+				console.log(response.data)
 			} else {
 				console.error(response.error)
 			}
@@ -16,8 +13,7 @@ export const TestsPage = () => {
 
 	return (
 		<div>
-			<input placeholder="id" onChange={(e) => setQuestionId(e.target.value)} />
-			<button onClick={find}>Find</button>
+			<button onClick={action}>Action</button>
 		</div>
 	)
 }

src/pages/game/LobbyPlayers.tsx

@@ -8,7 +8,7 @@ export const LobbyPlayers = (props: LobbyPlayersProps) => {
 			<h2>Joueurs</h2>
 			<ul>
 				{props.usernames.map((username) => (
-					<li>{username}</li>
+					<li key={username}>{username}</li>
 				))}
 			</ul>
 		</div>

src/pages/game/LobbySettings.tsx

@@ -1,19 +1,36 @@
+import { useState } from "react"
 import { startGame } from "../../services/games-store"
+import { splitAndTrim } from "../../utils/utils"
 
 type LobbySettingsProps = {
 	gameId: string
 }
 
 export const LobbySettings = (props: LobbySettingsProps) => {
-	const startGameHandler = async () => {
-		await startGame(props.gameId)
+	const [tags, setTags] = useState("")
+	const [nbQuestion, setNbQuestions] = useState(10)
+
+	const startGameHandler = () => {
+		startGame(props.gameId, splitAndTrim(tags), nbQuestion).then((response) => {
+			if (!response.success) {
+				console.error(response.error)
+			} else {
+				console.log(response.data)
+			}
+		})
+	}
+
+	const setNbQuestionsHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const value = parseInt(e.target.value)
+		if (!isNaN(value)) setNbQuestions(value)
 	}
 
 	return (
 		<div>
 			<h2>Parametres</h2>
 			<div>Game id : {props.gameId}</div>
-			<input placeholder="Themes" />
+			<input placeholder="Tags" onChange={(e) => setTags(e.target.value)} />
+			<input placeholder="Nombre de questions" type="number" value={nbQuestion} onChange={setNbQuestionsHandler} />
 			<button onClick={startGameHandler}>Commencer</button>
 		</div>
 	)

src/services/games-store.ts

@@ -15,6 +15,7 @@ import { getErrorStoreResponse, getSuccessStoreResponse, initializeEmptyGameData
 import { findDataByQuery } from "./store"
 import { Game, GameSchema, StoreResponse, UserInfo } from "../utils/types"
 import { validateStoreResponseLength } from "./validation"
+import { findQuestionByTags } from "./questions-store"
 
 const gamesRef = collection(db, "games")
 
@@ -80,9 +81,18 @@ export async function existsGameById(id: string) {
  * @param id
  * @returns
  */
-export async function startGame(id: string) {
-	// TODO: Add setup logic
-	const response = await updateGame(id, { ["isSetup"]: true })
+export async function startGame(id: string, tags: string[], nbQuestions: number) {
+	const questionResponse = await findQuestionByTags(tags, nbQuestions)
+	if (!questionResponse.success) {
+		return questionResponse
+	}
+
+	const data = {
+		["isSetup"]: true,
+		["questions"]: questionResponse.data,
+	}
+
+	const response = await updateGame(id, data)
 	return response
 }
 

src/services/questions-store.ts

@@ -1,6 +1,6 @@
 import { Query, addDoc, collection, documentId, limit, query, where } from "firebase/firestore"
 import { db } from "../config/firebase"
-import { Question, QuestionSchema, StoreResponse } from "../utils/types"
+import { Question, QuestionData, QuestionSchema, StoreResponse } from "../utils/types"
 import { isValideQuestion } from "./validation"
 import { findDataByQuery } from "./store"
 import { getErrorStoreResponse, getSuccessStoreResponse } from "../utils/utils"
@@ -25,7 +25,7 @@ export async function findQuestionById(questionId: string) {
 	return response
 }
 
-export async function createQuestion(question: Question) {
+export async function createQuestion(question: QuestionData) {
 	if (!isValideQuestion(question)) {
 		return getErrorStoreResponse("Not valide question")
 	}

src/services/validation.ts

@@ -1,7 +1,7 @@
-import { Question, QuestionSchema, StoreResponse } from "../utils/types"
+import { QuestionData, QuestionDataSchema, StoreResponse } from "../utils/types"
 
-export function isValideQuestion(question: Question) {
-	const questionParsed = QuestionSchema.safeParse(question)
+export function isValideQuestion(question: QuestionData) {
+	const questionParsed = QuestionDataSchema.safeParse(question)
 	if (!questionParsed.success) {
 		console.error(questionParsed.error)
 	}

src/utils/types.ts

@@ -1,8 +1,20 @@
 import { z } from "zod"
 
-// Questions Schemas
-const QuestionBaseSchema = z.object({
+/* Questions Types */
+
+export enum QuestionType {
+	SIMPLE,
+	COMPLETE,
+	CHOICE,
+	IMAGE,
+}
+
+export const QuestionDataSchema = z.object({
 	title: z.string().min(1).max(100),
+	body: z.array(z.string()),
+	answers: z.array(z.string().trim()).min(1).max(10),
+	tags: z.array(z.string()),
+	type: z.nativeEnum(QuestionType),
 	rating: z.object({
 		like: z.number(),
 		dislike: z.number(),
@@ -11,57 +23,22 @@ const QuestionBaseSchema = z.object({
 		win: z.number(),
 		lose: z.number(),
 	}),
-	tags: z.array(z.string()),
-})
-
-export const SimpleQuestionSchema = QuestionBaseSchema.extend({
-	answers: z.array(z.string().trim()).min(1).max(10),
 })
 
-export const CompleteQuestionSchema = QuestionBaseSchema.extend({
-	description: z.string().min(1).max(250),
-	answers: z.array(z.string().trim()).min(1).max(10),
-})
-
-export const ChoiceQuestionSchema = QuestionBaseSchema.extend({
-	choices: z.array(z.string()).min(2).max(10),
-	answers: z.array(z.number().min(0).max(9)).min(1).max(10),
-})
-
-export const ImageQuestionSchema = QuestionBaseSchema.extend({
-	imageUrl: z.string().url().min(1),
-	answers: z.array(z.string().trim()).min(1).max(10),
+export const QuestionSchema = QuestionDataSchema.extend({
+	id: z.string(),
 })
 
-export const QuestionSchema = z.union([
-	SimpleQuestionSchema,
-	CompleteQuestionSchema,
-	ChoiceQuestionSchema,
-	ImageQuestionSchema,
-])
-
-// Questions Types
-export type SimpleQuestion = z.infer<typeof SimpleQuestionSchema>
-export type CompleteQuestion = z.infer<typeof CompleteQuestionSchema>
-export type ChoiceQuestion = z.infer<typeof ChoiceQuestionSchema>
-export type ImageQuestion = z.infer<typeof ImageQuestionSchema>
-
+export type QuestionData = z.infer<typeof QuestionDataSchema>
 export type Question = z.infer<typeof QuestionSchema>
 
-export enum QuestionType {
-	SIMPLE,
-	COMPLETE,
-	CHOICE,
-	IMAGE,
-}
-
 // Games types
 export const GameDataSchema = z.object({
 	name: z.string().toUpperCase().length(4),
 	isSetup: z.boolean(),
 	users: z.record(z.string(), z.string()),
 	tags: z.array(z.string()),
-	questions: z.array(z.string()),
+	questions: z.array(QuestionSchema),
 	questionIndex: z.number(),
 })