add comments to the code

assets/ts/overlay.ts

@@ -21,6 +21,7 @@ const overlayCursor = (e: MouseEvent): void => {
   cursor.style.top = `${e.clientY}px`
 }
 
+// disable listeners
 function disableListener(): void {
   window.removeEventListener('mousemove', overlayCursor)
   closeSection = removeAllEventListeners(closeSection)
@@ -28,17 +29,20 @@ function disableListener(): void {
   nextSection = removeAllEventListeners(nextSection)
 }
 
+// enable overlay
 export function overlayEnable(): void {
   overlay.style.zIndex = '7'
   setListener()
 }
 
+// disable overlay
 export function overlayDisable(): void {
   overlay.style.zIndex = '-1'
   setCursorText('')
   disableListener()
 }
 
+// handle close click
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
   layersPosSet(posArray, layers)
@@ -52,7 +56,7 @@ async function handleCloseClick(): Promise<void> {
   window.addEventListener('mousemove', handleOnMove)
 }
 
-// set hover event listener
+// set event listener
 function setListener(): void {
   window.addEventListener('mousemove', overlayCursor, { passive: true })
   closeSection.addEventListener(

assets/ts/thresholdCtl.ts

@@ -8,10 +8,12 @@ const threshold: number[] = [0, 40, 80, 120, 160, 200]
 export const thresholdSensitivityArray: number[] = [100, 40, 18, 14, 9, 5]
 export let thresholdIndex: number = 2
 
+// update inner text of threshold display element
 function thresholdUpdate(): void {
   thresholdDisp.innerText = duper(threshold[thresholdIndex])
 }
 
+// threshold control initialization
 export function thresholdCtlInit(): void {
   thresholdUpdate()
   const dec = document.getElementById('thresholdDec') as HTMLButtonElement

assets/ts/trackMouse.ts

@@ -29,6 +29,7 @@ let globalIndex: number = 0
 // last position set as "activated"
 let last: position = { x: 0, y: 0 }
 
+// activate top image
 const activate = (index: number, x: number, y: number): void => {
   const img = document.createElement('img')
   img.setAttribute('src', imagesArray[index].url)
@@ -63,10 +64,12 @@ const activate = (index: number, x: number, y: number): void => {
   last = { x, y }
 }
 
+// Compare the current mouse position with the last activated position
 const distanceFromLast = (x: number, y: number): number => {
   return Math.hypot(x - last.x, y - last.y)
 }
 
+// handle mouse move
 export const handleOnMove = (e: MouseEvent): void => {
   // meet threshold
   if (
@@ -83,6 +86,7 @@ export const handleOnMove = (e: MouseEvent): void => {
   }
 }
 
+// initialization
 export function trackMouseInit(): void {
   window.addEventListener('mousemove', handleOnMove)
 }

assets/ts/utils.ts

@@ -1,3 +1,4 @@
+// cache a xy position to array
 export const posCache = (x: number, y: number, xyArray: string[][]): void => {
   // pop element if length surpass limitation
   xyArray[0].shift()
@@ -7,10 +8,12 @@ export const posCache = (x: number, y: number, xyArray: string[][]): void => {
   xyArray[1].push(`${y}px`)
 }
 
+// 0 to 0001, 25 to 0025
 export function duper(num: number): string {
   return ('0000' + num.toString()).slice(-4)
 }
 
+// FIFO data array for image display
 export const FIFO = (
   element: HTMLImageElement,
   layersArray: HTMLDivElement[]
@@ -31,6 +34,7 @@ export const FIFO = (
   layersArray[4].appendChild(element)
 }
 
+// set position for 5 image display layers
 export const layersPosSet = (
   xyArray: string[][],
   layersArray: HTMLDivElement[]
@@ -49,10 +53,12 @@ export function delay(ms: number): Promise<void> {
   return new Promise((resolve) => setTimeout(resolve, ms))
 }
 
+// remove all event listeners from a node
 export function removeAllEventListeners(e: Node): Node {
   return e.cloneNode(true)
 }
 
+// center top div
 export const center = (e: HTMLDivElement): void => {
   e.style.left = '50%'
   if (window.innerWidth > 768) {