💄 🎃 Add a halloween logo

src/constants/dates.ts

@@ -0,0 +1,38 @@
+import type { IntRange } from '../types/utils';
+
+export type SpecialDate = {
+	month: IntRange<0, 13>;
+	day: IntRange<0, 32>;
+};
+
+export type specialDateRange = {
+	start: SpecialDate;
+	end: SpecialDate;
+};
+
+const specialDateNames = ['helloween', 'christmas'] as const;
+
+export type SpecialDates = (typeof specialDateNames)[number];
+
+export const dates: Record<SpecialDates, specialDateRange> = {
+	helloween: {
+		start: {
+			month: 10,
+			day: 29
+		},
+		end: {
+			month: 11,
+			day: 1
+		}
+	},
+	christmas: {
+		start: {
+			month: 12,
+			day: 22
+		},
+		end: {
+			month: 12,
+			day: 26
+		}
+	}
+};

src/lib/navbar/Navbar.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
+	import HalloweenLogo from '$lib/seasons/halloween/halloweenLogo.svelte';
+	import { isSpecialDate } from '$lib/specialDates/isInRange';
 	import { navData } from '../../constants/nav';
 	import NavItem from './NavItem.svelte';
 
@@ -21,9 +23,15 @@
 	<nav
 		class="bg-light-background dark:bg-dark-background bg-opacity-50 dark:bg-opacity-50 backdrop-blur-lg sm:backdrop-blur-3xl w-full px-3 py-2 sm:px-8 rounded-lg flex justify-between items-center gap-4 shadow-nav sm:shadow-none"
 	>
-		<a href="/" class="h-12 logo hidden sm:inline-block">
-			<img src="/assets/dloolLogo.svg" alt="Logo" title="Dlool" class="h-full object-contain" />
-		</a>
+		<div class="h-12 hidden sm:inline-block">
+			{#if isSpecialDate('helloween')}
+				<HalloweenLogo />
+			{:else}
+				<a href="/">
+					<img src="/assets/dloolLogo.svg" alt="Logo" title="Dlool" class="h-full object-contain" />
+				</a>
+			{/if}
+		</div>
 		<div
 			class="flex justify-around items-center gap-1 sm:gap-8 w-full sm:w-auto flex-wrap sm:flex-nowrap"
 		>

src/lib/seasons/halloween/halloweenLogo.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	let height: number;
+	let width: number;
+	let offsetHeight: number;
+	let offsetWidth: number;
+
+	let showTooltip = false;
+</script>
+
+<a href="/">
+	<div
+		class="h-full"
+		bind:clientHeight={height}
+		bind:clientWidth={width}
+		bind:offsetHeight
+		bind:offsetWidth
+		on:mouseleave={() => (showTooltip = false)}
+		on:mouseenter={() => (showTooltip = true)}
+		role="img"
+		aria-label="Halloween"
+	>
+		<img
+			src="/assets/pumpkin.svg"
+			alt="Halloween"
+			title="Dlool - Halloween"
+			class="h-full object-contain"
+		/>
+	</div>
+</a>
+
+<div
+	style="--offsetHeight: {height + offsetHeight / 2}px; --offsetWidth: {width}px;"
+	class="fixed bg-gray-200 dark:bg-gray-800 px-3 py-1 rounded-md shadow-lg top-[var(--offsetHeight)] left-[var(--offsetWidth)]"
+	class:hidden={!showTooltip}
+	class:inline-block={showTooltip}
+>
+	<p>
+		"
+		<a
+			target="_blank"
+			rel="noopener noreferrer"
+			href="https://svgsilh.com/ja/ffc107/image/1298797.html">かぼちゃ</a
+		>
+		" is marked with
+		<a
+			target="_blank"
+			rel="noopener noreferrer"
+			href="https://creativecommons.org/publicdomain/zero/1.0/?ref=openverse">CC0 1.0</a
+		>.
+	</p>
+</div>

src/lib/specialDates/isInRange.ts

@@ -0,0 +1,39 @@
+import {
+	dates,
+	type SpecialDate,
+	type specialDateRange,
+	type SpecialDates
+} from '../../constants/dates';
+
+const isAfterDate = (date: SpecialDate): boolean => {
+	const currentDay = new Date().getDate();
+	const currentMonth = new Date().getMonth() + 1;
+	return currentMonth > date.month || (currentMonth === date.month && currentDay >= date.day);
+};
+
+const isBeforeDate = (date: SpecialDate): boolean => {
+	const currentDay = new Date().getDate();
+	const currentMonth = new Date().getMonth() + 1;
+	return currentMonth < date.month || (currentMonth === date.month && currentDay <= date.day);
+};
+
+const isDate = (date: SpecialDate): boolean => {
+	const currentDay = new Date().getDate();
+	const currentMonth = new Date().getMonth() + 1;
+	return currentMonth === date.month && currentDay === date.day;
+};
+
+const isInRange = (date: specialDateRange): boolean => {
+	const { start, end } = date;
+	return (isAfterDate(start) && isBeforeDate(end)) || isDate(start) || isDate(end);
+};
+
+export const currentSpecialDates = (d: Record<SpecialDates, specialDateRange> = dates) => {
+	const currentDates = Object.values(d).filter(isInRange);
+	const currentDatesNames = Object.keys(d).filter((key) =>
+		currentDates.includes(d[key as SpecialDates])
+	);
+	return currentDatesNames as SpecialDates[];
+};
+
+export const isSpecialDate = (date: SpecialDates): boolean => currentSpecialDates().includes(date);

tests/settings.test.ts

@@ -66,7 +66,12 @@ test('the text in navigion can be toggled and is saved', async ({ page }) => {
 
 	for (let i = 0; i < navItemsArray.length; i++) {
 		const navItem = navItemsArray[i];
-		await expect(navItem).toHaveText(/.*/);
+		const navItemHasImg = (await navItem.locator('img').count()) > 0;
+		if (navItemHasImg) {
+			await expect(navItem).toHaveText('');
+		} else {
+			await expect(navItem).toHaveText(/.*/);
+		}
 	}
 
 	await page.waitForTimeout(300);
@@ -82,7 +87,8 @@ test('the text in navigion can be toggled and is saved', async ({ page }) => {
 
 	for (let i = 0; i < navItemsArray.length; i++) {
 		const navItem = navItemsArray[i];
-		await expect(navItem).toHaveText('');
+		const navItemHasImg = (await navItem.locator('img').count()) > 0;
+		if (navItemHasImg) await expect(navItem).toHaveText('');
 	}
 
 	await page.reload();
@@ -94,7 +100,8 @@ test('the text in navigion can be toggled and is saved', async ({ page }) => {
 
 	for (let i = 0; i < navItemsArray.length; i++) {
 		const navItem = navItemsArray[i];
-		await expect(navItem).toHaveText('');
+		const navItemHasBxIcon = (await navItem.locator('i.bx').count()) > 0;
+		if (navItemHasBxIcon) await expect(navItem).toHaveText('');
 	}
 
 	localator = await page.getByRole('switch');