fix(customCursor.ts): fix variable declaration and initialization for cursor and cursorInner to improve code readability and maintainability

feat(customCursor.ts): add support for setting custom text for cursorInner to display different cursor text
fix(stage.ts): fix variable declaration and initialization for imgs, last, cordHist, isOpen, isAnimating, and active to improve code readability and maintainability
feat(stage.ts): add support for minimizing image and initialize stage with image JSON data
fix(stageNav.ts): fix variable declaration and initialization for navItems to improve code readability and maintainability
feat(stageNav.ts): add support for handling click and key events for stage navigation
fix(nav.ts): fix variable declaration and initialization for thresholdDiv and indexDispNums to improve code readability and maintainability
feat(nav.ts): initialize nav and update threshold text

assets/ts/desktop/customCursor.ts

@@ -1,16 +1,15 @@
 import { active } from './stage'
 
-let cursor: HTMLDivElement
+/**
+ * variables
+ */
 
-// create cursor
-cursor = document.createElement('div')
-cursor.className = 'cursor'
-cursor.classList.add('active')
-// create cursor inner
+const cursor = document.createElement('div')
 const cursorInner = document.createElement('div')
-cursorInner.className = 'cursorInner'
-// append cursor inner to cursor
-cursor.append(cursorInner)
+
+/**
+ * main functions
+ */
 
 function onMouse(e: MouseEvent) {
   const x = e.clientX
@@ -18,7 +17,20 @@ function onMouse(e: MouseEvent) {
   cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`
 }
 
+export function setCustomCursor(text: string): void {
+  cursorInner.innerText = text
+}
+
+/**
+ * init
+ */
 export function initCustomCursor(): void {
+  // cursor class name
+  cursor.className = 'cursor'
+  // cursor inner class name
+  cursorInner.className = 'cursorInner'
+  // append cursor inner to cursor
+  cursor.append(cursorInner)
   // append cursor to main
   document.getElementById('main')!.append(cursor)
   // bind mousemove event to window
@@ -32,7 +44,3 @@ export function initCustomCursor(): void {
     }
   })
 }
-
-export function setCustomCursor(text: string): void {
-  cursorInner.innerText = text
-}

assets/ts/desktop/stage.ts

@@ -3,11 +3,15 @@ import { gsap, Power3 } from 'gsap'
 import { ImageJSON } from '../resources'
 import { Watchable } from '../utils'
 
-// types
+/**
+ * types
+ */
 
 export type HistoryItem = { i: number; x: number; y: number }
 
-// variables
+/**
+ * variables
+ */
 
 let imgs: HTMLImageElement[] = []
 let last = { x: 0, y: 0 }
@@ -16,7 +20,9 @@ export const isOpen = new Watchable<boolean>(false)
 export const isAnimating = new Watchable<boolean>(false)
 export const active = new Watchable<boolean>(false)
 
-// getter
+/**
+ * getter
+ */
 
 function getElTrail(): HTMLImageElement[] {
   return cordHist.get().map((item) => imgs[item.i])
@@ -36,7 +42,9 @@ function getElCurrent(): HTMLImageElement {
   return elTrail[elTrail.length - 1]
 }
 
-// main functions
+/**
+ * main functions
+ */
 
 // on mouse
 function onMouse(e: MouseEvent): void {
@@ -146,7 +154,9 @@ export function minimizeImage(): void {
   })
 }
 
-// init
+/**
+ * init
+ */
 
 export function initStage(ijs: ImageJSON[]): void {
   // create stage element
@@ -165,7 +175,9 @@ export function initStage(ijs: ImageJSON[]): void {
   cordHist.addWatcher(() => setPositions())
 }
 
-// hepler
+/**
+ * hepler
+ */
 
 function createStage(ijs: ImageJSON[]): void {
   // create container for images

assets/ts/desktop/stageNav.ts

@@ -3,10 +3,21 @@ import { decIndex, incIndex, getState } from '../state'
 import { increment, decrement } from '../utils'
 import { cordHist, isOpen, isAnimating, active, minimizeImage } from './stage'
 
+/**
+ * types
+ */
+
 type NavItem = (typeof navItems)[number]
+
+/**
+ * variables
+ */
+
 const navItems = ['prev', 'close', 'next'] as const
 
-// main functions
+/**
+ * main functions
+ */
 
 function handleClick(type: NavItem) {
   switch (type) {
@@ -37,7 +48,9 @@ function handleKey(e: KeyboardEvent) {
   }
 }
 
-// init
+/**
+ * init
+ */
 
 export function initStageNav() {
   const navOverlay = document.createElement('div')
@@ -62,7 +75,9 @@ export function initStageNav() {
   window.addEventListener('keydown', handleKey)
 }
 
-// hepler
+/**
+ * hepler
+ */
 
 function nextImage() {
   if (isAnimating.get()) return

assets/ts/nav.ts

@@ -1,6 +1,10 @@
 import { getState, incThreshold, decThreshold } from './state'
 import { expand } from './utils'
 
+/**
+ * variables
+ */
+
 // threshold div
 const thresholdDiv = document
   .getElementsByClassName('threshold')
@@ -27,6 +31,10 @@ const indexDispNums = Array.from(
   indexDiv.getElementsByClassName('num')
 ) as HTMLSpanElement[]
 
+/**
+ * init
+ */
+
 export function initNav() {
   // init threshold text
   updateThresholdText()