high score

index.html

@@ -25,7 +25,7 @@
 
       #catboy {
         max-width: 80vw;
-        max-height: 80vh;
+        max-height: 70vh;
         object-fit: contain;
         scale: calc(1 / sqrt(2));
       }
@@ -36,14 +36,18 @@
       <h1>Catboy spinner</h1>
       <img src="catboy.png" alt="" id="catboy" />
       <p><span id="rpm">0</span> RPM</p>
+      <p>High score: <span id="high">0</span> RPM</p>
     </div>
     <script>
       const catboyImage = document.getElementById("catboy");
       const rpmIndiCATor = document.getElementById("rpm");
+      const highScore = document.getElementById("high");
 
-      let rpm = 6000;
+      let rpm = 0;
       let rot = 0;
 
+      let high = 0;
+
       setInterval(() => {
         catboyImage.style.rotate = `${rot}deg`;
         rot += rpm / 60;
@@ -59,6 +63,13 @@
 
       catboyImage.onclick = () => {
         rpm += 300;
+        if (rpm > high) {
+          high = rpm;
+          highScore.innerHTML = Math.floor(rpm);
+          highScore.style.color = "yellow";
+        } else {
+          highScore.style.color = '';
+        }
       };
     </script>
   </body>