feat: add tooltips

jackd248 · Oct 5, 2024 · fa96042 · fa96042
1 parent 84e8d85
commit fa96042
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 14 deletions.
diff --git a/homework/math/assets/media/math-teacher-logo-small.png b/homework/math/assets/media/math-teacher-logo-small.png
diff --git a/homework/math/assets/media/math-teacher-logo.png b/homework/math/assets/media/math-teacher-logo.png
diff --git a/homework/math/assets/style/style.css b/homework/math/assets/style/style.css
@@ -49,6 +49,12 @@ button:hover, button.active {
     color: #666;
 }
 
+#result {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 #resultTime {
     font-size: 3vh;
 }
@@ -83,8 +89,9 @@ footer button {
     max-width: 100%;
 }
 
-#counter div {
+#counterCount {
     margin-top: 1em;
+    opacity: .5;
 }
 
 #life {
@@ -101,14 +108,24 @@ footer button {
     font-size: 6px;
 }
 
-#intro img {
+#intro {
     max-width: 25%;
 }
 
+#intro img {
+    width: 100%;
+}
+
 #highScore {
     font-size: 2vh;
     color: #666;
     margin-top: 1em;
+    padding: 2em;
+    max-width: 100px;
+}
+
+#highScore strong {
+    text-decoration: underline;
 }
 
 #dailyStreak {
@@ -126,6 +143,40 @@ button[data-theme-toggle] {
     right: 1em;
 }
 
+.mathTeacher[title]{
+    position: relative;
+}
+.mathTeacher[title]:before {
+    position: absolute;
+    right: 0;
+    top: -60px;
+    background-color: #333;
+    color: white;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 5px;
+    padding: 10px 15px;
+    content: attr(title);
+    white-space: nowrap;
+    display: none;
+    font-size: 16px;
+}
+.mathTeacher[title]:after {
+    position: absolute;
+    left: 15px;
+    top: -10px;
+    border-top: 7px solid #333;
+    border-left: 7px solid transparent;
+    border-right: 7px solid transparent;
+    content: "";
+    display: none;
+    font-size: 1em;
+}
+.mathTeacher[title]:hover:after,
+.mathTeacher[title]:hover:before {
+    display: block;
+}
+
 @media (max-width: 768px) {
     main, #game, #resultInput {
         font-size: 10vh;

diff --git a/homework/math/game.html b/homework/math/game.html
@@ -6,9 +6,9 @@
           content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, maximum-scale=1.0,user-scalable=0">
     <title>Math Game</title>
 
-    <link rel="apple-touch-icon" sizes="180x180" href="assets/media/math-game-full.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="assets/media/math-game.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="assets/media/math-game.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/media/math-teacher-logo.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/media/math-teacher-logo-small.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="assets/media/math-teacher-logo-small.png">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Warang+Citi&family=Roboto:wght@400;700&display=swap"
@@ -26,13 +26,28 @@
         const localStorageKey = 'mathGame';
         const streakKey = 'dailyStreak';
         let previousCalculations = [];
+        const tooltips = [
+            "Keep going!",
+            "You're doing great!",
+            "Math is fun!",
+            "Stay focused!",
+            "Almost there!"
+        ];
 
 
         document.addEventListener("DOMContentLoaded", function (event) {
             let vh = window.innerHeight * 0.01;
             document.documentElement.style.setProperty('--vh', `${vh}px`);
 
             displayHighScore();
+
+            document.querySelectorAll('.mathTeacher').forEach(function (element) {
+                console.log('Math Teacher e');
+                element.addEventListener('click', function () {
+                    console.log('Math Teacher clicked');
+                    this.setAttribute('title', tooltips[Math.floor(Math.random() * tooltips.length)]);
+                });
+            });
         });
 
         document.addEventListener("keyup", function (event) {
@@ -41,15 +56,15 @@
             }
         });
 
-        document.addEventListener("touchend", function(event) {
+        document.addEventListener("touchend", function (event) {
             event.preventDefault();
             const clickEvent = new MouseEvent('click', {
                 bubbles: true,
                 cancelable: true,
                 view: window
             });
             event.target.dispatchEvent(clickEvent);
-        })
+        });
 
         function generateRandomCalculation() {
             counter++;
@@ -58,7 +73,7 @@
             document.getElementById('calculationResult').style.color = '#666';
             document.getElementById('resultInput').style.borderColor = '#666';
             document.getElementById('resultInput').value = '';
-            document.getElementById('counter').querySelector('div').innerText = counter;
+            document.getElementById('counterCount').innerText = counter;
 
 
             let calculation = '';
@@ -205,7 +220,7 @@
             document.getElementById('resultTime').innerText = formattedTime;
             document.getElementById(`level`).innerText = '';
             document.getElementById(`bar`).innerText = '';
-            document.getElementById('counter').querySelector('div').innerText = counter;
+            document.getElementById('counterCount').innerText = counter;
             displayHighScore();
         }
 
@@ -222,7 +237,7 @@
             document.getElementById('resultTime').innerText = formattedTime;
             document.getElementById(`level`).innerText = '';
             document.getElementById(`bar`).innerText = '';
-            document.getElementById('counter').querySelector('div').innerText = counter;
+            document.getElementById('counterCount').innerText = counter;
         }
 
         function formatElapsedTime(seconds) {
@@ -335,8 +350,8 @@
         </div>
     </div>
     <div id="result">
-        <div id="intro">
-            <img src="assets/media/math-teacher.png" alt="Math Teacher" />
+        <div id="intro" class="mathTeacher" >
+            <img src="assets/media/math-teacher.png" alt="Math Teacher"/>
         </div>
         <div id="resultEmoji"></div>
         <div id="resultTime">Math Game</div>
@@ -349,8 +364,10 @@
     <button id="newCalculationButton" onclick="generateRandomCalculation()" style="display: none;">🆕 Next</button>
     <div id="life"></div>
     <div id="counter">
-        <img src="assets/media/math-teacher.png" alt="Math Teacher" />
-        <div>0</div>
+        <div class="mathTeacher">
+            <img src="assets/media/math-teacher.png" alt="Math Teacher"/>
+        </div>
+        <div id="counterCount">0</div>
     </div>
 </footer>