update: Mon 02 Dec 2024 08:34:14 AM CET

.templates/Route/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+
+	let $$param1.c$$ = $page.params.$$param1.k$$;
+</script>
+
+<div class="$$name.k$$">
+	Hello from $$name.k$$
+</div>
+
+<style lang="scss">
+
+	@media (max-width: 800px) {
+	}
+</style>

.templates/Route/.templify

@@ -0,0 +1,15 @@
+#?:
+# This file is used by templify to generate new files from this template.
+# You can use the following variables in this file:
+
+# description: The description of the template 
+# path: The path where the file should be generated based on the project root (you can also use placeholders here)
+# var: Define a variable placeholder that can be used in the file content
+
+# IMPORTANT: Lines starting with a . are auto generated and should not be changed.
+
+description:A new Route
+path:src/routes/$$name.k$$/$$sub-route.k$$/$$param1.k$$/$$param2.k$$
+var:sub-route()
+var:param1()
+var:param2()

eslint.config.js

@@ -28,6 +28,6 @@ export default ts.config(
 		}
 	},
 	{
-		ignores: ['build/', '.svelte-kit/', 'dist/']
+		ignores: ['build/', '.svelte-kit/', 'dist/', '.templates/']
 	}
 );

src/components/HomeButton.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	let {
+		cls = ''
+	}: {
+		cls?: string;
+	} = $props();
+</script>
+
+<button
+	class={cls}
+	onclick={() => {
+		goto('/');
+	}}
+>
+	<i class="bi bi-house"></i> Home
+</button>
+
+<style lang="scss">
+</style>

src/components/UnitView.svelte

@@ -6,13 +6,13 @@
 		compareUnit = undefined,
 		name = undefined
 	}: {
-		unit: Unit<number>;
+		unit: Unit<number> | null;
 		compareUnit?: Unit<number> | undefined;
 		name?: string | undefined;
 	} = $props();
 
 	const getBackgroundColor = () => {
-		if (!compareUnit) {
+		if (!compareUnit || !unit) {
 			return '';
 		}
 		if (unit.isBetterThan(compareUnit)) {
@@ -26,8 +26,12 @@
 	{#if name}
 		<p class="name">{name}:</p>
 	{/if}
-	<p class="value" style={`background: ${getBackgroundColor()}`}>{unit.getValueAsString()}</p>
-	<p class="unit">{unit.getUnits()}</p>
+	{#if unit}
+		<p class="value" style={`background: ${getBackgroundColor()}`}>{unit.getValueAsString()}</p>
+		<p class="unit">{unit.getUnits()}</p>
+	{:else}
+		<p class="null-placeholder">-</p>
+	{/if}
 </div>
 
 <style lang="scss">
@@ -46,6 +50,10 @@
 			min-width: 250px;
 			text-align: right;
 		}
+		.null-placeholder {
+			text-align: right;
+			min-width: 150px;
+		}
 		.value {
 			min-width: 100px;
 			text-align: right;
@@ -63,6 +71,9 @@
 			* {
 				padding: 10px 5px;
 			}
+			.null-placeholder {
+				min-width: calc(40vw - 20px);
+			}
 
 			.name {
 				min-width: calc(60vw - 10px);

src/data/allEngines.ts

@@ -1,10 +1,11 @@
 import type Engine from '../types/Engine';
 import F1 from './engines/F1';
+import RL10 from './engines/RL10';
 import RS25 from './engines/RS25';
 import RS68 from './engines/RS68';
 
 export const getAllEngines = (): Engine[] => {
-	const all = [RS25, RS68, F1];
+	const all = [RS25, RS68, F1, RL10];
 
 	all.sort((a, b) => a.stats.name.localeCompare(b.stats.name));
 	return all;

src/data/engines/RL10.ts

@@ -0,0 +1,27 @@
+import Engine from '../../types/Engine';
+import { EngineCycleUtils } from '../../types/EngineCycle';
+import type EngineStats from '../../types/EngineStats';
+import { PropellantUtils } from '../../types/Propellant';
+import { Weight } from '../../types/units/Weight';
+import { ISP } from '../../types/units/ISP';
+import { Size } from '../../types/units/Size';
+
+/**
+ * @author cophilot
+ */
+const RL10: EngineStats = {
+	name: 'RL10',
+	url: 'https://en.wikipedia.org/wiki/RL10',
+	imageUrl:
+		'https://upload.wikimedia.org/wikipedia/commons/8/8a/Common_Extensible_Cryogenic_Engine.jpg',
+	schemanticUrl: 'https://farm9.staticflickr.com/8345/8201255231_4dac24eb93_z.jpg',
+	propellant: PropellantUtils.HYDRO_LOX,
+	cycle: EngineCycleUtils.EXPANDER,
+	specificImpulseSeaLevel: null,
+	specificImpulseVacuum: new ISP(465.5),
+	height: new Size(4.15),
+	diameter: new Size(2.15),
+	massDry: new Weight(301)
+};
+
+export default new Engine(RL10);

src/routes/+layout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import '../app.scss';
 	import logo from '$lib/images/logo.png';
-	import WindowUtils from '../utils/WindowUtils';
 
 	let { children } = $props();
 </script>
@@ -13,7 +12,7 @@
 </svelte:head>
 
 <div class="app">
-	<img src={logo} alt="" class="logo" />
+	<img src={logo} alt="" class="logo mb" />
 	{@render children()}
 	<p class="by info">
 		By

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import EngineOverview from './EngineOverview.svelte';
-	import ComparisonView from './ComparisonView.svelte';
 </script>
 
 <h1>Rocket Engine Xplorer</h1>

src/routes/EngineOverview.svelte

@@ -25,20 +25,31 @@
 			<input
 				type="text"
 				placeholder="Search..."
-				on:change={onSerach}
+				onchange={onSerach}
 				bind:value={searchValue}
 				class="search-bar"
 			/>
-			<button class="small" on:click={searchClear}>Clear</button>
+			<button class="small" onclick={searchClear}>Clear</button>
 		</div>
 		{#if filteredEngines.length > 0}
 			{#each filteredEngines as engine}
-				<button
-					class="engine-button"
-					on:click={() => {
-						goto(`/engine/${StringUtils.normalizeString(engine)}`);
-					}}>> {engine}</button
-				>
+				<div class="engine-box">
+					<button
+						class="engine-button"
+						onclick={() => {
+							goto(`/engine/${StringUtils.normalizeString(engine)}`);
+						}}>> {engine}</button
+					>
+					<button
+						class="compare-button small"
+						onclick={() => {
+							goto(`/compare/${StringUtils.normalizeString(engine)}`);
+						}}
+						aria-label="Compare"
+					>
+						<i class="bi bi-layout-split"></i>
+					</button>
+				</div>
 			{/each}
 		{:else}
 			<p>
@@ -56,9 +67,18 @@
 		align-items: start;
 		margin-top: 20px;
 		margin-bottom: 20px;
-		.engine-button {
+		.engine-box {
 			width: 50%;
-			text-align: left;
+			display: flex;
+			justify-content: space-between;
+			.engine-button {
+				text-align: left;
+				width: 100%;
+			}
+			.compare-button {
+				background: transparent;
+				margin-left: -100px;
+			}
 		}
 	}
 	.search-bar-box {
@@ -71,7 +91,7 @@
 	@media (max-width: 800px) {
 		.engine-overview {
 			width: 100vw;
-			.engine-button {
+			.engine-box {
 				width: 100%;
 			}
 			.search-bar-box {

src/routes/compare/[[engine1]]/[[engine2]]/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { goto } from '$app/navigation';
+	import HomeButton from '../../../../components/HomeButton.svelte';
+
+	let engine1 = $page.params.engine1;
+	let engine2 = $page.params.engine2;
+</script>
+
+<div class="compare">Hello from compare</div>
+
+<HomeButton />
+
+<style lang="scss">
+	@media (max-width: 800px) {
+	}
+</style>

src/routes/engine/[name]/+page.svelte

@@ -1,8 +1,10 @@
-<script>
+<script lang="ts">
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
 	import { getEngineByName } from '../../../data/allEngines';
 	import UnitView from '../../../components/UnitView.svelte';
+	import HomeButton from '../../../components/HomeButton.svelte';
+	import StringUtils from '../../../utils/StringUtils';
 
 	let engine = getEngineByName($page.params.name);
 </script>
@@ -25,19 +27,20 @@
 	>
 		<i class="bi bi-box-arrow-up"></i> Export
 	</button>
+	<button
+		on:click={() => {
+			goto('/compare/' + StringUtils.normalizeString(engine.stats.name));
+		}}
+	>
+		<i class="bi bi-layout-split"></i> Compare
+	</button>
 {:else}
 	<h1>Engine not found</h1>
 {/if}
 
-<button
-	on:click={() => {
-		goto('/');
-	}}
->
-	<i class="bi bi-house"></i> Home
-</button>
+<HomeButton />
 
-<style>
+<style lang="scss">
 	.engine-img {
 		max-width: 20vw;
 	}

src/types/EngineCycle.ts

@@ -13,4 +13,9 @@ export class EngineCycleUtils {
 		name: 'Staged Combustion',
 		infoUrl: 'https://en.wikipedia.org/wiki/Staged_combustion_cycle'
 	};
+
+	public static readonly EXPANDER: EngineCycle = {
+		name: 'Expander',
+		infoUrl: 'https://en.wikipedia.org/wiki/Expander_cycle'
+	};
 }

src/types/EngineStats.ts

@@ -11,8 +11,8 @@ export default interface EngineStats {
 	schemanticUrl: string;
 	propellant: Propellant;
 	cycle: EngineCycle;
-	specificImpulseSeaLevel: ISP;
-	specificImpulseVacuum: ISP;
+	specificImpulseSeaLevel: ISP | null;
+	specificImpulseVacuum: ISP | null;
 	height: Size;
 	diameter: Size;
 	massDry: Weight;