+ import * as Drawer from "$lib/components/ui/drawer/index.js";
+ import { Button } from "$lib/components/ui/button/index.js";
+ import TrackerSetting from "./TrackerSetting.svelte";
+
+ const addTracker = async () => {
+ const response = await fetch("/tracker", {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ id: 4,
+ }),
+ });
+
+ console.log(response);
+ };
+
+ const deleteTracker = async () => {
+ const response = await fetch("/tracker", {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify({
+ id: 4,
+ }),
+ });
+ console.log(response);
+ };
+
+
+
+
+
+
+
+
+ Are you sure absolutely sure?
+ This action cannot be undone.
+
+
+
+
+
+
+
diff --git a/frontend/src/components/Slider.svelte b/frontend/src/components/Slider.svelte
index 679a811..b01880d 100644
--- a/frontend/src/components/Slider.svelte
+++ b/frontend/src/components/Slider.svelte
@@ -20,15 +20,19 @@
let arena_state: "full_arena" | "scene_only" = $state("scene_only");
+ let tracker = trackers.find((ball) => {
+ ball.id === selected;
+ });
+
const onchange = () => {
- const x_send = trackers[selected].x / width;
- const y_send = trackers[selected].y / height;
+ const x_send = tracker!.x / width;
+ const y_send = tracker!.y / height;
ws?.send(
JSON.stringify({
- id: trackers[selected].id,
+ id: tracker!.id,
x: x_send,
y: y_send,
- z: trackers[selected].z,
+ z: tracker!.z,
}),
);
};
@@ -52,7 +56,7 @@
});
};
- let z_viz = $derived(trackers[selected].z.toFixed(2));
+ let z_viz = $derived(tracker?.z.toFixed(2));
@@ -64,7 +68,6 @@
max="4"
step="0.01"
oninput={onchange}
- bind:value={trackers[selected].z}
/>
diff --git a/frontend/src/components/TrackerSetting.svelte b/frontend/src/components/TrackerSetting.svelte
new file mode 100644
index 0000000..015737b
--- /dev/null
+++ b/frontend/src/components/TrackerSetting.svelte
@@ -0,0 +1,17 @@
+
+
+
+
{text}
+
+
+
diff --git a/frontend/src/components/ui/button/button.svelte b/frontend/src/components/ui/button/button.svelte
new file mode 100644
index 0000000..86827f3
--- /dev/null
+++ b/frontend/src/components/ui/button/button.svelte
@@ -0,0 +1,25 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/button/index.ts b/frontend/src/components/ui/button/index.ts
new file mode 100644
index 0000000..af1e188
--- /dev/null
+++ b/frontend/src/components/ui/button/index.ts
@@ -0,0 +1,49 @@
+import { type VariantProps, tv } from "tailwind-variants";
+import type { Button as ButtonPrimitive } from "bits-ui";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+ base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+ variants: {
+ variant: {
+ default: "bg-primary text-primary-foreground hover:bg-primary/90",
+ destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+ outline:
+ "border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+ ghost: "hover:bg-accent hover:text-accent-foreground",
+ link: "text-primary underline-offset-4 hover:underline",
+ },
+ size: {
+ default: "h-10 px-4 py-2",
+ sm: "h-9 rounded-md px-3",
+ lg: "h-11 rounded-md px-8",
+ icon: "h-10 w-10",
+ },
+ },
+ defaultVariants: {
+ variant: "default",
+ size: "default",
+ },
+});
+
+type Variant = VariantProps
["variant"];
+type Size = VariantProps["size"];
+
+type Props = ButtonPrimitive.Props & {
+ variant?: Variant;
+ size?: Size;
+};
+
+type Events = ButtonPrimitive.Events;
+
+export {
+ Root,
+ type Props,
+ type Events,
+ //
+ Root as Button,
+ type Props as ButtonProps,
+ type Events as ButtonEvents,
+ buttonVariants,
+};
diff --git a/frontend/src/components/ui/drawer/drawer-content.svelte b/frontend/src/components/ui/drawer/drawer-content.svelte
new file mode 100644
index 0000000..4f05317
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-content.svelte
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer-description.svelte b/frontend/src/components/ui/drawer/drawer-description.svelte
new file mode 100644
index 0000000..ef761a7
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-description.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer-footer.svelte b/frontend/src/components/ui/drawer/drawer-footer.svelte
new file mode 100644
index 0000000..c6c07ad
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-footer.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer-header.svelte b/frontend/src/components/ui/drawer/drawer-header.svelte
new file mode 100644
index 0000000..f857176
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-header.svelte
@@ -0,0 +1,19 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer-nested.svelte b/frontend/src/components/ui/drawer/drawer-nested.svelte
new file mode 100644
index 0000000..79b68e3
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-nested.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer-overlay.svelte b/frontend/src/components/ui/drawer/drawer-overlay.svelte
new file mode 100644
index 0000000..ccc7322
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-overlay.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer-title.svelte b/frontend/src/components/ui/drawer/drawer-title.svelte
new file mode 100644
index 0000000..cfbe596
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer-title.svelte
@@ -0,0 +1,18 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/drawer.svelte b/frontend/src/components/ui/drawer/drawer.svelte
new file mode 100644
index 0000000..40eae5e
--- /dev/null
+++ b/frontend/src/components/ui/drawer/drawer.svelte
@@ -0,0 +1,12 @@
+
+
+
+
+
diff --git a/frontend/src/components/ui/drawer/index.ts b/frontend/src/components/ui/drawer/index.ts
new file mode 100644
index 0000000..76932e3
--- /dev/null
+++ b/frontend/src/components/ui/drawer/index.ts
@@ -0,0 +1,41 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+import Root from "./drawer.svelte";
+import Content from "./drawer-content.svelte";
+import Description from "./drawer-description.svelte";
+import Overlay from "./drawer-overlay.svelte";
+import Footer from "./drawer-footer.svelte";
+import Header from "./drawer-header.svelte";
+import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
+
+const Trigger = DrawerPrimitive.Trigger;
+const Portal = DrawerPrimitive.Portal;
+const Close = DrawerPrimitive.Close;
+
+export {
+ Root,
+ NestedRoot,
+ Content,
+ Description,
+ Overlay,
+ Footer,
+ Header,
+ Title,
+ Trigger,
+ Portal,
+ Close,
+
+ //
+ Root as Drawer,
+ NestedRoot as DrawerNestedRoot,
+ Content as DrawerContent,
+ Description as DrawerDescription,
+ Overlay as DrawerOverlay,
+ Footer as DrawerFooter,
+ Header as DrawerHeader,
+ Title as DrawerTitle,
+ Trigger as DrawerTrigger,
+ Portal as DrawerPortal,
+ Close as DrawerClose,
+};
diff --git a/frontend/src/components/ui/input/index.ts b/frontend/src/components/ui/input/index.ts
new file mode 100644
index 0000000..75e3bc2
--- /dev/null
+++ b/frontend/src/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent = T & {
+ currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+ blur: FormInputEvent;
+ change: FormInputEvent;
+ click: FormInputEvent;
+ focus: FormInputEvent;
+ focusin: FormInputEvent;
+ focusout: FormInputEvent;
+ keydown: FormInputEvent;
+ keypress: FormInputEvent;
+ keyup: FormInputEvent;
+ mouseover: FormInputEvent;
+ mouseenter: FormInputEvent;
+ mouseleave: FormInputEvent;
+ mousemove: FormInputEvent;
+ paste: FormInputEvent;
+ input: FormInputEvent;
+ wheel: FormInputEvent;
+};
+
+export {
+ Root,
+ //
+ Root as Input,
+};
diff --git a/frontend/src/components/ui/input/input.svelte b/frontend/src/components/ui/input/input.svelte
new file mode 100644
index 0000000..cab1457
--- /dev/null
+++ b/frontend/src/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+
+
+
diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index b433749..08719cb 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -1,5 +1,6 @@
---
import Container from "../components/Container.svelte";
+import "$lib/styles/app.css";
---
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
new file mode 100644
index 0000000..1460463
--- /dev/null
+++ b/frontend/src/styles/app.css
@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+ :root {
+ --background: 0 0% 100%;
+ --foreground: 222.2 84% 4.9%;
+
+ --muted: 210 40% 96.1%;
+ --muted-foreground: 215.4 16.3% 46.9%;
+
+ --popover: 0 0% 100%;
+ --popover-foreground: 222.2 84% 4.9%;
+
+ --card: 0 0% 100%;
+ --card-foreground: 222.2 84% 4.9%;
+
+ --border: 214.3 31.8% 91.4%;
+ --input: 214.3 31.8% 91.4%;
+
+ --primary: 222.2 47.4% 11.2%;
+ --primary-foreground: 210 40% 98%;
+
+ --secondary: 210 40% 96.1%;
+ --secondary-foreground: 222.2 47.4% 11.2%;
+
+ --accent: 210 40% 96.1%;
+ --accent-foreground: 222.2 47.4% 11.2%;
+
+ --destructive: 0 72.2% 50.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 222.2 84% 4.9%;
+
+ --radius: 0.5rem;
+ }
+
+ .dark {
+ --background: 222.2 84% 4.9%;
+ --foreground: 210 40% 98%;
+
+ --muted: 217.2 32.6% 17.5%;
+ --muted-foreground: 215 20.2% 65.1%;
+
+ --popover: 222.2 84% 4.9%;
+ --popover-foreground: 210 40% 98%;
+
+ --card: 222.2 84% 4.9%;
+ --card-foreground: 210 40% 98%;
+
+ --border: 217.2 32.6% 17.5%;
+ --input: 217.2 32.6% 17.5%;
+
+ --primary: 210 40% 98%;
+ --primary-foreground: 222.2 47.4% 11.2%;
+
+ --secondary: 217.2 32.6% 17.5%;
+ --secondary-foreground: 210 40% 98%;
+
+ --accent: 217.2 32.6% 17.5%;
+ --accent-foreground: 210 40% 98%;
+
+ --destructive: 0 62.8% 30.6%;
+ --destructive-foreground: 210 40% 98%;
+
+ --ring: 212.7 26.8% 83.9%;
+ }
+}
+
+@layer base {
+ * {
+ @apply border-border;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/utils.ts b/frontend/src/utils.ts
new file mode 100644
index 0000000..8871245
--- /dev/null
+++ b/frontend/src/utils.ts
@@ -0,0 +1,62 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { cubicOut } from "svelte/easing";
+import type { TransitionConfig } from "svelte/transition";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
+
+type FlyAndScaleParams = {
+ y?: number;
+ x?: number;
+ start?: number;
+ duration?: number;
+};
+
+export const flyAndScale = (
+ node: Element,
+ params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
+): TransitionConfig => {
+ const style = getComputedStyle(node);
+ const transform = style.transform === "none" ? "" : style.transform;
+
+ const scaleConversion = (
+ valueA: number,
+ scaleA: [number, number],
+ scaleB: [number, number]
+ ) => {
+ const [minA, maxA] = scaleA;
+ const [minB, maxB] = scaleB;
+
+ const percentage = (valueA - minA) / (maxA - minA);
+ const valueB = percentage * (maxB - minB) + minB;
+
+ return valueB;
+ };
+
+ const styleToString = (
+ style: Record
+ ): string => {
+ return Object.keys(style).reduce((str, key) => {
+ if (style[key] === undefined) return str;
+ return str + `${key}:${style[key]};`;
+ }, "");
+ };
+
+ return {
+ duration: params.duration ?? 200,
+ delay: 0,
+ css: (t) => {
+ const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+ const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+ const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+
+ return styleToString({
+ transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
+ opacity: t
+ });
+ },
+ easing: cubicOut
+ };
+};
\ No newline at end of file
diff --git a/frontend/tailwind.config.mjs b/frontend/tailwind.config.mjs
index f8a2096..fa1cb36 100644
--- a/frontend/tailwind.config.mjs
+++ b/frontend/tailwind.config.mjs
@@ -1,8 +1,64 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+
/** @type {import('tailwindcss').Config} */
-export default {
- content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
- theme: {
- extend: {},
- },
- plugins: [],
+const config = {
+ darkMode: ["class"],
+ content: ["./src/**/*.{html,js,svelte,ts}"],
+ safelist: ["dark"],
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px"
+ }
+ },
+ extend: {
+ colors: {
+ border: "hsl(var(--border) / )",
+ input: "hsl(var(--input) / )",
+ ring: "hsl(var(--ring) / )",
+ background: "hsl(var(--background) / )",
+ foreground: "hsl(var(--foreground) / )",
+ primary: {
+ DEFAULT: "hsl(var(--primary) / )",
+ foreground: "hsl(var(--primary-foreground) / )"
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary) / )",
+ foreground: "hsl(var(--secondary-foreground) / )"
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive) / )",
+ foreground: "hsl(var(--destructive-foreground) / )"
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted) / )",
+ foreground: "hsl(var(--muted-foreground) / )"
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent) / )",
+ foreground: "hsl(var(--accent-foreground) / )"
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover) / )",
+ foreground: "hsl(var(--popover-foreground) / )"
+ },
+ card: {
+ DEFAULT: "hsl(var(--card) / )",
+ foreground: "hsl(var(--card-foreground) / )"
+ }
+ },
+ borderRadius: {
+ lg: "var(--radius)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)"
+ },
+ fontFamily: {
+ sans: [...fontFamily.sans]
+ }
+ }
+ },
};
+
+export default config;