move footerUpdate function to overlay.ts and combine it with recenter function

assets/ts/main.ts

@@ -1,11 +1,11 @@
-import { footerHeightUpdateInit } from './utils'
 import { imgIndexSpanUpdate } from './indexDisp'
 import { trackMouseInit } from './trackMouse'
 import { thresholdCtlInit } from './thresholdCtl'
 import { imagesArrayLen } from './dataFetch'
+import { vwRefreshInit } from './overlay'
 
 function init(): void {
-  footerHeightUpdateInit()
+  vwRefreshInit()
   imgIndexSpanUpdate(0, imagesArrayLen)
   thresholdCtlInit()
   trackMouseInit()

assets/ts/overlay.ts

@@ -1,4 +1,4 @@
-import { delay, removeAllEventListeners, layersPosSet } from './utils'
+import { delay, removeAllEventListeners, layersPosSet, center } from './utils'
 import { posArray, layers, handleOnMove } from './trackMouse'
 
 // get components of overlay
@@ -84,3 +84,21 @@ function setListener(): void {
     { passive: true }
   )
 }
+
+export function vwRefreshInit(): void {
+  window.addEventListener(
+    'resize',
+    () => {
+      // reset footer height
+      const r = document.querySelector(':root') as HTMLStyleElement
+      if (window.innerWidth > 768) {
+        r.style.setProperty('--footer-height', '38px')
+      } else {
+        r.style.setProperty('--footer-height', '31px')
+      }
+      // recenter image
+      center(layers[4])
+    },
+    { passive: true }
+  )
+}

assets/ts/utils.ts

@@ -61,18 +61,3 @@ export const center = (e: HTMLDivElement): void => {
     e.style.top = 'calc((100% - 31px) / 2 + 31px)'
   }
 }
-
-export function footerHeightUpdateInit(): void {
-  window.addEventListener(
-    'resize',
-    () => {
-      const r = document.querySelector(':root') as HTMLElement
-      if (window.innerWidth > 768) {
-        r.style.setProperty('--footer-height', '38px')
-      } else {
-        r.style.setProperty('--footer-height', '31px')
-      }
-    },
-    { passive: true }
-  )
-}