TehRiehlDeal
8d0b7f39ee
Gold is the primary in both themes, Bricolage Grotesque carries the wordmark, titles and the score, and Movie A / Movie B wear the blue and magenta of three-strip Technicolor on their posters instead of colouring whole rows. The loop closes on screen - connectors light, a gold line draws back to Movie A, the row glows, then the result arrives - in place of confetti, on every play mode, scaled to the chain's length. Every page shares one header and hairline lists; copy is sentence case with one verb per flow, and the Home hero shows a real finished loop. Also clamps link counts at zero: an opponent who had not moved yet showed "-1 links".
30 lines
748 B
TypeScript
30 lines
748 B
TypeScript
import { useState } from 'react';
|
|
import { isSoundEnabled, toggleSound } from '@/lib/sounds';
|
|
import { Volume2, VolumeX } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export default function SoundToggle() {
|
|
const [enabled, setEnabled] = useState(isSoundEnabled);
|
|
|
|
const handleToggle = () => {
|
|
const next = toggleSound();
|
|
setEnabled(next);
|
|
};
|
|
|
|
return (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={handleToggle}
|
|
className="text-muted-foreground hover:text-foreground"
|
|
aria-label={enabled ? 'Mute sounds' : 'Enable sounds'}
|
|
>
|
|
{enabled ? (
|
|
<Volume2 className="h-4 w-4" />
|
|
) : (
|
|
<VolumeX className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|