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

8
components/Card.tsx
View File

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

9
components/CopyButton.tsx
View File

@@ -30,12 +30,15 @@ export default function CopyButton({
}
};
const ttContent =
Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip;
const ttContent = (
<span className="text-yellow-300">
{Array.isArray(tooltip) && tooltip.length > 1 ? (copied ? tooltip[1] : tooltip[0]) : tooltip}
</span>
);
return (
<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">
{title}
{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'}`}
>
<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)}
>
<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'}`}
>
<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
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) => (
<div key={index}>
<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>
))}
</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>

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 = () => (
<>
{Object.entries(gameData.settings)
@@ -57,17 +74,17 @@ export default function Settings({ gameData, changeAction }: SettingsProps) {
const CardStyle = () => (
<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">
{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-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-gray-600
border border-yellow-500 hover:text-yellow-300
`}
>
<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'}`}
>
<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
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"
/>
<Links />
<Permissions />
<CardStyle />
</div>
</Scrim>
<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)}
>
<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) {
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>
<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-gray-500' : 'bg-gray-600'
value ? 'bg-slate-500' : 'bg-slate-600'
}`}
/>
<div
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-transform duration-200 ease-out transform
${value ? 'translate-x-4 scale-110 shadow-[0_0_2px_2px_rgba(255,255,255,0.4)]' : 'scale-95'}
${value ? 'bg-gray-100' : 'bg-gray-400'}`}
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'}`}
/>
</div>
</label>

2
components/ToolTip.tsx
View File

@@ -75,7 +75,7 @@ export default function Tooltip({
</div>
<div
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={{
top: `${pos.y + offsetY}px`,
left: `${pos.x + offsetX}px`,