select card style

components/Card.tsx

@@ -3,6 +3,7 @@
 import ToolTip from '@/components/ToolTip';
 import tarokkaCards from '@/constants/tarokkaCards';
 import getCardInfo from '@/tools/getCardInfo';
+import getURL from '@/tools/getURL';
 
 import { Layout, Settings, TarokkaGameCard } from '@/types';
 
@@ -17,7 +18,7 @@ type CardProps = {
 };
 
 export default function Card({ dm, card, position, settings, flipAction }: CardProps) {
-	const { aria, flipped, url } = card;
+	const { aria, flipped } = card;
 
 	const handleClick = () => {
 		if (dm) {
@@ -50,10 +51,18 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
 					className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
 				>
 					<div className="absolute group inset-0 backface-hidden">
-						<img src={cardBack.url} alt="Card Back" className="rounded-lg border border-gray-500" />
+						<img
+							src={getURL(cardBack as TarokkaGameCard, settings)}
+							alt="Card Back"
+							className="rounded-lg border border-gray-600"
+						/>
 					</div>
 					<div className="absolute group inset-0 backface-hidden rotate-y-180">
-						<img src={url} alt={aria} className="rounded-xl rounded border border-gray-500 " />
+						<img
+							src={getURL(card, settings)}
+							alt={aria}
+							className="rounded-lg border border-gray-600 "
+						/>
 					</div>
 				</div>
 			</div>

components/Settings.tsx

@@ -5,13 +5,15 @@ import { Settings as Gear, X } from 'lucide-react';
 
 import CopyButton from '@/components/CopyButton';
 import Switch from '@/components/Switch';
-import { GameUpdate } from '@/types';
+import { CardStyle, GameUpdate } from '@/types';
 
 type PermissionTogglePanelProps = {
 	gameData: GameUpdate;
 	changeAction: (updatedSettings: GameUpdate) => void;
 };
 
+const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
+
 export default function PermissionTogglePanel({
 	gameData,
 	changeAction,
@@ -28,6 +30,16 @@ export default function PermissionTogglePanel({
 		});
 	};
 
+	const tuneRadio = (cardStyle: CardStyle) => {
+		changeAction({
+			...gameData,
+			settings: {
+				...gameData.settings,
+				cardStyle,
+			},
+		});
+	};
+
 	return (
 		<div className="fixed top-4 right-4 z-50">
 			{!open && (
@@ -49,9 +61,38 @@ export default function PermissionTogglePanel({
 					</button>
 					<CopyButton title="DM link" copy={`${location.origin}/${gameData.dmID}`} />
 					<CopyButton title="Spectator link" copy={`${location.origin}/${gameData.spectatorID}`} />
-					{Object.entries(gameData.settings).map(([key, value]) => (
-						<Switch label={key} value={value} toggleAction={() => togglePermission(key)} />
-					))}
+					{Object.entries(gameData.settings)
+						.filter(([_key, value]) => typeof value === 'boolean')
+						.map(([key, value]) => (
+							<Switch 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'}
+                    ${index === 0 ? 'rounded-l-md' : ''}
+                    ${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
+                    ${index !== 0 && 'border-l border-gray-600'}
+                    border border-gray-600
+                  `}
+								>
+									<input
+										type="radio"
+										name="cardStyle"
+										value={option}
+										checked={gameData.settings.cardStyle === option}
+										onChange={() => tuneRadio(option)}
+										className="sr-only"
+									/>
+									{option}
+								</label>
+							))}
+						</div>
+					</fieldset>
 				</div>
 			)}
 		</div>