your personal website on atproto - mirror
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

add colors to cards

Florian 8db0106f 13baa657

+422 -8
+1
package.json
··· 45 45 "@atcute/oauth-browser-client": "^1.0.13", 46 46 "@atproto/api": "^0.15.6", 47 47 "@atproto/common-web": "^0.4.2", 48 + "@foxui/colors": "^0.4.7", 48 49 "@foxui/core": "^0.4.7", 49 50 "@foxui/social": "^0.4.7", 50 51 "@tailwindcss/typography": "^0.5.16",
+23
pnpm-lock.yaml
··· 20 20 '@atproto/common-web': 21 21 specifier: ^0.4.2 22 22 version: 0.4.2 23 + '@foxui/colors': 24 + specifier: ^0.4.7 25 + version: 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5) 23 26 '@foxui/core': 24 27 specifier: ^0.4.7 25 28 version: 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5) ··· 601 604 '@floating-ui/utils@0.2.10': 602 605 resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==, tarball: https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz} 603 606 607 + '@foxui/colors@0.4.7': 608 + resolution: {integrity: sha512-P40GBuwerikysWctVL1KSUrjxzlAf5j1jZ0z6+pzkWdfTv8wGxXlJcvJCkA1MkTeatLkyBrHLrIF17u2iRrMkw==, tarball: https://registry.npmjs.org/@foxui/colors/-/colors-0.4.7.tgz} 609 + peerDependencies: 610 + svelte: '>=5' 611 + tailwindcss: '>=3' 612 + 604 613 '@foxui/core@0.4.7': 605 614 resolution: {integrity: sha512-/J31Zra1Jlfn2HeLqKj7q2LmZoDc5pPEZU1SMrLYpJuv3QN+rl9qzAal0gwjGbhgNA/jAk7P2jqTgF4adngMkw==, tarball: https://registry.npmjs.org/@foxui/core/-/core-0.4.7.tgz} 606 615 peerDependencies: ··· 1062 1071 resolution: {integrity: sha512-FE1stRoqdHSb7RxesMfCXE8icwI1W6zGE/512ae3ZDrpkQYTTYeSyUJPRCjZd8CwVAhpDUbi1YR8pcZioFJQ/w==, tarball: https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.5.tgz} 1063 1072 peerDependencies: 1064 1073 vite: ^5.2.0 || ^6 1074 + 1075 + '@texel/color@1.1.11': 1076 + resolution: {integrity: sha512-/3kKgfBqzrRfLl4RsEccx+Yfj1kVL6Bh6DejVWZ+DPg/jJdcfdYZ5fpD1nXFwWd8OQNATjz+WqsfQfUynSsgRg==, tarball: https://registry.npmjs.org/@texel/color/-/color-1.1.11.tgz} 1065 1077 1066 1078 '@tiptap/core@2.12.0': 1067 1079 resolution: {integrity: sha512-3qX8oGVKFFZzQ0vit+ZolR6AJIATBzmEmjAA0llFhWk4vf3v64p1YcXcJsOBsr5scizJu5L6RYWEFatFwqckRg==, tarball: https://registry.npmjs.org/@tiptap/core/-/core-2.12.0.tgz} ··· 3075 3087 3076 3088 '@floating-ui/utils@0.2.10': {} 3077 3089 3090 + '@foxui/colors@0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)': 3091 + dependencies: 3092 + '@foxui/core': 0.4.7(svelte@5.45.8)(tailwindcss@4.1.5) 3093 + '@texel/color': 1.1.11 3094 + '@use-gesture/vanilla': 10.3.1 3095 + bits-ui: 1.8.0(svelte@5.45.8) 3096 + svelte: 5.45.8 3097 + tailwindcss: 4.1.5 3098 + 3078 3099 '@foxui/core@0.4.7(svelte@5.45.8)(tailwindcss@4.1.5)': 3079 3100 dependencies: 3080 3101 '@number-flow/svelte': 0.3.9(svelte@5.45.8) ··· 3485 3506 '@tailwindcss/oxide': 4.1.5 3486 3507 tailwindcss: 4.1.5 3487 3508 vite: 6.3.5(jiti@2.4.2)(lightningcss@1.29.2) 3509 + 3510 + '@texel/color@1.1.11': {} 3488 3511 3489 3512 '@tiptap/core@2.12.0(@tiptap/pm@2.12.0)': 3490 3513 dependencies:
+307
src/app.css
··· 59 59 --base-900: var(--color-neutral-900); 60 60 --base-950: var(--color-neutral-950); 61 61 } 62 + 63 + .red { 64 + --accent-50: var(--color-red-50); 65 + --accent-100: var(--color-red-100); 66 + --accent-200: var(--color-red-200); 67 + --accent-300: var(--color-red-300); 68 + --accent-400: var(--color-red-400); 69 + --accent-500: var(--color-red-500); 70 + --accent-600: var(--color-red-600); 71 + --accent-700: var(--color-red-700); 72 + --accent-800: var(--color-red-800); 73 + --accent-900: var(--color-red-900); 74 + --accent-950: var(--color-red-950); 75 + } 76 + 77 + .orange { 78 + --accent-50: var(--color-orange-50); 79 + --accent-100: var(--color-orange-100); 80 + --accent-200: var(--color-orange-200); 81 + --accent-300: var(--color-orange-300); 82 + --accent-400: var(--color-orange-400); 83 + --accent-500: var(--color-orange-500); 84 + --accent-600: var(--color-orange-600); 85 + --accent-700: var(--color-orange-700); 86 + --accent-800: var(--color-orange-800); 87 + --accent-900: var(--color-orange-900); 88 + --accent-950: var(--color-orange-950); 89 + } 90 + 91 + .amber { 92 + --accent-50: var(--color-amber-50); 93 + --accent-100: var(--color-amber-100); 94 + --accent-200: var(--color-amber-200); 95 + --accent-300: var(--color-amber-300); 96 + --accent-400: var(--color-amber-400); 97 + --accent-500: var(--color-amber-500); 98 + --accent-600: var(--color-amber-600); 99 + --accent-700: var(--color-amber-700); 100 + --accent-800: var(--color-amber-800); 101 + --accent-900: var(--color-amber-900); 102 + --accent-950: var(--color-amber-950); 103 + } 104 + 105 + .yellow { 106 + --accent-50: var(--color-yellow-50); 107 + --accent-100: var(--color-yellow-100); 108 + --accent-200: var(--color-yellow-200); 109 + --accent-300: var(--color-yellow-300); 110 + --accent-400: var(--color-yellow-400); 111 + --accent-500: var(--color-yellow-500); 112 + --accent-600: var(--color-yellow-600); 113 + --accent-700: var(--color-yellow-700); 114 + --accent-800: var(--color-yellow-800); 115 + --accent-900: var(--color-yellow-900); 116 + --accent-950: var(--color-yellow-950); 117 + } 118 + 119 + .lime { 120 + --accent-50: var(--color-lime-50); 121 + --accent-100: var(--color-lime-100); 122 + --accent-200: var(--color-lime-200); 123 + --accent-300: var(--color-lime-300); 124 + --accent-400: var(--color-lime-400); 125 + --accent-500: var(--color-lime-500); 126 + --accent-600: var(--color-lime-600); 127 + --accent-700: var(--color-lime-700); 128 + --accent-800: var(--color-lime-800); 129 + --accent-900: var(--color-lime-900); 130 + --accent-950: var(--color-lime-950); 131 + } 132 + 133 + .green { 134 + --accent-50: var(--color-green-50); 135 + --accent-100: var(--color-green-100); 136 + --accent-200: var(--color-green-200); 137 + --accent-300: var(--color-green-300); 138 + --accent-400: var(--color-green-400); 139 + --accent-500: var(--color-green-500); 140 + --accent-600: var(--color-green-600); 141 + --accent-700: var(--color-green-700); 142 + --accent-800: var(--color-green-800); 143 + --accent-900: var(--color-green-900); 144 + --accent-950: var(--color-green-950); 145 + } 146 + 147 + .emerald { 148 + --accent-50: var(--color-emerald-50); 149 + --accent-100: var(--color-emerald-100); 150 + --accent-200: var(--color-emerald-200); 151 + --accent-300: var(--color-emerald-300); 152 + --accent-400: var(--color-emerald-400); 153 + --accent-500: var(--color-emerald-500); 154 + --accent-600: var(--color-emerald-600); 155 + --accent-700: var(--color-emerald-700); 156 + --accent-800: var(--color-emerald-800); 157 + --accent-900: var(--color-emerald-900); 158 + --accent-950: var(--color-emerald-950); 159 + } 160 + 161 + .teal { 162 + --accent-50: var(--color-teal-50); 163 + --accent-100: var(--color-teal-100); 164 + --accent-200: var(--color-teal-200); 165 + --accent-300: var(--color-teal-300); 166 + --accent-400: var(--color-teal-400); 167 + --accent-500: var(--color-teal-500); 168 + --accent-600: var(--color-teal-600); 169 + --accent-700: var(--color-teal-700); 170 + --accent-800: var(--color-teal-800); 171 + --accent-900: var(--color-teal-900); 172 + --accent-950: var(--color-teal-950); 173 + } 174 + 175 + .cyan { 176 + --accent-50: var(--color-cyan-50); 177 + --accent-100: var(--color-cyan-100); 178 + --accent-200: var(--color-cyan-200); 179 + --accent-300: var(--color-cyan-300); 180 + --accent-400: var(--color-cyan-400); 181 + --accent-500: var(--color-cyan-500); 182 + --accent-600: var(--color-cyan-600); 183 + --accent-700: var(--color-cyan-700); 184 + --accent-800: var(--color-cyan-800); 185 + --accent-900: var(--color-cyan-900); 186 + --accent-950: var(--color-cyan-950); 187 + } 188 + 189 + .sky { 190 + --accent-50: var(--color-sky-50); 191 + --accent-100: var(--color-sky-100); 192 + --accent-200: var(--color-sky-200); 193 + --accent-300: var(--color-sky-300); 194 + --accent-400: var(--color-sky-400); 195 + --accent-500: var(--color-sky-500); 196 + --accent-600: var(--color-sky-600); 197 + --accent-700: var(--color-sky-700); 198 + --accent-800: var(--color-sky-800); 199 + --accent-900: var(--color-sky-900); 200 + --accent-950: var(--color-sky-950); 201 + } 202 + .blue { 203 + --accent-50: var(--color-blue-50); 204 + --accent-100: var(--color-blue-100); 205 + --accent-200: var(--color-blue-200); 206 + --accent-300: var(--color-blue-300); 207 + --accent-400: var(--color-blue-400); 208 + --accent-500: var(--color-blue-500); 209 + --accent-600: var(--color-blue-600); 210 + --accent-700: var(--color-blue-700); 211 + --accent-800: var(--color-blue-800); 212 + --accent-900: var(--color-blue-900); 213 + --accent-950: var(--color-blue-950); 214 + } 215 + 216 + .indigo { 217 + --accent-50: var(--color-indigo-50); 218 + --accent-100: var(--color-indigo-100); 219 + --accent-200: var(--color-indigo-200); 220 + --accent-300: var(--color-indigo-300); 221 + --accent-400: var(--color-indigo-400); 222 + --accent-500: var(--color-indigo-500); 223 + --accent-600: var(--color-indigo-600); 224 + --accent-700: var(--color-indigo-700); 225 + --accent-800: var(--color-indigo-800); 226 + --accent-900: var(--color-indigo-900); 227 + --accent-950: var(--color-indigo-950); 228 + } 229 + 230 + .violet { 231 + --accent-50: var(--color-violet-50); 232 + --accent-100: var(--color-violet-100); 233 + --accent-200: var(--color-violet-200); 234 + --accent-300: var(--color-violet-300); 235 + --accent-400: var(--color-violet-400); 236 + --accent-500: var(--color-violet-500); 237 + --accent-600: var(--color-violet-600); 238 + --accent-700: var(--color-violet-700); 239 + --accent-800: var(--color-violet-800); 240 + --accent-900: var(--color-violet-900); 241 + --accent-950: var(--color-violet-950); 242 + } 243 + 244 + .purple { 245 + --accent-50: var(--color-purple-50); 246 + --accent-100: var(--color-purple-100); 247 + --accent-200: var(--color-purple-200); 248 + --accent-300: var(--color-purple-300); 249 + --accent-400: var(--color-purple-400); 250 + --accent-500: var(--color-purple-500); 251 + --accent-600: var(--color-purple-600); 252 + --accent-700: var(--color-purple-700); 253 + --accent-800: var(--color-purple-800); 254 + --accent-900: var(--color-purple-900); 255 + --accent-950: var(--color-purple-950); 256 + } 257 + 258 + .fuchsia { 259 + --accent-50: var(--color-fuchsia-50); 260 + --accent-100: var(--color-fuchsia-100); 261 + --accent-200: var(--color-fuchsia-200); 262 + --accent-300: var(--color-fuchsia-300); 263 + --accent-400: var(--color-fuchsia-400); 264 + --accent-500: var(--color-fuchsia-500); 265 + --accent-600: var(--color-fuchsia-600); 266 + --accent-700: var(--color-fuchsia-700); 267 + --accent-800: var(--color-fuchsia-800); 268 + --accent-900: var(--color-fuchsia-900); 269 + --accent-950: var(--color-fuchsia-950); 270 + } 271 + 272 + .pink { 273 + --accent-50: var(--color-pink-50); 274 + --accent-100: var(--color-pink-100); 275 + --accent-200: var(--color-pink-200); 276 + --accent-300: var(--color-pink-300); 277 + --accent-400: var(--color-pink-400); 278 + --accent-500: var(--color-pink-500); 279 + --accent-600: var(--color-pink-600); 280 + --accent-700: var(--color-pink-700); 281 + --accent-800: var(--color-pink-800); 282 + --accent-900: var(--color-pink-900); 283 + --accent-950: var(--color-pink-950); 284 + } 285 + 286 + .rose { 287 + --accent-50: var(--color-rose-50); 288 + --accent-100: var(--color-rose-100); 289 + --accent-200: var(--color-rose-200); 290 + --accent-300: var(--color-rose-300); 291 + --accent-400: var(--color-rose-400); 292 + --accent-500: var(--color-rose-500); 293 + --accent-600: var(--color-rose-600); 294 + --accent-700: var(--color-rose-700); 295 + --accent-800: var(--color-rose-800); 296 + --accent-900: var(--color-rose-900); 297 + --accent-950: var(--color-rose-950); 298 + } 299 + 300 + .gray { 301 + --base-50: var(--color-gray-50); 302 + --base-100: var(--color-gray-100); 303 + --base-200: var(--color-gray-200); 304 + --base-300: var(--color-gray-300); 305 + --base-400: var(--color-gray-400); 306 + --base-500: var(--color-gray-500); 307 + --base-600: var(--color-gray-600); 308 + --base-700: var(--color-gray-700); 309 + --base-800: var(--color-gray-800); 310 + --base-900: var(--color-gray-900); 311 + --base-950: var(--color-gray-950); 312 + } 313 + 314 + .zinc { 315 + --base-50: var(--color-zinc-50); 316 + --base-100: var(--color-zinc-100); 317 + --base-200: var(--color-zinc-200); 318 + --base-300: var(--color-zinc-300); 319 + --base-400: var(--color-zinc-400); 320 + --base-500: var(--color-zinc-500); 321 + --base-600: var(--color-zinc-600); 322 + --base-700: var(--color-zinc-700); 323 + --base-800: var(--color-zinc-800); 324 + --base-900: var(--color-zinc-900); 325 + --base-950: var(--color-zinc-950); 326 + } 327 + 328 + .neutral { 329 + --base-50: var(--color-neutral-50); 330 + --base-100: var(--color-neutral-100); 331 + --base-200: var(--color-neutral-200); 332 + --base-300: var(--color-neutral-300); 333 + --base-400: var(--color-neutral-400); 334 + --base-500: var(--color-neutral-500); 335 + --base-600: var(--color-neutral-600); 336 + --base-700: var(--color-neutral-700); 337 + --base-800: var(--color-neutral-800); 338 + --base-900: var(--color-neutral-900); 339 + --base-950: var(--color-neutral-950); 340 + } 341 + 342 + .stone { 343 + --base-50: var(--color-stone-50); 344 + --base-100: var(--color-stone-100); 345 + --base-200: var(--color-stone-200); 346 + --base-300: var(--color-stone-300); 347 + --base-400: var(--color-stone-400); 348 + --base-500: var(--color-stone-500); 349 + --base-600: var(--color-stone-600); 350 + --base-700: var(--color-stone-700); 351 + --base-800: var(--color-stone-800); 352 + --base-900: var(--color-stone-900); 353 + --base-950: var(--color-stone-950); 354 + } 355 + 356 + .slate { 357 + --base-50: var(--color-slate-50); 358 + --base-100: var(--color-slate-100); 359 + --base-200: var(--color-slate-200); 360 + --base-300: var(--color-slate-300); 361 + --base-400: var(--color-slate-400); 362 + --base-500: var(--color-slate-500); 363 + --base-600: var(--color-slate-600); 364 + --base-700: var(--color-slate-700); 365 + --base-800: var(--color-slate-800); 366 + --base-900: var(--color-slate-900); 367 + --base-950: var(--color-slate-950); 368 + } 62 369 }
+9 -1
src/lib/cards/BaseCard/BaseCard.svelte
··· 5 5 import type { Snippet } from 'svelte'; 6 6 import type { HTMLAttributes } from 'svelte/elements'; 7 7 8 + const colors = { 9 + 'base': 'border-base-200 bg-base-50 dark:border-base-800 dark:bg-base-900 border', 10 + 'accent': 'border-accent-200 bg-accent-50 dark:border-accent-900/50 dark:bg-accent-950/50 border', 11 + 'transparent': '' 12 + } as Record<string, string>; 13 + 8 14 export type BaseCardProps = { 9 15 item: Item; 10 16 controls?: Snippet<[]>; ··· 27 33 bind:this={ref} 28 34 draggable={isEditing} 29 35 class={[ 30 - 'card border-base-200 bg-base-50 group dark:border-base-800 dark:bg-base-900 focus-within:outline-accent-500 absolute z-0 rounded-2xl border outline-offset-2 focus-within:outline-2' 36 + 'card group focus-within:outline-accent-500 absolute z-0 rounded-2xl outline-offset-2 focus-within:outline-2', 37 + item.color ? colors[item.color] ?? colors.accent : colors.base, 38 + item.color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? item.color : '' 31 39 ]} 32 40 style={` 33 41 --mx: ${item.mobileX};
+78 -6
src/lib/cards/BaseCard/BaseEditingCard.svelte
··· 1 1 <script lang="ts"> 2 2 import type { WithElementRef } from 'bits-ui'; 3 3 import type { HTMLAttributes } from 'svelte/elements'; 4 - import Card from './BaseCard.svelte'; 4 + import BaseCard from './BaseCard.svelte'; 5 5 import type { Item } from '$lib/types'; 6 - import { Button } from '@foxui/core'; 6 + import { Button, Popover } from '@foxui/core'; 7 7 import { getCanEdit } from '$lib/helper'; 8 + import { ColorSelect } from '@foxui/colors'; 9 + 10 + let colorsChoices = [ 11 + { class: 'text-base-500', label: 'base' }, 12 + { class: 'text-accent-500', label: 'accent' }, 13 + { class: 'text-base-300 dark:text-base-700', label: 'transparent' }, 14 + { class: 'text-red-500', label: 'red' }, 15 + { class: 'text-orange-500', label: 'orange' }, 16 + { class: 'text-amber-500', label: 'amber' }, 17 + { class: 'text-yellow-500', label: 'yellow' }, 18 + { class: 'text-lime-500', label: 'lime' }, 19 + { class: 'text-green-500', label: 'green' }, 20 + { class: 'text-emerald-500', label: 'emerald' }, 21 + { class: 'text-teal-500', label: 'teal' }, 22 + { class: 'text-cyan-500', label: 'cyan' }, 23 + { class: 'text-sky-500', label: 'sky' }, 24 + { class: 'text-blue-500', label: 'blue' }, 25 + { class: 'text-indigo-500', label: 'indigo' }, 26 + { class: 'text-violet-500', label: 'violet' }, 27 + { class: 'text-purple-500', label: 'purple' }, 28 + { class: 'text-fuchsia-500', label: 'fuchsia' }, 29 + { class: 'text-pink-500', label: 'pink' }, 30 + { class: 'text-rose-500', label: 'rose' } 31 + ]; 8 32 9 33 export type BaseEditingCardProps = { 10 34 item: Item; ··· 22 46 ondelete, 23 47 ...rest 24 48 }: BaseEditingCardProps = $props(); 49 + 50 + let selectedColor = $derived( 51 + !item.color ? colorsChoices[0] : colorsChoices.find((c) => item.color === c.label) 52 + ); 25 53 26 54 let canEdit = getCanEdit(); 55 + 56 + let colorPopoverOpen = $state(false); 27 57 </script> 28 58 29 - <Card {item} {...rest} isEditing={true} bind:ref> 59 + <BaseCard {item} {...rest} isEditing={true} bind:ref> 30 60 {@render children?.()} 31 61 32 62 {#snippet controls()} ··· 58 88 </Button> 59 89 60 90 <div 61 - class="absolute -bottom-7 z-50 hidden w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex" 91 + class={[ 92 + 'absolute -bottom-7 z-50 w-full items-center justify-center text-xs group-focus-within:inline-flex group-hover:inline-flex', 93 + colorPopoverOpen ? 'inline-flex' : 'hidden' 94 + ]} 62 95 > 63 96 <div 64 - class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex gap-0.5 rounded-2xl border p-1 px-2 shadow-lg" 97 + class="bg-base-100 border-base-200 dark:bg-base-800 dark:border-base-700 inline-flex items-center gap-0.5 rounded-2xl border p-1 px-2 shadow-lg" 65 98 > 99 + <Popover bind:open={colorPopoverOpen}> 100 + {#snippet child({ props })} 101 + <button 102 + {...props} 103 + class={[ 104 + 'm-2 size-4 cursor-pointer rounded-full', 105 + !item.color || item.color === 'base' || item.color === 'transparent' 106 + ? 'text-base-800 dark:text-base-200' 107 + : 'text-accent-500' 108 + ]} 109 + > 110 + <svg 111 + xmlns="http://www.w3.org/2000/svg" 112 + viewBox="0 0 24 24" 113 + fill="currentColor" 114 + class="size-4" 115 + > 116 + <path 117 + fill-rule="evenodd" 118 + d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z" 119 + clip-rule="evenodd" 120 + /> 121 + </svg> 122 + </button> 123 + {/snippet} 124 + <ColorSelect 125 + selected={selectedColor} 126 + colors={colorsChoices} 127 + onselected={(color, previous) => { 128 + if (typeof previous === 'string' || typeof color === 'string') { 129 + return; 130 + } 131 + 132 + item.color = color.label; 133 + }} 134 + class="w-64" 135 + /> 136 + </Popover> 137 + 66 138 <button 67 139 onclick={() => { 68 140 onsetsize?.(1, 1); ··· 138 210 </div> 139 211 {/if} 140 212 {/snippet} 141 - </Card> 213 + </BaseCard>
+2 -1
src/lib/helper.ts
··· 112 112 a.x === b.x && 113 113 a.y === b.y && 114 114 a.mobileX === b.mobileX && 115 - a.mobileY === b.mobileY 115 + a.mobileY === b.mobileY && 116 + a.color === b.color 116 117 ); 117 118 } 118 119
+2
src/lib/types.ts
··· 13 13 14 14 cardType: string; 15 15 16 + color?: string; 17 + 16 18 // eslint-disable-next-line @typescript-eslint/no-explicit-any 17 19 cardData: any; 18 20