feat(customCursor.ts): add custom cursor functionality to improve user experience

feat(stage.ts): implement stage functionality to display images and handle mouse events
feat(stageNav.ts): add stage navigation functionality to navigate between images and close the stage
fix(main.ts): fix import paths for customCursor, stage, and stageNav modules

assets/ts/desktop/customCursor.ts

@@ -0,0 +1,38 @@
+import { active } from './stage'
+
+let cursor: HTMLDivElement
+
+// create cursor
+cursor = document.createElement('div')
+cursor.className = 'cursor'
+cursor.classList.add('active')
+// create cursor inner
+const cursorInner = document.createElement('div')
+cursorInner.className = 'cursorInner'
+// append cursor inner to cursor
+cursor.append(cursorInner)
+
+function onMouse(e: MouseEvent) {
+  const x = e.clientX
+  const y = e.clientY
+  cursor.style.transform = `translate3d(${x}px, ${y}px, 0)`
+}
+
+export function initCustomCursor(): void {
+  // append cursor to main
+  document.getElementById('main')!.append(cursor)
+  // bind mousemove event to window
+  window.addEventListener('mousemove', onMouse)
+  // add active callback
+  active.addWatcher(() => {
+    if (active.get()) {
+      cursor.classList.add('active')
+    } else {
+      cursor.classList.remove('active')
+    }
+  })
+}
+
+export function setCustomCursor(text: string): void {
+  cursorInner.innerText = text
+}