diff --git a/assets/ts/desktop.ts b/assets/ts/desktop.ts index bf34c78..4196d75 100644 --- a/assets/ts/desktop.ts +++ b/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 { - layers[4].style.backgroundImage = '' - const topLayerImage = layers[4].lastElementChild as HTMLImageElement - topLayerImage.style.transition = '' // stop images animation window.removeEventListener('mousemove', handleOnMove) // set top image diff --git a/assets/ts/overlay.ts b/assets/ts/overlay.ts index 83db25f..06ab4eb 100644 --- a/assets/ts/overlay.ts +++ b/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 { 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 { 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) } diff --git a/assets/ts/utils.ts b/assets/ts/utils.ts index 51181e9..0bbf990 100644 --- a/assets/ts/utils.ts +++ b/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 => {