From b5aae19c7003aead4b878f8862c22766dc1d9736 Mon Sep 17 00:00:00 2001
From: Sped0n <realsped0n@outlook.com>
Date: Mon, 30 Oct 2023 17:45:46 +0800
Subject: [PATCH] feat(stage.ts): add functions to switch between
 high-resolution and low-resolution images for better image quality and
 performance

---
 assets/ts/desktop/stage.ts | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/assets/ts/desktop/stage.ts b/assets/ts/desktop/stage.ts
index a63906f..22f0319 100644
--- a/assets/ts/desktop/stage.ts
+++ b/assets/ts/desktop/stage.ts
@@ -77,6 +77,7 @@ function setPositions(): void {
   })
 
   if (isOpen.get()) {
+    hires([getElCurrent()])
     gsap.set(imgs, { opacity: 0 })
     gsap.set(getElCurrent(), { opacity: 1, x: 0, y: 0, scale: 1 })
   }
@@ -89,6 +90,8 @@ function expandImage(): void {
   isOpen.set(true)
   isAnimating.set(true)
 
+  hires([getElCurrent()])
+
   const tl = gsap.timeline()
   // move down and hide trail inactive
   tl.to(getElTrailInactive(), {
@@ -126,6 +129,8 @@ export function minimizeImage(): void {
   isOpen.set(false)
   isAnimating.set(true)
 
+  lores(imgs)
+
   const tl = gsap.timeline()
   // shrink current
   tl.to(getElCurrent(), {
@@ -187,11 +192,34 @@ function createStage(ijs: ImageJSON[]): void {
   // append images to container
   for (let ij of ijs) {
     const e = document.createElement('img')
-    e.src = ij.url
-    e.height = ij.imgH
-    e.width = ij.imgW
+    e.src = ij.loUrl
+    e.height = ij.loImgH
+    e.width = ij.loImgW
+    // set data attributes
+    e.dataset.hiUrl = ij.hiUrl
+    e.dataset.hiImgH = ij.hiImgH.toString()
+    e.dataset.hiImgW = ij.hiImgW.toString()
+    e.dataset.loUrl = ij.loUrl
+    e.dataset.loImgH = ij.loImgH.toString()
+    e.dataset.loImgW = ij.loImgW.toString()
     e.alt = 'image'
     stage.append(e)
   }
   container.append(stage)
 }
+
+function hires(imgs: HTMLImageElement[]): void {
+  imgs.forEach((img) => {
+    img.src = img.dataset.hiUrl!
+    img.height = parseInt(img.dataset.hiImgH!)
+    img.width = parseInt(img.dataset.hiImgW!)
+  })
+}
+
+function lores(imgs: HTMLImageElement[]): void {
+  imgs.forEach((img) => {
+    img.src = img.dataset.loUrl!
+    img.height = parseInt(img.dataset.loImgH!)
+    img.width = parseInt(img.dataset.loImgW!)
+  })
+}