Adding card and radio-group, update deps, remove all custom css for now, add in theme from user and in layout, and change game to shad card.

package.json

@@ -25,15 +25,15 @@
 		"@playwright/test": "^1.35.1",
 		"@sveltejs/adapter-auto": "^1.0.3",
 		"@sveltejs/adapter-vercel": "^1.0.6",
-		"@sveltejs/kit": "^1.20.5",
+		"@sveltejs/kit": "^1.21.0",
 		"@types/cookie": "^0.5.1",
-		"@types/node": "^18.16.18",
+		"@types/node": "^18.16.19",
 		"@typescript-eslint/eslint-plugin": "^5.60.1",
 		"@typescript-eslint/parser": "^5.60.1",
 		"autoprefixer": "^10.4.14",
-		"eslint": "^8.43.0",
+		"eslint": "^8.44.0",
 		"eslint-config-prettier": "^8.8.0",
-		"eslint-plugin-svelte": "^2.31.1",
+		"eslint-plugin-svelte": "^2.32.2",
 		"just-clone": "^6.2.0",
 		"just-debounce-it": "^3.2.0",
 		"postcss": "^8.4.24",
@@ -42,12 +42,12 @@
 		"postcss-preset-env": "^8.5.1",
 		"prettier": "^2.8.8",
 		"prettier-plugin-svelte": "^2.10.1",
-		"prisma": "^4.16.1",
+		"prisma": "^4.16.2",
 		"sass": "^1.63.6",
 		"svelte": "^3.59.2",
 		"svelte-check": "^2.10.3",
 		"svelte-preprocess": "^5.0.4",
-		"sveltekit-superforms": "^1.1.2",
+		"sveltekit-superforms": "^1.1.3",
 		"tailwindcss": "^3.3.2",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.6.0",
@@ -81,7 +81,7 @@
 		"just-kebab-case": "^4.2.0",
 		"loader": "^2.1.1",
 		"lucia-auth": "^1.8.0",
-		"lucide-svelte": "^0.256.0",
+		"lucide-svelte": "^0.256.1",
 		"open-props": "^1.5.10",
 		"radix-svelte": "^0.8.0",
 		"svelte-lazy": "^1.2.1",

pnpm-lock.yaml

@@ -34,7 +34,7 @@ dependencies:
     version: 2.0.1
   '@prisma/client':
     specifier: 4.16.1
-    version: 4.16.1(prisma@4.16.1)
+    version: 4.16.1(prisma@4.16.2)
   '@types/feather-icons':
     specifier: ^4.29.1
     version: 4.29.1
@@ -63,8 +63,8 @@ dependencies:
     specifier: ^1.8.0
     version: 1.8.0
   lucide-svelte:
-    specifier: ^0.256.0
+    specifier: ^0.256.1
-    version: 0.256.0(svelte@3.59.2)
+    version: 0.256.1(svelte@3.59.2)
   open-props:
     specifier: ^1.5.10
     version: 1.5.10
@@ -82,7 +82,7 @@ dependencies:
     version: 0.2.1(svelte@3.59.2)
   sveltekit-flash-message:
     specifier: ^0.11.3
-    version: 0.11.3(@sveltejs/kit@1.20.5)(svelte@3.59.2)
+    version: 0.11.3(@sveltejs/kit@1.21.0)(svelte@3.59.2)
   tailwind-merge:
     specifier: ^1.13.2
     version: 1.13.2
@@ -99,37 +99,37 @@ devDependencies:
     version: 1.35.1
   '@sveltejs/adapter-auto':
     specifier: ^1.0.3
-    version: 1.0.3(@sveltejs/kit@1.20.5)
+    version: 1.0.3(@sveltejs/kit@1.21.0)
   '@sveltejs/adapter-vercel':
     specifier: ^1.0.6
-    version: 1.0.6(@sveltejs/kit@1.20.5)
+    version: 1.0.6(@sveltejs/kit@1.21.0)
   '@sveltejs/kit':
-    specifier: ^1.20.5
+    specifier: ^1.21.0
-    version: 1.20.5(svelte@3.59.2)(vite@4.3.9)
+    version: 1.21.0(svelte@3.59.2)(vite@4.3.9)
   '@types/cookie':
     specifier: ^0.5.1
     version: 0.5.1
   '@types/node':
-    specifier: ^18.16.18
+    specifier: ^18.16.19
-    version: 18.16.18
+    version: 18.16.19
   '@typescript-eslint/eslint-plugin':
     specifier: ^5.60.1
-    version: 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5)
+    version: 5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.44.0)(typescript@4.9.5)
   '@typescript-eslint/parser':
     specifier: ^5.60.1
-    version: 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+    version: 5.60.1(eslint@8.44.0)(typescript@4.9.5)
   autoprefixer:
     specifier: ^10.4.14
     version: 10.4.14(postcss@8.4.24)
   eslint:
-    specifier: ^8.43.0
+    specifier: ^8.44.0
-    version: 8.43.0
+    version: 8.44.0
   eslint-config-prettier:
     specifier: ^8.8.0
-    version: 8.8.0(eslint@8.43.0)
+    version: 8.8.0(eslint@8.44.0)
   eslint-plugin-svelte:
-    specifier: ^2.31.1
+    specifier: ^2.32.2
-    version: 2.31.1(eslint@8.43.0)(svelte@3.59.2)(ts-node@10.9.1)
+    version: 2.32.2(eslint@8.44.0)(svelte@3.59.2)(ts-node@10.9.1)
   just-clone:
     specifier: ^6.2.0
     version: 6.2.0
@@ -155,8 +155,8 @@ devDependencies:
     specifier: ^2.10.1
     version: 2.10.1(prettier@2.8.8)(svelte@3.59.2)
   prisma:
-    specifier: ^4.16.1
+    specifier: ^4.16.2
-    version: 4.16.1
+    version: 4.16.2
   sass:
     specifier: ^1.63.6
     version: 1.63.6
@@ -170,14 +170,14 @@ devDependencies:
     specifier: ^5.0.4
     version: 5.0.4(postcss-load-config@4.0.1)(postcss@8.4.24)(sass@1.63.6)(svelte@3.59.2)(typescript@4.9.5)
   sveltekit-superforms:
-    specifier: ^1.1.2
+    specifier: ^1.1.3
-    version: 1.1.2(@sveltejs/kit@1.20.5)(svelte@3.59.2)(zod@3.21.4)
+    version: 1.1.3(@sveltejs/kit@1.21.0)(svelte@3.59.2)(zod@3.21.4)
   tailwindcss:
     specifier: ^3.3.2
     version: 3.3.2(ts-node@10.9.1)
   ts-node:
     specifier: ^10.9.1
-    version: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
+    version: 10.9.1(@types/node@18.16.19)(typescript@4.9.5)
   tslib:
     specifier: ^2.6.0
     version: 2.6.0
@@ -186,7 +186,7 @@ devDependencies:
     version: 4.9.5
   vite:
     specifier: ^4.3.9
-    version: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+    version: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
   vitest:
     specifier: ^0.25.3
     version: 0.25.8(sass@1.63.6)
@@ -196,6 +196,11 @@ devDependencies:
 
 packages:
 
+  /@aashutoshrathi/word-wrap@1.2.6:
+    resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
@@ -980,13 +985,13 @@ packages:
     requiresBuild: true
     optional: true
 
-  /@eslint-community/eslint-utils@4.4.0(eslint@8.43.0):
+  /@eslint-community/eslint-utils@4.4.0(eslint@8.44.0):
     resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
     dependencies:
-      eslint: 8.43.0
+      eslint: 8.44.0
       eslint-visitor-keys: 3.4.1
     dev: true
 
@@ -995,13 +1000,13 @@ packages:
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
     dev: true
 
-  /@eslint/eslintrc@2.0.3:
+  /@eslint/eslintrc@2.1.0:
-    resolution: {integrity: sha512-+5gy6OQfk+xx3q0d6jGZZC3f3KzAkXc/IanVxd1is/VIIziRqqt3ongQz0FiTUXqTk0c7aDB3OaFuKnuSoJicQ==}
+    resolution: {integrity: sha512-Lj7DECXqIVCqnqjjHMPna4vn6GJcMgul/wuS0je9OZ9gsL0zzDpKPVtcG1HaDVc+9y+qgXneTeUMbCqXJNpH1A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       ajv: 6.12.6
       debug: 4.3.4
-      espree: 9.5.2
+      espree: 9.6.0
       globals: 13.19.0
       ignore: 5.2.1
       import-fresh: 3.3.0
@@ -1012,8 +1017,8 @@ packages:
       - supports-color
     dev: true
 
-  /@eslint/js@8.43.0:
+  /@eslint/js@8.44.0:
-    resolution: {integrity: sha512-s2UHCoiXfxMvmfzqoN+vrQ84ahUSYde9qNO1MdxmoEhyHWsfmwOpFlwYV+ePJEVc7gFnATGUi376WowX1N7tFg==}
+    resolution: {integrity: sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
@@ -1132,7 +1137,7 @@ packages:
       '@prisma/client': ^4.2.0
       lucia-auth: ^1.3.0
     dependencies:
-      '@prisma/client': 4.16.1(prisma@4.16.1)
+      '@prisma/client': 4.16.1(prisma@4.16.2)
       lucia-auth: 1.8.0
     dev: false
 
@@ -1189,7 +1194,7 @@ packages:
     engines: {node: '>=16'}
     hasBin: true
     dependencies:
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
       playwright-core: 1.35.1
     optionalDependencies:
       fsevents: 2.3.2
@@ -1198,7 +1203,7 @@ packages:
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
-  /@prisma/client@4.16.1(prisma@4.16.1):
+  /@prisma/client@4.16.1(prisma@4.16.2):
     resolution: {integrity: sha512-CoDHu7Bt+NuDo40ijoeHP79EHtECsPBTy3yte5Yo3op8TqXt/kV0OT5OrsWewKvQGKFMHhYQ+ePed3zzjYdGAw==}
     engines: {node: '>=14.17'}
     requiresBuild: true
@@ -1209,15 +1214,15 @@ packages:
         optional: true
     dependencies:
       '@prisma/engines-version': 4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c
-      prisma: 4.16.1
+      prisma: 4.16.2
     dev: false
 
   /@prisma/engines-version@4.16.0-66.b20ead4d3ab9e78ac112966e242ded703f4a052c:
     resolution: {integrity: sha512-tMWAF/qF00fbUH1HB4Yjmz6bjh7fzkb7Y3NRoUfMlHu6V+O45MGvqwYxqwBjn1BIUXkl3r04W351D4qdJjrgvA==}
     dev: false
 
-  /@prisma/engines@4.16.1:
+  /@prisma/engines@4.16.2:
-    resolution: {integrity: sha512-gpZG0kGGxfemgvK/LghHdBIz+crHkZjzszja94xp4oytpsXrgt/Ice82MvPsWMleVIniKuARrowtsIsim0PFJQ==}
+    resolution: {integrity: sha512-vx1nxVvN4QeT/cepQce68deh/Turxy5Mr+4L4zClFuK1GlxN3+ivxfuv+ej/gvidWn1cE1uAhW7ALLNlYbRUAw==}
     requiresBuild: true
 
   /@rollup/pluginutils@4.2.1:
@@ -1228,21 +1233,21 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.20.5):
+  /@sveltejs/adapter-auto@1.0.3(@sveltejs/kit@1.21.0):
     resolution: {integrity: sha512-hc7O12YQqvZ1CD4fo1gMJuPzBZvuoG5kwxb2RRoz4fVoB8B2vuPO2cY751Ln0G6T/HMrAf8kCqw6Pg+wbxcstw==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
       import-meta-resolve: 2.2.0
     dev: true
 
-  /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.20.5):
+  /@sveltejs/adapter-vercel@1.0.6(@sveltejs/kit@1.21.0):
     resolution: {integrity: sha512-fo6aaEygPd/6B5Jms4Ff7R4jbADnppuLvKOWBNTGe5MGB7ZRUkl+gxHWMQx2av2knyEZkA6V8y5M6R3ML5yN4g==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
       '@vercel/nft': 0.22.6
       esbuild: 0.16.8
     transitivePeerDependencies:
@@ -1250,8 +1255,8 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/kit@1.20.5(svelte@3.59.2)(vite@4.3.9):
+  /@sveltejs/kit@1.21.0(svelte@3.59.2)(vite@4.3.9):
-    resolution: {integrity: sha512-8rJYZ2boRlO75lwpbpB+DlSzIwmTuamXTpVlDtw4dBk86o3UaDe/+Ro4xCsV/4FtTw2U8xPHyV83edAWbQHG0w==}
+    resolution: {integrity: sha512-CBsYoI34SjtOQp0eG85dmVnvTR3Pjs8VgAQhO0CgQja9BIorKl808F1X8EunPhCcyek5r5lKQE1Mmbi0RuzHqA==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
     requiresBuild: true
@@ -1272,7 +1277,7 @@ packages:
       sirv: 2.0.2
       svelte: 3.59.2
       undici: 5.22.0
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
     transitivePeerDependencies:
       - supports-color
 
@@ -1287,7 +1292,7 @@ packages:
       '@sveltejs/vite-plugin-svelte': 2.4.1(svelte@3.59.2)(vite@4.3.9)
       debug: 4.3.4
       svelte: 3.59.2
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
     transitivePeerDependencies:
       - supports-color
 
@@ -1305,7 +1310,7 @@ packages:
       magic-string: 0.30.0
       svelte: 3.59.2
       svelte-hmr: 0.15.2(svelte@3.59.2)
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
       vitefu: 0.2.4(vite@4.3.9)
     transitivePeerDependencies:
       - supports-color
@@ -1343,8 +1348,8 @@ packages:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
 
-  /@types/node@18.16.18:
+  /@types/node@18.16.19:
-    resolution: {integrity: sha512-/aNaQZD0+iSBAGnvvN2Cx92HqE5sZCPZtx2TsK+4nvV23fFe09jVDvpArXr2j9DnYlzuU9WuoykDDc6wqvpNcw==}
+    resolution: {integrity: sha512-IXl7o+R9iti9eBW4Wg2hx1xQDig183jj7YLn8F7udNceyfkbn1ZxmzZXuak20gR40D7pIkIY1kYGx5VIGbaHKA==}
 
   /@types/pug@2.0.6:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
@@ -1353,7 +1358,7 @@ packages:
   /@types/sass@1.43.1:
     resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
     dependencies:
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
     dev: true
 
   /@types/semver@7.5.0:
@@ -1364,7 +1369,7 @@ packages:
     resolution: {integrity: sha512-txGIh+0eDFzKGC25zORnswy+br1Ha7hj5cMVwKIU7+s0U2AxxJru/jZSMU6OC9MJWP6+pc/hc6ZjyZShpsyY2g==}
     dev: false
 
-  /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.44.0)(typescript@4.9.5):
     resolution: {integrity: sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1376,12 +1381,12 @@ packages:
         optional: true
     dependencies:
       '@eslint-community/regexpp': 4.5.0
-      '@typescript-eslint/parser': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/parser': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
       '@typescript-eslint/scope-manager': 5.60.1
-      '@typescript-eslint/type-utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/type-utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
-      '@typescript-eslint/utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
       debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
       grapheme-splitter: 1.0.4
       ignore: 5.2.1
       natural-compare-lite: 1.4.0
@@ -1392,7 +1397,7 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/parser@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/parser@5.60.1(eslint@8.44.0)(typescript@4.9.5):
     resolution: {integrity: sha512-pHWlc3alg2oSMGwsU/Is8hbm3XFbcrb6P5wIxcQW9NsYBfnrubl/GhVVD/Jm/t8HXhA2WncoIRfBtnCgRGV96Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1406,7 +1411,7 @@ packages:
       '@typescript-eslint/types': 5.60.1
       '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5)
       debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
       typescript: 4.9.5
     transitivePeerDependencies:
       - supports-color
@@ -1420,7 +1425,7 @@ packages:
       '@typescript-eslint/visitor-keys': 5.60.1
     dev: true
 
-  /@typescript-eslint/type-utils@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/type-utils@5.60.1(eslint@8.44.0)(typescript@4.9.5):
     resolution: {integrity: sha512-vN6UztYqIu05nu7JqwQGzQKUJctzs3/Hg7E2Yx8rz9J+4LgtIDFWjjl1gm3pycH0P3mHAcEUBd23LVgfrsTR8A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
@@ -1431,9 +1436,9 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5)
-      '@typescript-eslint/utils': 5.60.1(eslint@8.43.0)(typescript@4.9.5)
+      '@typescript-eslint/utils': 5.60.1(eslint@8.44.0)(typescript@4.9.5)
       debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
       tsutils: 3.21.0(typescript@4.9.5)
       typescript: 4.9.5
     transitivePeerDependencies:
@@ -1466,19 +1471,19 @@ packages:
       - supports-color
     dev: true
 
-  /@typescript-eslint/utils@5.60.1(eslint@8.43.0)(typescript@4.9.5):
+  /@typescript-eslint/utils@5.60.1(eslint@8.44.0)(typescript@4.9.5):
     resolution: {integrity: sha512-tiJ7FFdFQOWssFa3gqb94Ilexyw0JVxj6vBzaSpfN/8IhoKkDuSAenUKvsSHw2A/TMpJb26izIszTXaqygkvpQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || ^8.0.0
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
       '@types/json-schema': 7.0.12
       '@types/semver': 7.5.0
       '@typescript-eslint/scope-manager': 5.60.1
       '@typescript-eslint/types': 5.60.1
       '@typescript-eslint/typescript-estree': 5.60.1(typescript@4.9.5)
-      eslint: 8.43.0
+      eslint: 8.44.0
       eslint-scope: 5.1.1
       semver: 7.3.8
     transitivePeerDependencies:
@@ -2053,29 +2058,29 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /eslint-config-prettier@8.8.0(eslint@8.43.0):
+  /eslint-config-prettier@8.8.0(eslint@8.44.0):
     resolution: {integrity: sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==}
     hasBin: true
     peerDependencies:
       eslint: '>=7.0.0'
     dependencies:
-      eslint: 8.43.0
+      eslint: 8.44.0
     dev: true
 
-  /eslint-plugin-svelte@2.31.1(eslint@8.43.0)(svelte@3.59.2)(ts-node@10.9.1):
+  /eslint-plugin-svelte@2.32.2(eslint@8.44.0)(svelte@3.59.2)(ts-node@10.9.1):
-    resolution: {integrity: sha512-08v+DqzHiwIVEbi+266D7+BDhayp9OSqCwa/lHaZlZOlFY0vZLYs/h7SkkUPzA5fTVt8OUJBtvCxFiWEYOvvGg==}
+    resolution: {integrity: sha512-Jgbop2fNZsoxxkklZAIbDNhwAPynvnCtUXLsEC6O2qax7N/pfe2cNqT0ZoBbubXKJitQQDEyVDQ1rZs4ZWcrTA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0-0
-      svelte: ^3.37.0 || ^4.0.0-0
+      svelte: ^3.37.0 || ^4.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
       '@jridgewell/sourcemap-codec': 1.4.15
       debug: 4.3.4
-      eslint: 8.43.0
+      eslint: 8.44.0
       esutils: 2.0.3
       known-css-properties: 0.27.0
       postcss: 8.4.24
@@ -2084,7 +2089,7 @@ packages:
       postcss-selector-parser: 6.0.13
       semver: 7.5.3
       svelte: 3.59.2
-      svelte-eslint-parser: 0.31.0(svelte@3.59.2)
+      svelte-eslint-parser: 0.32.0(svelte@3.59.2)
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -2111,15 +2116,15 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /eslint@8.43.0:
+  /eslint@8.44.0:
-    resolution: {integrity: sha512-aaCpf2JqqKesMFGgmRPessmVKjcGXqdlAYLLC3THM8t5nBRZRQ+st5WM/hoJXkdioEXLLbXgclUpM0TXo5HX5Q==}
+    resolution: {integrity: sha512-0wpHoUbDUHgNCyvFB5aXLiQVfK9B0at6gUvzy83k4kAsQ/u769TQDX6iKC+aO4upIHO9WSaA3QoXYQDHbNwf1A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     hasBin: true
     dependencies:
-      '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0)
+      '@eslint-community/eslint-utils': 4.4.0(eslint@8.44.0)
       '@eslint-community/regexpp': 4.5.0
-      '@eslint/eslintrc': 2.0.3
+      '@eslint/eslintrc': 2.1.0
-      '@eslint/js': 8.43.0
+      '@eslint/js': 8.44.0
       '@humanwhocodes/config-array': 0.11.10
       '@humanwhocodes/module-importer': 1.0.1
       '@nodelib/fs.walk': 1.2.8
@@ -2131,7 +2136,7 @@ packages:
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.0
       eslint-visitor-keys: 3.4.1
-      espree: 9.5.2
+      espree: 9.6.0
       esquery: 1.5.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -2151,7 +2156,7 @@ packages:
       lodash.merge: 4.6.2
       minimatch: 3.1.2
       natural-compare: 1.4.0
-      optionator: 0.9.1
+      optionator: 0.9.3
       strip-ansi: 6.0.1
       strip-json-comments: 3.1.1
       text-table: 0.2.0
@@ -2162,8 +2167,8 @@ packages:
   /esm-env@1.0.0:
     resolution: {integrity: sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==}
 
-  /espree@9.5.2:
+  /espree@9.6.0:
-    resolution: {integrity: sha512-7OASN1Wma5fum5SrNhFMAMJxOUAbhyfQ8dQ//PJaJbNw0URTPWqIghHWt1MmAANKhHZIYOHruW4Kw4ruUWOdGw==}
+    resolution: {integrity: sha512-1FH/IiruXZ84tpUlm0aCUEwMl2Ho5ilqVh0VvQXw+byAz/4SAciyHLlfmL5WYqsvD38oymdUwBss0LtK8m4s/A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dependencies:
       acorn: 8.9.0
@@ -2629,10 +2634,10 @@ packages:
     resolution: {integrity: sha512-zI8gT2AOpxTPIxYzToEdgoht+GOflrduZiHPsOEmg4/2pThOyCW3o3lXh+Uwh20tJ9QoXwQe9/Omn6PlUG6efw==}
     dev: false
 
-  /lucide-svelte@0.256.0(svelte@3.59.2):
+  /lucide-svelte@0.256.1(svelte@3.59.2):
-    resolution: {integrity: sha512-F1XMEOV+uyVbGygzojz0ly7pa+fQb0l1uxc6g1MDZQBoqo4LPgqTdaDWMkpH+YEsIsA3OIs7PEcTs9AZmTaIXQ==}
+    resolution: {integrity: sha512-Fk8kQ5Xal9lxvX7T4fkyo592so3zzBtwfAfCOtptEh68jOKery/DyMlhY5m/Bh0M0pvb87soakYchighTBzPLQ==}
     peerDependencies:
-      svelte: ^3.49.0
+      svelte: '>=3 <5'
     dependencies:
       svelte: 3.59.2
     dev: false
@@ -2842,16 +2847,16 @@ packages:
     resolution: {integrity: sha512-iE+B7Zo0ytgeUNI38uHiBrxF5Nnv3uX8AzogBXzf7wqeNyG6oqQEEBs1gnAZdRF+h7IRO0zOGM5d9/huiNFR+w==}
     dev: false
 
-  /optionator@0.9.1:
+  /optionator@0.9.3:
-    resolution: {integrity: sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==}
+    resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==}
     engines: {node: '>= 0.8.0'}
     dependencies:
+      '@aashutoshrathi/word-wrap': 1.2.6
       deep-is: 0.1.4
       fast-levenshtein: 2.0.6
       levn: 0.4.1
       prelude-ls: 1.2.1
       type-check: 0.4.0
-      word-wrap: 1.2.3
     dev: true
 
   /p-limit@3.1.0:
@@ -3135,7 +3140,7 @@ packages:
     dependencies:
       lilconfig: 2.1.0
       postcss: 8.4.24
-      ts-node: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
+      ts-node: 10.9.1(@types/node@18.16.19)(typescript@4.9.5)
       yaml: 1.10.2
     dev: true
 
@@ -3153,7 +3158,7 @@ packages:
     dependencies:
       lilconfig: 2.0.6
       postcss: 8.4.24
-      ts-node: 10.9.1(@types/node@18.16.18)(typescript@4.9.5)
+      ts-node: 10.9.1(@types/node@18.16.19)(typescript@4.9.5)
       yaml: 2.1.3
 
   /postcss-logical@6.2.0(postcss@8.4.24):
@@ -3377,13 +3382,13 @@ packages:
     resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
     dev: false
 
-  /prisma@4.16.1:
+  /prisma@4.16.2:
-    resolution: {integrity: sha512-C2Xm7yxHxjFjjscBEW4tmoraPHH/Vyu/A0XABdbaFtoiOZARsxvOM7rwc2iZ0qVxbh0bGBGBWZUSXO/52/nHBQ==}
+    resolution: {integrity: sha512-SYCsBvDf0/7XSJyf2cHTLjLeTLVXYfqp7pG5eEVafFLeT0u/hLFz/9W196nDRGUOo1JfPatAEb+uEnTQImQC1g==}
     engines: {node: '>=14.17'}
     hasBin: true
     requiresBuild: true
     dependencies:
-      '@prisma/engines': 4.16.1
+      '@prisma/engines': 4.16.2
 
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
@@ -3709,18 +3714,18 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.31.0(svelte@3.59.2):
+  /svelte-eslint-parser@0.32.0(svelte@3.59.2):
-    resolution: {integrity: sha512-/31RpBf/e3YjoFphjsyo3JRyN1r4UalGAGafXrZ6EJK4h4COOO0rbfBoen5byGsXnIJKsrlC1lkEd2Vzpq2IDg==}
+    resolution: {integrity: sha512-Q8Nh3GHHoWZMv3Ej4zw+3+gyWPR8I5pPTJXEOvW+JOgwhGXqGKh7mOKNlVcEPtk+PCGiK9TPaRtvRkKoJR327A==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0-0
+      svelte: ^3.37.0 || ^4.0.0
     peerDependenciesMeta:
       svelte:
         optional: true
     dependencies:
       eslint-scope: 7.2.0
       eslint-visitor-keys: 3.4.1
-      espree: 9.5.2
+      espree: 9.6.0
       postcss: 8.4.24
       postcss-scss: 4.0.6(postcss@8.4.24)
       svelte: 3.59.2
@@ -3865,24 +3870,24 @@ packages:
     resolution: {integrity: sha512-vzSyuGr3eEoAtT/A6bmajosJZIUWySzY2CzB3w2pgPvnkUjGqlDnsNnA0PMO+mMAhuyMul6C2uuZzY6ELSkzyA==}
     engines: {node: '>= 8'}
 
-  /sveltekit-flash-message@0.11.3(@sveltejs/kit@1.20.5)(svelte@3.59.2):
+  /sveltekit-flash-message@0.11.3(@sveltejs/kit@1.21.0)(svelte@3.59.2):
     resolution: {integrity: sha512-tMKBobVFLYth0z2Kq9M+pi7Ip2OBhOrzivzx64v9+D2bWRwnZ3pmdWStYfQYxlz5CayozRQsmtipNg1vM+JN9Q==}
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
       svelte: ^3
     dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
       svelte: 3.59.2
     dev: false
 
-  /sveltekit-superforms@1.1.2(@sveltejs/kit@1.20.5)(svelte@3.59.2)(zod@3.21.4):
+  /sveltekit-superforms@1.1.3(@sveltejs/kit@1.21.0)(svelte@3.59.2)(zod@3.21.4):
-    resolution: {integrity: sha512-oWW3+Phcs/CkUKGEx0IsCr6Dw3a22/MVs4Tvi8k/jh66pqwP/jOZu3/dT367pkbIh5T7NK20yrnbHu8nm2E7pQ==}
+    resolution: {integrity: sha512-BMyzxYXppdSyzeMPd5VFfJRr0Gr/EpUISz4d97vSFuP+/HTACg7qTI+M0sddJ7IvVw/9PAzIvKFh+FRfmeOmaQ==}
     peerDependencies:
       '@sveltejs/kit': 1.x
       svelte: 3.x || 4.x
       zod: 3.x
     dependencies:
-      '@sveltejs/kit': 1.20.5(svelte@3.59.2)(vite@4.3.9)
+      '@sveltejs/kit': 1.21.0(svelte@3.59.2)(vite@4.3.9)
       svelte: 3.59.2
       zod: 3.21.4
     dev: true
@@ -3998,7 +4003,7 @@ packages:
   /ts-interface-checker@0.1.13:
     resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
 
-  /ts-node@10.9.1(@types/node@18.16.18)(typescript@4.9.5):
+  /ts-node@10.9.1(@types/node@18.16.19)(typescript@4.9.5):
     resolution: {integrity: sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==}
     hasBin: true
     peerDependencies:
@@ -4017,7 +4022,7 @@ packages:
       '@tsconfig/node12': 1.0.11
       '@tsconfig/node14': 1.0.3
       '@tsconfig/node16': 1.0.4
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
       acorn: 8.8.2
       acorn-walk: 8.2.0
       arg: 4.1.3
@@ -4108,7 +4113,7 @@ packages:
   /v8-compile-cache-lib@3.0.1:
     resolution: {integrity: sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==}
 
-  /vite@4.3.9(@types/node@18.16.18)(sass@1.63.6):
+  /vite@4.3.9(@types/node@18.16.19)(sass@1.63.6):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -4133,7 +4138,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
       esbuild: 0.17.18
       postcss: 8.4.24
       rollup: 3.21.0
@@ -4149,7 +4154,7 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
 
   /vitest@0.25.8(sass@1.63.6):
     resolution: {integrity: sha512-X75TApG2wZTJn299E/TIYevr4E9/nBo1sUtZzn0Ci5oK8qnpZAZyhwg0qCeMSakGIWtc6oRwcQFyFfW14aOFWg==}
@@ -4175,7 +4180,7 @@ packages:
     dependencies:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
-      '@types/node': 18.16.18
+      '@types/node': 18.16.19
       acorn: 8.8.1
       acorn-walk: 8.2.0
       chai: 4.3.7
@@ -4186,7 +4191,7 @@ packages:
       tinybench: 2.3.1
       tinypool: 0.3.0
       tinyspy: 1.0.2
-      vite: 4.3.9(@types/node@18.16.18)(sass@1.63.6)
+      vite: 4.3.9(@types/node@18.16.19)(sass@1.63.6)
     transitivePeerDependencies:
       - less
       - sass
@@ -4230,11 +4235,6 @@ packages:
       triple-beam: 1.3.0
     dev: false
 
-  /word-wrap@1.2.3:
-    resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
 

src/app.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<meta name="robots" content="noindex, nofollow" />
 		<meta charset="utf-8" />
 		<meta name="description" content="Bored? Find a game! Bored Game!" />
 		<link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />

src/app.postcss

@@ -9,7 +9,9 @@
 @tailwind utilities;
 
 @layer base {
-	:root {
+	:root,
+	.light,
+	system {
 		--background: 0 0% 100%;
 		--foreground: 222.2 47.4% 11.2%;
 
@@ -40,6 +42,39 @@
 		--ring: 215 20.2% 65.1%;
 
 		--radius: 0.5rem;
+
+		/* @media (prefers-color-scheme: dark) {
+			--background: 224 71% 4%;
+			--foreground: 213 31% 91%;
+
+			--muted: 223 47% 11%;
+			--muted-foreground: 215.4 16.3% 56.9%;
+
+			--accent: 216 34% 17%;
+			--accent-foreground: 210 40% 98%;
+
+			--popover: 224 71% 4%;
+			--popover-foreground: 215 20.2% 65.1%;
+
+			--border: 216 34% 17%;
+			--input: 216 34% 17%;
+
+			--card: 224 71% 4%;
+			--card-foreground: 213 31% 91%;
+
+			--primary: 210 40% 98%;
+			--primary-foreground: 222.2 47.4% 1.2%;
+
+			--secondary: 222.2 47.4% 11.2%;
+			--secondary-foreground: 210 40% 98%;
+
+			--destructive: 359 51% 48%;
+			--destructive-foreground: 210 40% 98%;
+
+			--ring: 216 34% 17%;
+
+			--radius: 0.5rem;
+		} */
 	}
 
 	.dark {
@@ -85,7 +120,7 @@
 		font-feature-settings: 'rlig' 1, 'calt' 1;
 	}
 }
-/* 
+/*
 :root {
 	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

src/lib/components/game/index.svelte

@@ -4,7 +4,7 @@
 	import { fade } from 'svelte/transition';
 	import plusCircle from '@iconify-icons/line-md/plus-circle';
 	import minusCircle from '@iconify-icons/line-md/minus-circle';
-	import Button from '$lib/components/button/index.svelte';
+	// import Button from '$lib/components/button/index.svelte';
 	import type { GameType, SavedGameType } from '$lib/types';
 	import { collectionStore } from '$lib/stores/collectionStore';
 	import { wishlistStore } from '$lib/stores/wishlistStore';
@@ -13,6 +13,8 @@
 	import { browser } from '$app/environment';
   import { binarySearchOnStore } from '$lib/util/binarySearchOnStore';
   import { convertToSavedGame } from '$lib/util/gameMapper';
+	import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$components/ui/card';
+	import { Button } from '$components/ui/button';
 
 	export let game: GameType | SavedGameType;
 	export let detailed: boolean = false;
@@ -27,7 +29,7 @@
 		dispatch('handleRemoveCollection', game);
 	}
 
-	function onCollectionClick() {	
+	function onCollectionClick() {
 		if (existsInCollection) {
 			removeGameFromCollection();
 		} else {
@@ -74,7 +76,51 @@
 	$: wishlistText = existsInWishlist ? 'Remove from wishlist' : 'Add to wishlist';
 </script>
 
-<article class="game-container" transition:fade>
+<article class="grid grid-template-cols-2 gap-4" transition:fade>
+	<Card>
+		<CardHeader>
+			<CardTitle>{game.name}</CardTitle>
+			<!-- <CardDescription>Card Description</CardDescription> -->
+		</CardHeader>
+		<CardContent>
+			<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />
+			<div class="game-details">
+			{#if game?.players}
+				<p>Players: {game.players}</p>
+				<p>Time: {game.playtime} minutes</p>
+				{#if isGameType(game) && game?.min_age}
+					<p>Min Age: {game.min_age}</p>
+				{/if}
+				{#if detailed && isGameType(game) && game?.description}
+					<div class="description">{@html game.description}</div>
+				{/if}
+			{/if}
+		</div>
+		</CardContent>
+		<CardFooter>
+	<div class="flex gap-2">
+		<Button variant={existsInCollection ? 'destructive' : 'default'} on:click={onCollectionClick}>
+			{collectionText}
+			{#if existsInCollection}
+				<iconify-icon class="ml-2" icon={minusCircle} width="24" height="24" />
+			{:else}
+				<iconify-icon class="ml-2" icon={plusCircle} width="24" height="24" />
+			{/if}
+		</Button>
+		<Button variant={existsInCollection ? 'destructive' : 'default'} on:click={onWishlistClick}>
+			{wishlistText}
+			{#if existsInWishlist}
+				<iconify-icon class="ml-2" icon={minusCircle} width="24" height="24" />
+			{:else}
+				<iconify-icon class="ml-2" icon={plusCircle} width="24" height="24" />
+			{/if}
+		</Button>
+	</div>
+		</CardFooter>
+	</Card>
+</article>
+
+<!-- <article class="game-container" transition:fade>
 	<h2>{game.name}</h2>
 	<a
 		class="thumbnail"
@@ -83,11 +129,11 @@
 		data-sveltekit-preload-data
 	>
 		<!-- <Image src={game.thumb_url} alt={`Image of ${game.name}`} /> -->
-		<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />
+		<!-- <img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" /> -->
 		<!-- loading="lazy" decoding="async" -->
-	</a>
+	<!-- </a> -->
 
-		<div class="game-details">
+		<!-- <div class="game-details">
 			{#if game?.players}
 				<p>Players: {game.players}</p>
 				<p>Time: {game.playtime} minutes</p>
@@ -117,8 +163,8 @@
 				<iconify-icon icon={plusCircle} width="24" height="24" />
 			{/if}
 		</Button>
-	</div>
+	</div> -->
-</article>
+<!-- </article> -->
 
 <style lang="scss">
 	.game-container {
@@ -137,9 +183,9 @@
 		transition: all 0.3s;
 		border-radius: 8px;
 		background-color: var(--primary);
-		&:hover {
+		/* &:hover {
 			background-color: hsla(222, 9%, 65%, 1);
-		}
+		} */
 
 		/* .game-info {
 			display: grid;

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div
+	class={cn(
+		"rounded-lg border bg-card text-card-foreground shadow-sm",
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>

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

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	export let tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" = "h3";
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from "./Card.svelte";
+export { default as CardContent } from "./CardContent.svelte";
+export { default as CardDescription } from "./CardDescription.svelte";
+export { default as CardFooter } from "./CardFooter.svelte";
+export { default as CardHeader } from "./CardHeader.svelte";
+export { default as CardTitle } from "./CardTitle.svelte";

src/lib/components/ui/radio-group/RadioGroup.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { RadioGroupRootProps } from "radix-svelte";
+	import { RadioGroup as RadioGroupPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: RadioGroupRootProps["value"] = undefined;
+</script>
+
+<RadioGroupPrimitive.Root
+	bind:value
+	class={cn("grid gap-2", className)}
+	{...$$restProps}
+>
+	<slot />
+</RadioGroupPrimitive.Root>

src/lib/components/ui/radio-group/RadioGroupItem.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { RadioGroupItemProps } from "radix-svelte";
+	import { Circle } from "lucide-svelte";
+	import { RadioGroup as RadioGroupPrimitive } from "radix-svelte";
+	import { cn } from "$lib/utils";
+
+	let className: string | undefined | null = undefined;
+	export { className as class };
+	export let value: RadioGroupItemProps["value"] = "";
+</script>
+
+<RadioGroupPrimitive.Item
+	{value}
+	class={cn(
+		"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	{...$$restProps}
+>
+	<RadioGroupPrimitive.Indicator class="flex items-center justify-center">
+		<Circle class="h-2.5 w-2.5 fill-current text-current" />
+	</RadioGroupPrimitive.Indicator>
+</RadioGroupPrimitive.Item>

src/lib/components/ui/radio-group/index.ts

@@ -0,0 +1,2 @@
+export { default as RadioGroup } from "./RadioGroup.svelte";
+export { default as RadioGroupItem } from "./RadioGroupItem.svelte";

src/lib/server/lucia.ts

@@ -18,7 +18,8 @@ export const auth = lucia({
 			lastName: userData.lastName,
 			verified: userData.verified,
 			receiveEmail: userData.receiveEmail,
-			token: userData.token
+			token: userData.token,
+			theme: userData.theme
 		};
 	},
 	experimental: {

src/routes/+layout.svelte

@@ -17,8 +17,10 @@
 	import { gameStore } from '$lib/stores/gameSearchStore';
 	import { toast } from '$lib/components/toast/toast';
 	import Toast from '$lib/components/toast/Toast.svelte';
+	import { theme } from '$state/theme';
 	// import '$styles/styles.pcss';
 	import type { SavedGameType } from '$lib/types';
+	import { onMount } from "svelte";
 
 	$: {
 		if ($navigating) {
@@ -70,10 +72,17 @@
 	const dev = process.env.NODE_ENV !== 'production';
 
 	export let data;
+	$: ({ user } = data);
+
+	onMount(() => {
+		// set the theme to the user's active theme
+		$theme = user?.theme || 'system';
+		document.querySelector('html')?.setAttribute('data-theme', $theme);
+	});
 </script>
 
 {#if !dev}
-	<Analytics></Analytics>
+	<Analytics />
 {/if}
 
 <!-- {#if dev}

src/state/theme.ts

@@ -0,0 +1,38 @@
+import { writable } from 'svelte/store';
+
+export const theme = writable('system');
+
+const new_theme_selector = () => {
+	const { subscribe, update, set } = writable({
+		status: 'CLOSED'
+	});
+
+	function open() {
+		update((theme) => {
+			return { ...theme, status: 'OPEN' };
+		});
+	}
+
+	function close() {
+		update((theme) => {
+			return { ...theme, status: 'CLOSED' };
+		});
+	}
+
+	function toggle() {
+		update((theme) => {
+			return { ...theme, status: status === 'CLOSED' ? 'OPEN' : 'CLOSED' };
+		});
+	}
+
+	return {
+		subscribe,
+		update,
+		set,
+		close,
+		open,
+		toggle
+	};
+};
+
+export const theme_selector = new_theme_selector();

svelte.config.js

@@ -16,6 +16,7 @@ const config = {
 			'$components/*': 'src/lib/components/*',
 			$db: './src/db',
 			$lib: './src/lib',
+			$state: './src/state',
 			$styles: './src/styles',
 			$themes: './src/themes'
 		}