gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

reanimate Switches

Browse Source
This commit is contained in:
Gavin McDonald
2025-07-03 09:11:30 -04:00
parent 0ed38ee098
commit ed6fef5ef1
8 changed files with 215 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/[gameID]/page.tsx
View File

@@ -7,7 +7,7 @@ import { useAppContext } from '@/app/AppContext';
import CardSelect from '@/components/CardSelect';
import Notes from '@/components/Notes';
import NotFound from '@/components/NotFound';
import Settings from '@/components/Settings';
import Settings from '@/components/Settings/index';
import { SpectatorLink } from '@/components/SpectatorLink';
import TarokkaGrid from '@/components/TarokkaGrid';

152
components/Settings.tsx
View File

@@ -1,152 +0,0 @@
'use client';
import { useState } from 'react';
import { Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';
import { useAppContext } from '@/app/AppContext';
import BuyMeACoffee from '@/components/BuyMeACoffee';
import CopyButton from '@/components/CopyButton';
import GitHubButton from '@/components/GitHubButton';
import Scrim from '@/components/Scrim';
import Switch from '@/components/Switch';
import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
import type { CardStyle, LocalSettings } from '@/types';
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
export default function Settings() {
const [open, setOpen] = useState(false);
const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
const togglePermission = (key: keyof LocalSettings) => {
if (LOCAL_SETTINGS.includes(key)) {
setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
} else if (isDM) {
emitSettings({
...gameData,
settings: {
...gameData.settings,
[key]: !gameData.settings[key],
},
});
}
};
const tuneRadio = (cardStyle: CardStyle) => {
emitSettings({
...gameData,
settings: {
...gameData.settings,
cardStyle,
},
});
};
const Icon = () => (
<button
className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
onClick={() => setOpen((prev) => !prev)}
>
<Gear className="w-5 h-5" />
</button>
);
const Links = () => (
<>
{isDM && (
<CopyButton
title="Copy DM link"
copy={`${location.origin}/${gameData.dmID}`}
tooltip={`${location.origin}/${gameData.dmID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
)}
<CopyButton
title="Copy Spectator link"
copy={`${location.origin}/${gameData.spectatorID}`}
tooltip={`${location.origin}/${gameData.spectatorID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
</>
);
const Permissions = () => (
<>
{Object.entries(settings)
.filter(([_key, value]) => typeof value === 'boolean')
.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
.map(([key, value]) => (
<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
))}
</>
);
const CardStyle = () =>
isDM ? (
<fieldset className="flex flex-col w-full">
<div className="text-xs my-1">Card style:</div>
<div className="inline-flex overflow-hidden rounded-md w-full">
{cardStyleOptions.map((option, index) => (
<label
key={option}
className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
${index === 0 ? 'rounded-l-md' : ''}
${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
${index !== 0 && 'border-l border-gray-600'}
border border-yellow-500 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
`}
>
<input
type="radio"
name="cardStyle"
value={option}
checked={settings.cardStyle === option}
onChange={() => tuneRadio(option)}
className="sr-only"
/>
{option}
</label>
))}
</div>
</fieldset>
) : null;
return (
<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
<Scrim
clickAction={() => setOpen((prev) => !prev)}
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
>
<div
className={`
fixed top-4 right-4
flex flex-col items-center justify-evenly
bg-slate-800 text-yellow-400
rounded-lg border border-yellow-400
h-full py-3 px-4
transition-all duration-250
${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[375px]' : 'w-[300px] max-h-[150px]'}` : 'opacity-0 w-0 max-h-0'}
`}
>
<Links />
<Permissions />
<CardStyle />
<span className={`w-full flex flex-row ${isDM ? 'justify-evenly' : 'justify-between'}`}>
<GitHubButton className="h-[35px] w-[125px]" />
<BuyMeACoffee className="h-[35px] w-[125px]" />
</span>
</div>
</Scrim>
<Icon />
</div>
);
}

55
components/Settings/CardStyle.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import type { CardStyle } from '@/types';
const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
export default function CardStyle() {
const { gameData, isDM, settings, emitSettings } = useAppContext();
const tuneRadio = (cardStyle: CardStyle) => {
emitSettings({
...gameData,
settings: {
...gameData.settings,
cardStyle,
},
});
};
return isDM ? (
<fieldset className="flex flex-col w-full">
<div className="text-xs my-1">Card style:</div>
<div className="inline-flex overflow-hidden rounded-md w-full">
{cardStyleOptions.map((option, index) => (
<label
key={option}
className={`
cursor-pointer
w-full px-4 py-2
text-sm font-medium
border border-yellow-500
flex justify-center items-center
transition hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
${index === 0 ? 'rounded-l-md' : ''}
${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
${index !== 0 && 'border-l border-gray-600'}
`}
>
<input
type="radio"
name="cardStyle"
value={option}
checked={settings.cardStyle === option}
onChange={() => tuneRadio(option)}
className="sr-only"
/>
{option}
</label>
))}
</div>
</fieldset>
) : null;
}

16
components/Settings/ExternalLinks.tsx Normal file
View File

@@ -0,0 +1,16 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import BuyMeACoffee from '@/components/BuyMeACoffee';
import GitHubButton from '@/components/GitHubButton';
export default function CardStyle() {
const { isDM } = useAppContext();
return (
<span className={`w-full flex flex-row ${isDM ? 'justify-evenly' : 'justify-between'}`}>
<GitHubButton className="h-[35px] w-[125px]" />
<BuyMeACoffee className="h-[35px] w-[125px]" />
</span>
);
}

27
components/Settings/GameLinks.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import CopyButton from '@/components/CopyButton';
export default function Links() {
const { gameData, isDM } = useAppContext();
return (
<>
{isDM && (
<CopyButton
title="Copy DM link"
copy={`${location.origin}/${gameData.dmID}`}
tooltip={`${location.origin}/${gameData.dmID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
)}
<CopyButton
title="Copy Spectator link"
copy={`${location.origin}/${gameData.spectatorID}`}
tooltip={`${location.origin}/${gameData.spectatorID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
</>
);
}

34
components/Settings/Permissions.tsx Normal file
View File

@@ -0,0 +1,34 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import Switch from '@/components/Switch';
import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
export default function Permissions() {
const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
const togglePermission = (key: string) => {
if (LOCAL_SETTINGS.includes(key)) {
setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
} else if (isDM) {
emitSettings({
...gameData,
settings: {
...gameData.settings,
[key]: !gameData.settings[key],
},
});
}
};
return (
<>
{Object.entries(settings)
.filter(([_key, value]) => typeof value === 'boolean')
.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
.map(([key, value]) => (
<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
))}
</>
);
}

56
components/Settings/index.tsx Normal file
View File

@@ -0,0 +1,56 @@
'use client';
import { useState } from 'react';
import { Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';
import { useAppContext } from '@/app/AppContext';
import Scrim from '@/components/Scrim';
import CardStyle from './CardStyle';
import ExternalLinks from './ExternalLinks';
import GameLinks from './GameLinks';
import Permissions from './Permissions';
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
export default function Settings() {
const [open, setOpen] = useState(false);
const { isDM } = useAppContext();
return (
<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
<Scrim
clickAction={() => setOpen((prev) => !prev)}
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
>
<div
className={`
fixed top-4 right-4
flex flex-col items-center justify-evenly
bg-slate-800 text-yellow-400
rounded-lg border border-yellow-400
h-full py-3 px-4
transition-all duration-250
${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[375px]' : 'w-[300px] max-h-[175px]'}` : 'opacity-0 w-0 max-h-0'}
`}
>
<GameLinks />
<Permissions />
<CardStyle />
<ExternalLinks />
</div>
</Scrim>
<button
className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
onClick={() => setOpen((prev) => !prev)}
>
<Gear className="w-5 h-5" />
</button>
</div>
);
}

36
components/Switch.tsx
View File

@@ -1,25 +1,41 @@
import type { ChangeEventHandler } from 'react';
export interface SwitchProps {
label: string;
value: boolean;
toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
toggleAction: ChangeEventHandler<HTMLInputElement>;
}
const nonInitialCaps = /(?!^)([A-Z])/g;
export default function Switch({ label, value, toggleAction }: SwitchProps) {
return (
<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
<span className="text-sm capitalize">{label}</span>
<span className="text-sm capitalize">{label.replace(nonInitialCaps, ' $1')}</span>
<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
<div
className={`block w-8 h-4 rounded-full transition ${
value ? 'bg-slate-500' : 'bg-slate-600'
}`}
<input
id={`switch-${label}`}
type="checkbox"
checked={value}
onChange={toggleAction}
className="sr-only peer"
/>
<div
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
${value ? 'translate-x-4 scale-110' : 'scale-95'}
${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
className={`
block w-8 h-4 rounded-full
transition-colors duration-200 ease-in
bg-slate-600 peer-checked:bg-slate-500
`}
/>
<div
className={`
absolute top-[2px] left-[2px]
w-3 h-3 rounded-full
transition-all duration-250 ease-out
translate-x-0 scale-95 bg-yellow-500
peer-checked:translate-x-4 peer-checked:scale-110 peer-checked:bg-yellow-400
`}
/>
</div>
</label>