joshuafhiggins/connect4-moderator-observer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 8 Activity

feat: confetti, winner popup, bracket view

Browse Source
This commit is contained in:
Joshua Higgins
2026-03-30 16:53:13 -04:00
Unverified
parent 77724ba260
commit e4fa58f327
13 changed files with 640 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
connect4-ui/components/Board.tsx
View File

@@ -37,11 +37,12 @@ export default function Board({
: "border-gray-700 bg-gray-900 text-gray-400"
}`}
>
<div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" />
<span className="font-medium">{player1}</span>
{currentTurnColor === 1 && (
<span className="text-xs text-red-400 animate-pulse">● Turn</span>
{currentTurnColor === 1 ? (
<div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0 animate-pulse" />
) : (
<div className="w-3.5 h-3.5 rounded-full bg-red-500 shrink-0" />
)}
<span className="font-medium">{player1}</span>
</div>
<span className="text-gray-600 font-bold">vs</span>
<div
@@ -51,13 +52,12 @@ export default function Board({
: "border-gray-700 bg-gray-900 text-gray-400"
}`}
>
<div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
<span className="font-medium">{player2}</span>
{currentTurnColor === 2 && (
<span className="text-xs text-yellow-400 animate-pulse">
● Turn
</span>
{currentTurnColor === 2 ? (
<div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0 animate-pulse" />
) : (
<div className="w-3.5 h-3.5 rounded-full bg-yellow-400 shrink-0" />
)}
<span className="font-medium">{player2}</span>
</div>
</div>
)}
@@ -128,9 +128,9 @@ export default function Board({
{Array.from({ length: 7 }, (_, col) => (
<div
key={col}
className="w-12 p-1 text-center text-xs text-blue-400/70 font-mono"
className="w-14 p-1 text-center text-xs text-blue-400/70 font-mono"
>
{col}
{col + 1}
</div>
))}
</div>