diff --git a/index.html b/index.html
index 57476f7..70e9294 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,8 @@
+
+
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;