From c415a68955579fba93d768181f48a69f6c9132ac Mon Sep 17 00:00:00 2001
From: Joshua Wereley <joshuawereley@Joshuas-MacBook-Pro.local>
Date: Sun, 29 Sep 2024 12:53:50 +0200
Subject: [PATCH 1/3] Updated the Environment.svelte to inlcude loading
 animations

---
 .../lessons/lesson/Environment.svelte         | 107 +++++++++++-------
 1 file changed, 67 insertions(+), 40 deletions(-)

diff --git a/src/src/lib/components/lessons/lesson/Environment.svelte b/src/src/lib/components/lessons/lesson/Environment.svelte
index 6cfea9d6..901ce61a 100644
--- a/src/src/lib/components/lessons/lesson/Environment.svelte
+++ b/src/src/lib/components/lessons/lesson/Environment.svelte
@@ -1,51 +1,78 @@
 <script lang="ts">
-	import { Canvas } from '@threlte/core';
-	import Scene from './Scene.svelte';
-	import { onMount } from 'svelte';
+    import { Canvas } from '@threlte/core';
+    import Scene from './Scene.svelte';
+    import { onMount } from 'svelte';
+    import { useProgress } from '@threlte/extras';
+    import { derived } from 'svelte/store';
 
-	let selectedObject = '';
+    let selectedObject = '';
+    export let role: string;
+    export let materials: { type: boolean; file_path: string; title: string }[] = [];
 
-	export let role: string;
-	export let materials: { type: boolean; file_path: string; title: string }[] = [];
+    function handleObjectChange(event: Event) {
+        selectedObject = (event.target as HTMLSelectElement).value;
+    }
 
-	function handleObjectChange(event: Event) {
-		selectedObject = (event.target as HTMLSelectElement).value;
-	}
+    onMount(() => {
+        if (materials.length > 0) {
+            selectedObject = materials.find((material) => material.type === true)?.file_path || '';
+        }
+    });
 
-	onMount(() => {
-		if (materials.length > 0) {
-			selectedObject = materials.find((material) => material.type === true)?.file_path || '';
-		}
-	});
+    // Use the `useProgress` hook to track loading state
+    const { active, progress } = useProgress();
+
+    // A derived store to track if the loading is complete
+    const isLoading = derived(progress, $progress => $progress < 1);
 </script>
 
-<div
-	class="relative h-full w-full overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600"
->
-	<div class="object-selector">
-		<label for="object-select">Select 3D Object:</label>
-		<select id="object-select" bind:value={selectedObject} on:change={handleObjectChange}>
-			{#each materials as material}
-				{#if material.type === true}
-					<option value={material.file_path}>{material.title}</option>
-				{/if}
-			{/each}
-		</select>
-	</div>
-
-	<Canvas>
-		<Scene {selectedObject} {role} />
-	</Canvas>
+<div class="relative h-full w-full overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
+    <div class="object-selector">
+        <label for="object-select">Select 3D Object:</label>
+        <select id="object-select" bind:value={selectedObject} on:change={handleObjectChange}>
+            {#each materials as material}
+                {#if material.type === true}
+                    <option value={material.file_path}>{material.title}</option>
+                {/if}
+            {/each}
+        </select>
+    </div>
+
+    {#if $isLoading}
+        <div class="loading-overlay">
+            Loading 3D model... {$progress * 100}%
+        </div>
+    {/if}
+
+    <Canvas>
+        <Scene {selectedObject} {role} />
+    </Canvas>
 </div>
 
 <style>
-	.object-selector {
-		position: absolute;
-		top: 10px;
-		left: 10px;
-		z-index: 1000;
-		background-color: rgba(255, 255, 255, 0.8);
-		padding: 10px;
-		border-radius: 5px;
-	}
+    .object-selector {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        z-index: 1000;
+        background-color: rgba(255, 255, 255, 0.8);
+        padding: 10px;
+        border-radius: 5px;
+    }
+
+    .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        font-size: 1.5rem;
+        z-index: 2000;
+    }
 </style>
+

From ecd3ad3803c6707d78a92dbf31e7ee21c7a935d1 Mon Sep 17 00:00:00 2001
From: Joshua Wereley <joshuawereley@Joshuas-MacBook-Pro.local>
Date: Sun, 29 Sep 2024 13:04:44 +0200
Subject: [PATCH 2/3] Removed unessary code

---
 src/src/lib/components/common/SideBar.svelte  | 156 ------------------
 .../components/webspeech/speechSynthesis.ts   |  25 +++
 2 files changed, 25 insertions(+), 156 deletions(-)
 delete mode 100644 src/src/lib/components/common/SideBar.svelte
 create mode 100644 src/src/lib/components/webspeech/speechSynthesis.ts

diff --git a/src/src/lib/components/common/SideBar.svelte b/src/src/lib/components/common/SideBar.svelte
deleted file mode 100644
index 7199d676..00000000
--- a/src/src/lib/components/common/SideBar.svelte
+++ /dev/null
@@ -1,156 +0,0 @@
-<!--
-<script lang="ts">
-	import {
-		GridSolid,
-		BullhornSolid,
-		BuildingSolid,
-		BriefcaseSolid,
-		InfoCircleSolid,
-		ProfileCardSolid,
-		UserCircleSolid,
-		UsersGroupSolid,
-		ChartLineUpOutline,
-		ArrowLeftToBracketOutline,
-		AdjustmentsHorizontalSolid,
-		ObjectsColumnSolid
-	} from 'flowbite-svelte-icons';
-	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
-
-	export let role: 'lecturer' | 'admin' | 'student';
-
-	let isMobile: boolean;
-	let isOpen: boolean = false;
-
-	onMount(() => {
-		const checkMobile = () => {
-			isMobile = window.innerWidth < 768;
-			isOpen = !isMobile;
-		};
-
-		checkMobile();
-		window.addEventListener('resize', checkMobile);
-
-		return () => {
-			window.removeEventListener('resize', checkMobile);
-		};
-	});
-
-	const navLinks = {
-		admin: [
-			{ icon: GridSolid, name: 'Dashboard', href: '/dashboard' },
-			{ icon: BullhornSolid, name: 'Announcements', href: '/announcements' },
-			{ icon: BuildingSolid, name: 'Organisation', href: '/organisation' },
-			{ icon: BriefcaseSolid, name: 'Workspaces', href: '/workspaces' },
-			{ icon: UserCircleSolid, name: 'Admins', href: '/admins' },
-			{ icon: ProfileCardSolid, name: 'Lecturers', href: '/lecturers' },
-			{ icon: UsersGroupSolid, name: 'Students', href: '/students' }
-		],
-		lecturer: [
-			{ icon: BriefcaseSolid, name: 'Workspaces', href: '/workspaces' },
-			{ icon: BullhornSolid, name: 'Announcements', href: '/announcements' }
-		],
-		student: [
-			{ icon: GridSolid, name: 'Dashboard', href: '/dashboard' },
-			{ icon: BriefcaseSolid, name: 'Workspaces', href: '/workspaces' },
-			{ icon: BullhornSolid, name: 'Announcements', href: '/announcements' },
-			{ icon: ChartLineUpOutline, name: 'Grades', href: '/grades' }
-		]
-	};
-
-	const commonLinks = [
-		{ icon: ProfileCardSolid, name: 'Profile', href: '/profile' },
-		{ icon: AdjustmentsHorizontalSolid, name: 'Settings', href: '/settings' },
-		{ icon: InfoCircleSolid, name: 'FAQ', href: '/faq' }
-	];
-
-	const currentLinks = navLinks[role];
-
-	function getClasses(href: string) {
-		const baseClasses =
-			'flex items-center rounded-lg px-4 py-3 text-gray-600 transition-all duration-300 hover:bg-green-50 hover:text-green-700 dark:text-gray-300 dark:hover:bg-green-900 dark:hover:text-green-100';
-		const activeClasses =
-			'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100 font-medium';
-		return href === $page.url.pathname ? `${baseClasses} ${activeClasses}` : baseClasses;
-	}
-
-	function toggleSidebar() {
-		isOpen = !isOpen;
-	}
-</script>
-
-<div class="relative">
-	<button
-		on:click={toggleSidebar}
-		class="fixed left-4 top-4 z-50 rounded-lg bg-green-500 p-2 text-white shadow-lg md:hidden"
-	>
-		<ObjectsColumnSolid class="h-6 w-6" />
-	</button>
-
-	<aside
-		class="glassmorphic fixed left-0 top-0 z-40 h-[calc(100vh-2rem)] m-4 w-64 transform overflow-y-auto bg-white/60 px-4 py-6 shadow-xl transition-all duration-300 ease-in-out dark:bg-gray-900/60 rounded-xl {isOpen ? 'translate-x-0' : '-translate-x-full'}"
-	>
-		<a href="/" class="mx-auto mb-8">
-			<div class="flex items-center">
-				<img
-					class="mr-3 h-10 w-10"
-					src="images/class-connect-logo.png"
-					alt="ClassConnect owl logo"
-				/>
-				<div class="text-xl font-bold text-green-700 dark:text-green-300">ClassConnect</div>
-			</div>
-		</a>
-
-		<nav class="flex-1 space-y-1">
-			{#each currentLinks as { icon, name, href }}
-				<a class={getClasses(href)} {href} on:click={() => (isMobile ? (isOpen = false) : null)}>
-					<svelte:component this={icon} class="mr-3 h-5 w-5" />
-					<span class="text-sm">{name}</span>
-				</a>
-			{/each}
-
-			<hr class="my-6 border-gray-200 dark:border-gray-700" />
-
-			{#each commonLinks as { icon, name, href }}
-				<a class={getClasses(href)} {href} on:click={() => (isMobile ? (isOpen = false) : null)}>
-					<svelte:component this={icon} class="mr-3 h-5 w-5" />
-					<span class="text-sm">{name}</span>
-				</a>
-			{/each}
-		</nav>
-
-		<a
-			class="mt-6 flex items-center rounded-lg px-4 py-3 text-gray-600 transition-all duration-300 hover:bg-red-50 hover:text-red-700 dark:text-gray-300 dark:hover:bg-red-900 dark:hover:text-red-100"
-			href="/signout"
-		>
-			<svelte:component this={ArrowLeftToBracketOutline} class="mr-3 h-5 w-5" />
-			<span class="text-sm font-medium">Sign Out</span>
-		</a>
-	</aside>
-</div>
-
-<style>
-	.glassmorphic {
-		backdrop-filter: blur(10px);
-		-webkit-backdrop-filter: blur(10px);
-	}
-
-	aside {
-		transition: transform 0.3s ease, backdrop-filter 0.3s ease;
-		position: relative;
-		overflow: hidden;
-	}
-
-	aside::before {
-		content: "";
-		position: absolute;
-		top: -50%;
-		left: -50%;
-		width: 200%;
-		height: 200%;
-		background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
-		transform: rotate(30deg);
-		pointer-events: none;
-	}
-</style>
--->
diff --git a/src/src/lib/components/webspeech/speechSynthesis.ts b/src/src/lib/components/webspeech/speechSynthesis.ts
new file mode 100644
index 00000000..21447246
--- /dev/null
+++ b/src/src/lib/components/webspeech/speechSynthesis.ts
@@ -0,0 +1,25 @@
+let speechSynthesis: SpeechSynthesis;
+let speechRate = 1.8;
+
+if (typeof window !== 'undefined') {
+	speechSynthesis = window.speechSynthesis;
+}
+
+export function speak(text: string): void {
+	if (!speechSynthesis) return;
+	speechSynthesis.cancel();
+
+	const utterance = new SpeechSynthesisUtterance(text);
+	utterance.rate = speechRate;
+	speechSynthesis.speak(utterance);
+}
+
+export function setRate(rate: number): void {
+	speechRate = rate;
+}
+
+export function cancel(): void {
+	if (speechSynthesis) {
+		speechSynthesis.cancel();
+	}
+}

From 044499edc4abf99c15e171802ae8c4a1d704a6d3 Mon Sep 17 00:00:00 2001
From: Joshua Wereley <joshuawereley@Joshuas-MacBook-Pro.local>
Date: Mon, 30 Sep 2024 15:03:31 +0200
Subject: [PATCH 3/3] Ran Bun Run Format & Lint

---
 .../lessons/lesson/Environment.svelte         | 127 +++++++++---------
 1 file changed, 64 insertions(+), 63 deletions(-)

diff --git a/src/src/lib/components/lessons/lesson/Environment.svelte b/src/src/lib/components/lessons/lesson/Environment.svelte
index 901ce61a..d61bef29 100644
--- a/src/src/lib/components/lessons/lesson/Environment.svelte
+++ b/src/src/lib/components/lessons/lesson/Environment.svelte
@@ -1,78 +1,79 @@
 <script lang="ts">
-    import { Canvas } from '@threlte/core';
-    import Scene from './Scene.svelte';
-    import { onMount } from 'svelte';
-    import { useProgress } from '@threlte/extras';
-    import { derived } from 'svelte/store';
+	import { Canvas } from '@threlte/core';
+	import Scene from './Scene.svelte';
+	import { onMount } from 'svelte';
+	import { useProgress } from '@threlte/extras';
+	import { derived } from 'svelte/store';
 
-    let selectedObject = '';
-    export let role: string;
-    export let materials: { type: boolean; file_path: string; title: string }[] = [];
+	let selectedObject = '';
+	export let role: string;
+	export let materials: { type: boolean; file_path: string; title: string }[] = [];
 
-    function handleObjectChange(event: Event) {
-        selectedObject = (event.target as HTMLSelectElement).value;
-    }
+	function handleObjectChange(event: Event) {
+		selectedObject = (event.target as HTMLSelectElement).value;
+	}
 
-    onMount(() => {
-        if (materials.length > 0) {
-            selectedObject = materials.find((material) => material.type === true)?.file_path || '';
-        }
-    });
+	onMount(() => {
+		if (materials.length > 0) {
+			selectedObject = materials.find((material) => material.type === true)?.file_path || '';
+		}
+	});
 
-    // Use the `useProgress` hook to track loading state
-    const { active, progress } = useProgress();
+	// Use the `useProgress` hook to track loading state
+	const { progress } = useProgress();
 
-    // A derived store to track if the loading is complete
-    const isLoading = derived(progress, $progress => $progress < 1);
+	// A derived store to track if the loading is complete
+	const isLoading = derived(progress, ($progress) => $progress < 1);
 </script>
 
-<div class="relative h-full w-full overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600">
-    <div class="object-selector">
-        <label for="object-select">Select 3D Object:</label>
-        <select id="object-select" bind:value={selectedObject} on:change={handleObjectChange}>
-            {#each materials as material}
-                {#if material.type === true}
-                    <option value={material.file_path}>{material.title}</option>
-                {/if}
-            {/each}
-        </select>
-    </div>
+<div
+	class="relative h-full w-full overflow-hidden rounded-lg border border-gray-300 dark:border-gray-600"
+>
+	<div class="object-selector">
+		<label for="object-select">Select 3D Object:</label>
+		<select id="object-select" bind:value={selectedObject} on:change={handleObjectChange}>
+			{#each materials as material}
+				{#if material.type === true}
+					<option value={material.file_path}>{material.title}</option>
+				{/if}
+			{/each}
+		</select>
+	</div>
 
-    {#if $isLoading}
-        <div class="loading-overlay">
-            Loading 3D model... {$progress * 100}%
-        </div>
-    {/if}
+	{#if $isLoading}
+		<div class="loading-overlay">
+			Loading 3D model... {$progress * 100}%
+		</div>
+	{/if}
 
-    <Canvas>
-        <Scene {selectedObject} {role} />
-    </Canvas>
+	<Canvas>
+		<Scene {selectedObject} {role} />
+	</Canvas>
 </div>
 
 <style>
-    .object-selector {
-        position: absolute;
-        top: 10px;
-        left: 10px;
-        z-index: 1000;
-        background-color: rgba(255, 255, 255, 0.8);
-        padding: 10px;
-        border-radius: 5px;
-    }
+	.object-selector {
+		position: absolute;
+		top: 10px;
+		left: 10px;
+		z-index: 1000;
+		background-color: rgba(255, 255, 255, 0.8);
+		padding: 10px;
+		border-radius: 5px;
+	}
 
-    .loading-overlay {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.5);
-        color: white;
-        font-size: 1.5rem;
-        z-index: 2000;
-    }
+	.loading-overlay {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: rgba(0, 0, 0, 0.5);
+		color: white;
+		font-size: 1.5rem;
+		z-index: 2000;
+	}
 </style>
-