changed the way clue buttons are rendered so their indexing exists for when they are needed but if the clue for them doesnt exist they dont cause errors

app/(main)/map/page.js

@@ -337,6 +337,24 @@ export default function MapPage() {
   // Get the first clue if it exists
   const firstClue = clues.length > 0 ? clues[0] : null;
 
+  // Render a clue button only if the clue exists
+  const renderClueButton = (index, position) => {
+    if (index >= clues.length) return null; // Don't render if clue doesn't exist
+
+    const clue = clues[index];
+    return (
+      <button
+        key={clue.id}
+        className={getClueButtonClass(clue)}
+        onClick={() => handleClueClick(clue.id, clue.available, clue.found)}
+        style={{
+          left: position.left,
+          top: position.top,
+        }}
+      ></button>
+    );
+  };
+
   return (
     <div className={styles["map-page"]}>
       {/* Map Banner with team info and timer */}
@@ -363,66 +381,17 @@ export default function MapPage() {
             />
 
             <div id="map-overlay-container" className={styles["map-overlay"]}>
-              {/* Hardcoded Clue 1 button */}
-              {firstClue && (
-                <button
-                  className={getClueButtonClass(firstClue)}
-                  onClick={() =>
-                    handleClueClick(
-                      firstClue.id,
-                      firstClue.available,
-                      firstClue.found
-                    )
-                  }
-                  style={{
-                    left: "230px",
-                    top: "212px",
-                  }}
-                >
-                  {/* Clue {firstClue.id} */}
-                </button>
-              )}
+              {/* Render clue buttons conditionally */}
+              {renderClueButton(0, { left: "230px", top: "212px" })}
+              {renderClueButton(1, { left: "320px", top: "285px" })}
+              {renderClueButton(2, { left: "265px", top: "400px" })}
+              {renderClueButton(3, { left: "343px", top: "520px" })}
+              {renderClueButton(4, { left: "320px", top: "646px" })}
+              {renderClueButton(5, { left: "298px", top: "774px" })}
+              {renderClueButton(6, { left: "240px", top: "880px" })}
+              {renderClueButton(7, { left: "355px", top: "960px" })}
 
-              {clues.length > 1 && (
-                <button
-                  className={getClueButtonClass(clues[1])}
-                  onClick={() =>
-                    handleClueClick(
-                      clues[1].id,
-                      clues[1].available,
-                      clues[1].found
-                    )
-                  }
-                  style={{
-                    left: "320px",
-                    top: "285px",
-                  }}
-                >
-                  {/* Clue {clues[1].id} */}
-                  {/* If clues are to be named uncomment the line above */}
-                </button>
-              )}
-
-              {clues.length > 1 && (
-                <button
-                  className={getClueButtonClass(clues[2])}
-                  onClick={() =>
-                    handleClueClick(
-                      clues[2].id,
-                      clues[2].available,
-                      clues[2].found
-                    )
-                  }
-                  style={{
-                    left: "265px",
-                    top: "400px",
-                  }}
-                >
-                  {/* Clue {clues[2].id} */}
-                </button>
-              )}
-
-              {/* clues should go above here */}
+              {/* Additional clue buttons can be added here when needed */}
             </div>
           </div>
         </div>