update libaries

package.json

@@ -10,37 +10,39 @@
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
 		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
+		"format": "prettier --plugin-search-dir . --write .",
+		"check outdated": "npm outdated",
+		"upgrade all": "ncu --upgrade"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.28.1",
-		"@skeletonlabs/skeleton": "^2.0.0",
-		"@skeletonlabs/tw-plugin": "^0.1.0",
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.20.4",
-		"@types/node": "^20.5.7",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"autoprefixer": "^10.4.14",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
-		"postcss": "^8.4.24",
-		"postcss-load-config": "^4.0.1",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"svelte": "^4.0.5",
-		"svelte-check": "^3.4.3",
-		"svelte-preprocess-import-assets": "^1.0.1",
-		"tailwindcss": "^3.3.2",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.4.2"
+		"@playwright/test": "^1.43.1",
+		"@skeletonlabs/skeleton": "^2.9.2",
+		"@skeletonlabs/tw-plugin": "^0.4.0",
+		"@sveltejs/adapter-auto": "^3.2.0",
+		"@sveltejs/kit": "^2.5.7",
+		"@types/node": "^20.12.7",
+		"@typescript-eslint/eslint-plugin": "^7.7.1",
+		"@typescript-eslint/parser": "^7.7.1",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^8.56.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-plugin-svelte": "^2.38.0",
+		"postcss": "^8.4.38",
+		"postcss-load-config": "^5.0.3",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.3",
+		"svelte": "^4.2.15",
+		"svelte-check": "^3.6.9",
+		"svelte-preprocess-import-assets": "^1.1.0",
+		"tailwindcss": "^3.4.3",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.5",
+		"vite": "^5.2.10"
 	},
 	"type": "module",
 	"dependencies": {
-		"@fortawesome/free-solid-svg-icons": "^6.4.2",
-		"@sveltejs/adapter-static": "^2.0.3",
-		"svelte-fa": "^3.0.4"
+		"@fortawesome/free-solid-svg-icons": "^6.5.2",
+		"@sveltejs/adapter-static": "^3.0.1",
+		"svelte-fa": "^4.0.2"
 	}
 }

src/routes/Level1/GameOptions.svelte → src/lib/components/GameOptions.svelte

@@ -36,7 +36,7 @@
  }
 
  </script>
-
+<div class="px-7">
 <audio
 src={audiourl}
 bind:currentTime={time}
@@ -56,3 +56,4 @@ on:ended={() => {
   <progress class="grow" value={time} max={duration} />
  </div>
 </div>
+</div>

src/lib/data/data.ts

@@ -5,7 +5,7 @@ export const instruments:instrumentCardType[] = [
 	{
 		id: 1,
 		name: 'Schlagzeug',
-		image:'001-schlagzeug.png',
+		image:'instrumente/icons8-drums-100.png',
 		audios:[
 			'Drums - Funk 111 bpm.mp3',
 			'Drums - Funk 112 bpm.mp3',
@@ -18,7 +18,7 @@ export const instruments:instrumentCardType[] = [
 	{
 		id: 2,
 		name: 'Gitarre',
-		image:'002-spanische-gitarre.png',
+		image:'instrumente/icons8-ukelele-100.png',
 		audios:[
 			'Gt1 AfricanFunk Gm 120bpm.mp3',
 			'Gt1 Alternative Em 120bpm.mp3',
@@ -31,7 +31,7 @@ export const instruments:instrumentCardType[] = [
 	{
 		id: 3,
 		name: 'Bass',
-		image:'003-elektrische-gitarre.png',
+		image:'instrumente/icons8-bass-guitar-100.png',
 		audios:[
 			'Bs1 AfricanFunk Gm 120bpm.mp3',
 			'Bs1 Alternative Em 120bpm.mp3',
@@ -50,7 +50,7 @@ export const instruments:instrumentCardType[] = [
 	{
 		id: 5,
 		name: 'Piano',
-		image:'005-tastatur.png',
+		image:'instrumente/icons8-piano-100.png',
 		audios:[
 			'Piano Grand Piano Dirty Stabs E Minor 90 bpm.mp3',
 			'Piano Ostinato Focus F Dorian 85 bpm.mp3',
@@ -63,7 +63,7 @@ export const instruments:instrumentCardType[] = [
 	{
 		id: 6,
 		name: 'Trompete',
-		image:'006-trompete.png',
+		image:'instrumente/icons8-trumpet-100.png',
 		audios:[
 			'Trumpet 87bpm G minor.mp3',
 			'Trumpet 105bpm D minor.mp3',
@@ -74,21 +74,21 @@ export const instruments:instrumentCardType[] = [
 	{
 		id: 7,
 		name: 'Violine',
-		image:'007-violine.png',
+		image:'instrumente/icons8-violin-100.png',
 		audios:['Violine 1.mp3']
 	},
 	{
 		id: 8,
 		name: 'Saxophone',
-		image:'008-saxophon.png',
+		image:'instrumente/icons8-saxophone-100.png',
 		audios:[
 			'Sax 60bpm E minor.mp3'
 		]
 	},
 	{
 		id: 9,
 		name: 'Mikrophone',
-		image:'009-karaoke.png',
+		image:'instrumente/icons8-microphone-100.png',
 		audios:[
 			'Vocal Beatbox Quasheesh.mp3',
 			'Vocal Demo Harmony.mp3',
@@ -111,7 +111,7 @@ export const successGifs:string[] =
 export const failGifs:string[] = 
 [
 	"/images/fail1.gif",
-	"/images/fail2.gif",
+	// "/images/fail2.gif",
 	"/images/fail3.gif",
 	"/images/fail4.gif",
 ]

src/routes/Level1/+page.svelte

@@ -2,7 +2,7 @@
 	import InstrumentCards from '$lib/components/InstrumentCards.svelte';
 	import { instruments, successGifs, failGifs } from '$lib/data/data';
 
-	import GameOptions from './GameOptions.svelte';
+	import GameOptions from '$lib/components/GameOptions.svelte';
 
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	import { getModalStore } from '@skeletonlabs/skeleton';

src/routes/Level2/+page.svelte

@@ -2,7 +2,7 @@
 	import InstrumentCards from '$lib/components/InstrumentCards.svelte';
 	import { instruments, successGifs, failGifs } from '$lib/data/data';
 
-	import GameOptions from './GameOptions.svelte';
+	import GameOptions from '$lib/components/GameOptions.svelte';
 
 	import type { ModalSettings } from '@skeletonlabs/skeleton';
 	import { getModalStore } from '@skeletonlabs/skeleton';
@@ -11,7 +11,6 @@
 	import { onMount } from 'svelte';
  import type {instrumentCardType} from '$lib/types/types'
 	import GameResult from '$lib/components/GameResult.svelte';
-	import { url } from 'inspector';
 
 	const modalStore = getModalStore();
 
@@ -63,5 +62,5 @@ onMount(()=>{
 {#if instrumentSubset}
 <InstrumentCards instruments={instrumentSubset} gameMode={true} on:select={selectFn} />
 <GameOptions instruments={instrumentSubset} bind:playId />
-<GameResult url={"/Level2"} />
+<GameResult url={"/Level1"} />
 {/if}

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-static';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors