From 2025a57ae4a29493fb75882099229ce849dd615f Mon Sep 17 00:00:00 2001
From: Sped0n <realsped0n@outlook.com>
Date: Sun, 29 Oct 2023 15:09:10 +0800
Subject: [PATCH] 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 | 34 +++++++++++++++++++------------
 assets/ts/desktop/stage.ts        | 24 ++++++++++++++++------
 assets/ts/desktop/stageNav.ts     | 21 ++++++++++++++++---
 assets/ts/nav.ts                  |  8 ++++++++
 4 files changed, 65 insertions(+), 22 deletions(-)

diff --git a/assets/ts/desktop/customCursor.ts b/assets/ts/desktop/customCursor.ts
index 030e1a2..ab67c99 100644
--- a/assets/ts/desktop/customCursor.ts
+++ b/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
-}
diff --git a/assets/ts/desktop/stage.ts b/assets/ts/desktop/stage.ts
index 94405e4..1598251 100644
--- a/assets/ts/desktop/stage.ts
+++ b/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
diff --git a/assets/ts/desktop/stageNav.ts b/assets/ts/desktop/stageNav.ts
index 6d98c2c..7b60c6a 100644
--- a/assets/ts/desktop/stageNav.ts
+++ b/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
diff --git a/assets/ts/nav.ts b/assets/ts/nav.ts
index 6a8b235..833aa7e 100644
--- a/assets/ts/nav.ts
+++ b/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()