bug solution for round color selection

playwright.config.ts

@@ -69,11 +69,6 @@ export default defineConfig({
 	],
 
 	/* Run your local dev server before starting the tests */
-	// webServer: {
-	//   command: 'npm run start',
-	//   url: 'http://127.0.0.1:3000',
-	//   reuseExistingServer: !process.env.CI,
-	// },
 
 	webServer: {
 		command: "npm run dev",

src/components/Round.tsx

@@ -4,7 +4,7 @@ import Drawing from "./experimentComponents/Drawing";
 import BagHolder from "./experimentComponents/BagHolder";
 
 import { Round as RoundT } from "@prisma/client";
-import { Drawing2T, DrawingT, Phase, SubTypeRound } from "@/utilities/types";
+import { DrawingT, Phase, SubTypeRound } from "@/utilities/types";
 import { getDiceText } from "@/utilities/functions";
 import RoundBottom from "./experimentComponents/RoundBottom";
 import BagHolder2 from "./experimentComponents/BagHolder2";
@@ -66,7 +66,7 @@ function Round({
 	);
 
 	const roundData = useRef<Partial<RoundT>>({
-		is_blue: type === "bayesian" ? startingColor === "blue" : undefined,
+		is_blue: startingColor === "blue",
 	});
 	const [subPhase, setSubPhase] = useState<"drawing" | "input" | "result">(
 		"drawing",
@@ -89,11 +89,14 @@ function Round({
 		}
 	}
 
-	function endDrawing(drawing: DrawingT | Drawing2T) {
-		roundData.current = {
-			...roundData.current,
-			...drawing,
-		};
+	function endDrawing(drawing?: DrawingT) {
+		if (drawing && "first_draw_blue" in drawing) {
+			roundData.current = {
+				...roundData.current,
+				...drawing,
+			};
+		}
+
 		setSubPhase("input");
 	}
 
@@ -114,28 +117,30 @@ function Round({
 			round_parameter: roundParameters[currentRound],
 		};
 		console.log(lastRound);
+		console.log(roundParameters[currentRound]);
 		generateNewRound(lastRound);
 		pointFunction((p: number) => p + pointsForCurrentRound);
 
 		if (currentRound < numberOfRounds - 1) {
+			let newColor: "blue" | "red";
+
 			if (type === "bayesian") {
 				const newBag =
 					Math.random() < priors[0] / (priors[0] + priors[1]) ? "blue" : "red";
-				setCurrentColor(newBag);
-				setSubPhase("drawing");
-				roundData.current = {
-					...roundData.current,
-					is_blue: newBag === "blue" ? true : false,
-				};
+				newColor = newBag;
 			} else {
 				const newBall =
-					Math.random() < roundParameters[currentRound] / 100 ? "blue" : "red";
-				setCurrentColor(newBall);
-				setSubPhase("drawing");
-				roundData.current = {
-					...roundData.current,
-				};
+					Math.random() < roundParameters[currentRound + 1] / 100
+						? "blue"
+						: "red";
+				newColor = newBall;
 			}
+			setCurrentColor(newColor);
+			setSubPhase("drawing");
+			roundData.current = {
+				...roundData.current,
+				is_blue: newColor === "blue" ? true : false,
+			};
 			roundFunction(currentRound + 1);
 			setRedRatio(50);
 			time.current = new Date();
@@ -169,7 +174,7 @@ function Round({
 						showBalls={subPhase === "drawing"}
 					/>
 					<Drawing2
-						nextFunction={(d) => endDrawing(d)}
+						nextFunction={endDrawing}
 						fullView={subPhase === "drawing"}
 						key={currentRound}
 						result={subPhase === "result"}

src/components/experimentComponents/Drawing2.tsx

@@ -1,13 +1,11 @@
-import { Drawing2T } from "@/utilities/types";
-
 import { Button } from "@mantine/core";
 import { useEffect, useState, useRef } from "react";
 import { useInterval } from "@mantine/hooks";
 import autoAnimate from "@formkit/auto-animate";
 import { QuestionMarkCircled } from "./QuestionBall";
 
 interface drawingProps {
-	nextFunction: (d: Drawing2T) => void;
+	nextFunction: () => void;
 	fullView?: boolean;
 	result?: boolean;
 	isBlue: boolean;
@@ -39,12 +37,6 @@ function Drawing2({
 		parent.current && autoAnimate(parent.current);
 	}, [parent]);
 
-	function nextSubPhase() {
-		nextFunction({
-			is_blue: isBlue,
-		});
-	}
-
 	return (
 		<>
 			{fullView && (
@@ -76,7 +68,7 @@ function Drawing2({
 			{fullView && (
 				<Button
 					size="lg"
-					onClick={nextSubPhase}
+					onClick={nextFunction}
 					style={{ display: "block", margin: "auto" }}
 					disabled={1 > numberOfShownBalls}
 				>

src/components/experimentComponents/RoundBottom.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@mantine/core";
 import Circles from "./Circles";
 import Slider from "./Slider";
-import { Dispatch, SetStateAction, useState } from "react";
+import { Dispatch, SetStateAction } from "react";
 import customStyles from "@/styles/Custom.module.css";
 
 function RoundBottom({

src/utilities/types.ts

@@ -37,10 +37,6 @@ export interface DrawingT {
 	sixth_draw_blue: boolean | null;
 }
 
-export interface Drawing2T {
-	is_blue: boolean;
-}
-
 export type GpsQuestion =
 	| `generalrisk`
 	| `willingnesstoact`

tests/example.spec.ts

@@ -2,13 +2,15 @@ import { test, expect } from "@playwright/test";
 import { randomUUID } from "crypto";
 
 test("the user can enter the website and solve rounds", async ({ page }) => {
+	test.slow();
 	await page.goto("http://localhost:3000");
+	// await page.goto("https://ekonomideneyleri.com.tr/belief/");
 	await page.getByPlaceholder("Ad Soyad").fill("test" + randomUUID());
 	await page.getByText("Deneye başla!").click();
 
 	while (true) {
 		const startExperiment = page.getByText("Deneye Başla!", { exact: true });
-		const nextButton = page.getByText("Sonraki");
+		const nextButton = page.getByText("Sonraki", { exact: true });
 		await expect(startExperiment.or(nextButton).first()).toBeVisible();
 		if (await startExperiment.isVisible()) {
 			await startExperiment.click();
@@ -18,7 +20,7 @@ test("the user can enter the website and solve rounds", async ({ page }) => {
 	}
 
 	while (true) {
-		await page.getByText("Tahmine hazırım!").click();
+		await page.getByText("Tahmine hazırım!").click({ timeout: 10000 });
 		await page.getByText("Karar Verdim").click();
 		await page.getByText("Sonraki tur").click();