diff --git a/public/fishie.png b/public/lightbar-images/fishie.png similarity index 100% rename from public/fishie.png rename to public/lightbar-images/fishie.png diff --git a/public/lightbar-images/santa.png b/public/lightbar-images/santa.png new file mode 100644 index 00000000..fd799ee2 Binary files /dev/null and b/public/lightbar-images/santa.png differ diff --git a/public/lightbar-images/snowflake.svg b/public/lightbar-images/snowflake.svg new file mode 100644 index 00000000..50d9c382 --- /dev/null +++ b/public/lightbar-images/snowflake.svg @@ -0,0 +1,45 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/utils/Lightbar.tsx b/src/components/utils/Lightbar.tsx index 6968c597..06eea927 100644 --- a/src/components/utils/Lightbar.tsx +++ b/src/components/utils/Lightbar.tsx @@ -1,6 +1,12 @@ import { useEffect, useRef } from "react"; import "./Lightbar.css"; +interface LightbarOptions { + imgSrc?: string; + horizontalMotion?: boolean; + sizeRange?: [number, number]; +} + class Particle { x = 0; @@ -18,11 +24,23 @@ class Particle { image: null | HTMLImageElement = null; - constructor(canvas: HTMLCanvasElement, { doFish } = { doFish: false }) { - if (doFish) { - this.image = new Image(); - if (this.image) this.image.src = "/fishie.png"; + size = 10; + + options: LightbarOptions; + + constructor( + canvas: HTMLCanvasElement, + options: LightbarOptions = { + horizontalMotion: false, + sizeRange: [10, 10], } + ) { + if (options.imgSrc) { + this.image = new Image(); + this.image.src = options.imgSrc; + } + + this.options = options; this.reset(canvas); this.initialize(canvas); @@ -39,7 +57,13 @@ class Particle { const second = 60; this.lifetime = second * 3 + Math.random() * (second * 30); - if (this.image) { + this.size = this.options.sizeRange + ? Math.random() * + (this.options.sizeRange[1] - this.options.sizeRange[0]) + + this.options.sizeRange[0] + : 10; + + if (this.options.horizontalMotion) { this.direction = Math.random() <= 0.5 ? 0 : Math.PI; this.lifetime = 30 * second; } @@ -81,7 +105,7 @@ class Particle { if (this.image) { ctx.translate(this.x, this.y); - const w = 10; + const w = this.size; const h = (this.image.naturalWidth / this.image.naturalHeight) * w; ctx.rotate(this.direction - Math.PI); ctx.drawImage(this.image, -w / 2, h, h, w); @@ -113,12 +137,50 @@ function ParticlesCanvas() { canvas.width = canvas.scrollWidth; canvas.height = canvas.scrollHeight; - const shouldShowFishie = Math.floor(Math.random() * 600) === 1; + // Basic particle config const particleCount = 20; + let imageParticleCount = particleCount; + // Holiday overrides + let imageOverride: { image: string; sizeRange?: [number, number] }[] = []; + const date = new Date(); + const month = date.getMonth(); + const day = date.getDate(); + if (month === 11 && day >= 24 && day <= 26) { + imageOverride = [ + { + image: "/lightbar-images/snowflake.svg", + sizeRange: [4, 15] as [number, number], + }, + { + image: "/lightbar-images/santa.png", + sizeRange: [15, 30] as [number, number], + }, + ]; + } + + // Fish easter egg + const shouldShowFishie = Math.floor(Math.random() * 600) === 1; + if (shouldShowFishie) { + imageOverride = [ + { + image: "/lightbar-images/fishie.png", + sizeRange: [10, 11] as [number, number], + }, + ]; + imageParticleCount = particleCount / 2; + } + + // HOIST THE SAIL (of particles)! for (let i = 0; i < particleCount; i += 1) { + const isImageParticle = imageOverride && i <= imageParticleCount; + const randomImageIndex = Math.floor(Math.random() * imageOverride.length); + const sizeRange = imageOverride[randomImageIndex]?.sizeRange; + const src = imageOverride[randomImageIndex]?.image; const particle = new Particle(canvas, { - doFish: shouldShowFishie && i <= particleCount / 2, + imgSrc: isImageParticle ? src : undefined, + horizontalMotion: src?.includes("fishie"), + sizeRange, }); particles.push(particle); } @@ -161,8 +223,8 @@ function ParticlesCanvas() { export function Lightbar(props: { className?: string }) { return ( -
-
+
+
diff --git a/src/pages/parts/auth/TrustBackendPart.tsx b/src/pages/parts/auth/TrustBackendPart.tsx index 9118eeae..f9db155c 100644 --- a/src/pages/parts/auth/TrustBackendPart.tsx +++ b/src/pages/parts/auth/TrustBackendPart.tsx @@ -42,7 +42,9 @@ export function TrustBackendPart(props: TrustBackendPartProps) { cardContent = ( <>

{result.value.name}

- {result.value.description ?

{result.value.description}

: null} + {result.value.description ? ( +

{result.value.description}

+ ) : null} );