add minecraft style navigation

package-lock.json

@@ -29,6 +29,7 @@
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"svelte-heros-v2": "^0.9.3",
+				"svelte-multicssclass": "^2.1.1",
 				"tailwindcss": "^3.3.3",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
@@ -4870,6 +4871,12 @@
 				"svelte": "^3.19.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/svelte-multicssclass": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/svelte-multicssclass/-/svelte-multicssclass-2.1.1.tgz",
+			"integrity": "sha512-orKylsKQ4reqHQ87nmB4oCPGgut4V/ysT/cZHksOPEzxyBpuiLrP3NkDAn0wIDATrBld/UuDOtKz8L0P7SYl0Q==",
+			"dev": true
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",

package.json

@@ -28,6 +28,7 @@
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"svelte-heros-v2": "^0.9.3",
+		"svelte-multicssclass": "^2.1.1",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

src/app.css

@@ -45,3 +45,13 @@
 		@apply font-minecraft;
 	}
 }
+
+@layer components {
+	.pixelated {
+		image-rendering: pixelated;
+	}
+
+	.bg-horizontal-sprite {
+		background-size: auto 100%;
+	}
+}

src/lib/components/Input/Input.svelte

@@ -33,17 +33,16 @@
 			{/if}
 			<div class="flex items-center">
 				<input
-					class={type === 'checkbox'
+					class:checkbox={type === 'checkbox'}
-						? 'checkbox'
+					class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
-						: `input input-bordered w-[100%] sm:max-w-[16rem] ${
+					class:pr-11={initialType === 'password'}
-								initialType === 'password' ? 'pr-11' : ''
-						  }`}
 					{id}
 					{name}
 					{type}
 					{value}
 					{required}
 					{disabled}
+					autocomplete="off"
 					bind:this={inputElement}
 				/>
 				{#if initialType === 'password'}

src/routes/+layout.svelte

@@ -1,5 +1,141 @@
 <script lang="ts">
 	import '../app.css';
+	import { env } from '$env/dynamic/public';
+
+	let navPaths = [
+		{
+			name: 'Startseite',
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-home.png`,
+			href: `${env.PUBLIC_BASE_PATH}/`,
+			active: false
+		},
+		{
+			name: 'Registrieren',
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-register.png`,
+			href: `${env.PUBLIC_BASE_PATH}/register`,
+			active: false
+		},
+		{
+			name: 'Regeln',
+			sprite: `${env.PUBLIC_BASE_PATH}/img/menu-rules.png`,
+			href: `${env.PUBLIC_BASE_PATH}/rules`,
+			active: false
+		}
+	];
+
+	let showMenuPermanent = false;
+	let menuButtonScrollIndex: number | null = null;
+	function onMenuButtonScroll(e: WheelEvent) {
+		if (menuButtonScrollIndex == null) {
+			if (e.deltaY < 0) {
+				menuButtonScrollIndex = 0;
+			} else if (e.deltaY > 0) {
+				menuButtonScrollIndex = navPaths.length - 1;
+			} else {
+				menuButtonScrollIndex = 0;
+			}
+		} else {
+			navPaths[menuButtonScrollIndex].active = false;
+
+			if (e.deltaY < 0) {
+				menuButtonScrollIndex++;
+			} else if (e.deltaY > 0) {
+				menuButtonScrollIndex--;
+			}
+
+			if (menuButtonScrollIndex > navPaths.length - 1) {
+				menuButtonScrollIndex = 0;
+			} else if (menuButtonScrollIndex < 0) {
+				menuButtonScrollIndex = navPaths.length - 1;
+			}
+		}
+
+		navPaths[menuButtonScrollIndex].active = true;
+	}
+
+	let isTouch = false;
+	let nav: HTMLDivElement;
 </script>
 
-<slot />
+<svelte:body
+	on:touchend={(e) => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		if (isTouch && !nav.contains(e.target)) showMenuPermanent = false;
+	}}
+/>
+
+<main>
+	<slot />
+</main>
+<nav>
+	<div
+		class="fixed bottom-4 right-4 sm:right-[initial] sm:left-4 group/menu-bar flex flex-col-reverse justify-center items-center"
+		bind:this={nav}
+	>
+		<button
+			class={isTouch
+				? 'btn btn-square relative w-16 h-16'
+				: 'btn btn-square group/menu-button relative w-16 h-16'}
+			on:click={() => {
+				if (!isTouch) showMenuPermanent = !showMenuPermanent;
+			}}
+			on:touchend={() => {
+				isTouch = true;
+				showMenuPermanent = !showMenuPermanent;
+			}}
+			on:mouseleave={() => {
+				if (menuButtonScrollIndex !== null) {
+					navPaths[menuButtonScrollIndex].active = false;
+				}
+				menuButtonScrollIndex = null;
+			}}
+			on:wheel|preventDefault={onMenuButtonScroll}
+		>
+			<img
+				class="absolute w-full h-full p-1 pixelated"
+				src="{env.PUBLIC_BASE_PATH}/img/menu-button.png"
+				alt="menu"
+			/>
+			<img
+				class="opacity-0 transition-opacity delay-50 group-hover/menu-button:opacity-100 absolute w-full h-full p-[3px] pixelated"
+				class:opacity-100={isTouch && showMenuPermanent}
+				src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+				alt="menu hover"
+			/>
+		</button>
+		<div
+			class:hidden={!showMenuPermanent}
+			class={isTouch ? 'pb-3' : 'group-hover/menu-bar:block pb-3'}
+		>
+			<ul class="flex flex-col bg-base-200 rounded">
+				{#each navPaths as navPath, i}
+					<li
+						class="flex justify-center tooltip tooltip-left sm:tooltip-right"
+						data-tip={navPath.name}
+					>
+						<a
+							class="btn btn-square border-none group/menu-item relative w-[3.5rem] h-[3.5rem] flex justify-center items-center"
+							href={navPath.href}
+						>
+							<div
+								style="background-image: url('{env.PUBLIC_BASE_PATH}/img/menu-inventory-bar.png'); background-position: -{i *
+									3.5}rem 0;"
+								class="block w-full h-full bg-no-repeat bg-horizontal-sprite pixelated"
+							/>
+							<div class="absolute flex justify-center items-center w-full h-full">
+								<img class="w-1/2 h-1/2 pixelated" src={navPath.sprite} alt={navPath.name} />
+							</div>
+							<img
+								class="transition-opacity delay-50 group-hover/menu-item:opacity-100 absolute w-full h-full pixelated scale-110"
+								class:opacity-0={!navPath.active}
+								src="{env.PUBLIC_BASE_PATH}/img/selected-frame.png"
+								alt="menu hover"
+							/>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		</div>
+	</div>
+</nav>

src/routes/register/+page.svelte

@@ -10,7 +10,11 @@
 	<title>Craftattack - Anmeldung</title>
 </svelte:head>
 
-<div class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg overflow-hidden">
+<!--the tooltip when not all fields are correctly filled won't completely show if the overflow is hidden-->
+<div
+	class="absolute top-12 grid card w-11/12 xl:w-2/3 2xl:w-1/2 p-6 shadow-lg"
+	class:overflow-hidden={registered}
+>
 	{#if !registered}
 		<div class="col-[1] row-[1]" transition:fly={{ x: -200, duration: 300 }}>
 			<Register on:submit={() => (registered = true)} />

vite.config.ts

@@ -1,8 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import { multicssclass } from 'svelte-multicssclass';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		multicssclass(),
+		sveltekit()
+	],
 	test: {
 		include: ['src/**/*.{test,spec}.{ts,js}']
 	}