fix(main.ts): import correct functions from utils module

feat(stage.ts): implement stage navigation functionality
feat(stageNav.ts): implement stage navigation overlay functionality
feat(state.ts): implement state management for index and threshold
feat(utils.ts): add utility functions for increment and decrement

assets/ts/utils.ts

@@ -1,145 +1,15 @@
-export interface ImageData {
-  index: string
-  url: string
-  imgH: string
-  imgW: string
-  pColor: string
-  sColor: string
+export function increment(num: number, length: number): number {
+  return (num + 1) % length
 }
 
-export interface position {
-  x: number
-  y: number
+export function decrement(num: number, length: number): number {
+  return (num + length - 1) % length
 }
 
-export interface deviceType {
-  mobile: boolean
-  tablet: boolean
-  desktop: boolean
-}
-
-// 0 to 0001, 25 to 0025
-export const duper = (num: number): string => {
+export function expand(num: number): string {
   return ('0000' + num.toString()).slice(-4)
 }
 
-export const mouseToTransform = (
-  x: number,
-  y: number,
-  centerCorrection: boolean = true,
-  accelerate: boolean = false
-): string => {
-  return `translate${accelerate ? '3d' : ''}(${
-    centerCorrection ? `calc(${x}px - 50%)` : `${x}px`
-  }, ${centerCorrection ? `calc(${y}px - 50%)` : `${y}px`}${accelerate ? ', 0' : ''})`
-}
-
-// eslint-disable-next-line @typescript-eslint/promise-function-async
-export function delay(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms))
-}
-
-// remove all event listeners from a node
-export const removeAllEventListeners = (e: Node): Node => {
-  return e.cloneNode(true)
-}
-
-// center top div
-export const center = (e: HTMLElement): void => {
-  const x: number = window.innerWidth / 2
-  let y: number
-  if (window.innerWidth > 768) {
-    y = (window.innerHeight - 38) / 2
-  } else {
-    y = (window.innerHeight - 31) / 2 + 31
-  }
-  e.style.transform = mouseToTransform(x, y)
-}
-
-export const createImgElement = (input: ImageData): HTMLImageElement => {
-  const img = document.createElement('img')
-  img.setAttribute('src', input.url)
-  img.setAttribute('alt', '')
-  img.setAttribute('height', input.imgH)
-  img.setAttribute('width', input.imgW)
-  img.style.visibility = 'hidden'
-  img.dataset.status = 'trail'
-  // img.style.backgroundImage = `linear-gradient(15deg, ${input.pColor}, ${input.sColor})`
-  return img
-}
-
-export const calcImageIndex = (index: number, imgCounts: number): number => {
-  if (index >= 0) {
-    return index % imgCounts
-  } else {
-    return (imgCounts + (index % imgCounts)) % imgCounts
-  }
-}
-
-export const preloadImage = (src: string): void => {
-  const cache = new Image()
-  cache.src = src
-}
-
-export const getDeviceType = (): deviceType => {
-  const ua: string = navigator.userAgent
-  const result: deviceType = { mobile: false, tablet: false, desktop: false }
-  if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
-    result.mobile = true
-    result.tablet = true
-  } else if (
-    /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
-      ua
-    )
-  ) {
-    result.mobile = true
-  } else result.desktop = true
-  return result
-}
-
-export const hideImage = (e: HTMLImageElement): void => {
-  e.style.visibility = 'hidden'
-  e.dataset.status = 'trail'
-}
-
-export const pushIndex = (
-  index: number,
-  indexesArray: number[],
-  stackDepth: number,
-  imagesArray: NodeListOf<HTMLImageElement>,
-  imagesArrayLen: number,
-  invertFlag: boolean = false,
-  autoHideFlag: boolean = true
-): number => {
-  let indexesNum: number = indexesArray.length
-  // create variable overflow to store the tail index
-  let overflow: number
-  if (!invertFlag) {
-    // if stack is full, push the tail index out and hide the image
-    if (indexesNum === stackDepth) {
-      // insert
-      indexesArray.push(index)
-      // pop out
-      overflow = indexesArray.shift() as number
-      // auto hide tail image
-      if (autoHideFlag) hideImage(imagesArray[overflow])
-    } else {
-      indexesArray.push(index)
-      indexesNum += 1
-    }
-  } else {
-    // if stack is full, push the tail index out and hide the image
-    if (indexesNum === stackDepth) {
-      // insert
-      indexesArray.unshift(calcImageIndex(index - stackDepth + 1, imagesArrayLen))
-      // pop out
-      overflow = indexesArray.pop() as number
-      // auto hide tail image
-      if (autoHideFlag) hideImage(imagesArray[overflow])
-    } else {
-      indexesArray.unshift(calcImageIndex(index - indexesNum + 1, imagesArrayLen))
-      indexesNum += 1
-    }
-  }
-  return indexesNum
+export function isMobile(): boolean {
+  return window.matchMedia('(hover: none)').matches
 }