diff --git a/.vscode/settings.json b/.vscode/settings.json index ce01b7d..bc31e15 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,5 +1,5 @@ { "files.associations": { - "*.css": "tailwind" + "*.css": "tailwindcss" } } diff --git a/package.json b/package.json index 5779b8c..49b2849 100644 --- a/package.json +++ b/package.json @@ -24,12 +24,14 @@ }, "devDependencies": { "@cloudflare/workers-types": "^4.20251113.0", + "@internationalized/date": "^3.10.0", "@libsql/client": "^0.15.15", + "@lucide/svelte": "^0.554.0", "@sveltejs/adapter-cloudflare": "^7.2.4", "@sveltejs/kit": "^2.47.1", "@sveltejs/vite-plugin-svelte": "^6.2.1", "@tailwindcss/postcss": "^4.1.17", - "@tailwindcss/vite": "^4.1.14", + "@tailwindcss/vite": "^4.1.17", "autoprefixer": "^10.4.22", "better-sqlite3": "^12.4.1", "drizzle-kit": "^0.31.7", @@ -39,7 +41,9 @@ "prettier-plugin-tailwindcss": "^0.7.1", "svelte": "^5.41.0", "svelte-check": "^4.3.3", - "tailwindcss": "^4.1.14", + "tailwind-variants": "^3.2.2", + "tailwindcss": "^4.1.17", + "tw-animate-css": "^1.4.0", "typescript": "^5.9.3", "vite": "^7.1.10", "wrangler": "^4.48.0" @@ -57,7 +61,6 @@ "clsx": "^2.1.1", "drizzle-orm": "^0.44.7", "jose": "^6.1.2", - "tailwind-merge": "^3.4.0", - "tailwind-variants": "^3.1.1" + "tailwind-merge": "^3.4.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de6822a..b659098 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,16 +26,19 @@ importers: tailwind-merge: specifier: ^3.4.0 version: 3.4.0 - tailwind-variants: - specifier: ^3.1.1 - version: 3.1.1(tailwind-merge@3.4.0)(tailwindcss@4.1.17) devDependencies: '@cloudflare/workers-types': specifier: ^4.20251113.0 version: 4.20251117.0 + '@internationalized/date': + specifier: ^3.10.0 + version: 3.10.0 '@libsql/client': specifier: ^0.15.15 version: 0.15.15 + '@lucide/svelte': + specifier: ^0.554.0 + version: 0.554.0(svelte@5.43.8) '@sveltejs/adapter-cloudflare': specifier: ^7.2.4 version: 7.2.4(@sveltejs/kit@2.48.5(@sveltejs/vite-plugin-svelte@6.2.1(svelte@5.43.8)(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)))(svelte@5.43.8)(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)))(wrangler@4.48.0(@cloudflare/workers-types@4.20251117.0)) @@ -49,7 +52,7 @@ importers: specifier: ^4.1.17 version: 4.1.17 '@tailwindcss/vite': - specifier: ^4.1.14 + specifier: ^4.1.17 version: 4.1.17(vite@7.2.2(@types/node@24.10.1)(jiti@2.6.1)(lightningcss@1.30.2)) autoprefixer: specifier: ^10.4.22 @@ -78,9 +81,15 @@ importers: svelte-check: specifier: ^4.3.3 version: 4.3.4(picomatch@4.0.3)(svelte@5.43.8)(typescript@5.9.3) + tailwind-variants: + specifier: ^3.2.2 + version: 3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.17) tailwindcss: - specifier: ^4.1.14 + specifier: ^4.1.17 version: 4.1.17 + tw-animate-css: + specifier: ^1.4.0 + version: 1.4.0 typescript: specifier: ^5.9.3 version: 5.9.3 @@ -796,6 +805,11 @@ packages: cpu: [x64] os: [win32] + '@lucide/svelte@0.554.0': + resolution: {integrity: sha512-CM6wLEH8uk3WBpC42t8R0hF7SlQrsYEL6qGuXdB99xKZwKglpWmX5XgYu7FIYOCBYOyC1rm4dNhIe6uF9pOXqw==} + peerDependencies: + svelte: ^5 + '@neon-rs/load@0.0.4': resolution: {integrity: sha512-kTPhdZyTQxB+2wpiRcFWrDcejc4JI6tkPuS7UZCG4l6Zvc5kU/gGQ/ozvHTh1XR5tS+UlfAfGuPajjzQjCiHCw==} @@ -1813,8 +1827,8 @@ packages: tailwind-merge@3.4.0: resolution: {integrity: sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==} - tailwind-variants@3.1.1: - resolution: {integrity: sha512-ftLXe3krnqkMHsuBTEmaVUXYovXtPyTK7ckEfDRXS8PBZx0bAUas+A0jYxuKA5b8qg++wvQ3d2MQ7l/xeZxbZQ==} + tailwind-variants@3.2.2: + resolution: {integrity: sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg==} engines: {node: '>=16.x', pnpm: '>=7.x'} peerDependencies: tailwind-merge: '>=3.0.0' @@ -1851,6 +1865,9 @@ packages: tunnel-agent@0.6.0: resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==} + tw-animate-css@1.4.0: + resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==} + typescript@5.9.3: resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==} engines: {node: '>=14.17'} @@ -2421,6 +2438,10 @@ snapshots: '@libsql/win32-x64-msvc@0.5.22': optional: true + '@lucide/svelte@0.554.0(svelte@5.43.8)': + dependencies: + svelte: 5.43.8 + '@neon-rs/load@0.0.4': {} '@number-flow/svelte@0.3.9(svelte@5.43.8)': @@ -3320,7 +3341,7 @@ snapshots: tailwind-merge@3.4.0: {} - tailwind-variants@3.1.1(tailwind-merge@3.4.0)(tailwindcss@4.1.17): + tailwind-variants@3.2.2(tailwind-merge@3.4.0)(tailwindcss@4.1.17): dependencies: tailwindcss: 4.1.17 optionalDependencies: @@ -3358,6 +3379,8 @@ snapshots: dependencies: safe-buffer: 5.2.1 + tw-animate-css@1.4.0: {} + typescript@5.9.3: {} undici-types@7.16.0: {} diff --git a/src/app.css b/src/app.css index 8365ec3..e48f5f0 100644 --- a/src/app.css +++ b/src/app.css @@ -1,81 +1,121 @@ -@import 'tailwindcss'; +@import "tailwindcss"; + +@import "tw-animate-css"; + +@custom-variant dark (&:is(.dark *)); :root { - --background: 0 0% 100%; - --foreground: 222.2 84% 4.9%; - --card: 0 0% 100%; - --card-foreground: 222.2 84% 4.9%; - --popover: 0 0% 100%; - --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; - --secondary: 210 40% 96.1%; - --secondary-foreground: 222.2 47.4% 11.2%; - --muted: 210 40% 96.1%; - --muted-foreground: 215.4 16.3% 46.9%; - --accent: 210 40% 96.1%; - --accent-foreground: 222.2 47.4% 11.2%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 210 40% 98%; - --border: 214.3 31.8% 91.4%; - --input: 214.3 31.8% 91.4%; - --ring: 222.2 84% 4.9%; - --radius: 0.5rem; + --radius: 0.625rem; + --background: oklch(1 0 0); + --foreground: oklch(0.129 0.042 264.695); + --card: oklch(1 0 0); + --card-foreground: oklch(0.129 0.042 264.695); + --popover: oklch(1 0 0); + --popover-foreground: oklch(0.129 0.042 264.695); + --primary: oklch(0.208 0.042 265.755); + --primary-foreground: oklch(0.984 0.003 247.858); + --secondary: oklch(0.968 0.007 247.896); + --secondary-foreground: oklch(0.208 0.042 265.755); + --muted: oklch(0.968 0.007 247.896); + --muted-foreground: oklch(0.554 0.046 257.417); + --accent: oklch(0.968 0.007 247.896); + --accent-foreground: oklch(0.208 0.042 265.755); + --destructive: oklch(0.577 0.245 27.325); + --border: oklch(0.929 0.013 255.508); + --input: oklch(0.929 0.013 255.508); + --ring: oklch(0.704 0.04 256.788); + --chart-1: oklch(0.646 0.222 41.116); + --chart-2: oklch(0.6 0.118 184.704); + --chart-3: oklch(0.398 0.07 227.392); + --chart-4: oklch(0.828 0.189 84.429); + --chart-5: oklch(0.769 0.188 70.08); + --sidebar: oklch(0.984 0.003 247.858); + --sidebar-foreground: oklch(0.129 0.042 264.695); + --sidebar-primary: oklch(0.208 0.042 265.755); + --sidebar-primary-foreground: oklch(0.984 0.003 247.858); + --sidebar-accent: oklch(0.968 0.007 247.896); + --sidebar-accent-foreground: oklch(0.208 0.042 265.755); + --sidebar-border: oklch(0.929 0.013 255.508); + --sidebar-ring: oklch(0.704 0.04 256.788); } .dark { - --background: 222.2 84% 4.9%; - --foreground: 210 40% 98%; - --card: 222.2 84% 4.9%; - --card-foreground: 210 40% 98%; - --popover: 222.2 84% 4.9%; - --popover-foreground: 210 40% 98%; - --primary: 210 40% 98%; - --primary-foreground: 222.2 47.4% 11.2%; - --secondary: 217.2 32.6% 17.5%; - --secondary-foreground: 210 40% 98%; - --muted: 217.2 32.6% 17.5%; - --muted-foreground: 215 20.2% 65.1%; - --accent: 217.2 32.6% 17.5%; - --accent-foreground: 210 40% 98%; - --destructive: 0 62.8% 30.6%; - --destructive-foreground: 210 40% 98%; - --border: 217.2 32.6% 17.5%; - --input: 217.2 32.6% 17.5%; - --ring: 212.7 26.8% 83.9%; + --background: oklch(0.129 0.042 264.695); + --foreground: oklch(0.984 0.003 247.858); + --card: oklch(0.208 0.042 265.755); + --card-foreground: oklch(0.984 0.003 247.858); + --popover: oklch(0.208 0.042 265.755); + --popover-foreground: oklch(0.984 0.003 247.858); + --primary: oklch(0.929 0.013 255.508); + --primary-foreground: oklch(0.208 0.042 265.755); + --secondary: oklch(0.279 0.041 260.031); + --secondary-foreground: oklch(0.984 0.003 247.858); + --muted: oklch(0.279 0.041 260.031); + --muted-foreground: oklch(0.704 0.04 256.788); + --accent: oklch(0.279 0.041 260.031); + --accent-foreground: oklch(0.984 0.003 247.858); + --destructive: oklch(0.704 0.191 22.216); + --border: oklch(1 0 0 / 10%); + --input: oklch(1 0 0 / 15%); + --ring: oklch(0.551 0.027 264.364); + --chart-1: oklch(0.488 0.243 264.376); + --chart-2: oklch(0.696 0.17 162.48); + --chart-3: oklch(0.769 0.188 70.08); + --chart-4: oklch(0.627 0.265 303.9); + --chart-5: oklch(0.645 0.246 16.439); + --sidebar: oklch(0.208 0.042 265.755); + --sidebar-foreground: oklch(0.984 0.003 247.858); + --sidebar-primary: oklch(0.488 0.243 264.376); + --sidebar-primary-foreground: oklch(0.984 0.003 247.858); + --sidebar-accent: oklch(0.279 0.041 260.031); + --sidebar-accent-foreground: oklch(0.984 0.003 247.858); + --sidebar-border: oklch(1 0 0 / 10%); + --sidebar-ring: oklch(0.551 0.027 264.364); } -@theme { - --color-background: hsl(var(--background)); - --color-foreground: hsl(var(--foreground)); - --color-card: hsl(var(--card)); - --color-card-foreground: hsl(var(--card-foreground)); - --color-popover: hsl(var(--popover)); - --color-popover-foreground: hsl(var(--popover-foreground)); - --color-primary: hsl(var(--primary)); - --color-primary-foreground: hsl(var(--primary-foreground)); - --color-secondary: hsl(var(--secondary)); - --color-secondary-foreground: hsl(var(--secondary-foreground)); - --color-muted: hsl(var(--muted)); - --color-muted-foreground: hsl(var(--muted-foreground)); - --color-accent: hsl(var(--accent)); - --color-accent-foreground: hsl(var(--accent-foreground)); - --color-destructive: hsl(var(--destructive)); - --color-destructive-foreground: hsl(var(--destructive-foreground)); - --color-border: hsl(var(--border)); - --color-input: hsl(var(--input)); - --color-ring: hsl(var(--ring)); - - --radius-lg: var(--radius); - --radius-md: calc(var(--radius) - 2px); - --radius-sm: calc(var(--radius) - 4px); +@theme inline { + --radius-sm: calc(var(--radius) - 4px); + --radius-md: calc(var(--radius) - 2px); + --radius-lg: var(--radius); + --radius-xl: calc(var(--radius) + 4px); + --color-background: var(--background); + --color-foreground: var(--foreground); + --color-card: var(--card); + --color-card-foreground: var(--card-foreground); + --color-popover: var(--popover); + --color-popover-foreground: var(--popover-foreground); + --color-primary: var(--primary); + --color-primary-foreground: var(--primary-foreground); + --color-secondary: var(--secondary); + --color-secondary-foreground: var(--secondary-foreground); + --color-muted: var(--muted); + --color-muted-foreground: var(--muted-foreground); + --color-accent: var(--accent); + --color-accent-foreground: var(--accent-foreground); + --color-destructive: var(--destructive); + --color-border: var(--border); + --color-input: var(--input); + --color-ring: var(--ring); + --color-chart-1: var(--chart-1); + --color-chart-2: var(--chart-2); + --color-chart-3: var(--chart-3); + --color-chart-4: var(--chart-4); + --color-chart-5: var(--chart-5); + --color-sidebar: var(--sidebar); + --color-sidebar-foreground: var(--sidebar-foreground); + --color-sidebar-primary: var(--sidebar-primary); + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); + --color-sidebar-accent: var(--sidebar-accent); + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); + --color-sidebar-border: var(--sidebar-border); + --color-sidebar-ring: var(--sidebar-ring); } @layer base { - * { - @apply border-border; - } - body { - @apply bg-background text-foreground; - } -} + * { + @apply border-border outline-ring/50; + } + body { + @apply bg-background text-foreground; + } +} \ No newline at end of file diff --git a/src/lib/components/custom/Footer.svelte b/src/lib/components/custom/Footer.svelte index 2ea83f3..92228fd 100644 --- a/src/lib/components/custom/Footer.svelte +++ b/src/lib/components/custom/Footer.svelte @@ -49,13 +49,13 @@
-
+
CLEAR
- BETS + ALL BETS
diff --git a/src/lib/components/custom/GameBoard.svelte b/src/lib/components/custom/GameBoard.svelte index 706ab9c..b231ac4 100644 --- a/src/lib/components/custom/GameBoard.svelte +++ b/src/lib/components/custom/GameBoard.svelte @@ -1,451 +1,46 @@ -