fix(customCursor.ts): move import statement for active to the top for better organization

fix(customCursor.ts): add return type void to onMouse function for clarity
fix(customCursor.ts): add passive option to window event listener for mousemove to improve performance
fix(stageNav.ts): move import statement for setCustomCursor to the top for better organization
fix(stageNav.ts): add return type void to handleClick function for clarity
fix(stageNav.ts): add return type void to handleKey function for clarity
fix(stageNav.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance
fix(stageNav.ts): add passive option to window event listener for keydown to improve performance
fix(stageNav.ts): add return type void to nextImage function for clarity
fix(stageNav.ts): add return type void to prevImage function for clarity
fix(gallery.ts): move import statement for Swiper to the top for better organization
fix(gallery.ts): add return type void to slideUp function for clarity
fix(gallery.ts): add return type void to initGallery function for clarity
fix(gallery.ts): add passive option to window event listener for touchstart to improve performance
fix(gallery.ts): add return type void to changeSlide function for clarity
fix(gallery.ts): add return type void to scrollToActive function for clarity
fix(gallery.ts): add return type void to createGallery function for clarity
fix(gallery.ts): add passive option to close event listeners for click and keydown to improve performance
fix(gallery.ts): add passive option to overlay event listeners for click, keydown, mouseover, and focus to improve performance
fix(gallery.ts): add passive option to window event listener for touchstart to improve performance
fix(nav.ts): add return type void to initNav function for clarity
fix(utils.ts): add return type number to getRandom function for clarity
fix(utils.ts): add return type void to onVisible function for clarity
fix(utils.ts): add return type void to addWatcher function in Watchable class for clarity

assets/ts/desktop/customCursor.ts

@@ -1,6 +1,7 @@
-import { active } from './stage'
 import { container } from '../container'
 
+import { active } from './stage'
+
 /**
  * variables
  */
@@ -12,7 +13,7 @@ const cursorInner = document.createElement('div')
  * main functions
  */
 
-function onMouse(e: MouseEvent) {
+function onMouse(e: MouseEvent): void {
   const x = e.clientX
   const y = e.clientY
   cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`
@@ -35,7 +36,7 @@ export function initCustomCursor(): void {
   // append cursor to main
   container.append(cursor)
   // bind mousemove event to window
-  window.addEventListener('mousemove', onMouse)
+  window.addEventListener('mousemove', onMouse, { passive: true })
   // add active callback
   active.addWatcher(() => {
     if (active.get()) {

assets/ts/desktop/init.ts

@@ -0,0 +1,11 @@
+import { type ImageJSON } from '../resources'
+
+import { initCustomCursor } from './customCursor'
+import { initStage } from './stage'
+import { initStageNav } from './stageNav'
+
+export function initDesktop(ijs: ImageJSON[]): void {
+  initCustomCursor()
+  initStage(ijs)
+  initStageNav()
+}

assets/ts/desktop/stage.ts

@@ -1,14 +1,19 @@
 import { Power3, gsap } from 'gsap'
+
 import { container } from '../container'
-import { ImageJSON } from '../resources'
+import { type ImageJSON } from '../resources'
 import { incIndex, state } from '../state'
-import { Watchable } from '../utils'
+import { Watchable, decrement, increment } from '../utils'
 
 /**
  * types
  */
 
-export type HistoryItem = { i: number; x: number; y: number }
+export interface HistoryItem {
+  i: number
+  x: number
+  y: number
+}
 
 /**
  * variables
@@ -44,7 +49,22 @@ function getElCurrent(): HTMLImageElement {
 }
 
 function getElNextFive(): HTMLImageElement[] {
-  return state.get().nextFive.map((i) => imgs[i])
+  const s = state.get()
+  const els = []
+  for (let i = 0; i < 5; i++) {
+    els.push(imgs[increment(s.index + i, s.length)])
+  }
+  return els
+}
+
+function getElPrev(): HTMLImageElement {
+  const s = state.get()
+  return imgs[increment(s.index, s.length)]
+}
+
+function getElNext(): HTMLImageElement {
+  const s = state.get()
+  return imgs[decrement(s.index, s.length)]
 }
 
 /**
@@ -69,7 +89,7 @@ function onMouse(e: MouseEvent): void {
 // set image position with gsap
 function setPositions(): void {
   const elTrail = getElTrail()
-  if (!elTrail.length) return
+  if (elTrail.length === 0) return
 
   // preload
   lores(getElNextFive())
@@ -98,7 +118,7 @@ function expandImage(): void {
   isOpen.set(true)
   isAnimating.set(true)
 
-  hires([getElCurrent()])
+  hires([getElCurrent(), getElPrev(), getElNext()])
 
   const tl = gsap.timeline()
   // move down and hide trail inactive
@@ -125,6 +145,7 @@ function expandImage(): void {
     ease: Power3.easeInOut
   })
   // finished
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   tl.then(() => {
     isAnimating.set(false)
   })
@@ -137,6 +158,9 @@ export function minimizeImage(): void {
   isOpen.set(false)
   isAnimating.set(true)
 
+  lores([getElCurrent()])
+  lores(getElTrailInactive())
+
   const tl = gsap.timeline()
   // shrink current
   tl.to(getElCurrent(), {
@@ -161,6 +185,7 @@ export function minimizeImage(): void {
     opacity: 1
   })
   // finished
+  // eslint-disable-next-line @typescript-eslint/no-floating-promises
   tl.then(() => {
     isAnimating.set(false)
   })
@@ -178,13 +203,23 @@ export function initStage(ijs: ImageJSON[]): void {
   // get image elements
   imgs = Array.from(stage.getElementsByTagName('img'))
   // event listeners
-  stage.addEventListener('click', () => expandImage())
-  stage.addEventListener('keydown', () => expandImage())
-  window.addEventListener('mousemove', onMouse)
+  stage.addEventListener('click', () => {
+    expandImage()
+  })
+  stage.addEventListener('keydown', () => {
+    expandImage()
+  })
+  window.addEventListener('mousemove', onMouse, { passive: true })
   // watchers
-  isOpen.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
-  isAnimating.addWatcher(() => active.set(isOpen.get() && !isAnimating.get()))
-  cordHist.addWatcher(() => setPositions())
+  isOpen.addWatcher(() => {
+    active.set(isOpen.get() && !isAnimating.get())
+  })
+  isAnimating.addWatcher(() => {
+    active.set(isOpen.get() && !isAnimating.get())
+  })
+  cordHist.addWatcher(() => {
+    setPositions()
+  })
   // preload
   lores(getElNextFive())
 }
@@ -198,7 +233,7 @@ function createStage(ijs: ImageJSON[]): void {
   const stage: HTMLDivElement = document.createElement('div')
   stage.className = 'stage'
   // append images to container
-  for (let ij of ijs) {
+  for (const ij of ijs) {
     const e = document.createElement('img')
     e.height = ij.loImgH
     e.width = ij.loImgW
@@ -217,16 +252,16 @@ function createStage(ijs: ImageJSON[]): void {
 
 function hires(imgs: HTMLImageElement[]): void {
   imgs.forEach((img) => {
-    img.src = img.dataset.hiUrl!
-    img.height = parseInt(img.dataset.hiImgH!)
-    img.width = parseInt(img.dataset.hiImgW!)
+    img.src = img.dataset.hiUrl as string
+    img.height = parseInt(img.dataset.hiImgH as string)
+    img.width = parseInt(img.dataset.hiImgW as string)
   })
 }
 
 function lores(imgs: HTMLImageElement[]): void {
   imgs.forEach((img) => {
-    img.src = img.dataset.loUrl!
-    img.height = parseInt(img.dataset.loImgH!)
-    img.width = parseInt(img.dataset.loImgW!)
+    img.src = img.dataset.loUrl as string
+    img.height = parseInt(img.dataset.loImgH as string)
+    img.width = parseInt(img.dataset.loImgW as string)
   })
 }

assets/ts/desktop/stageNav.ts

@@ -1,6 +1,7 @@
 import { container } from '../container'
 import { decIndex, incIndex, state } from '../state'
 import { decrement, increment } from '../utils'
+
 import { setCustomCursor } from './customCursor'
 import { active, cordHist, isAnimating, isOpen, minimizeImage } from './stage'
 
@@ -20,7 +21,7 @@ const navItems = ['prev', 'close', 'next'] as const
  * main functions
  */
 
-function handleClick(type: NavItem) {
+function handleClick(type: NavItem): void {
   switch (type) {
     case 'prev':
       prevImage()
@@ -34,7 +35,7 @@ function handleClick(type: NavItem) {
   }
 }
 
-function handleKey(e: KeyboardEvent) {
+function handleKey(e: KeyboardEvent): void {
   if (isOpen.get() || isAnimating.get()) return
   switch (e.key) {
     case 'ArrowLeft':
@@ -53,16 +54,40 @@ function handleKey(e: KeyboardEvent) {
  * init
  */
 
-export function initStageNav() {
+export function initStageNav(): void {
   const navOverlay = document.createElement('div')
   navOverlay.className = 'navOverlay'
-  for (let navItem of navItems) {
+  for (const navItem of navItems) {
     const overlay = document.createElement('div')
     overlay.className = 'overlay'
-    overlay.addEventListener('click', () => handleClick(navItem))
-    overlay.addEventListener('keydown', () => handleClick(navItem))
-    overlay.addEventListener('mouseover', () => setCustomCursor(navItem))
-    overlay.addEventListener('focus', () => setCustomCursor(navItem))
+    overlay.addEventListener(
+      'click',
+      () => {
+        handleClick(navItem)
+      },
+      { passive: true }
+    )
+    overlay.addEventListener(
+      'keydown',
+      () => {
+        handleClick(navItem)
+      },
+      { passive: true }
+    )
+    overlay.addEventListener(
+      'mouseover',
+      () => {
+        setCustomCursor(navItem)
+      },
+      { passive: true }
+    )
+    overlay.addEventListener(
+      'focus',
+      () => {
+        setCustomCursor(navItem)
+      },
+      { passive: true }
+    )
     navOverlay.append(overlay)
   }
   active.addWatcher(() => {
@@ -73,14 +98,14 @@ export function initStageNav() {
     }
   })
   container.append(navOverlay)
-  window.addEventListener('keydown', handleKey)
+  window.addEventListener('keydown', handleKey, { passive: true })
 }
 
 /**
  * hepler
  */
 
-function nextImage() {
+function nextImage(): void {
   if (isAnimating.get()) return
   cordHist.set(
     cordHist.get().map((item) => {
@@ -91,7 +116,7 @@ function nextImage() {
   incIndex()
 }
 
-function prevImage() {
+function prevImage(): void {
   if (isAnimating.get()) return
   cordHist.set(
     cordHist.get().map((item) => {