update types

Author: Ivan Semochkin

package-lock.json

@@ -16,20 +16,20 @@
 		"@sveltejs/adapter-node": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+        "@types/lodash.throttle": "^4.1.9",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.0.3"
+		"vite": "^5.0.3",
+        "postcss": "^8.4.32",
+        "postcss-load-config": "^4.0.2",
+        "autoprefixer": "^10.4.16"
 	},
 	"type": "module",
 	"dependencies": {
-		"autoprefixer": "^10.4.16",
-		"lodash.debounce": "^4.0.8",
-		"lodash.throttle": "^4.1.1",
-		"postcss": "^8.4.32",
-		"postcss-load-config": "^4.0.2"
+		"lodash.throttle": "^4.1.1"
 	}
 }

package.json

@@ -91,6 +91,9 @@ body.dark {
     --bg-not-visited: hsla(220, 9%, 27%, 0.302);
     --bg-visited: hsla(359, 94%, 55%, 0.3);
     --bg-wall: hsl(0, 5%, 75%);
+
+    --color-nav-icon: hsla(0, 0%, 100%, 1);
+
 }
 
 body.light {
@@ -99,5 +102,8 @@ body.light {
     --bg-body: hsl(220, 3%, 21%);
     --bg-player: hsl(240, 10%, 30%);
     --bg-wall: hsla(0, 0%, 55%, 1);
+
+    --color-nav-icon: hsl(240, 10%, 30%);
+
 }
 

src/routes/app.css renamed to src/app.css

@@ -1,6 +1,6 @@
-<script>
+<script lang="ts">
 	import { selectedAlgorithm } from '$lib/stores/algorithm';
-	import { displayNames } from '$lib/algorithms';
+	import { displayNames, type AlgorithmName } from '$lib/algorithms';
 	import { pointerOutside } from '../actions/pointerOutside';
 	import { tool } from '$lib/stores/tool';
 	import { layout } from '$lib/stores/layout';
@@ -14,8 +14,8 @@
 		isOpen = !isOpen;
 	};
 
-	const selectAlgorithm = (name) => {
-		selectedAlgorithm.set(name);
+	const selectAlgorithm = (name: string) => {
+		selectedAlgorithm.set(name as AlgorithmName);
 		player.reset();
 		grid.reset($layout.screen);
 	};
@@ -27,7 +27,7 @@
 	</div>
 
 	{#if isOpen}
-		<ul use:pointerOutside on:pointer_outside={setIsOpen}>
+		<ul use:pointerOutside={{ cb: setIsOpen }}>
 			{#each Object.entries(displayNames) as [key, displayName]}
 				<li class:selected={$selectedAlgorithm === key} on:pointerdown={() => selectAlgorithm(key)}>
 					{displayName}