dump layerPosSet, now FIFO can handle most part of position passing

assets/ts/desktop.ts

@@ -1,8 +1,7 @@
 import { overlayEnable } from './overlay'
 import {
-  styleCache,
   FIFO,
-  layersStyleSet,
+  layerPosSet,
   center,
   type position,
   createImgElement,
@@ -23,10 +22,11 @@ export const layers: HTMLDivElement[] = [
 ]
 
 // layers position caching
-export const layersStyleArray: string[][] = [
-  ['0px', '0px', '0px', '0px', '0px'],
-  ['0px', '0px', '0px', '0px', '0px']
-]
+let topLayerPos: number[] = [0, 0]
+
+export const topLayerPosSet = (): void => {
+  layerPosSet(topLayerPos[0], topLayerPos[1], layers[4])
+}
 
 // global index for "activated"
 export let globalIndex: number = 0
@@ -37,9 +37,9 @@ let last: position = { x: 0, y: 0 }
 // activate top image
 const activate = (index: number, x: number, y: number): void => {
   const imgElem: HTMLImageElement = createImgElement(imagesArray[index])
-  styleCache(x, y, layersStyleArray)
-  layersStyleSet(layersStyleArray, layers)
-  FIFO(imgElem, layers)
+  topLayerPos = [x, y]
+  FIFO(imgElem, layers, true)
+  topLayerPosSet()
   last = { x, y }
 }
 
@@ -66,9 +66,6 @@ export const handleOnMove = (e: MouseEvent): void => {
 }
 
 async function enterOverlay(): Promise<void> {
-  layers[4].style.backgroundImage = ''
-  const topLayerImage = layers[4].lastElementChild as HTMLImageElement
-  topLayerImage.style.transition = ''
   // stop images animation
   window.removeEventListener('mousemove', handleOnMove)
   // set top image

assets/ts/overlay.ts

@@ -1,6 +1,5 @@
 import {
   delay,
-  layersStyleSet,
   center,
   createImgElement,
   calcImageIndex,
@@ -8,12 +7,12 @@ import {
   mouseToTransform
 } from './utils'
 import {
-  layersStyleArray,
   layers,
   handleOnMove,
   globalIndex,
   globalIndexDec,
-  globalIndexInc
+  globalIndexInc,
+  topLayerPosSet
 } from './desktop'
 import { imagesArray, imagesArrayLen } from './dataFetch'
 import { imgIndexSpanUpdate } from './indexDisp'
@@ -33,14 +32,7 @@ const setCursorText = (text: string): void => {
 
 // overlay cursor event handler
 const setTextPos = (e: MouseEvent): void => {
-  // overlayCursor.style.left = `${e.clientX}px`
-  // overlayCursor.style.top = `${e.clientY}px`
-  overlayCursor.style.transform = mouseToTransform(
-    `${e.clientX}px`,
-    `${e.clientY}px`,
-    false,
-    true
-  )
+  overlayCursor.style.transform = mouseToTransform(e.clientX, e.clientY, false, true)
 }
 
 // disable listeners
@@ -67,7 +59,7 @@ export const overlayDisable = (): void => {
 // handle close click
 async function handleCloseClick(): Promise<void> {
   overlayDisable()
-  layersStyleSet(layersStyleArray, layers)
+  topLayerPosSet()
   for (let i: number = 4; i >= 0; i--) {
     layers[i].dataset.status = `r${4 - i}`
   }
@@ -81,14 +73,14 @@ async function handleCloseClick(): Promise<void> {
 const handlePrevClick = (): void => {
   globalIndexDec()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex]), layers)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers, false)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 
 const handleNextClick = (): void => {
   globalIndexInc()
   const imgIndex = calcImageIndex(globalIndex, imagesArrayLen)
-  FIFO(createImgElement(imagesArray[imgIndex]), layers)
+  FIFO(createImgElement(imagesArray[imgIndex]), layers, false)
   imgIndexSpanUpdate(imgIndex + 1, imagesArrayLen)
 }
 

assets/ts/utils.ts

@@ -18,16 +18,6 @@ export interface deviceType {
   desktop: boolean
 }
 
-// cache a xy position to array
-export const styleCache = (x: number, y: number, styleArray: string[][]): void => {
-  // pop element if length surpass limitation
-  styleArray[0].shift()
-  styleArray[1].shift()
-  // push new element
-  styleArray[0].push(`${x}px`)
-  styleArray[1].push(`${y}px`)
-}
-
 // 0 to 0001, 25 to 0025
 export const duper = (num: number): string => {
   return ('0000' + num.toString()).slice(-4)
@@ -37,7 +27,7 @@ export const duper = (num: number): string => {
 export const FIFO = (
   element: HTMLImageElement,
   layersArray: HTMLDivElement[],
-  fifoPosition: boolean = true
+  passPosition: boolean = true
 ): void => {
   function layerProcess(layerL: HTMLDivElement, layerH: HTMLDivElement): void {
     if (layerL.childElementCount !== 0)
@@ -45,7 +35,7 @@ export const FIFO = (
     if (layerH.childElementCount !== 0) {
       const layerHNode = layerH.lastElementChild as HTMLImageElement
       layerL.appendChild(layerHNode.cloneNode(true))
-      if (fifoPosition) layerL.style.transform = layerH.style.transform
+      if (passPosition) layerL.style.transform = layerH.style.transform
     }
   }
   for (let i: number = 0; i <= 3; i++) {
@@ -57,27 +47,19 @@ export const FIFO = (
 }
 
 export const mouseToTransform = (
-  x: string,
-  y: string,
+  x: number,
+  y: number,
   centerCorrection: boolean = true,
   accelerate: boolean = false
 ): string => {
   return `translate${accelerate ? '3d' : ''}(${
-    centerCorrection ? `calc(${x} - 50%)` : `${x}`
-  }, ${centerCorrection ? `calc(${y} - 50%)` : `${y}`}${accelerate ? ', 0' : ''})`
+    centerCorrection ? `calc(${x}px - 50%)` : `${x}px`
+  }, ${centerCorrection ? `calc(${y}px - 50%)` : `${y}px`}${accelerate ? ', 0' : ''})`
 }
 
-// set position for 5 image display layers
-export const layersStyleSet = (
-  styleArray: string[][],
-  layersArray: HTMLDivElement[]
-): void => {
-  function posSet(layer: HTMLDivElement, index: number): void {
-    layer.style.transform = mouseToTransform(styleArray[0][index], styleArray[1][index])
-  }
-  for (let i = 4; i >= 0; i--) {
-    posSet(layersArray[i], i)
-  }
+// set position for layer
+export const layerPosSet = (x: number, y: number, layer: HTMLDivElement): void => {
+  layer.style.transform = mouseToTransform(x, y)
 }
 
 // eslint-disable-next-line @typescript-eslint/promise-function-async
@@ -99,7 +81,7 @@ export const center = (e: HTMLDivElement): void => {
   } else {
     y = (window.innerHeight - 31) / 2 + 31
   }
-  e.style.transform = mouseToTransform(`${x}px`, `${y}px`)
+  e.style.transform = mouseToTransform(x, y)
 }
 
 export const createImgElement = (input: ImageData): HTMLImageElement => {