Fix: Info tooltip visible for Simon Sya and Tic Tac Toe

Author: Alvi24-hub

web-app/js/main.js

@@ -1292,13 +1292,27 @@ document.addEventListener("DOMContentLoaded", function () {
       }
       setupModalInfoButton(name);
 
-      // Inject info button
+      // Inject info button - FIXED for Tic Tac Toe and all projects
       var projectContent = modalBody.querySelector(".project-content");
       if (projectContent) {
+        // First, check if there's already an info button (to avoid duplicates)
+        if (projectContent.querySelector(".inline-info-btn")) {
+        // Info button already exists, skip injection
+        console.log('ℹ️ Info button already exists for', name);
+      } else {
+        // Look for any heading element
         var firstHeading = projectContent.querySelector("h2, h3, .resume-analyzer-copy h2, .pet-title");
+    
+        // Special case for Tic Tac Toe - look for the heading inside project-content
+        if (!firstHeading) {
+          firstHeading = projectContent.querySelector('[style*="display: flex"] h2');
+        }
+    
         if (!firstHeading) {
+          // Look for any element that might be a title
           firstHeading = projectContent.querySelector('[class*="title"], [class*="header"] h2');
         }
+    
         if (firstHeading && !projectContent.querySelector(".inline-info-btn")) {
           var infoBtn = document.createElement("button");
           infoBtn.className = "inline-info-btn";
@@ -1316,7 +1330,9 @@ document.addEventListener("DOMContentLoaded", function () {
             e.stopPropagation();
             if (typeof getProjectInstructions === "function") {
               var info = getProjectInstructions(name);
-              showInfoModal(info.title, info.steps);
+              if (info && typeof showInfoModal === "function") {
+                showInfoModal(info.title, info.steps);
+              }
             }
           });
 
@@ -1326,7 +1342,8 @@ document.addEventListener("DOMContentLoaded", function () {
           firstHeading.appendChild(infoBtn);
         }
       }
-    });
+    }
+  });
 
     // Setup focus trap
     if (removeTrap) removeTrap();

web-app/js/projects/tic-tac-toe.js

@@ -8,8 +8,25 @@
 // ── 1.  HTML Template ──────────────────────────────────────
 function getTicTacToeHTML() {
   return `
+  <div class="project-content">
+  <div style="display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0 1rem 0; width: 100%; border-bottom: 1px solid var(--border-color, #333); margin-bottom: 1rem;">
+    <div style="display: flex; align-items: center; gap: 12px;">
+      <h2 style="margin: 0; display: inline-block; font-size: 1.5rem;">❌⭕ Tic Tac Toe</h2>
+      <button 
+        class="info-tip-btn" 
+        id="ticTacToeInfoBtn" 
+        style="background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--accent, #22c55e); padding: 0; line-height: 1; display: inline-flex; align-items: center; transition: transform 0.2s ease;"
+        aria-label="How to play Tic Tac Toe"
+        onmouseover="this.style.transform='scale(1.2)'"
+        onmouseout="this.style.transform='scale(1)'"
+      >
+        ⓘ
+      </button>
+    </div>
+  </div>
+  
 <div class="wrap">
- 
+
   <!-- SETUP SCREEN -->
   <div id="screen-setup" class="screen screen--active">
     <div class="logo">
@@ -136,6 +153,7 @@ function getTicTacToeHTML() {
     <button class="btn-primary" id="next-btn" style="font-size:0.9rem;padding:11px">Next Round →</button>
   </div>
 </div>
+</div>
 <style>
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }