Neshura/space-engineers-thrust-calculator
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Ammend to Initial Commit

Browse source
This commit is contained in:
Neshura 2024-05-20 00:31:58 +02:00
parent fb398ae315
commit 8169691b05
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
34 changed files with 2590 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
.gitignore vendored Normal file
View file

@ -0,0 +1,10 @@
.DS_Store
node_modules
/build
/.svelte-kit
/package
.env
.env.*
!.env.example
vite.config.js.timestamp-*
vite.config.ts.timestamp-*

5
.idea/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

1
.npmrc Normal file
View file

@ -0,0 +1 @@
engine-strict=true

14
components.json Normal file
View file

@ -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
}

33
package.json Normal file
View file

@ -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"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};

78
src/app.css Normal file
View file

@ -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;
}
}

13
src/app.d.ts vendored Normal file
View file

@ -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 {};

12
src/app.html Normal file
View file

@ -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>

25
src/lib/components/ui/button/button.svelte Normal file
View file

@ -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>

50
src/lib/components/ui/button/index.ts Normal file
View file

@ -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,
};

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

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

@ -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>

22
src/lib/components/ui/card/card.svelte Normal file
View file

@ -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>

24
src/lib/components/ui/card/index.ts Normal file
View file

@ -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";

29
src/lib/components/ui/input/index.ts Normal file
View file

@ -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,
};

42
src/lib/components/ui/input/input.svelte Normal file
View file

@ -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}
/>

7
src/lib/components/ui/label/index.ts Normal file
View file

@ -0,0 +1,7 @@
import Root from "./label.svelte";
export {
Root,
//
Root as Label,
};

19
src/lib/components/ui/label/label.svelte Normal file
View file

@ -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>

7
src/lib/components/ui/separator/index.ts Normal file
View file

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

22
src/lib/components/ui/separator/separator.svelte Normal file
View file

@ -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}
/>

1
src/lib/index.ts Normal file
View file

@ -0,0 +1 @@
// place files you want to import through the `$lib` alias in this folder.

62
src/lib/utils.ts Normal file
View file

@ -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
};
};

1
src/routes/+layout.svelte Normal file
View file

@ -0,0 +1 @@
<slot></slot><script>import "../app.css";</script><style></style>

317
src/routes/+page.svelte Normal file
View file

@ -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>

BIN
static/favicon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

18
svelte.config.js Normal file
View file

@ -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;

64
tailwind.config.ts Normal file
View file

@ -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;

19
tsconfig.json Normal file
View file

@ -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
}

6
vite.config.ts Normal file
View file

@ -0,0 +1,6 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()]
});

1610
yarn.lock Normal file
View file

File diff suppressed because it is too large Load diff