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

adding new correct answer visuals

Browse Source
This commit is contained in:
RandyJC
2025-12-09 14:48:45 +01:00
parent ae37df6643
commit 2c284985fa
1 changed files with 76 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
packages/web/src/components/game/states/Responses.tsx
View File

@@ -24,6 +24,7 @@ const Responses = ({
const [percentages, setPercentages] = useState<Record<string, string>>({}) const [percentages, setPercentages] = useState<Record<string, string>>({})
const [isMusicPlaying, setIsMusicPlaying] = useState(false) const [isMusicPlaying, setIsMusicPlaying] = useState(false)
const [isMediaPlaying, setIsMediaPlaying] = useState(false) const [isMediaPlaying, setIsMediaPlaying] = useState(false)
const correctSet = Array.isArray(correct) ? correct : [correct]
const [sfxResults] = useSound(SFX_RESULTS_SOUND, { const [sfxResults] = useSound(SFX_RESULTS_SOUND, {
volume: 0.2, volume: 0.2,
@@ -81,39 +82,87 @@ const Responses = ({
/> />
<div <div
className={`mt-8 grid h-40 w-full max-w-3xl gap-4 px-2`} className={`mt-8 grid h-48 w-full max-w-5xl gap-4 px-2`}
style={{ gridTemplateColumns: `repeat(${answers.length}, 1fr)` }} style={{ gridTemplateColumns: `repeat(${answers.length}, 1fr)` }}
> >
{answers.map((_, key) => ( {answers.map((label, key) => {
<div const votes = responses[key] || 0
key={key} const percent = percentages[key] || "0%"
className={clsx( const isCorrect = correctSet.includes(key)
"flex flex-col justify-end self-end overflow-hidden rounded-md",
ANSWERS_COLORS[key], return (
)} <div
style={{ height: percentages[key] }} key={key}
> className={clsx(
<span className="w-full bg-black/10 text-center text-lg font-bold text-white drop-shadow-md"> "relative flex flex-col justify-end self-end overflow-hidden rounded-md border shadow",
{responses[key] || 0} isCorrect ? "border-green-400 ring-4 ring-green-300/50" : "border-white/40",
</span> ANSWERS_COLORS[key],
</div> )}
))} style={{ height: percent }}
title={label}
>
<div className="absolute inset-0 bg-black/20" />
<div className="relative flex w-full flex-col items-center gap-1 bg-black/25 px-2 py-2 text-white">
<span className="text-sm font-semibold">{label}</span>
<span className="text-lg font-bold">{votes} ({percent})</span>
<span
className={clsx(
"rounded-full px-3 py-0.5 text-xs font-bold uppercase",
isCorrect ? "bg-green-500 text-white" : "bg-black/40 text-white",
)}
>
{isCorrect ? "Correct" : "Not correct"}
</span>
</div>
</div>
)
})}
</div> </div>
</div> </div>
<div> <div>
<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"> <div className="mx-auto mb-6 grid w-full max-w-7xl grid-cols-2 gap-2 px-2 text-lg font-bold text-white md:text-xl">
{answers.map((answer, key) => ( {answers.map((answer, key) => {
<AnswerButton const votes = responses[key] || 0
key={key} const totalVotes = Object.values(responses).reduce(
className={clsx(ANSWERS_COLORS[key], { (acc, val) => acc + (val || 0),
"opacity-65": responses && correct !== key, 0,
})} )
icon={ANSWERS_ICONS[key]} const percent = totalVotes ? Math.round((votes / totalVotes) * 100) : 0
> const isCorrect = correctSet.includes(key)
{answer}
</AnswerButton> return (
))} <div key={key} className="flex flex-col gap-2 rounded-md bg-white/10 p-2 shadow">
<AnswerButton
className={clsx(
ANSWERS_COLORS[key],
"w-full justify-between",
!isCorrect && "opacity-70",
)}
icon={ANSWERS_ICONS[key]}
>
<span>{answer}</span>
<span
className={clsx(
"rounded-full px-3 py-0.5 text-sm font-bold",
isCorrect ? "bg-green-500 text-white" : "bg-black/30 text-white",
)}
>
{isCorrect ? "Correct" : "Wrong"}
</span>
</AnswerButton>
<div className="flex items-center justify-between text-sm text-gray-100">
<span>
Votes: <strong>{votes}</strong>
</span>
<span>
{percent}
%
</span>
</div>
</div>
)
})}
</div> </div>
</div> </div>
</div> </div>