diff --git a/src/lib/cards/GameCards/README.md b/src/lib/cards/GameCards/README.md deleted file mode 100644 index fbf45c0..0000000 --- a/src/lib/cards/GameCards/README.md +++ /dev/null @@ -1,95 +0,0 @@ -# Game Cards - -This folder contains interactive game cards (Tetris, Dino, etc.). - -## Implementation Requirements - -When creating a new game card, follow these patterns to ensure multiple games on the same page work independently. - -### 1. Container Setup - -Make the game container focusable and handle keyboard events on it (not on `svelte:window`): - -```svelte - - - -
- -
-``` - -### 2. Focus on Game Start - -When the game starts, focus the container so keyboard events work: - -```typescript -function startGame() { - // ... game initialization - container?.focus(); -} -``` - -### 3. Keyboard Handlers - -Do NOT use `` - this captures all keyboard events globally and causes all games to respond at once. - -Instead, attach handlers directly to the container div. The handlers will only fire when that specific game is focused. - -```typescript -function handleKeyDown(e: KeyboardEvent) { - if (e.code === 'Space') { - e.preventDefault(); - // handle action - } -} -``` - -### 4. Canvas Setup - -Add `touch-none` and `select-none` classes to prevent scrolling and text selection during gameplay: - -```svelte - -``` - -### 5. Touch Controls - -For mobile support, add touch event handlers to the canvas. Prevent default to stop page scrolling: - -```typescript -function handleTouchStart(e: TouchEvent) { - if (gameState === 'playing') { - e.preventDefault(); - } - // handle touch -} -``` - -## Checklist for New Game Cards - -- [ ] Container has `bind:this={container}` reference -- [ ] Container has `tabindex="0"` for focusability -- [ ] Container has `role="application"` and `aria-label` -- [ ] Container has `outline-none` class -- [ ] Keyboard handlers are on container, NOT `svelte:window` -- [ ] `startGame()` calls `container?.focus()` -- [ ] Canvas has `touch-none select-none` classes -- [ ] Touch handlers call `e.preventDefault()` when game is active -- [ ] No `isTyping()` check needed (focus handles this automatically) diff --git a/src/lib/cards/BaseCard/BaseCard.svelte b/src/lib/cards/_base/BaseCard/BaseCard.svelte similarity index 98% rename from src/lib/cards/BaseCard/BaseCard.svelte rename to src/lib/cards/_base/BaseCard/BaseCard.svelte index 7585d22..b402a7b 100644 --- a/src/lib/cards/BaseCard/BaseCard.svelte +++ b/src/lib/cards/_base/BaseCard/BaseCard.svelte @@ -4,7 +4,7 @@ import type { WithElementRef } from 'bits-ui'; import type { Snippet } from 'svelte'; import type { HTMLAttributes } from 'svelte/elements'; - import { getColor } from '..'; + import { getColor } from '../..'; import { getIsCoarse } from '$lib/website/context'; function tryGetIsCoarse(): (() => boolean) | undefined { diff --git a/src/lib/cards/BaseCard/BaseEditingCard.svelte b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte similarity index 99% rename from src/lib/cards/BaseCard/BaseEditingCard.svelte rename to src/lib/cards/_base/BaseCard/BaseEditingCard.svelte index aa77b30..243aae4 100644 --- a/src/lib/cards/BaseCard/BaseEditingCard.svelte +++ b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte @@ -5,7 +5,7 @@ import type { Item } from '$lib/types'; import { Button, cn, Label, Popover } from '@foxui/core'; import { ColorSelect } from '@foxui/colors'; - import { AllCardDefinitions, CardDefinitionsByType, getColor } from '..'; + import { AllCardDefinitions, CardDefinitionsByType, getColor } from '../..'; import { COLUMNS } from '$lib'; import { getCanEdit, diff --git a/src/lib/cards/Card/Card.svelte b/src/lib/cards/_base/Card/Card.svelte similarity index 89% rename from src/lib/cards/Card/Card.svelte rename to src/lib/cards/_base/Card/Card.svelte index ca17fee..2bbcc6b 100644 --- a/src/lib/cards/Card/Card.svelte +++ b/src/lib/cards/_base/Card/Card.svelte @@ -1,5 +1,5 @@ diff --git a/src/lib/cards/StandardSiteDocumentListCard/BlogEntry.svelte b/src/lib/cards/content/StandardSiteDocumentListCard/BlogEntry.svelte similarity index 100% rename from src/lib/cards/StandardSiteDocumentListCard/BlogEntry.svelte rename to src/lib/cards/content/StandardSiteDocumentListCard/BlogEntry.svelte diff --git a/src/lib/cards/StandardSiteDocumentListCard/DateTime.svelte b/src/lib/cards/content/StandardSiteDocumentListCard/DateTime.svelte similarity index 100% rename from src/lib/cards/StandardSiteDocumentListCard/DateTime.svelte rename to src/lib/cards/content/StandardSiteDocumentListCard/DateTime.svelte diff --git a/src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte b/src/lib/cards/content/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte similarity index 94% rename from src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte rename to src/lib/cards/content/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte index 238b0d2..58e5063 100644 --- a/src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte +++ b/src/lib/cards/content/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte @@ -6,8 +6,8 @@ getHandleContext } from '$lib/website/context'; import { onMount } from 'svelte'; - import { CardDefinitionsByType } from '..'; - import type { ContentComponentProps } from '../types'; + import { CardDefinitionsByType } from '../..'; + import type { ContentComponentProps } from '../../types'; import BlogEntry from './BlogEntry.svelte'; import { Button } from '@foxui/core'; diff --git a/src/lib/cards/StandardSiteDocumentListCard/index.ts b/src/lib/cards/content/StandardSiteDocumentListCard/index.ts similarity index 97% rename from src/lib/cards/StandardSiteDocumentListCard/index.ts rename to src/lib/cards/content/StandardSiteDocumentListCard/index.ts index 189a804..214b9a8 100644 --- a/src/lib/cards/StandardSiteDocumentListCard/index.ts +++ b/src/lib/cards/content/StandardSiteDocumentListCard/index.ts @@ -1,5 +1,5 @@ import { getRecord, listRecords, parseUri } from '$lib/atproto'; -import type { CardDefinition } from '../types'; +import type { CardDefinition } from '../../types'; import StandardSiteDocumentListCard from './StandardSiteDocumentListCard.svelte'; export const StandardSiteDocumentListCardDefinition = { diff --git a/src/lib/cards/ImageCard/ImageCard.svelte b/src/lib/cards/core/ImageCard/ImageCard.svelte similarity index 96% rename from src/lib/cards/ImageCard/ImageCard.svelte rename to src/lib/cards/core/ImageCard/ImageCard.svelte index fed4499..b41d671 100644 --- a/src/lib/cards/ImageCard/ImageCard.svelte +++ b/src/lib/cards/core/ImageCard/ImageCard.svelte @@ -1,6 +1,6 @@ diff --git a/src/lib/cards/AppleMusicCard/CreateAppleMusicCardModal.svelte b/src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte similarity index 95% rename from src/lib/cards/AppleMusicCard/CreateAppleMusicCardModal.svelte rename to src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte index ac0fd04..7a16d8c 100644 --- a/src/lib/cards/AppleMusicCard/CreateAppleMusicCardModal.svelte +++ b/src/lib/cards/media/AppleMusicCard/CreateAppleMusicCardModal.svelte @@ -1,6 +1,6 @@ diff --git a/src/lib/cards/SpotifyCard/index.ts b/src/lib/cards/media/SpotifyCard/index.ts similarity index 97% rename from src/lib/cards/SpotifyCard/index.ts rename to src/lib/cards/media/SpotifyCard/index.ts index 4e1cdc2..3c8bf99 100644 --- a/src/lib/cards/SpotifyCard/index.ts +++ b/src/lib/cards/media/SpotifyCard/index.ts @@ -1,4 +1,4 @@ -import type { CardDefinition } from '../types'; +import type { CardDefinition } from '../../types'; import CreateSpotifyCardModal from './CreateSpotifyCardModal.svelte'; import SpotifyCard from './SpotifyCard.svelte'; diff --git a/src/lib/cards/StatusphereCard/EditStatusphereCard.svelte b/src/lib/cards/media/StatusphereCard/EditStatusphereCard.svelte similarity index 97% rename from src/lib/cards/StatusphereCard/EditStatusphereCard.svelte rename to src/lib/cards/media/StatusphereCard/EditStatusphereCard.svelte index 4ff5cc1..e98a592 100644 --- a/src/lib/cards/StatusphereCard/EditStatusphereCard.svelte +++ b/src/lib/cards/media/StatusphereCard/EditStatusphereCard.svelte @@ -2,7 +2,7 @@ import type { Item } from '$lib/types'; import { onMount } from 'svelte'; import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context'; - import { CardDefinitionsByType } from '..'; + import { CardDefinitionsByType } from '../..'; import { PopoverEmojiPicker } from '@foxui/social'; import { emojiToNotoAnimatedWebp } from '.'; diff --git a/src/lib/cards/StatusphereCard/SettingsStatusphereCard.svelte b/src/lib/cards/media/StatusphereCard/SettingsStatusphereCard.svelte similarity index 100% rename from src/lib/cards/StatusphereCard/SettingsStatusphereCard.svelte rename to src/lib/cards/media/StatusphereCard/SettingsStatusphereCard.svelte diff --git a/src/lib/cards/StatusphereCard/StatusphereCard.svelte b/src/lib/cards/media/StatusphereCard/StatusphereCard.svelte similarity index 100% rename from src/lib/cards/StatusphereCard/StatusphereCard.svelte rename to src/lib/cards/media/StatusphereCard/StatusphereCard.svelte diff --git a/src/lib/cards/StatusphereCard/icons.json b/src/lib/cards/media/StatusphereCard/icons.json similarity index 100% rename from src/lib/cards/StatusphereCard/icons.json rename to src/lib/cards/media/StatusphereCard/icons.json diff --git a/src/lib/cards/StatusphereCard/index.ts b/src/lib/cards/media/StatusphereCard/index.ts similarity index 97% rename from src/lib/cards/StatusphereCard/index.ts rename to src/lib/cards/media/StatusphereCard/index.ts index a3d1929..b47e9b7 100644 --- a/src/lib/cards/StatusphereCard/index.ts +++ b/src/lib/cards/media/StatusphereCard/index.ts @@ -1,7 +1,7 @@ // animated emojis from // https://googlefonts.github.io/noto-emoji-animation/ -import type { CardDefinition } from '../types'; +import type { CardDefinition } from '../../types'; import { listRecords, putRecord } from '$lib/atproto'; import StatusphereCard from './StatusphereCard.svelte'; import EditStatusphereCard from './EditStatusphereCard.svelte'; diff --git a/src/lib/cards/TealFMPlaysCard/AlbumArt.svelte b/src/lib/cards/media/TealFMPlaysCard/AlbumArt.svelte similarity index 100% rename from src/lib/cards/TealFMPlaysCard/AlbumArt.svelte rename to src/lib/cards/media/TealFMPlaysCard/AlbumArt.svelte diff --git a/src/lib/cards/TealFMPlaysCard/TealFMPlaysCard.svelte b/src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte similarity index 98% rename from src/lib/cards/TealFMPlaysCard/TealFMPlaysCard.svelte rename to src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte index 610a352..09c3cab 100644 --- a/src/lib/cards/TealFMPlaysCard/TealFMPlaysCard.svelte +++ b/src/lib/cards/media/TealFMPlaysCard/TealFMPlaysCard.svelte @@ -2,7 +2,7 @@ import type { Item } from '$lib/types'; import { onMount } from 'svelte'; import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context'; - import { CardDefinitionsByType } from '..'; + import { CardDefinitionsByType } from '../..'; import AlbumArt from './AlbumArt.svelte'; import { RelativeTime } from '@foxui/time'; diff --git a/src/lib/cards/TealFMPlaysCard/index.ts b/src/lib/cards/media/TealFMPlaysCard/index.ts similarity index 95% rename from src/lib/cards/TealFMPlaysCard/index.ts rename to src/lib/cards/media/TealFMPlaysCard/index.ts index 0473ed8..60c68fc 100644 --- a/src/lib/cards/TealFMPlaysCard/index.ts +++ b/src/lib/cards/media/TealFMPlaysCard/index.ts @@ -1,4 +1,4 @@ -import type { CardDefinition } from '../types'; +import type { CardDefinition } from '../../types'; import { listRecords } from '$lib/atproto'; import TealFMPlaysCard from './TealFMPlaysCard.svelte'; diff --git a/src/lib/cards/YoutubeVideoCard/CreateYoutubeCardModal.svelte b/src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte similarity index 94% rename from src/lib/cards/YoutubeVideoCard/CreateYoutubeCardModal.svelte rename to src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte index c677f8e..323eabd 100644 --- a/src/lib/cards/YoutubeVideoCard/CreateYoutubeCardModal.svelte +++ b/src/lib/cards/media/YoutubeVideoCard/CreateYoutubeCardModal.svelte @@ -1,6 +1,6 @@ diff --git a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte b/src/lib/cards/utilities/ButtonCard/ButtonCardSettings.svelte similarity index 93% rename from src/lib/cards/ButtonCard/ButtonCardSettings.svelte rename to src/lib/cards/utilities/ButtonCard/ButtonCardSettings.svelte index 2a7eed0..888461b 100644 --- a/src/lib/cards/ButtonCard/ButtonCardSettings.svelte +++ b/src/lib/cards/utilities/ButtonCard/ButtonCardSettings.svelte @@ -1,6 +1,6 @@