Jessy/WikiRush
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(lobby): optimistic toggle for search allowed, fixes display always showing blocked

Browse Source
This commit is contained in:
jessy-david-dev
2026-04-15 18:34:02 +02:00
parent 4e03876338
commit 1dcd45930c
1 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/LobbyScreen.tsx
+10 -8
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useState, useEffect } from "react";
import type { Room } from "../api/rooms/route"; import type { Room } from "../api/rooms/route";
type LobbyScreenProps = { type LobbyScreenProps = {
@@ -47,6 +47,8 @@ export function LobbyScreen({
const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false; const isHost = room.players.find((p) => p.id === playerId)?.isHost ?? false;
const [copied, setCopied] = useState(false); const [copied, setCopied] = useState(false);
const [blurred, setBlurred] = useState(true); const [blurred, setBlurred] = useState(true);
const [searchAllowed, setSearchAllowed] = useState(room.searchAllowed);
useEffect(() => { setSearchAllowed(room.searchAllowed); }, [room.searchAllowed]);
function copyCode() { function copyCode() {
navigator.clipboard.writeText(room.code).then(() => { navigator.clipboard.writeText(room.code).then(() => {
@@ -210,14 +212,14 @@ export function LobbyScreen({
</select> </select>
</div> </div>
<button <button
onClick={() => onSetSearchAllowed(!room.searchAllowed)} onClick={() => { const next = !searchAllowed; setSearchAllowed(next); onSetSearchAllowed(next); }}
className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${room.searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`} className={`w-full min-h-11 rounded-xl text-sm font-semibold border transition-colors cursor-pointer flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
> >
<span>🔍 Recherche Ctrl+F</span> <span>🔍 Recherche Ctrl+F</span>
<span <span
className={`text-xs font-bold px-2 py-0.5 rounded-full ${room.searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`} className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
> >
{room.searchAllowed ? "Autorisée" : "Bloquée"} {searchAllowed ? "Autorisée" : "Bloquée"}
</span> </span>
</button> </button>
</div> </div>
@@ -225,13 +227,13 @@ export function LobbyScreen({
{!isHost && ( {!isHost && (
<div <div
className={`w-full min-h-11 rounded-xl text-sm font-semibold border flex items-center justify-between px-4 ${room.searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`} className={`w-full min-h-11 rounded-xl text-sm font-semibold border flex items-center justify-between px-4 ${searchAllowed ? "bg-[#7c3aed]/10 border-[#7c3aed] text-[#a78bfa]" : "bg-[#1a1a1a] border-[#2e2e2e] text-[#888]"}`}
> >
<span>🔍 Recherche Ctrl+F</span> <span>🔍 Recherche Ctrl+F</span>
<span <span
className={`text-xs font-bold px-2 py-0.5 rounded-full ${room.searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`} className={`text-xs font-bold px-2 py-0.5 rounded-full ${searchAllowed ? "bg-[#7c3aed]/30 text-[#a78bfa]" : "bg-[#242424] text-[#555]"}`}
> >
{room.searchAllowed ? "Autorisée" : "Bloquée"} {searchAllowed ? "Autorisée" : "Bloquée"}
</span> </span>
</div> </div>
)} )}