feat: Add stacking effect for food elements

script.js

@@ -1,5 +1,5 @@
 let step = 0;
-
+/*
 function serveFood() {
     switch(step) {
         case 0:
@@ -43,3 +43,49 @@ function serveFood() {
     step++;
     console.log(step);
 }
+*/
+
+const OFFSET = 20; // 偏移量，每次堆叠时图片上移的像素值
+
+function serveFood() {
+    document.querySelector('.chef-hand').style.opacity = '1';
+    setTimeout(() => {
+        switch(step % 4) {
+            case 0:
+                addFood('.rice', step);
+                break;
+            case 1:
+                addFood('.meat', step);
+                break;
+            case 2:
+                addFood('.rice-mirror', step);
+                break;
+            case 3:
+                addFood('.meat-mirror', step);
+                break;
+        }
+        document.querySelector('.chef-hand').style.opacity = '0';
+        step++;
+        console.log(step);
+    }, 500);
+}
+
+function addFood(selector, currentStep) {
+    const refElement = document.querySelector(selector);
+    const newElement = refElement.cloneNode(true);
+    newElement.style.opacity = '1';
+    newElement.style.position = 'absolute';
+    
+    const translateYOffset = Math.floor(currentStep / 4) * OFFSET;
+    if (selector.includes('mirror')) {
+        newElement.style.transform = `translate(-50%, calc(-50% - ${translateYOffset}px)) scaleX(-1)`;
+    } else {
+        newElement.style.transform = `translate(-50%, calc(-50% - ${translateYOffset}px))`;
+    }
+    
+    // Increase the z-index based on the current step
+    newElement.style.zIndex = 3 + currentStep; // This will make sure the new element is always on top
+    
+    refElement.parentNode.insertBefore(newElement, refElement);
+}
+