Fixing js/ts, removing dialog, updating card.

components.json

@@ -2,7 +2,7 @@
 	"$schema": "https://shadcn-svelte.com/schema.json",
 	"style": "default",
 	"tailwind": {
-		"config": "tailwind.config.ts",
+		"config": "tailwind.config.js",
 		"css": "src/lib/styles/app.pcss",
 		"baseColor": "slate"
 	},

src/lib/components/dialog/DefaultDialog.svelte

@@ -1,28 +1,28 @@
 <script lang="ts">
-	import { type SvelteComponent, createEventDispatcher } from 'svelte';
+// import {
-	import { fade } from 'svelte/transition';
+// 	Dialog,
-	// import {
+// 	DialogDescription,
-	// 	Dialog,
+// 	DialogOverlay,
-	// 	DialogDescription,
+// 	DialogTitle
-	// 	DialogOverlay,
+// } from '@rgossiaux/svelte-headlessui';
-	// 	DialogTitle
+import { boredState } from '$lib/stores/boredState'
-	// } from '@rgossiaux/svelte-headlessui';
+import { type SvelteComponent, createEventDispatcher } from 'svelte'
-	import { boredState } from '$lib/stores/boredState';
+import { fade } from 'svelte/transition'
 
-	export let title: string;
+export let title: string
-	export let description: string;
+export let description: string
-	export let danger = false;
+export let danger = false
-	export let alert = false;
+export let alert = false
-	export let passive = false;
+export let passive = false
-	export let primaryButtonText = '';
+export let primaryButtonText = ''
-	export let primaryButtonDisabled = false;
+export let primaryButtonDisabled = false
-	export let primaryButtonIcon: typeof SvelteComponent<any> = undefined;
+export let primaryButtonIcon: typeof SvelteComponent<any> = undefined
-	export let primaryButtonIconDescription = '';
+export let primaryButtonIconDescription = ''
-	export let secondaryButtonText = '';
+export let secondaryButtonText = ''
 
-	const dispatch = createEventDispatcher();
+const dispatch = createEventDispatcher()
 
-	$: isOpen = $boredState?.dialog?.isOpen;
+$: isOpen = $boredState?.dialog?.isOpen
 </script>
 
 <!-- <Dialog
@@ -74,7 +74,7 @@
 	</div>
 <!-- </Dialog> -->
 
-<style lang="scss">
+<style lang="postcss">
 	.dialog {
 		display: grid;
 		gap: 1.5rem;

src/lib/components/ui/card/card-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+<div class={cn("p-6", className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/components/ui/card/card-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+<p class={cn("text-muted-foreground text-sm", className)} {...$$restProps}>
 	<slot />
 </p>

src/lib/components/ui/card/card-footer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 

src/lib/components/ui/card/card-header.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
@@ -8,6 +8,6 @@
 	export { className as class };
 </script>
 
-<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+<div class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...$$restProps}>
 	<slot />
 </div>

src/lib/components/ui/card/card-title.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
 	import type { HeadingLevel } from "./index.js";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
 		tag?: HeadingLevel;

src/lib/components/ui/card/card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "$lib/utils.js";
+	import { cn } from "$lib/utils/ui.js";
 
 	type $$Props = HTMLAttributes<HTMLDivElement>;
 
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
 	{...$$restProps}
 >
 	<slot />

src/lib/utils/ui.ts

@@ -23,15 +23,13 @@ export const flyAndScale = (node: Element, params: FlyAndScaleParams = { y: -8,
 		const [minB, maxB] = scaleB
 
 		const percentage = (valueA - minA) / (maxA - minA)
-		const valueB = percentage * (maxB - minB) + minB
+		return percentage * (maxB - minB) + minB
-
-		return valueB
 	}
 
 	const styleToString = (style: Record<string, number | string | undefined>): string => {
 		return Object.keys(style).reduce((str, key) => {
 			if (style[key] === undefined) return str
-			return str + `${key}:${style[key]};`
+			return `${str}${key}:${style[key]};`
 		}, '')
 	}
 

src/routes/(app)/+layout.svelte

@@ -19,4 +19,11 @@ const { data, children } = $props()
 </div>
 
 <style lang="postcss">
+	:global(.dialog-overlay) {
+		position: fixed;
+		inset: 0;
+		z-index: 100;
+		background-color: rgb(0 0 0);
+		opacity: 0.8;
+	}
 </style>

src/routes/(app)/+page.server.ts

@@ -20,7 +20,7 @@ export const load: PageServerLoad = async (event) => {
 			url: new URL(url.pathname, url.origin).href,
 			locale: 'en_US',
 			title: 'Home',
-			description: 'Bored Game, keep track of your gamesTable',
+			description: 'Bored Game, keep track of your games',
 			images: [image],
 			siteName: 'Bored Game',
 		},
@@ -29,7 +29,7 @@ export const load: PageServerLoad = async (event) => {
 			site: '@boredgame',
 			cardType: 'summary_large_image',
 			title: 'Home | Bored Game',
-			description: 'Bored Game, keep track of your gamesTable',
+			description: 'Bored Game, keep track of your games',
 			image: `${new URL(url.pathname, url.origin).href}og?header=Bored Game&page=Home&content=Keep track of your games`,
 			imageAlt: 'Home | Bored Game',
 		},

src/routes/(app)/+page.svelte

@@ -36,7 +36,7 @@ const welcomeName = $derived.by(() => {
 		</div>
 	{:else}
 		<h1>Welcome to Bored Game!</h1>
-		<h2>Track the board gamesTable you own, the ones you want, and whether you play them enough.</h2>
+		<h2>Track the board games you own, the ones you want, and whether you play them enough.</h2>
 		<p>Get started by joining the <a href="/waitlist">wait list</a> or <a href="/login">log in</a> if you already have an account.</p>
 	{/if}
 </div>

src/routes/(app)/about/+page.svelte

@@ -6,7 +6,7 @@
 <div class="content">
 	<h1>About Bored Game</h1>
 	<article>
-		<p>One day we were bored and wanted to play one of our board gamesTable.</p>
+		<p>One day we were bored and wanted to play one of our board games.</p>
 		<p>Our problem was that we didn't know which one to play.</p>
 		<p>Rather than just pick a game I decided to make this overcomplicated solution.</p>
 		<p>I hope you enjoy using it!</p>

src/routes/(app)/search/+error.svelte

@@ -1,4 +1,4 @@
-<h1>There was an error searching for gamesTable! 🤦</h1>
+<h1>There was an error searching for games! 🤦</h1>
 <h2>Please try again later. 🙇</h2>
 
 <style>

src/routes/(app)/search/+page.server.ts

@@ -10,7 +10,7 @@ import { superValidate } from 'sveltekit-superforms/server'
 
 async function searchForGames(locals: App.Locals, eventFetch: typeof fetch, urlQueryParams: URLSearchParams) {
 	try {
-		console.log('urlQueryParams search gamesTable', urlQueryParams)
+		console.log('urlQueryParams search games', urlQueryParams)
 
 		const headers = new Headers()
 		headers.set('Content-Type', 'application/json')
@@ -29,13 +29,13 @@ async function searchForGames(locals: App.Locals, eventFetch: typeof fetch, urlQ
 		}
 
 		const games = await response.json()
-		console.log('gamesTable from DB', games)
+		console.log('games from DB', games)
 
 		const gameNameSearch = urlQueryParams.get('q') ?? ''
 		let totalCount = games?.length || 0
 
 		if (totalCount === 0 || !games.find((game: GameType) => game.slug === kebabCase(gameNameSearch))) {
-			console.log('No gamesTable found in DB for', gameNameSearch)
+			console.log('No games found in DB for', gameNameSearch)
 			const searchQueryParams = urlQueryParams ? `?${urlQueryParams}` : ''
 			const externalResponse = await eventFetch(`/api/external/search${searchQueryParams}`, requestInit)
 

src/routes/(app)/search/+page.svelte

@@ -15,7 +15,7 @@ export let data
 const { games, totalCount } = data.searchData
 
 console.log('data found', data)
-console.log('found gamesTable', games)
+console.log('found games', games)
 console.log('found totalCount', totalCount)
 
 const form = superForm(data.form, {
@@ -65,7 +65,7 @@ function handleListStyle(event) {
 					<Game {game} />
 				{/each}
 			{:else}
-				<h2>Sorry no gamesTable found!</h2>
+				<h2>Sorry no games found!</h2>
 			{/if}
 		</div>
 		<Pagination.Root count={totalCount} perPage={pageSize} let:pages let:currentPage>

src/routes/(auth)/+layout.svelte

@@ -32,7 +32,7 @@ let { data, children } = $props()
 		<div class="quote-wrapper">
 			<blockquote class="quote">
 				<p>
-					"How many gamesTable do I own? What was the last one I played? What haven't I played in a long
+					"How many games do I own? What was the last one I played? What haven't I played in a long
 					time? If this sounds like you then Bored Game is your new best friend."
 				</p>
 				<footer>Bradley</footer>

src/routes/+layout.svelte

@@ -12,7 +12,7 @@ import { Toaster } from '$lib/components/ui/sonner'
 import PageLoadingIndicator from '$lib/page_loading_indicator.svelte'
 import { toastMessage } from '$lib/utils/superforms.js'
 import { theme } from '$state/theme'
-import { ModeWatcher } from 'mode-watcher'
+// import { ModeWatcher } from 'mode-watcher'
 
 const dev = process.env.NODE_ENV !== 'production'
 
@@ -21,12 +21,12 @@ const { user } = data
 
 const metaTags = $derived({
 	titleTemplate: '%s | Bored Game',
-	description: 'Bored Game, keep track of your gamesTable.',
+	description: 'Bored Game, keep track of your games.',
 	openGraph: {
 		type: 'website',
 		titleTemplate: '%s | Bored Game',
 		locale: 'en_US',
-		description: 'Bored Game, keep track of your gamesTable',
+		description: 'Bored Game, keep track of your games',
 	},
 	...$page.data.metaTagsChild,
 })

tailwind.config.js

@@ -0,0 +1,65 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+import tailwindcssAnimate from "tailwindcss-animate";
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+	darkMode: ["class"],
+	content: ["./src/**/*.{html,js,svelte,ts}"],
+	theme: {
+		container: {
+			center: true,
+			padding: "2rem",
+			screens: {
+				"2xl": "1400px"
+			}
+		},
+		extend: {
+			colors: {
+				border: "hsl(var(--border))",
+				input: "hsl(var(--input))",
+				ring: "hsl(var(--ring))",
+				background: "hsl(var(--background))",
+				foreground: "hsl(var(--foreground))",
+				primary: {
+					DEFAULT: "hsl(var(--primary))",
+					foreground: "hsl(var(--primary-foreground))"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary))",
+					foreground: "hsl(var(--secondary-foreground))"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive))",
+					foreground: "hsl(var(--destructive-foreground))"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted))",
+					foreground: "hsl(var(--muted-foreground))"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent))",
+					foreground: "hsl(var(--accent-foreground))"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover))",
+					foreground: "hsl(var(--popover-foreground))"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card))",
+					foreground: "hsl(var(--card-foreground))"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	},
+	plugins: [tailwindcssAnimate]
+};
+
+export default config;

tailwind.config.ts

@@ -1,69 +0,0 @@
-import { fontFamily } from 'tailwindcss/defaultTheme'
-import type { Config } from 'tailwindcss'
-import tailwindcssAnimate from 'tailwindcss-animate'
-
-const config: Config = {
-	darkMode: ['class'],
-	content: ['./src/**/*.{html,js,svelte,ts}'],
-	safelist: ['dark'],
-	theme: {
-		spacing: {
-			'16': '4rem',
-		},
-		container: {
-			center: true,
-			padding: '2rem',
-			screens: {
-				'2xl': '1400px',
-			},
-		},
-		extend: {
-			colors: {
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))',
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))',
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))',
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))',
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))',
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))',
-				},
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))',
-				},
-			},
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)',
-			},
-			fontFamily: {
-				sans: [...fontFamily.sans],
-			},
-		},
-	},
-	plugins: [tailwindcssAnimate],
-}
-
-export default config