Ammend to Initial Commit

2024-05-20 00:31:58 +02:00 · 2024-05-20 00:31:58 +02:00 · 8169691b05
commit 8169691b05
parent fb398ae315
34 changed files with 2590 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,10 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@ -0,0 +1,5 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/components.json
+++ b/components.json
@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "new-york",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "slate"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,33 @@
+{
+	"name": "space-engineers-thrust-calculator",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"ui": "npx shadcn-svelte@latest"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"autoprefixer": "^10.4.16",
+		"postcss": "^8.4.33",
+		"svelte": "^5.0.0-next.1",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.4.1",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^5.0.3"
+	},
+	"type": "module",
+	"dependencies": {
+		"bits-ui": "^0.21.8",
+		"clsx": "^2.1.1",
+		"tailwind-merge": "^2.3.0",
+		"tailwind-variants": "^0.2.1"
+	}
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+};
--- a/src/app.css
+++ b/src/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: hsl(212.7,26.8%,83.9);
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
--- a/src/app.d.ts
+++ b/src/app.d.ts
@ -0,0 +1,13 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover" class="p-8 h-screen light dark">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/src/lib/components/ui/button/button.svelte
+++ b/src/lib/components/ui/button/button.svelte
@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Button as ButtonPrimitive } from "bits-ui";
+	import { type Events, type Props, buttonVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = Props;
+	type $$Events = Events;
+
+	let className: $$Props["class"] = undefined;
+	export let variant: $$Props["variant"] = "default";
+	export let size: $$Props["size"] = "default";
+	export let builders: $$Props["builders"] = [];
+	export { className as class };
+</script>
+
+<ButtonPrimitive.Root
+	{builders}
+	class={cn(buttonVariants({ variant, size, className }))}
+	type="button"
+	{...$$restProps}
+	on:click
+	on:keydown
+>
+	<slot />
+</ButtonPrimitive.Root>
--- a/src/lib/components/ui/button/index.ts
+++ b/src/lib/components/ui/button/index.ts
@ -0,0 +1,50 @@
+import type { Button as ButtonPrimitive } from "bits-ui";
+import { type VariantProps, tv } from "tailwind-variants";
+import Root from "./button.svelte";
+
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+			destructive:
+				"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+			outline:
+				"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+			secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+			ghost: "hover:bg-accent hover:text-accent-foreground",
+			link: "text-primary underline-offset-4 hover:underline",
+		},
+		size: {
+			default: "h-9 px-4 py-2",
+			sm: "h-8 rounded-md px-3 text-xs",
+			lg: "h-10 rounded-md px-8",
+			icon: "h-9 w-9",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default",
+	},
+});
+
+type Variant = VariantProps<typeof buttonVariants>["variant"];
+type Size = VariantProps<typeof buttonVariants>["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,
+};
--- a/src/lib/components/ui/card/card-content.svelte
+++ b/src/lib/components/ui/card/card-content.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/card-description.svelte
+++ b/src/lib/components/ui/card/card-description.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<p class={cn("text-sm text-muted-foreground", className)} {...$$restProps}>
+	<slot />
+</p>
--- a/src/lib/components/ui/card/card-footer.svelte
+++ b/src/lib/components/ui/card/card-footer.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center p-6 pt-0", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/card-header.svelte
+++ b/src/lib/components/ui/card/card-header.svelte
@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex flex-col space-y-1.5 p-6", className)} {...$$restProps}>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/card-title.svelte
+++ b/src/lib/components/ui/card/card-title.svelte
@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { HeadingLevel } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		tag?: HeadingLevel;
+	};
+
+	let className: $$Props["class"] = undefined;
+	export let tag: $$Props["tag"] = "h3";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={tag}
+	class={cn("font-semibold leading-none tracking-tight", className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
--- a/src/lib/components/ui/card/card.svelte
+++ b/src/lib/components/ui/card/card.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+	class={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+	{...$$restProps}
+	on:click
+	on:focusin
+	on:focusout
+	on:mouseenter
+	on:mouseleave
+>
+	<slot />
+</div>
--- a/src/lib/components/ui/card/index.ts
+++ b/src/lib/components/ui/card/index.ts
@ -0,0 +1,24 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
--- a/src/lib/components/ui/input/index.ts
+++ b/src/lib/components/ui/input/index.ts
@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>
--- a/src/lib/components/ui/label/index.ts
+++ b/src/lib/components/ui/label/index.ts
@ -0,0 +1,7 @@
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
--- a/src/lib/components/ui/label/label.svelte
+++ b/src/lib/components/ui/label/label.svelte
@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = LabelPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<LabelPrimitive.Root
+	class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</LabelPrimitive.Root>
--- a/src/lib/components/ui/separator/index.ts
+++ b/src/lib/components/ui/separator/index.ts
@ -0,0 +1,7 @@
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
--- a/src/lib/components/ui/separator/separator.svelte
+++ b/src/lib/components/ui/separator/separator.svelte
@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = SeparatorPrimitive.Props;
+
+	let className: $$Props["class"] = undefined;
+	export let orientation: $$Props["orientation"] = "horizontal";
+	export let decorative: $$Props["decorative"] = undefined;
+	export { className as class };
+</script>
+
+<SeparatorPrimitive.Root
+	class={cn(
+		"shrink-0 bg-border",
+		orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+		className
+	)}
+	{orientation}
+	{decorative}
+	{...$$restProps}
+/>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/lib/utils.ts
+++ b/src/lib/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, number | string | undefined>
+	): 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
+	};
+};
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1 @@
+<slot></slot><script>import "../app.css";</script><style></style>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,317 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+    import * as Card from "$lib/components/ui/card";
+    import {Button} from "$lib/components/ui/button";
+    import {
+        Grids,
+        inventorySizes,
+        InventoryType,
+        localization, metricModifiers, type Thruster,
+        ThrusterSize,
+        ThrusterType,
+        thrustValues, weightPerVolume
+    } from "$lib/constants";
+    import {Input} from "$lib/components/ui/input";
+    import {Label} from "$lib/components/ui/label";
+    import {Separator} from "$lib/components/ui/separator";
+    import {onMount} from "svelte";
+
+    let locale = $state(navigator.language);
+    let mounted = $state(false);
+
+    let thrusters: Array<Thruster> = $state([])
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("thrusters", JSON.stringify(thrusters));
+        }
+    })
+    let inventories: Array<InventoryType> = $state([])
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("inventories", JSON.stringify(inventories));
+        }
+    })
+
+    let inventoryMultiplier = $state(1);
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("inventoryMultiplier", inventoryMultiplier);
+        }
+    })
+    let gridSize = $state(Grids.Small);
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("gridSize", gridSize);
+        }
+    })
+
+    let gravity = $state(1.00);
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("gravity", gravity);
+        }
+    })
+
+
+    let newThruster = $state({
+        type: ThrusterType.Atmospheric,
+        size: ThrusterSize.Small,
+    })
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("newThruster", JSON.stringify(newThruster))
+        }
+    })
+
+    let newInventory = $state(InventoryType.CargoSmall)
+    $effect(() => {
+        if (mounted) {
+            localStorage.setItem("newInventory", JSON.stringify(newInventory))
+        }
+    })
+
+    let totalThrust = $derived.by(() => {
+        let thrust = 0;
+        thrusters.forEach((thruster) => {
+            thrust += getThrusterPower(thruster)
+        })
+        return thrust
+    });
+    let totalVolume = $derived.by(() => {
+        let volume = 0;
+        inventories.forEach((inventory) => {
+            volume += getInventoryVolume(inventory);
+        })
+        return volume;
+    })
+
+    let maxWeight = $derived.by(() => {
+        let weight = totalThrust / (gravity * 9.81);
+        weight -= totalVolume * weightPerVolume;
+        return weight;
+    })
+
+    function weightConversion(weight: number): string {
+        if (weight > 1000) {
+            return applyUnits(weight/1000, "t")
+        }
+        else {
+            return `${weight.toFixed(2)}kg`
+        }
+    }
+
+    function getInventoryVolume(inventory: InventoryType): number {
+        return inventorySizes.get(gridSize).get(inventory) * inventoryMultiplier
+    }
+
+    function getThrusterPower(thruster: Thruster): number {
+        return thrustValues.get(gridSize).get(thruster.type).get(thruster.size)
+    }
+
+    function addThruster() {
+        thrusters.push({ type: newThruster.type, size: newThruster.size});
+    }
+
+    function addInventory() {
+        inventories.push(newInventory);
+    }
+
+    function localized(key: string): string {
+        let localizationObject = localization.get(key)
+
+        if (typeof localizationObject === "undefined") {
+            return `missing text: ${key}`
+        }
+        else {
+            let localizedText = localizationObject.get(locale)
+            if (typeof localizedText === "undefined") {
+                return localizationObject.get("en-GB")
+            }
+            else {
+                return localizedText
+            }
+        }
+    }
+
+    function applyUnits(value: number, unit: string) {
+        for (const [power, modifier] of [...metricModifiers.entries()]) {
+            if (value > power) {
+                if (value / power >= 10000) {
+                    let base = value / power;
+                    let rest = base % 1000;
+                    base = (base - rest) / 1000;
+                    rest = Math.round((rest + Number.EPSILON) * 100) / 100
+                    return `${base}${localized("separator")}${rest}${modifier}${unit}`
+                }
+                else {
+                    let rounded = Math.round(((value / power) + Number.EPSILON) * 100) / 100
+                    return `${rounded}${modifier}${unit}`
+                }
+            }
+        }
+        let rounded = Math.round(((value + Number.EPSILON) * 100) / 100)
+        return `${rounded}${unit}`
+    }
+
+    onMount(() => {
+        let localThrusters = localStorage.getItem("thrusters");
+        if (typeof localThrusters !== "undefined" && localThrusters !== "") {
+            thrusters = JSON.parse(localThrusters);
+        }
+
+        let localInventories = localStorage.getItem("inventories");
+        if (typeof localInventories !== "undefined" && localInventories !== "") {
+            inventories = JSON.parse(localInventories);
+        }
+
+        let localGridSize = localStorage.getItem("gridSize");
+        if (typeof localGridSize !== "undefined" && localGridSize !== "") {
+            gridSize = localGridSize;
+        }
+
+        let localGravity = localStorage.getItem("gravity");
+        if (typeof localGravity !== "undefined" && localGravity !== "") {
+            gravity = localGravity;
+        }
+
+        let localInventoryMultiplicator = localStorage.getItem("inventoryMultiplier");
+        if (typeof localInventoryMultiplicator !== "undefined" && localInventoryMultiplicator !== "") {
+            inventoryMultiplier = localInventoryMultiplicator;
+        }
+
+        let localNewThruster = localStorage.getItem("newThruster");
+        if (typeof localNewThruster !== "undefined" && localNewThruster !== "") {
+            newThruster = JSON.parse(localNewThruster);
+        }
+
+        let localNewInventory = localStorage.getItem("newInventory");
+        if (typeof localNewInventory !== "undefined" && localNewInventory !== "") {
+            newInventory = JSON.parse(localNewInventory);
+        }
+
+        mounted = true;
+    })
+</script>
+
+<svelte:head>
+    <title>{localized("title")}</title>
+    <meta name="robots" content="noindex nofollow" />
+</svelte:head>
+
+<div class="gap-4 grid grid-cols-3 h-full">
+    <Card.Root class="col-span-1">
+        <Card.Header>
+            <Card.Title>{localized("title")}</Card.Title>
+        </Card.Header>
+        <Card.Content class="flex flex-col gap-3">
+            <Separator />
+            <Label for="gravity">{localized("gravity")}</Label>
+            <Input type="number" step="0.01" id="gravity" bind:value={gravity}/>
+            <Separator />
+            <Label for="gridSize">{localized("gridSize")}</Label>
+            <div id="gridSize" class="flex">
+                {#each Object.values(Grids) as size}
+                    {#if gridSize === size}
+                        <Button variant="primary">{localized(size)}</Button>
+                    {:else}
+                        <Button variant="secondary" onclick={() => gridSize = size}>{localized(size)}</Button>
+                    {/if}
+                {/each}
+            </div>
+            <Separator />
+            <p>{localized("liftableWeight")}: {weightConversion(maxWeight)}</p>
+        </Card.Content>
+    </Card.Root>
+    <Card.Root class="col-span-1 flex flex-col flex-grow">
+        <Card.Header>
+            <Card.Title>{localized("thrusterSettings")}</Card.Title>
+        </Card.Header>
+        <Card.Content class="flex flex-col flex-grow gap-3">
+            <Separator />
+            <Card.Root>
+                <Card.Content class="flex flex-col gap-3 pt-6">
+                    <div class="flex gap-2">
+                        {#each Object.values(ThrusterType) as thruster}
+                            {#if newThruster.type === thruster}
+                                <Button variant="primary">{localized(thruster)}</Button>
+                            {:else}
+                                <Button variant="secondary" onclick={() => newThruster.type = thruster}>{localized(thruster)}</Button>
+                            {/if}
+                        {/each}
+                    </div>
+                    <div class="flex gap-2">
+                        {#each Object.values(ThrusterSize) as size}
+                            {#if newThruster.size === size}
+                                <Button variant="primary">{localized(size)}</Button>
+                            {:else}
+                                <Button variant="secondary" onclick={() => newThruster.size = size}>{localized(size)}</Button>
+                            {/if}
+                        {/each}
+                    </div>
+                    <Button variant="secondary" onclick={() => addThruster()}>{localized("addThruster")}</Button>
+                </Card.Content>
+            </Card.Root>
+            <Card.Root class="flex flex-col h-0 flex-grow">
+                <Card.Header>
+                    <Card.Title>{localized("thrusters")} ({applyUnits(totalThrust, "N")})</Card.Title>
+                </Card.Header>
+                <Card.Content class="overflow-hidden">
+                    <Separator />
+                    <div class="max-h-full overflow-y-auto">
+                        {#each thrusters as thruster, index}
+                            <p class="p-1">
+                                - {localized(thruster.size)} {localized(thruster.type)} {localized("thruster")}: {applyUnits(getThrusterPower(thruster), "N")}
+                                <Button variant="destructive" onclick={() => thrusters.splice(index, 1)}>X</Button>
+                            </p>
+                        {/each}
+                    </div>
+                </Card.Content>
+            </Card.Root>
+        </Card.Content>
+    </Card.Root>
+
+    <Card.Root class="col-span-1 flex flex-col flex-grow">
+        <Card.Header>
+            <Card.Title>{localized("inventorySettings")}</Card.Title>
+        </Card.Header>
+        <Card.Content class="flex flex-col flex-grow gap-3">
+            <Separator />
+            <Label for="inventorySize">{localized("inventory")} {localized("multiplier")}</Label>
+            <Input id="inventorySize" type="number" bind:value={inventoryMultiplier}/>
+            <Card.Root>
+                <Card.Content class="pt-6 flex flex-col gap-3">
+                    <div class="flex gap-2 flex-wrap">
+                        {#each Object.values(InventoryType) as inventory}
+                            {#if newInventory === inventory}
+                                <Button variant="primary">{localized(inventory)}</Button>
+                            {:else}
+                                <Button variant="secondary" onclick={() => newInventory = inventory}>{localized(inventory)}</Button>
+                            {/if}
+                        {/each}
+                    </div>
+                    <Button variant="secondary" onclick={() => addInventory()}>{localized("addInventory")}</Button>
+                </Card.Content>
+            </Card.Root>
+            <Card.Root class="flex flex-col h-0 flex-grow">
+                <Card.Header>
+                    <Card.Title>{localized("inventories")} ({applyUnits(totalVolume, "l")})</Card.Title>
+                </Card.Header>
+                <Card.Content class="overflow-hidden">
+                    <Separator />
+                    <div class="max-h-full overflow-y-auto">
+                        {#each inventories as inventory, index}
+                            <p class="p-1">
+                                - {localized(inventory)} {localized("volume")}: {applyUnits(getInventoryVolume(inventory), "l")}
+                                <Button variant="destructive" onclick={() => inventories.splice(index, 1)}>X</Button>
+                            </p>
+                        {/each}
+                    </div>
+                </Card.Content>
+            </Card.Root>
+        </Card.Content>
+    </Card.Root>
+</div>
+
+
+
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/svelte.config.js
+++ b/svelte.config.js
@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -0,0 +1,64 @@
+import { fontFamily } from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
+
+const config: 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) / <alpha-value>)",
+				input: "hsl(var(--input) / <alpha-value>)",
+				ring: "hsl(var(--ring) / <alpha-value>)",
+				background: "hsl(var(--background) / <alpha-value>)",
+				foreground: "hsl(var(--foreground) / <alpha-value>)",
+				primary: {
+					DEFAULT: "hsl(var(--primary) / <alpha-value>)",
+					foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
+				},
+				secondary: {
+					DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
+					foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
+				},
+				destructive: {
+					DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
+					foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
+				},
+				muted: {
+					DEFAULT: "hsl(var(--muted) / <alpha-value>)",
+					foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
+				},
+				accent: {
+					DEFAULT: "hsl(var(--accent) / <alpha-value>)",
+					foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
+				},
+				popover: {
+					DEFAULT: "hsl(var(--popover) / <alpha-value>)",
+					foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
+				},
+				card: {
+					DEFAULT: "hsl(var(--card) / <alpha-value>)",
+					foreground: "hsl(var(--card-foreground) / <alpha-value>)"
+				}
+			},
+			borderRadius: {
+				lg: "var(--radius)",
+				md: "calc(var(--radius) - 2px)",
+				sm: "calc(var(--radius) - 4px)"
+			},
+			fontFamily: {
+				sans: [...fontFamily.sans]
+			}
+		}
+	},
+};
+
+export default config;
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	// except $lib which is handled by https://kit.svelte.dev/docs/configuration#files
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
--- a/yarn.lock
+++ b/yarn.lock
				`@ -0,0 +1 @@`
				// place files you want to import through the `$lib` alias in this folder.
				`@ -0,0 +1 @@`
				`<slot></slot><script>import "../app.css";</script><style></style>`