mihkelmk/portfolio_site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: mihkelmk:c7d7ca349d7eaf505c930656bf27552acf36dcca
Branches Tags
mihkelmk:main
...
compare: mihkelmk:387b7216a4b7796a9961adbaf5b9633a648c4c6c
Branches Tags
mihkelmk:main

3 commits
c7d7ca349d ... 387b7216a4

Author SHA1 Message Date
Mihkel Martin Kasterpalu
387b7216a4 Run prettier on all files 2025-01-22 14:25:24 +02:00
Mihkel Martin Kasterpalu
f977fc254a Fix linter errors and types 2025-01-22 14:21:34 +02:00
Mihkel Martin Kasterpalu
8360d5d6de Return and save to state only the neccessary album data for paku biiti 2025-01-22 14:02:22 +02:00
34 changed files with 297 additions and 279 deletions
Show stats Expand all files Collapse all files

8
src/hooks.server.ts
View file

@ -3,11 +3,11 @@ import type { Handle } from '@sveltejs/kit';
import { sveltekitSessionHandle } from 'svelte-kit-sessions'; import { sveltekitSessionHandle } from 'svelte-kit-sessions';
export const handle: Handle = sveltekitSessionHandle({ export const handle: Handle = sveltekitSessionHandle({
secret: SESH_SECRET secret: SESH_SECRET
}); });
declare module 'svelte-kit-sessions' { declare module 'svelte-kit-sessions' {
interface SessionData { interface SessionData {
userId: string; userId: string;
} }
} }

18
src/lib/components/DNDGroup.svelte
View file

@ -1,19 +1,25 @@
<script lang="ts"> <script lang="ts">
import * as Card from '$lib/components/ui/card/index.js';
import { dndzone, SHADOW_ITEM_MARKER_PROPERTY_NAME } from 'svelte-dnd-action';
import { flip } from 'svelte/animate'; import { flip } from 'svelte/animate';
import { expoOut } from 'svelte/easing'; import { expoOut } from 'svelte/easing';
import { truncate } from '$lib/utils';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { truncate } from '$lib/utils';
import type { AlbumDataField } from '$lib/types';
import {
dndzone,
SHADOW_ITEM_MARKER_PROPERTY_NAME,
type DndEvent,
type Item
} from 'svelte-dnd-action';
import * as Card from '$lib/components/ui/card/index.js';
let { items = $bindable(), image = false, type = 'default' } = $props(); let { items = $bindable(), image = false, type = 'default' } = $props();
const flipDurationMs = 300; const flipDurationMs = 300;
function handleDndConsider(e: CustomEvent<any>) { function handleDndConsider(e: CustomEvent<DndEvent<Item>>) {
items = e.detail.items; items = e.detail.items;
} }
function handleDndFinalize(e: CustomEvent<any>) { function handleDndFinalize(e: CustomEvent<DndEvent<Item>>) {
items = e.detail.items; items = e.detail.items;
} }
function transformDraggedElement(draggedEl: HTMLElement | undefined) { function transformDraggedElement(draggedEl: HTMLElement | undefined) {
@ -40,7 +46,7 @@
); );
</script> </script>
{#snippet card(item, i)} {#snippet card(item: AlbumDataField, i: number)}
{#if image} {#if image}
<img class="aspect-square w-full object-cover" alt="Album Art" src={item.value} /> <img class="aspect-square w-full object-cover" alt="Album Art" src={item.value} />
<input type="hidden" name="{type}_{i}" value={item.value} /> <input type="hidden" name="{type}_{i}" value={item.value} />

6
src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,

8
src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { buttonVariants } from "$lib/components/ui/button/index.js"; import { buttonVariants } from '$lib/components/ui/button/index.js';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -12,6 +12,6 @@
<AlertDialogPrimitive.Cancel <AlertDialogPrimitive.Cancel
bind:ref bind:ref
class={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)} class={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
{...restProps} {...restProps}
/> />

8
src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from 'bits-ui';
import AlertDialogOverlay from "./alert-dialog-overlay.svelte"; import AlertDialogOverlay from './alert-dialog-overlay.svelte';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -18,7 +18,7 @@
<AlertDialogPrimitive.Content <AlertDialogPrimitive.Content
bind:ref bind:ref
class={cn( class={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg", 'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -11,6 +11,6 @@
<AlertDialogPrimitive.Description <AlertDialogPrimitive.Description
bind:ref bind:ref
class={cn("text-muted-foreground text-sm", className)} class={cn('text-sm text-muted-foreground', className)}
{...restProps} {...restProps}
/> />

8
src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

8
src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} class={cn('flex flex-col space-y-2 text-center sm:text-left', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

6
src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -12,7 +12,7 @@
<AlertDialogPrimitive.Overlay <AlertDialogPrimitive.Overlay
bind:ref bind:ref
class={cn( class={cn(
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", 'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
className className
)} )}
{...restProps} {...restProps}

6
src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
@ -12,7 +12,7 @@
<AlertDialogPrimitive.Title <AlertDialogPrimitive.Title
bind:ref bind:ref
class={cn("text-lg font-semibold", className)} class={cn('text-lg font-semibold', className)}
{level} {level}
{...restProps} {...restProps}
/> />

20
src/lib/components/ui/alert-dialog/index.ts
View file

@ -1,13 +1,13 @@
import { AlertDialog as AlertDialogPrimitive } from "bits-ui"; import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import Title from "./alert-dialog-title.svelte"; import Title from './alert-dialog-title.svelte';
import Action from "./alert-dialog-action.svelte"; import Action from './alert-dialog-action.svelte';
import Cancel from "./alert-dialog-cancel.svelte"; import Cancel from './alert-dialog-cancel.svelte';
import Footer from "./alert-dialog-footer.svelte"; import Footer from './alert-dialog-footer.svelte';
import Header from "./alert-dialog-header.svelte"; import Header from './alert-dialog-header.svelte';
import Overlay from "./alert-dialog-overlay.svelte"; import Overlay from './alert-dialog-overlay.svelte';
import Content from "./alert-dialog-content.svelte"; import Content from './alert-dialog-content.svelte';
import Description from "./alert-dialog-description.svelte"; import Description from './alert-dialog-description.svelte';
const Root = AlertDialogPrimitive.Root; const Root = AlertDialogPrimitive.Root;
const Trigger = AlertDialogPrimitive.Trigger; const Trigger = AlertDialogPrimitive.Trigger;
@ -36,5 +36,5 @@ export {
Trigger as AlertDialogTrigger, Trigger as AlertDialogTrigger,
Overlay as AlertDialogOverlay, Overlay as AlertDialogOverlay,
Content as AlertDialogContent, Content as AlertDialogContent,
Description as AlertDialogDescription, Description as AlertDialogDescription
}; };

56
src/lib/components/ui/button/button.svelte
View file

@ -1,36 +1,35 @@
<script lang="ts" module> <script lang="ts" module>
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements"; import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
import { type VariantProps, tv } from "tailwind-variants"; import { type VariantProps, tv } from 'tailwind-variants';
export const buttonVariants = tv({ export const buttonVariants = tv({
base: "focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", base: 'focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
variants: { variants: {
variant: { variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow", default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
destructive: destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
outline: outline:
"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm", 'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm", secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
ghost: "hover:bg-accent hover:text-accent-foreground", ghost: 'hover:bg-accent hover:text-accent-foreground',
link: "text-primary underline-offset-4 hover:underline", link: 'text-primary underline-offset-4 hover:underline'
}, },
size: { size: {
default: "h-9 px-4 py-2", default: 'h-9 px-4 py-2',
sm: "h-8 rounded-md px-3 text-xs", sm: 'h-8 rounded-md px-3 text-xs',
lg: "h-10 rounded-md px-8", lg: 'h-10 rounded-md px-8',
icon: "h-9 w-9", icon: 'h-9 w-9'
}, }
}, },
defaultVariants: { defaultVariants: {
variant: "default", variant: 'default',
size: "default", size: 'default'
}, }
}); });
export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"]; export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
export type ButtonSize = VariantProps<typeof buttonVariants>["size"]; export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
export type ButtonProps = WithElementRef<HTMLButtonAttributes> & export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & { WithElementRef<HTMLAnchorAttributes> & {
@ -40,27 +39,22 @@
</script> </script>
<script lang="ts"> <script lang="ts">
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
class: className, class: className,
variant = "default", variant = 'default',
size = "default", size = 'default',
ref = $bindable(null), ref = $bindable(null),
href = undefined, href = undefined,
type = "button", type = 'button',
children, children,
...restProps ...restProps
}: ButtonProps = $props(); }: ButtonProps = $props();
</script> </script>
{#if href} {#if href}
<a <a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
bind:this={ref}
class={cn(buttonVariants({ variant, size }), className)}
{href}
{...restProps}
>
{@render children?.()} {@render children?.()}
</a> </a>
{:else} {:else}

6
src/lib/components/ui/button/index.ts
View file

@ -2,8 +2,8 @@ import Root, {
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant,
buttonVariants, buttonVariants
} from "./button.svelte"; } from './button.svelte';
export { export {
Root, Root,
@ -13,5 +13,5 @@ export {
buttonVariants, buttonVariants,
type ButtonProps, type ButtonProps,
type ButtonSize, type ButtonSize,
type ButtonVariant, type ButtonVariant
}; };

8
src/lib/components/ui/card/card-content.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} class={cn("p-6", className)} {...restProps}> <div bind:this={ref} class={cn('p-6', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

8
src/lib/components/ui/card/card-description.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
</script> </script>
<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}> <p bind:this={ref} class={cn('text-sm text-muted-foreground', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</p> </p>

8
src/lib/components/ui/card/card-footer.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}> <div bind:this={ref} class={cn('flex items-center p-6 pt-0', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

8
src/lib/components/ui/card/card-header.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -11,6 +11,6 @@
}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props(); }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
</script> </script>
<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}> <div bind:this={ref} class={cn('flex flex-col space-y-1.5 p-6 pb-0', className)} {...restProps}>
{@render children?.()} {@render children?.()}
</div> </div>

8
src/lib/components/ui/card/card-title.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -18,7 +18,7 @@
role="heading" role="heading"
aria-level={level} aria-level={level}
bind:this={ref} bind:this={ref}
class={cn("font-semibold leading-none tracking-tight", className)} class={cn('font-semibold leading-none tracking-tight', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

8
src/lib/components/ui/card/card.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef } from "bits-ui"; import type { WithElementRef } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -13,7 +13,7 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("bg-card text-card-foreground rounded-xl border shadow", className)} class={cn('rounded-xl border bg-card text-card-foreground shadow', className)}
{...restProps} {...restProps}
> >
{@render children?.()} {@render children?.()}

14
src/lib/components/ui/card/index.ts
View file

@ -1,9 +1,9 @@
import Root from "./card.svelte"; import Root from './card.svelte';
import Content from "./card-content.svelte"; import Content from './card-content.svelte';
import Description from "./card-description.svelte"; import Description from './card-description.svelte';
import Footer from "./card-footer.svelte"; import Footer from './card-footer.svelte';
import Header from "./card-header.svelte"; import Header from './card-header.svelte';
import Title from "./card-title.svelte"; import Title from './card-title.svelte';
export { export {
Root, Root,
@ -18,5 +18,5 @@ export {
Description as CardDescription, Description as CardDescription,
Footer as CardFooter, Footer as CardFooter,
Header as CardHeader, Header as CardHeader,
Title as CardTitle, Title as CardTitle
}; };

4
src/lib/components/ui/separator/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./separator.svelte"; import Root from './separator.svelte';
export { export {
Root, Root,
// //
Root as Separator, Root as Separator
}; };

10
src/lib/components/ui/separator/separator.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui"; import { Separator as SeparatorPrimitive } from 'bits-ui';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
class: className, class: className,
orientation = "horizontal", orientation = 'horizontal',
...restProps ...restProps
}: SeparatorPrimitive.RootProps = $props(); }: SeparatorPrimitive.RootProps = $props();
</script> </script>
@ -13,8 +13,8 @@
<SeparatorPrimitive.Root <SeparatorPrimitive.Root
bind:ref bind:ref
class={cn( class={cn(
"bg-border shrink-0", 'shrink-0 bg-border',
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]", orientation === 'horizontal' ? 'h-[1px] w-full' : 'min-h-full w-[1px]',
className className
)} )}
{orientation} {orientation}

4
src/lib/components/ui/skeleton/index.ts
View file

@ -1,7 +1,7 @@
import Root from "./skeleton.svelte"; import Root from './skeleton.svelte';
export { export {
Root, Root,
// //
Root as Skeleton, Root as Skeleton
}; };

8
src/lib/components/ui/skeleton/skeleton.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { WithElementRef, WithoutChildren } from "bits-ui"; import type { WithElementRef, WithoutChildren } from 'bits-ui';
import type { HTMLAttributes } from "svelte/elements"; import type { HTMLAttributes } from 'svelte/elements';
import { cn } from "$lib/utils.js"; import { cn } from '$lib/utils.js';
let { let {
ref = $bindable(null), ref = $bindable(null),
@ -12,6 +12,6 @@
<div <div
bind:this={ref} bind:this={ref}
class={cn("bg-primary/10 animate-pulse rounded-md", className)} class={cn('animate-pulse rounded-md bg-primary/10', className)}
{...restProps} {...restProps}
></div> ></div>

10
src/lib/config.ts
View file

@ -5,9 +5,9 @@ export const siteName = 'Stuff.Kasterpalu';
export const baseURL = 'https://stuff.kasterpalu.ee'; export const baseURL = 'https://stuff.kasterpalu.ee';
export const games: GamesObj = { export const games: GamesObj = {
'/pakubiiti': { '/pakubiiti': {
name: 'Paku biiti', name: 'Paku biiti',
image: '', image: '',
description: 'Sorteeri kolme suvalise muusika albumi pealkiri, artistid ja pilt.' description: 'Sorteeri kolme suvalise muusika albumi pealkiri, artistid ja pilt.'
} }
}; };

60
src/lib/server/AlbumState.svelte.ts
View file

@ -1,47 +1,45 @@
import type { AlbumSolveState } from '$lib/types'; import type { AlbumSolveState } from '$lib/types';
class AlbumState { class AlbumState {
private albums: SpotifyApi.AlbumObjectSimplified[] | undefined = undefined; private albums: AlbumSolveState[] | undefined = undefined;
setAlbums(data: SpotifyApi.AlbumObjectSimplified[]) { setAlbums(data: AlbumSolveState[]) {
if (!data) { if (!data) {
return; return;
} }
this.albums = data; this.albums = data;
} }
checkSolve(data: AlbumSolveState[]) { checkSolve(data: AlbumSolveState[]) {
if (!data || !this.albums) { if (!data || !this.albums) {
return false; return false;
} }
for (const solve of data) { for (const solve of data) {
const search = this.albums.filter((album) => album.name === solve.name); const search = this.albums.filter((album) => album.name === solve.name);
if (!search) { if (!search) {
return false; return false;
} }
const matching = search.at(0); const matching = search.at(0);
if (!matching) { if (!matching) {
return false; return false;
} }
if (matching.images.at(0)?.url !== solve.imageUrl) { if (matching.image !== solve.image) {
return false; return false;
} }
for (const artistName of solve.artists) { if (matching.artists !== solve.artists) {
if (!matching.artists.find((artist) => artist.name === artistName)) { return false;
return false; }
} }
}
}
return true; return true;
} }
} }
export const albumState = new AlbumState(); export const albumState = new AlbumState();

90
src/lib/server/Spotify.svelte.ts
View file

@ -3,59 +3,59 @@ import { CLIENT_ID, CLIENT_SECRET } from '$env/static/private';
import { getRandomSearch } from '$lib/utils'; import { getRandomSearch } from '$lib/utils';
class SpotifyAPI { class SpotifyAPI {
private api = new SpotifyWebApi({ private api = new SpotifyWebApi({
clientId: CLIENT_ID, clientId: CLIENT_ID,
clientSecret: CLIENT_SECRET clientSecret: CLIENT_SECRET
}); });
private exiresAt: Date = $state(new Date()); private exiresAt: Date = $state(new Date());
async refreshAccessToken() { async refreshAccessToken() {
// If current token is valid for at least 100ms more // If current token is valid for at least 100ms more
if (this.exiresAt.getTime() - new Date().getTime() > 10) { if (this.exiresAt.getTime() - new Date().getTime() > 10) {
return true; return true;
} }
return await this.api.clientCredentialsGrant().then( return await this.api.clientCredentialsGrant().then(
(data) => { (data) => {
if (!data.body['expires_in'] || !data.body['access_token']) { if (!data.body['expires_in'] || !data.body['access_token']) {
return false; return false;
} }
const new_date = new Date(); const new_date = new Date();
new_date.setSeconds(new_date.getSeconds() + Number(data.body['expires_in'])); new_date.setSeconds(new_date.getSeconds() + Number(data.body['expires_in']));
this.exiresAt = new_date; this.exiresAt = new_date;
this.api.setAccessToken(data.body['access_token']); this.api.setAccessToken(data.body['access_token']);
return true; return true;
}, },
function (err) { function (err) {
console.log('Something went wrong when retrieving an access token', err); console.log('Something went wrong when retrieving an access token', err);
return false; return false;
} }
); );
} }
async getRandomAlbum() { async getRandomAlbum() {
if (!(await this.refreshAccessToken())) { if (!(await this.refreshAccessToken())) {
return undefined; return undefined;
} }
const randomSearch = getRandomSearch(); const randomSearch = getRandomSearch();
const randomOffset = Math.floor(Math.random() * 1000); const randomOffset = Math.floor(Math.random() * 1000);
return await this.api.search(randomSearch, ['album'], { limit: 1, offset: randomOffset }).then( return await this.api.search(randomSearch, ['album'], { limit: 1, offset: randomOffset }).then(
function (data) { function (data) {
if (data.body.albums?.items?.at(0)) { if (data.body.albums?.items?.at(0)) {
return data.body.albums.items.at(0); return data.body.albums.items.at(0);
} }
}, },
(err) => { (err) => {
console.log(err); console.log(err);
return undefined; return undefined;
} }
); );
} }
} }
export const spotifyAPI = new SpotifyAPI(); export const spotifyAPI = new SpotifyAPI();

31
src/lib/types.ts
View file

@ -1,20 +1,31 @@
export type AlbumData = {
names: AlbumDataField[];
artists: AlbumDataField[];
images: AlbumDataField[];
};
export type AlbumDataField = {
id: string;
value: string;
};
export type AlbumSolveState = { export type AlbumSolveState = {
name: string; name: string;
artists: string[]; artists: string;
imageUrl: string; image: string;
}; };
export type Player = { export type Player = {
id: string; id: string;
stage: number; stage: number;
highscore: number; highscore: number;
playing: boolean; playing: boolean;
}; };
export type Game = { export type Game = {
name: string; name: string;
image: string; image: string;
description: string; description: string;
}; };
export type GamesObj = Record<string, Game>; export type GamesObj = Record<string, Game>;

14
src/routes/(games)/(singlescreen)/pakubiiti/+page.server.ts
View file

@ -38,17 +38,17 @@ export const load: PageServerLoad = async ({ fetch, locals }) => {
return res.json(); return res.json();
}) })
.then((data) => { .then((data) => {
const albumNames = data.albums.map((album: SpotifyApi.AlbumObjectSimplified) => ({ const albumNames = data.albums.map((album: AlbumSolveState) => ({
id: nanoid(), id: nanoid(),
value: album.name value: album.name
})); }));
const albumImages = data.albums.map((album: SpotifyApi.AlbumObjectSimplified) => ({ const albumImages = data.albums.map((album: AlbumSolveState) => ({
id: nanoid(), id: nanoid(),
value: album.images.at(0)?.url || '' value: album.image
})); }));
const albumArtists = data.albums.map((album: SpotifyApi.AlbumObjectSimplified) => ({ const albumArtists = data.albums.map((album: AlbumSolveState) => ({
id: nanoid(), id: nanoid(),
value: album.artists.map((artist) => artist.name).join(', ') value: album.artists
})); }));
return { return {
@ -84,9 +84,7 @@ export const actions = {
const image = data.get(`images_${i}`); const image = data.get(`images_${i}`);
const artists = data.get(`artists_${i}`); const artists = data.get(`artists_${i}`);
const artistList = artists.split(', '); state.push({ name: name, image: image, artists: artists });
state.push({ name: name, imageUrl: image, artists: artistList });
} }
const solved = albumState.checkSolve(state); const solved = albumState.checkSolve(state);

21
src/routes/(games)/(singlescreen)/pakubiiti/+page.svelte
View file

@ -7,17 +7,18 @@
import DndGroup from '$lib/components/DNDGroup.svelte'; import DndGroup from '$lib/components/DNDGroup.svelte';
import type { PageData } from './$types'; import type { PageData } from './$types';
import { enhance } from '$app/forms'; import { enhance } from '$app/forms';
import type { AlbumData } from '$lib/types';
let { data }: { data: PageData; form: FormData } = $props(); let { data }: { data: PageData; form: FormData } = $props();
let loading = $state(false); let loading = $state(false);
let oldAlbums: SpotifyApi.AlbumObjectSimplified[] = $state([]); let oldAlbums: AlbumData | undefined = $state();
// Used when user answers wrong and no new data comes in // Used when user answers wrong and no new data comes in
$effect(() => { $effect(() => {
if (data.streamed?.albums) { if (data.streamed?.albums) {
data.streamed.albums.then((data) => { data.streamed.albums.then((data) => {
oldAlbums = data; oldAlbums = data as AlbumData;
}); });
} }
}); });
@ -38,11 +39,11 @@
</div> </div>
{/snippet} {/snippet}
{#snippet playArea(albums, placeholder = false)} {#snippet playArea(albums: AlbumData | undefined, placeholder = false)}
{#if placeholder} {#if placeholder}
{#each { length: 2 } as _} {#each { length: 2 }}
<section class="grid grid-cols-3 items-center gap-14"> <section class="grid grid-cols-3 items-center gap-14">
{#each { length: 3 } as _} {#each { length: 3 }}
<Skeleton class="h-[5.25rem] w-full rounded-xl " /> <Skeleton class="h-[5.25rem] w-full rounded-xl " />
{/each} {/each}
</section> </section>
@ -50,11 +51,11 @@
{/each} {/each}
<section class="grid grid-cols-3 items-center gap-14"> <section class="grid grid-cols-3 items-center gap-14">
{#each { length: 3 } as _} {#each { length: 3 }}
<Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" /> <Skeleton class="aspect-square h-auto max-w-full rounded-xl object-cover" />
{/each} {/each}
</section> </section>
{:else} {:else if albums}
<DndGroup items={albums.names} type="names"></DndGroup> <DndGroup items={albums.names} type="names"></DndGroup>
<Separator /> <Separator />
<DndGroup items={albums.artists} type="artists"></DndGroup> <DndGroup items={albums.artists} type="artists"></DndGroup>
@ -91,7 +92,7 @@
</AlertDialog.Content> </AlertDialog.Content>
</AlertDialog.Root> </AlertDialog.Root>
<header class="font-title mb-24 flex flex-col items-center"> <header class="mb-24 flex flex-col items-center font-title">
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">Paku biiti</h1> <h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">Paku biiti</h1>
<p class="text-2xl font-semibold text-muted-foreground"> <p class="text-2xl font-semibold text-muted-foreground">
Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>, Lohista kokku õiged albumi <span class="text-red-600 dark:text-red-400">nimed</span>,
@ -108,9 +109,9 @@
> >
{#if data?.streamed?.albums} {#if data?.streamed?.albums}
{#await data.streamed.albums} {#await data.streamed.albums}
{@render playArea({}, true)} {@render playArea(undefined, true)}
{:then albums} {:then albums}
{@render playArea(albums)} {@render playArea(albums as AlbumData)}
{/await} {/await}
{:else} {:else}
{@render playArea(oldAlbums)} {@render playArea(oldAlbums)}

24
src/routes/(games)/+layout.server.ts
View file

@ -2,19 +2,19 @@ import type { LayoutServerData } from './$types';
import { games } from '$lib/config'; import { games } from '$lib/config';
export const load: LayoutServerData = async ({ url }) => { export const load: LayoutServerData = async ({ url }) => {
if (!url?.pathname) { if (!url?.pathname) {
return; return;
} }
const game = games[url.pathname]; const game = games[url.pathname];
if (!game) { if (!game) {
return; return;
} }
return { return {
name: game.name, name: game.name,
description: game.description, description: game.description,
image: game.image image: game.image
}; };
}; };

4
src/routes/(landing)/+page.svelte
View file

@ -12,7 +12,7 @@
<meta property="og:image" content={baseURL + '/favicon.svg'} /> <meta property="og:image" content={baseURL + '/favicon.svg'} />
</svelte:head> </svelte:head>
<header class="font-title mb-24 flex flex-col items-center"> <header class="mb-24 flex flex-col items-center font-title">
<h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl"> <h1 class="mb-1 scroll-m-20 text-6xl font-extrabold tracking-tight lg:text-7xl">
stuff.kasterpalu.ee stuff.kasterpalu.ee
</h1> </h1>
@ -21,7 +21,7 @@
<main class="grid w-full max-w-4xl justify-items-center"> <main class="grid w-full max-w-4xl justify-items-center">
{#each Object.entries(games) as [href, { image, name }]} {#each Object.entries(games) as [href, { image, name }]}
<a <a
class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-shadow transition-transform" class="shadow-sharp flex aspect-[4/1] w-full max-w-sm items-center justify-center rounded-xl border-2 border-current bg-contain bg-no-repeat transition-all"
style="background-image: url('{image}')" style="background-image: url('{image}')"
draggable="false" draggable="false"
{href} {href}

30
src/routes/api/pakubiiti/getAlbums/[count]/+server.ts
View file

@ -1,20 +1,30 @@
import { albumState } from '$lib/server/AlbumState.svelte'; import { albumState } from '$lib/server/AlbumState.svelte';
import { spotifyAPI } from '$lib/server/Spotify.svelte'; import { spotifyAPI } from '$lib/server/Spotify.svelte';
import type { AlbumSolveState } from '$lib/types';
import { json } from '@sveltejs/kit'; import { json } from '@sveltejs/kit';
export async function GET({ params }) { export async function GET({ params }) {
const count = params.count || 1; const count = params.count || 1;
const albums: SpotifyApi.AlbumObjectSimplified[] = []; const albums: AlbumSolveState[] = [];
for (let i = 0; i < count; i++) { for (let i = 0; i < count; i++) {
const album = await spotifyAPI.getRandomAlbum(); const album = await spotifyAPI.getRandomAlbum();
if (album) { if (album) {
albums.push(album); const image = album.images.at(0);
} if (!image?.url) {
} return;
}
albumState.setAlbums(albums); albums.push({
name: album.name,
artists: album.artists.map((artist) => artist.name).join(', '),
image: image.url
});
}
}
return json({ albums: albums }); albumState.setAlbums(albums);
return json({ albums: albums });
} }

40
static/site.webmanifest
View file

@ -1,21 +1,21 @@
{ {
"name": "Kasterpalu", "name": "Kasterpalu",
"short_name": "Kasterpalu", "short_name": "Kasterpalu",
"icons": [ "icons": [
{ {
"src": "/web-app-manifest-192x192.png", "src": "/web-app-manifest-192x192.png",
"sizes": "192x192", "sizes": "192x192",
"type": "image/png", "type": "image/png",
"purpose": "maskable" "purpose": "maskable"
}, },
{ {
"src": "/web-app-manifest-512x512.png", "src": "/web-app-manifest-512x512.png",
"sizes": "512x512", "sizes": "512x512",
"type": "image/png", "type": "image/png",
"purpose": "maskable" "purpose": "maskable"
} }
], ],
"theme_color": "#ffffff", "theme_color": "#ffffff",
"background_color": "#ffffff", "background_color": "#ffffff",
"display": "standalone" "display": "standalone"
} }