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

Replace Atmoshpere Input with Slider and Add lower bound to gravity

Browse source
This commit is contained in:
Neshura 2024-05-23 17:12:11 +02:00
parent f85faeb6ad
commit 6c39b77949
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
9 changed files with 123 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -25,7 +25,7 @@
},
"type": "module",
"dependencies": {
"bits-ui": "^0.21.8",
"bits-ui": "^0.21.9",
"clsx": "^2.1.1",
"cmdk-sv": "^0.0.17",
"svelte-radix": "^1.1.0",

26
src/lib/components/Atmosphere.svelte Normal file
View file

@ -0,0 +1,26 @@
<svelte:options runes />
<script lang="ts">
import {Label} from "$lib/components/ui/label";
import {Slider} from "$lib/components/ui/slider";
import {Localization} from "$lib/constants";
let { i18n = new Localization("en-GB"), value = $bindable() } = $props();
let array = $derived([value * 100])
let valid = $derived(typeof value !== "undefined");
function handleChange(change: number) {
value = change / 100;
}
</script>
{#if valid}
<Label for="atmosDensity">{i18n.localize("atmosDensity")} ({(value * 100).toFixed(0)}%)</Label>
<div class="flex gap-2">
<Label for="atmosDensity">0%</Label>
<Slider id="atmosDensity" value={array} onValueChange={handleChange} min={0} max={100} step={1} />
<Label>100%</Label>
</div>
{/if}

4
src/lib/components/NewInventory.svelte
View file

@ -47,6 +47,7 @@
{#if valid}
<div class="flex flex-col flex-wrap gap-3 max-w-fit place-self-center items-center">
<div>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<Button variant="secondary">{i18n.localize(name)}</Button>
@ -59,7 +60,8 @@
</DropdownMenu.RadioGroup>
</DropdownMenu.Content>
</DropdownMenu.Root>
<Button class="bg-primary max-w-fit" onclick={() => onAddInventory(construct())}>{i18n.localize("addInventory")}</Button>
</div>
<Button class="bg-primary max-w-fit" onmousedown={() => onAddInventory(construct())}>{i18n.localize("addInventory")}</Button>
</div>
{:else}
<p>Invalid Props</p>

2
src/lib/components/NewThruster.svelte
View file

@ -108,7 +108,7 @@
</DropdownMenu.Content>
</DropdownMenu.Root>
</div>
<Button vclass="bg-primary max-w-fit" onclick={() => onAddThruster(construct())}>{i18n.localize("addThruster")}</Button>
<Button vclass="bg-primary max-w-fit" onmousedown={() => onAddThruster(construct())}>{i18n.localize("addThruster")}</Button>
{:else}
<p>Invalid Props</p>
{/if}

26
src/lib/components/WeightOutputSegment.svelte Normal file
View file

@ -0,0 +1,26 @@
<svelte:options runes />
<script lang="ts">
import {Localization, weightConversion} from "$lib/constants";
let { i18n = new Localization("en-GB"), maxWeight, maxVehicleWeight } = $props();
let valid = $derived.by(() => {
let valids = [];
valids[0] = typeof maxWeight !== "undefined";
valids[1] = typeof maxVehicleWeight !== "undefined";
return !valids.includes(false);
});
</script>
{#if valid}
<div class="flex gap-2">
<p>{i18n.localize("liftableVehcileWeight")}:</p>
{#if maxVehicleWeight < 0}
<p class="text-destructive">{weightConversion(i18n, maxVehicleWeight)}</p>
{:else}
<p>{weightConversion(i18n, maxVehicleWeight)}</p>
{/if}
</div>
<p>{i18n.localize("liftableWeight")}: {weightConversion(i18n, maxWeight)}</p>
{/if}

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

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

27
src/lib/components/ui/slider/slider.svelte Normal file
View file

@ -0,0 +1,27 @@
<script lang="ts">
import { Slider as SliderPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SliderPrimitive.Props;
let className: $$Props["class"] = undefined;
export let value: $$Props["value"] = [0];
export { className as class };
</script>
<SliderPrimitive.Root
bind:value
class={cn("relative flex w-full touch-none select-none items-center", className)}
{...$$restProps}
let:thumbs
>
<span class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
<SliderPrimitive.Range class="absolute h-full bg-primary" />
</span>
{#each thumbs as thumb}
<SliderPrimitive.Thumb
{thumb}
class="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50"
/>
{/each}
</SliderPrimitive.Root>

30
src/routes/+page.svelte
View file

@ -21,6 +21,10 @@
import NewInventory from "$lib/components/NewInventory.svelte";
import {Inventory} from "$lib/containers.svelte";
import InventoryList from "$lib/components/InventoryList.svelte";
import type {Thruster} from "$lib/thruster.svelte";
import {Slider} from "$lib/components/ui/slider";
import Atmosphere from "$lib/components/Atmosphere.svelte";
import WeightOutputSegment from "$lib/components/WeightOutputSegment.svelte";
const STORAGE_VERSION = "2";
let i18n = $state(new Localization("en-GB"));
@ -67,6 +71,7 @@
let maxVehicleWeight: number = $derived(maxWeight - ship.getTotalVolume(inventoryMultiplier) * material.density)
function addInventory(newInventory: Inventory) {
console.log("triggered")
ship.addInventory(newInventory);
}
@ -82,6 +87,12 @@
ship.removeThruster(index);
}
function handleGravityChange() {
if (gravity <= 0) {
gravity = 0;
}
}
onMount(() => {
if (navigator) {
i18n.language = navigator.language;
@ -157,24 +168,23 @@
{#if ship.grid === size}
<Button class="bg-primary">{i18n.localize(size)}</Button>
{:else}
<Button variant="secondary" onclick={() => ship.grid = size}>{i18n.localize(size)}</Button>
<Button variant="secondary" onmousedown={() => ship.grid = size}>{i18n.localize(size)}</Button>
{/if}
{/each}
</div>
<Label for="gravity">{i18n.localize("gravity")}</Label>
<Input type="number" step="0.01" id="gravity" bind:value={gravity}/>
<Input type="number" step="0.01" id="gravity" bind:value={gravity} onchange={(change) => {handleGravityChange(change)}}/>
<Label for="density">{i18n.localize("density")}</Label>
<div id="density" class="flex gap-2">
{#each Object.values(CargoMaterial) as value}
{#if material === value}
<Button class="bg-primary">{i18n.localize(value.name)}</Button>
{:else}
<Button variant="secondary" onclick={() => material = value}>{i18n.localize(value.name)}</Button>
<Button variant="secondary" onmousedown={() => material = value}>{i18n.localize(value.name)}</Button>
{/if}
{/each}
</div>
<Label for="atmosDensity">{i18n.localize("atmosDensity")}</Label>
<Input type="number" step="0.01" id="atmosDensity" bind:value={atmosphericDensity}/>
<Atmosphere bind:value={atmosphericDensity} />
</Card.Content>
</Card.Root>
<Card.Root>
@ -183,15 +193,7 @@
</Card.Header>
<Card.Content class="flex flex-col gap-3">
<Separator />
<div class="flex gap-2">
<p>{i18n.localize("liftableVehcileWeight")}:</p>
{#if maxVehicleWeight < 0}
<p class="text-destructive">{weightConversion(i18n, maxVehicleWeight)}</p>
{:else}
<p>{weightConversion(i18n, maxVehicleWeight)}</p>
{/if}
</div>
<p>{i18n.localize("liftableWeight")}: {weightConversion(i18n, maxWeight)}</p>
<WeightOutputSegment {i18n} maxWeight={maxWeight} maxVehicleWeight="{maxVehicleWeight}" />
<Separator />
<p>{i18n.localize("fuels")}:
{ship.getFuelTypes().map((fuel) => i18n.localize(fuel.name)).join(", ") }

8
yarn.lock
View file

@ -494,10 +494,10 @@ binary-extensions@^2.0.0:
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
bits-ui@^0.21.8:
version "0.21.8"
resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.21.8.tgz#623127b87558c9943c00393cb5969c1ae7ca7cfa"
integrity sha512-fr++Gf//41w9/Td5r1SfaeA/XXv5YEOw3LFY7JVH+eAbi7RzNqf7Xy8BS/W8HXfRqlsu1ReFgZ7ZZ4DbrP4HwQ==
bits-ui@^0.21.9:
version "0.21.9"
resolved "https://registry.yarnpkg.com/bits-ui/-/bits-ui-0.21.9.tgz#3e9ca44445a1f9a431783e2a7269de220f6dd3ec"
integrity sha512-tMoHi2QbsNKJsPDoXGi07OMx6F8LVMSNYMMcntFX4fPPvy+SJSeZYOKlBMmneiSg7smpWzg+h20q0q01OvyxZQ==
dependencies:
"@internationalized/date" "^3.5.1"
"@melt-ui/svelte" "0.76.2"