feat: add cuteface upgrade

assets/css/upgrades.css

@@ -6,7 +6,6 @@
   position: absolute;
   left: 1rem;
   bottom: 1rem;
-  opacity: 0.6;
 }
 
 #upg-saves-reset {
@@ -15,3 +14,15 @@
 #upg-saves-reset:hover {
   text-decoration: underline;
 }
+
+#upg-cuteface {
+  visibility: hidden;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  opacity: 0.3;
+  z-index: -5;
+}

index.html

@@ -52,6 +52,8 @@
     <span id="upg-saves-reset" onclick="onResetProgressClick()">Reset progress</span>
   </div>
 
+  <img src="./assets/img/bg/cuteface.png" alt="Cuteface" id="upg-cuteface">
+
   <script src="./js/game.js"></script>
 </body>
 </html>

js/game.js

@@ -165,9 +165,18 @@ function enableAudio(name) {
     if (audio.paused) {
       audio.play();
     }
-  }, 5000);
+  }, 1000);
 }
 
+// cuteface
+
+function showCuteface() {
+  const cuteface = document.getElementById('upg-cuteface');
+  cuteface.style.visibility = 'visible';
+  document.body.style.backgroundColor = '#93560e';
+}
+
+
 let upgrades = [
   {
     id: 'mood_lifter',
@@ -207,7 +216,7 @@ let upgrades = [
     description: 'It\'s rainy outside...',
     image: '../assets/img/upgrades/rain.png',
     cost: 5000,
-    onPurchase: () => enableAudio(''),
+    onPurchase: () => {},
   },
   {
     id: 'cuteface',
@@ -215,7 +224,7 @@ let upgrades = [
     description: 'A little bit... unusual background... no?..',
     image: '../assets/img/upgrades/cuteface.png',
     cost: 1e4,
-    onPurchase: () => {},
+    onPurchase: showCuteface,
   },
   {
     id: 'credits',