From 1a3dabbc1e7c08dc938fbb5a03d40adb810d9509 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 17 Aug 2024 20:19:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=A7=B9=20Clean=20up=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/src/lib/sceneBuilder.ts               | 33 ++++++++++-------------
 app/src/routes/controller/Controls.svelte |  8 +++---
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/app/src/lib/sceneBuilder.ts b/app/src/lib/sceneBuilder.ts
index 2b7640f..631120b 100644
--- a/app/src/lib/sceneBuilder.ts
+++ b/app/src/lib/sceneBuilder.ts
@@ -43,11 +43,6 @@ interface light {
 	intensity?: number;
 }
 
-interface gridOptions {
-	divisions?: number;
-	size?: number;
-}
-
 interface arrowOptions {
 	origin: position;
 	direction: position;
@@ -57,8 +52,6 @@ interface arrowOptions {
 
 type directionalLight = position & light;
 
-type gridHelperOptions = gridOptions & position;
-
 export default class SceneBuilder {
 	public scene: Scene;
 	public camera!: PerspectiveCamera;
@@ -355,14 +348,20 @@ export default class SceneBuilder {
 		dragControls.onUnhover = (joint: URDFMimicJoint) =>
 			this.highlightLinkGeometry(joint, true, highlightMaterial);
 
-		this.renderer.domElement.addEventListener('touchstart', (data) =>
-			dragControls._mouseDown(data.touches[0])
+		this.renderer.domElement.addEventListener(
+			'touchstart',
+			(data) => dragControls._mouseDown(data.touches[0]),
+			{ passive: true }
 		);
-		this.renderer.domElement.addEventListener('touchmove', (data) =>
-			dragControls._mouseMove(data.touches[0])
+		this.renderer.domElement.addEventListener(
+			'touchmove',
+			(data) => dragControls._mouseMove(data.touches[0]),
+			{ passive: true }
 		);
-		this.renderer.domElement.addEventListener('touchend', (data) =>
-			dragControls._mouseUp(data.touches[0])
+		this.renderer.domElement.addEventListener(
+			'touchend',
+			(data) => dragControls._mouseUp(data.touches[0]),
+			{ passive: true }
 		);
 		return this;
 	};
@@ -373,12 +372,8 @@ export default class SceneBuilder {
 
 	private handleRobotShadow = () => {
 		if (this.isLoaded) return;
-		const intervalId = setInterval(() => {
-			this.model?.traverse((c) => (c.castShadow = true));
-		}, 10);
-		setTimeout(() => {
-			clearInterval(intervalId);
-		}, 1000);
+		const intervalId = setInterval(() => this.model?.traverse((c) => (c.castShadow = true)), 10);
+		setTimeout(() => clearInterval(intervalId), 1000);
 		this.isLoaded = true;
 	};
 }
diff --git a/app/src/routes/controller/Controls.svelte b/app/src/routes/controller/Controls.svelte
index 16ed6eb..4ed45eb 100644
--- a/app/src/routes/controller/Controls.svelte
+++ b/app/src/routes/controller/Controls.svelte
@@ -109,11 +109,11 @@
 		<div class="flex justify-center w-full"></div>
 	</div>
 	<div class="absolute bottom-0 z-10 flex items-end">
-		<div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-4 pb-2 gap-2 rounded-tr-xl">
+		<div class="flex items-center flex-col bg-base-300 bg-opacity-50 p-3 pb-2 gap-2 rounded-tr-xl">
 			<VerticalSlider min={0} max={100} on:input={(e) => handleRange(e, 'height')} />
 			<label for="height">Ht</label>
 		</div>
-		<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl p-2">
+		<div class="flex items-end gap-4 bg-base-300 bg-opacity-50 h-min rounded-tr-xl pl-0 p-3">
 			<div class="join">
 				{#each modes as modeValue}
 					<button
@@ -126,8 +126,8 @@
 				{/each}
 			</div>
 
+            {#if $mode === ModesEnum.Walk || $mode === ModesEnum.Crawl}
 			<div class="flex gap-4">
-				{#if $mode === ModesEnum.Walk || $mode === ModesEnum.Crawl}
                 <div>
                     <label for="s1">S1</label>
 					<input
@@ -143,8 +143,8 @@
                     <label for="speed">Speed</label>
                     <input type="range" name="speed" min="0" max="100" on:input={(e) => handleRange(e, 'speed')} class="range range-sm range-primary" />
                 </div>
-				{/if}
 			</div>
+            {/if}
 		</div>
 	</div>
 </div>