From 323b0df7b4940c156020451f9e4d8d17261f4500 Mon Sep 17 00:00:00 2001
From: sangge <2251250136@qq.com>
Date: Sun, 29 Oct 2023 14:09:09 +0800
Subject: [PATCH] feat: update mirror rice and pork

---
 index.html |  2 ++
 script.js  | 22 +++++++++++++++++++++-
 styles.css | 10 ++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 57476f7..70e9294 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,8 @@
         <img src="chef_hand.png" class="chef-hand" alt="Chef's Hand">
         <img src="rice.png" class="rice" alt="Rice">
         <img src="braised_pork.png" class="meat" alt="Meat">
+        <img src="rice.png" class="rice-mirror" alt="Rice mirror">
+        <img src="braised_pork.png" class="meat-mirror" alt="Meat mirror">
     </div>
     <button onclick="serveFood()">Serve Food</button>
 
diff --git a/script.js b/script.js
index 91c4b75..52db6d5 100644
--- a/script.js
+++ b/script.js
@@ -1,7 +1,6 @@
 let step = 0;
 
 function serveFood() {
-    console.log("click")
     switch(step) {
         case 0:
             document.querySelector('.chef-hand').style.opacity = '1';
@@ -17,9 +16,30 @@ function serveFood() {
                 document.querySelector('.chef-hand').style.opacity = '0';
             }, 500);
             break;
+        case 2:
+            document.querySelector('.chef-hand').style.opacity = '1';
+            setTimeout(() => {
+                document.querySelector('.rice-mirror').style.opacity = '1';
+                document.querySelector('.chef-hand').style.opacity = '0';
+            }, 500);
+            break;
+        case 3:
+            document.querySelector('.chef-hand').style.opacity = '1';
+            setTimeout(() => {
+                document.querySelector('.meat-mirror').style.opacity = '1';
+                document.querySelector('.chef-hand').style.opacity = '0';
+            }, 500);
+            break;
+        case 4:
+            document.querySelector('.rice').style.opacity = '0';
+            document.querySelector('.meat').style.opacity = '0';
+            document.querySelector('.rice-mirror').style.opacity = '0';
+            document.querySelector('.meat-mirror').style.opacity = '0';
+            step = -1;
         default:
             step = -1;
             break;
     }
     step++;
+    console.log(step);
 }
diff --git a/styles.css b/styles.css
index db4c0f6..d0e1688 100644
--- a/styles.css
+++ b/styles.css
@@ -54,6 +54,16 @@
     z-index: 3;
 }
 
+.rice-mirror, .meat-mirror {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scaleX(-1);
+    opacity: 0;
+    transition: opacity 0.5s;
+    z-index: 3;
+}
+
 .chef {
     position: absolute;
     bottom: 0;