Added all map clue buttons and corrected positioning and render method

app/(main)/admin/page.js

@@ -38,7 +38,6 @@ export default function AdminDashboard() {
           if (existingTimer.endTime) {
             setTimerEndTime(new Date(existingTimer.endTime).getTime());
           }
-          setTimerDisplay(formatElapsedTime(existingTimer.startTime));
         }
 
         // Then, fetch fresh data from the server to ensure we're in sync
@@ -71,16 +70,12 @@ export default function AdminDashboard() {
           } else {
             setTimerEndTime(null);
           }
-
-          // Immediately display the current elapsed time
-          setTimerDisplay(formatElapsedTime(data.startTime));
         } else {
           // Only clear local timer if server explicitly says timer is not active
           // This prevents clearing a valid timer if the server response is ambiguous
           if (data.active === false && data.timerActive === false) {
             clearHuntTimer();
             setTimerActive(false);
-            setTimerDisplay("--:--:--");
           }
         }
 
@@ -116,41 +111,45 @@ export default function AdminDashboard() {
     }
   }, [session, status, router]);
 
-  // Timer update effect - use the centralized timer service
+  // Create a separate effect for updating the timer display
   useEffect(() => {
-    // Clear any existing interval first to prevent multiple intervals
+    let timerId;
-    if (timerIntervalRef.current) {
-      clearInterval(timerIntervalRef.current);
-      timerIntervalRef.current = null;
-    }
 
-    if (timerActive) {
+    // Initialize timer
-      // Start a new interval for timer updates
+    async function initializeTimer() {
-      timerIntervalRef.current = setInterval(() => {
+      // Set up timer updates
+      const updateTimer = () => {
         const timerData = getHuntTimer();
-
         if (timerData && timerData.startTime) {
-          // Format the elapsed time using the centralized service
+          setTimerDisplay(formatElapsedTime(timerData.startTime));
-          const formattedTime = formatElapsedTime(timerData.startTime);
-          setTimerDisplay(formattedTime);
           
           // If there's an end time, check if we've reached it
           if (timerEndTime && Date.now() >= timerEndTime) {
             stopTimer();
           }
         } else {
-          // If timer data is suddenly gone, try to reload from server
+          setTimerDisplay("--:--:--");
-          fetchTimerStatusFromServer();
         }
-      }, 1000);
+      };
+
+      // Initial update
+      updateTimer();
+
+      // Update every second
+      timerId = setInterval(updateTimer, 1000);
+    }
+
+    // Only initialize timer if the timer is active
+    if (timerActive) {
+      initializeTimer();
     } else {
       setTimerDisplay("--:--:--");
     }
 
+    // Clean up interval on unmount
     return () => {
-      if (timerIntervalRef.current) {
+      if (timerId) {
-        clearInterval(timerIntervalRef.current);
+        clearInterval(timerId);
-        timerIntervalRef.current = null;
       }
     };
   }, [timerActive, timerEndTime]);

app/(main)/clue/[clueId]/page.js

@@ -1045,6 +1045,27 @@ export default function CluePage({ params }) {
           text-overflow: ellipsis;
           padding-left: 5px;
         }
+
+        .clue-timer {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          margin: 10px 0;
+          padding: 5px 10px;
+          background-color: rgba(104, 84, 60, 0.1);
+          border-radius: 5px;
+        }
+        
+        .timer-label {
+          font-weight: bold;
+          margin-right: 8px;
+          color: #68543c;
+        }
+        
+        .timer-value {
+          font-family: monospace;
+          font-size: 1.1em;
+        }
       `}</style>
     </div>
   );

app/(main)/map/page.js

@@ -390,6 +390,18 @@ export default function MapPage() {
               {renderClueButton(5, { left: "298px", top: "774px" })}
               {renderClueButton(6, { left: "240px", top: "880px" })}
               {renderClueButton(7, { left: "355px", top: "960px" })}
+              {renderClueButton(8, { left: "266px", top: "1037px" })}
+              {renderClueButton(9, { left: "280px", top: "1175px" })}
+              {renderClueButton(10, { left: "336px", top: "1303px" })}
+              {renderClueButton(11, { left: "250px", top: "1390px" })}
+              {renderClueButton(12, { left: "165px", top: "1485px" })}
+              {renderClueButton(13, { left: "305px", top: "1530px" })}
+              {renderClueButton(14, { left: "340px", top: "1650px" })}
+              {renderClueButton(15, { left: "225px", top: "1725px" })}
+              {renderClueButton(16, { left: "220px", top: "1820px" })}
+              {renderClueButton(17, { left: "275px", top: "1885px" })}
+              {renderClueButton(18, { left: "362px", top: "1917px" })}
+              {renderClueButton(19, { left: "300px", top: "2040px" })}
 
               {/* Additional clue buttons can be added here when needed */}
             </div>