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