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

update Settings

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-23 15:50:21 -04:00
parent 0c8d2273ea
commit 3d3cb7a45e
1 changed files with 63 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
components/Settings.tsx
View File

@@ -4,20 +4,18 @@ import { useState } from 'react';
import { Settings as Gear, X } from 'lucide-react'; import { Settings as Gear, X } from 'lucide-react';
import CopyButton from '@/components/CopyButton'; import CopyButton from '@/components/CopyButton';
import Scrim from '@/components/Scrim';
import Switch from '@/components/Switch'; import Switch from '@/components/Switch';
import { CardStyle, GameUpdate } from '@/types'; import { CardStyle, GameUpdate } from '@/types';
type PermissionTogglePanelProps = { type SettingsProps = {
gameData: GameUpdate; gameData: GameUpdate;
changeAction: (updatedSettings: GameUpdate) => void; changeAction: (updatedSettings: GameUpdate) => void;
}; };
const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale']; const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
export default function PermissionTogglePanel({ export default function Settings({ gameData, changeAction }: SettingsProps) {
gameData,
changeAction,
}: PermissionTogglePanelProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const togglePermission = (key: string) => { const togglePermission = (key: string) => {
@@ -40,66 +38,73 @@ export default function PermissionTogglePanel({
}); });
}; };
return ( const Permissions = () => (
<div className="fixed top-4 right-4 z-50"> <>
{!open && ( {Object.entries(gameData.settings)
<button .filter(([_key, value]) => typeof value === 'boolean')
className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer" .map(([key, value]) => (
onClick={() => setOpen((prev) => !prev)} <Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
> ))}
<Gear className="w-5 h-5" /> </>
</button> );
)}
{open && ( const CardStyle = () => (
<div className="relative text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2"> <fieldset className="flex flex-col">
<button <div className="text-xs text-gray-400 mb-1">Card style:</div>
className="absolute top-1 right-1 p-1 hover:text-gray-300 cursor-pointer" <div className="inline-flex overflow-hidden rounded-md w-full">
onClick={() => setOpen((prev) => !prev)} {cardStyleOptions.map((option, index) => (
> <label
<X className="w-4 h-4" /> key={option}
</button> className={`cursor-pointer px-4 py-2 text-sm font-medium transition
<CopyButton title="DM link" copy={`${location.origin}/${gameData.dmID}`} />
<CopyButton title="Spectator link" copy={`${location.origin}/${gameData.spectatorID}`} />
{Object.entries(gameData.settings)
.filter(([_key, value]) => typeof value === 'boolean')
.map(([key, value]) => (
<Switch
key={key}
label={key}
value={value}
toggleAction={() => togglePermission(key)}
/>
))}
<fieldset className="flex flex-col">
<div className="text-xs text-gray-400 mb-1">Card style:</div>
<div className="inline-flex overflow-hidden rounded-md w-full">
{cardStyleOptions.map((option, index) => (
<label
key={option}
className={`cursor-pointer px-4 py-2 text-sm font-medium transition
${gameData.settings.cardStyle === option ? 'bg-gray-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'} ${gameData.settings.cardStyle === option ? 'bg-gray-500 text-white' : 'bg-gray-800 text-gray-300 hover:bg-gray-700'}
${index === 0 ? 'rounded-l-md' : ''} ${index === 0 ? 'rounded-l-md' : ''}
${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''} ${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
${index !== 0 && 'border-l border-gray-600'} ${index !== 0 && 'border-l border-gray-600'}
border border-gray-600 border border-gray-600
`} `}
> >
<input <input
type="radio" type="radio"
name="cardStyle" name="cardStyle"
value={option} value={option}
checked={gameData.settings.cardStyle === option} checked={gameData.settings.cardStyle === option}
onChange={() => tuneRadio(option)} onChange={() => tuneRadio(option)}
className="sr-only" className="sr-only"
/> />
{option} {option}
</label> </label>
))} ))}
</div> </div>
</fieldset> </fieldset>
</div> );
)}
return open ? (
<Scrim onClick={() => setOpen((prev) => !prev)}>
<div className="fixed top-4 right-4 text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2">
<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 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white 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 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow"
/>
<Permissions />
<CardStyle />
</div>
</Scrim>
) : (
<div className="fixed top-4 right-4 z-50">
<button
className="p-2 text-gray-100 hover:text-gray-300 cursor-pointer"
onClick={() => setOpen((prev) => !prev)}
>
<Gear className="w-5 h-5" />
</button>
</div> </div>
); );
} }