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

update colors

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-24 17:54:47 -04:00
parent 969d9f5028
commit 6e2247d6f3
7 changed files with 45 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/page.tsx
View File

@@ -19,7 +19,7 @@ export default function Home() {
<main className="min-h-screen flex items-center justify-center bg-[url('/img/table3.png')] bg-cover bg-center"> <main className="min-h-screen flex items-center justify-center bg-[url('/img/table3.png')] bg-cover bg-center">
<button <button
onClick={handleCreateGame} onClick={handleCreateGame}
className="bg-gray-800 hover:bg-gray-700 text-white text-lg px-6 py-3 rounded-xl shadow transition cursor-pointer" className="bg-slate-800 hover:bg-slate-700 text-yellow-400 hover:text-yellow-300 text-lg px-6 py-3 rounded-lg shadow transition-all duration-250 cursor-pointer"
> >
Create New Game Create New Game
</button> </button>

8
components/Card.tsx
View File

@@ -33,8 +33,8 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
<> <>
{text.map((t, i) => ( {text.map((t, i) => (
<div key={i}> <div key={i}>
<p>{t}</p> <p className="text-yellow-400">{t}</p>
{i < text.length - 1 && <hr className="my-2 border-gray-300" />} {i < text.length - 1 && <hr className="my-2 border-yellow-400" />}
</div> </div>
))} ))}
</> </>
@@ -54,14 +54,14 @@ export default function Card({ dm, card, position, settings, flipAction }: CardP
<img <img
src={getURL(cardBack as TarokkaGameCard, settings)} src={getURL(cardBack as TarokkaGameCard, settings)}
alt="Card Back" alt="Card Back"
className="rounded-lg border border-gray-600" className="rounded-lg border border-yellow-500"
/> />
</div> </div>
<div className="absolute group inset-0 backface-hidden rotate-y-180"> <div className="absolute group inset-0 backface-hidden rotate-y-180">
<img <img
src={getURL(card, settings)} src={getURL(card, settings)}
alt={aria} alt={aria}
className="rounded-lg border border-gray-600 " className="rounded-lg border border-yellow-500 "
/> />
</div> </div>
</div> </div>

9
components/CopyButton.tsx
View File

@@ -30,12 +30,15 @@ export default function CopyButton({
} }
}; };
const ttContent = const ttContent = (
Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip; <span className="text-yellow-300">
{Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip}
</span>
);
return ( return (
<button onClick={handleCopy} className={`cursor-pointer ${className}`}> <button onClick={handleCopy} className={`cursor-pointer ${className}`}>
<ToolTip content={ttContent} className="w-full"> <ToolTip content={ttContent} className="w-full font-yellow-400">
<div className="flex items-center gap-2 w-full text-sm font-medium"> <div className="flex items-center gap-2 w-full text-sm font-medium">
{title} {title}
{copied ? ( {copied ? (

10
components/Notes.tsx
View File

@@ -42,7 +42,7 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
className={`fixed bottom-4 right-4 z-50 transition-all duration-250 ${show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`} className={`fixed bottom-4 right-4 z-50 transition-all duration-250 ${show ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
> >
<button <button
className={`p-2 transition-all duration-250 text-gray-300 hover:text-white cursor-pointer ${showNotes ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`} className={`text-yellow-400 hover:text-yellow-300 p-2 transition-all duration-250 cursor-pointer ${showNotes ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
onClick={() => setOpen((prev) => !prev)} onClick={() => setOpen((prev) => !prev)}
> >
<ScrollText className="w-5 h-5" /> <ScrollText className="w-5 h-5" />
@@ -53,13 +53,13 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`} className={`transition-all duration-250 ${showNotes ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
> >
<div <div
className={`fixed bottom-4 right-4 transition-all duration-250 text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 space-y-2 ${showNotes ? 'w-[33vw] h-[67vh]' : 'w-0 h-0'}`} className={`fixed bottom-4 right-4 transition-all duration-250 bg-slate-800 border border-yellow-400 rounded-lg space-y-2 ${showNotes ? 'w-[33vw] h-[67vh]' : 'w-0 h-0'}`}
> >
<CopyButton <CopyButton
copy={notes.map((note) => note!.join('\n')).join('\n\n')} copy={notes.map((note) => note!.join('\n')).join('\n\n')}
className="absolute top-2 right-2 p-2 transition-all duration-250 bg-black/20 hover:bg-black/40 rounded-full text-gray-300 hover:text-white" className="text-yellow-400 hover:drop-shadow-[0_0_1px_#ffd700] absolute top-2 right-2 p-2 transition-all duration-250 bg-black/20 hover:bg-black/40 rounded-full cursor-pointer"
/> />
<div className="h-full overflow-scroll p-6 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}"> <div className="text-yellow-400 h-full overflow-scroll p-6 transition-all delay-200 duration-50 ${showNotes ? 'opacity-100' : 'opacity-0'}">
{notes.map((note, index) => ( {notes.map((note, index) => (
<div key={index}> <div key={index}>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@@ -67,7 +67,7 @@ export default function Notes({ gameData: { dmID, cards, settings }, show }: Not
<p key={index}>{blurb}</p> <p key={index}>{blurb}</p>
))} ))}
</div> </div>
{index < notes.length - 1 && <hr className="my-3 border-gray-300" />} {index < notes.length - 1 && <hr className="my-3 border-yellow-400" />}
</div> </div>
))} ))}
</div> </div>

40
components/Settings.tsx
View File

@@ -45,6 +45,23 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
}); });
}; };
const Links = () => (
<>
<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 = () => ( const Permissions = () => (
<> <>
{Object.entries(gameData.settings) {Object.entries(gameData.settings)
@@ -57,17 +74,17 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
const CardStyle = () => ( const CardStyle = () => (
<fieldset className="flex flex-col"> <fieldset className="flex flex-col">
<div className="text-xs text-gray-400 mb-1">Card style:</div> <div className="text-xs mb-1">Card style:</div>
<div className="inline-flex overflow-hidden rounded-md w-full"> <div className="inline-flex overflow-hidden rounded-md w-full">
{cardStyleOptions.map((option, index) => ( {cardStyleOptions.map((option, index) => (
<label <label
key={option} key={option}
className={`cursor-pointer px-4 py-2 text-sm font-medium transition 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-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-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-yellow-500 hover:text-yellow-300
`} `}
> >
<input <input
@@ -92,26 +109,15 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`} className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
> >
<div <div
className={`fixed top-4 right-4 flex flex-col items-center justify-center text-gray-100 bg-gray-800 shadow-lg rounded-lg border border-gray-500 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[300px]' : 'opacity-0 w-0 h-0'}`} className={`fixed top-4 right-4 flex flex-col items-center justify-center bg-slate-800 text-yellow-400 rounded-lg border border-yellow-400 p-6 space-y-2 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[300px]' : 'opacity-0 w-0 h-0'}`}
> >
<CopyButton <Links />
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-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 transition-all duration-250 bg-gray-700 hover:bg-gray-600 text-gray-200 hover:text-white rounded-lg shadow"
/>
<Permissions /> <Permissions />
<CardStyle /> <CardStyle />
</div> </div>
</Scrim> </Scrim>
<button <button
className={`p-2 transition-all duration-250 text-gray-300 hover:text-white cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`} className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
onClick={() => setOpen((prev) => !prev)} onClick={() => setOpen((prev) => !prev)}
> >
<Gear className="w-5 h-5" /> <Gear className="w-5 h-5" />

10
components/Switch.tsx
View File

@@ -6,20 +6,20 @@ export interface SwitchProps {
export default function Switch({ label, value, toggleAction }: SwitchProps) { export default function Switch({ label, value, toggleAction }: SwitchProps) {
return ( return (
<label className="flex items-center justify-between w-full gap-2 cursor-pointer"> <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}</span>
<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in"> <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" /> <input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
<div <div
className={`block w-8 h-4 rounded-full transition ${ className={`block w-8 h-4 rounded-full transition ${
value ? 'bg-gray-500' : 'bg-gray-600' value ? 'bg-slate-500' : 'bg-slate-600'
}`} }`}
/> />
<div <div
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-transform duration-200 ease-out transform 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 shadow-[0_0_2px_2px_rgba(255,255,255,0.4)]' : 'scale-95'} ${value ? 'translate-x-4 scale-110' : 'scale-95'}
${value ? 'bg-gray-100' : 'bg-gray-400'}`} ${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
/> />
</div> </div>
</label> </label>

2
components/ToolTip.tsx
View File

@@ -75,7 +75,7 @@ export default function Tooltip({
</div> </div>
<div <div
ref={ttRef} ref={ttRef}
className={`fixed max-w-[35vh] pointer-events-none z-50 text-xs bg-black text-white rounded-xl border border-gray-300 px-2 py-1 transition-opacity duration-250 ${content && show ? 'opacity-100' : 'opacity-0'}`} className={`fixed max-w-[35vh] pointer-events-none z-50 text-xs bg-[#1e293b] rounded-lg border border-yellow-500 px-2 py-1 transition-opacity duration-250 ${content && show ? 'opacity-100' : 'opacity-0'}`}
style={{ style={{
top: `${pos.y + offsetY}px`, top: `${pos.y + offsetY}px`,
left: `${pos.x + offsetX}px`, left: `${pos.x + offsetX}px`,