🐅 Adds alias for common paths

app/src/components/Controls.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import nipplejs from 'nipplejs';
 	import { onMount } from 'svelte';
-	import { throttler } from '../lib/throttle';
-	import { socket } from '../lib/socket';
-	import { emulateModel, input, outControllerData } from '../lib/store';
+	import { throttler } from '$lib/throttle';
+	import { socket } from '$lib/socket';
+	import { emulateModel, input, outControllerData } from '$lib/store';
 
 	let throttle = new throttler();
 	let left: nipplejs.JoystickManager;

app/src/components/Topbar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { isConnected, status, socket } from '../lib/socket';
+	import { isConnected, status, socket } from '$lib/socket';
 	import { Icon, Bars3, XMark, Power, Battery100, Signal, SignalSlash } from 'svelte-hero-icons';
-	import { emulateModel } from '../lib/store';
+	import { emulateModel } from '$lib/store';
     import { Link, useLocation } from 'svelte-routing'
 
     const views = ["Virtual environment", "Robot camera"]

app/src/components/Views/Model.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
 import { onDestroy, onMount } from 'svelte';
 import { CanvasTexture, CircleGeometry, Mesh, MeshBasicMaterial} from 'three';
-import {socket, angles, mpu } from '../../lib/socket'
-import { lerp } from '../../lib/utils';
+import {socket, angles, mpu } from '$lib/socket'
+import { lerp } from '$lib/utils';
 import uzip from 'uzip';
-import { model, outControllerData } from '../../lib/store';
-import { ForwardKinematics } from '../../lib/kinematic';
-import location from '../../lib/location';
-import FileCache from '../../lib/cache';
-import SceneBuilder from './sceneBuilder';
+import { model, outControllerData } from '$lib/store';
+import { ForwardKinematics } from '$lib/kinematic';
+import location from '$lib/location';
+import FileCache from '$lib/cache';
+import SceneBuilder from '$lib/sceneBuilder';
 
 let sceneManager:SceneBuilder
 let canvas: HTMLCanvasElement, streamCanvas: HTMLCanvasElement, stream: HTMLImageElement

app/src/components/Views/Stream.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
-	import location from '../lib/location';
+	import location from '$lib/location';
 
 	let videoStream = `//${location}/api/stream`;
 

app/src/lib/sceneBuilder.ts

@@ -23,9 +23,8 @@ import { Mesh,
 } from "three";
 import { Sky } from 'three/addons/objects/Sky.js';
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
-import URDFLoader, { type URDFMimicJoint } from "urdf-loader";
+import { type URDFMimicJoint } from "urdf-loader";
 import { PointerURDFDragControls } from 'urdf-loader/src/URDFDragControls'
-import { XacroLoader } from "xacro-parser";
 
 export const addScene = () => new Scene()
 
@@ -56,6 +55,13 @@ type directionalLight = position & light
 
 type gridHelperOptions = gridOptions & position
 
+function calculateCurrentSunElevation() {
+    let now = new Date();
+    let decimalTime = now.getHours() + now.getMinutes() / 60;
+    let normalizedTime = ((decimalTime - 6) % 12) / 6 - 1;
+    return 10 * Math.sin(normalizedTime * Math.PI);
+}
+
 export default class SceneBuilder {
     public scene: Scene
     public camera: PerspectiveCamera
@@ -98,7 +104,7 @@ export default class SceneBuilder {
             rayleigh: 3,
             mieCoefficient: 0.005,
             mieDirectionalG: 0.7,
-            elevation: -10,
+            elevation: calculateCurrentSunElevation(),
             azimuth: 180,
             exposure: this.renderer.toneMappingExposure
         };

app/src/routes/Config.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { Card, CardHeader } from "../components/index";
-	import { socket, isConnected } from "../lib/socket";
-    import { throttler } from "../lib/throttle";
+	import { socket, isConnected } from "$lib/socket";
+    import { throttler } from "$lib/throttle";
 
     let throttle = new throttler();
     let throttle_timing = 25;

app/src/routes/Controller.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-	import Stream from '../Views/Stream.svelte';
-	import Controls from '../components/Controls.svelte';
-    import ModelView from '../components/Model/ModelView.svelte';
-	import { emulateModel } from '../lib/store';
+	import Stream from '$components/Views/Stream.svelte';
+    import Model from '$components/Views/Model.svelte';
+	import Controls from '$components/Controls.svelte';
+	import { emulateModel } from '$lib/store';
 </script>
 
 <div class="flex justify-center items-center w-full h-full">
     {#if $emulateModel}
-        <ModelView />
+        <Model />
     {:else}
         <Stream />
     {/if}

app/tsconfig.json

@@ -14,7 +14,14 @@
 		 */
 		"allowJs": true,
 		"checkJs": true,
-		"isolatedModules": true
+		"isolatedModules": true,
+        "paths": {
+			"$lib/*": ["./src/lib/*"],
+			"$utils/*": ["./src/utils/*"],
+			"$components/*": ["./src/components/*"],
+			"$stores/*": ["./src/stores/*"]
+		}
+
 	},
 	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
 	"references": [{ "path": "./tsconfig.node.json" }]

app/vite.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { viteSingleFile } from 'vite-plugin-singlefile';
 import viteCompression from 'vite-plugin-compression';
+import path from 'path'
 
 const forEmbedded = process.env.FOR_EMBEDDED == 'true'
 
@@ -12,5 +13,13 @@ export default defineConfig({
 	build: {
 		outDir: forEmbedded ? '../data': './build',
 		emptyOutDir: true
-	}
+	},
+    resolve: {
+        alias: {
+            '$lib': path.resolve('./src/lib/'),
+            '$components': path.resolve('./src/components'),
+            '$utils': path.resolve('./src/utils'),
+            '$stores': path.resolve('./src/stores'),
+        },
+    },
 });