Merge pull request #3 from Sygnator/dev

New feature
Sygnator · Apr 1, 2024 · 5211b1a · 5211b1a
2 parents 5a47703 + 3df45f9
commit 5211b1a
Show file tree

Hide file tree

Showing 7 changed files with 114 additions and 24 deletions.
diff --git a/src/app.pcss b/src/app.pcss
@@ -2,3 +2,25 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+	height: 8px;
+}
+
+/* Track styling */
+::-webkit-scrollbar-track {
+	background: rgb(31, 41, 55, 0.4);
+}
+
+/* Handle styling */
+::-webkit-scrollbar-thumb {
+	background: rgb(55, 65, 81, 0.8);
+	border-radius: 10px;
+}
+
+/* Handle hover effect */
+::-webkit-scrollbar-thumb:hover {
+	background: rgb(55, 65, 81, 0.6);
+}
diff --git a/src/lib/components/Canvas.svelte b/src/lib/components/Canvas.svelte
@@ -615,6 +615,9 @@
 					$profileConfig.mangaStats,
 					$profileConfig.flip
 				);
+				
+				if ($profileConfig.cardsStats)
+					await drawWaifuProfile(context, true, shadowsOpacity, flip, $profileConfig.karma);
 				break;
 			case ProfileTypeEnum.Img:
 			default:

diff --git a/src/lib/components/ChooseCustomBorder.svelte b/src/lib/components/ChooseCustomBorder.svelte
@@ -39,6 +39,7 @@
 			checked={$profileConfig.hasRoundAvatar}
 			on:change={profileConfig.switchRoundAvatar}
 			disabled={$profileConfig.avatarBorder != AvatarBorder.None}
+			class={`dark:text-gray-${$profileConfig.avatarBorder != AvatarBorder.None ? "500" : "300"}`}
 		>
 			Okrągły Awatar
 		</Toggle>

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -4,7 +4,7 @@
 	import { GithubSolid, DiscordSolid } from 'flowbite-svelte-icons';
 </script>
 
-<Footer footerType="socialmedia" class="fixed bottom-0 z-20 w-full">
+<Footer footerType="socialmedia" class="fixed bottom-0 z-20 w-full sm:p-4">
 	<div class="sm:flex sm:items-center sm:justify-between">
 		<FooterCopyright href="https://sanakan.pl/" by="Sanakan" year={new Date().getFullYear()} />
 		<div class="mt-4 flex space-x-6 sm:mt-0 sm:justify-center rtl:space-x-reverse">

diff --git a/src/lib/components/NavBar.svelte b/src/lib/components/NavBar.svelte
@@ -4,13 +4,12 @@
 	import DarkModeButton from '$lib/components/DarkModeButton.svelte';
 </script>
 
-<Navbar rounded color="form">
+<Navbar rounded color="form" class="py-0">
 	<NavBrand href="/">
 		<img src="pwlogo.png" class="me-3 h-6 sm:h-9" alt="PocketWaifu Logo" />
 		<span
 			style="font-family: 'Lato'"
-			class="self-center whitespace-nowrap text-xl font-semibold dark:text-white"
-			>Profilator</span
+			class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Profilator</span
 		>
 	</NavBrand>
 	<NavHamburger />
@@ -20,5 +19,7 @@
 		<NavLi href="https://wiki.sanakan.pl/" target="_blank">Wiki</NavLi>
 		<NavLi href="https://skalpel.sanakan.pl/" target="_blank">Skalpelator</NavLi>
 	</NavUl>
-	<DarkModeButton />
+	<NavUl ulClass="text-center my-2 md:my-0">
+		<DarkModeButton />
+	</NavUl>
 </Navbar>
diff --git a/src/lib/components/SideBar.svelte b/src/lib/components/SideBar.svelte
@@ -15,10 +15,11 @@
 	import ChooseCustomBorder from './ChooseCustomBorder.svelte';
 	import { profileConfig } from '$lib/profileConfig';
 	import { KarmaState, ProfileTypeEnum } from '$lib';
+	import Tooltip from '$lib/components/Tooltip.svelte';
 	let spanClass = 'flex-1 ms-3 whitespace-nowrap';
 	let openModal = false;
 
-	let cardsAmount = 1;
+	let cardsAmount = 12;
 	let shadowsOpacity = 30;
 
 	function changeKarma() {
@@ -30,6 +31,19 @@
 			profileConfig.setKarma(KarmaState.Demon);
 		}
 	}
+
+	const isImageLink = (str: string): boolean => {
+		const regex = /^(http|https):\/\/\S+\.(jpg|jpeg|png|gif)$/;
+		return regex.test(str);
+	};
+
+	const handleChange = (configSetter: (value: string) => void) => {
+		return (event: Event) => {
+			const value = (event.target as HTMLInputElement).value;
+			if (!value) configSetter("")
+			if (isImageLink(value)) configSetter(value);
+		};
+	};
 </script>
 
 <Sidebar asideClass="float-left">
@@ -101,56 +115,104 @@
 				size="small"
 				style="filled"
 				type="text"
-				on:change={(e) => profileConfig.setBackground(e.target.value)}
-				>Tło profilu</FloatingLabelInput
+				id="b1"
+				on:change={handleChange(profileConfig.setBackground)}
 			>
+				Tło profilu
+			</FloatingLabelInput>
+			<Tooltip content="Rozmiar tła 750×160 px" placement="left" type="auto" trigger="click" />
+
 			<FloatingLabelInput
 				size="small"
 				style="filled"
 				type="text"
-				on:change={(e) => profileConfig.setImage(e.target.value)}>Obrazek</FloatingLabelInput
+				on:change={handleChange(profileConfig.setImage)}
 			>
+				Obrazek
+			</FloatingLabelInput>
+			<Tooltip content="Rozmiar obrazka 750×340 px" placement="left" type="auto" trigger="click" />
+
 			<FloatingLabelInput
 				size="small"
 				style="filled"
 				type="text"
-				on:change={(e) => profileConfig.setOverlay(e.target.value)}>Nakładka</FloatingLabelInput
+				on:change={handleChange(profileConfig.setOverlay)}
 			>
+				Nakładka
+			</FloatingLabelInput>
+			<Tooltip
+				content="Rozmiar nakładki 750×402 px"
+				placement="left"
+				type="auto"
+				trigger="click"
+			/>
 			<FloatingLabelInput
 				size="small"
 				style="filled"
 				type="text"
-				on:change={(e) => profileConfig.setPremiumOverlay(e.target.value)}
+				on:change={handleChange(profileConfig.setPremiumOverlay)}
 			>
 				Ultra nakładka
 			</FloatingLabelInput>
+			<Tooltip
+				content="Rozmiar nakładki 750×500 px"
+				placement="left"
+				type="auto"
+				trigger="click"
+			/>
 		</SidebarGroup>
 
 		{#if $profileConfig.profileType == ProfileTypeEnum.Stats}
 			<SidebarGroup border>
-				<Toggle checked={$profileConfig.animeStats} on:change={profileConfig.switchAnimeStats}
-					>Pokaż Statystyki Anime</Toggle
+				<Toggle 
+					checked={$profileConfig.animeStats} 
+					on:change={profileConfig.switchAnimeStats}
 				>
-				<Toggle checked={$profileConfig.mangaStats} on:change={profileConfig.switchMangaStats}
-					>Pokaż Statystyki Mangi</Toggle
+					Pokaż Statystyki Anime
+				</Toggle>
+				<Toggle 
+					checked={$profileConfig.mangaStats} 
+					on:change={profileConfig.switchMangaStats}
 				>
-				<Toggle checked={$profileConfig.flip} on:change={profileConfig.switchFlip}
-					>Odwróć układ</Toggle
+					Pokaż Statystyki Mangi
+				</Toggle>
+				<Toggle 
+					checked={$profileConfig.cardsStats} 
+					on:change={profileConfig.switchCardsStats}
+				>
+					Pokaż Karciankę
+				</Toggle>
+				<Toggle 
+					checked={$profileConfig.flip} 
+					on:change={profileConfig.switchFlip}
 				>
+					Odwróć układ
+				</Toggle>
 			</SidebarGroup>
 		{/if}
 
 		{#if $profileConfig.profileType == ProfileTypeEnum.ShowCards}
 			<SidebarGroup border>
-				<Toggle checked={$profileConfig.cardsStats} on:change={profileConfig.switchCardsStats}
-					>Pokaż Karciankę</Toggle
+				<Toggle 
+					checked={$profileConfig.cardsStats} 
+					on:change={profileConfig.switchCardsStats}
 				>
-				<Toggle checked={$profileConfig.miniGallery} on:change={profileConfig.switchMiniGallery}
-					>Pokaż mini galerię</Toggle
+					Pokaż Karciankę
+				</Toggle>
+				<Toggle 
+					checked={$profileConfig.miniGallery} 
+					on:change={profileConfig.switchMiniGallery}
 				>
-				<Toggle checked={$profileConfig.isSmall} on:change={profileConfig.switchIsSmall}
-					>Ilość kart</Toggle
+					Pokaż mini galerię
+				</Toggle>
+				<Toggle 
+					disabled={$profileConfig.miniGallery == false} 
+					class={`dark:text-gray-${$profileConfig.miniGallery ? "300" : "500"}`} 
+					checked={$profileConfig.isSmall} on:change={profileConfig.switchIsSmall}
 				>
+					Ilość kart
+				</Toggle>
+				<Tooltip content="Ilość kart w minigalerii - 6 lub 2" placement="left" type="auto" />
 				<Toggle checked={$profileConfig.flip} on:change={profileConfig.switchFlip}
 					>Odwróć układ</Toggle
 				>

diff --git a/src/lib/components/Tooltip.svelte b/src/lib/components/Tooltip.svelte
@@ -4,9 +4,10 @@
 
 	export let type: 'dark' | 'light' | 'auto' | 'custom' = 'dark';
 	export let placement: 'top' | 'right' | 'bottom' | 'left' = 'bottom';
+	export let trigger: 'click' | 'hover' = 'hover';
 	export let content: string;
 
 	let TooltipClass: string | undefined = 'bg-gray-400 dark:bg-gray-800';
 </script>
 
-<Tooltip {type} {placement} class={TooltipClass}>{content}</Tooltip>
+<Tooltip {type} {placement} {trigger} class={TooltipClass}>{content}</Tooltip>