Moved forum to forum button instead of under the game

Project/static/game.html

@@ -35,9 +35,9 @@
             <main>
                 <!--This is probably js instead of a list with links-->
                 <ul>
-                    <li><a id="aiButton" href="#">AI</a></li>
-                    <li><a id="myFeedButton" href="#">My feed</a></li>
                     <li><a id="gamesButton" href="/games">Games</a> </li>
+                    <li><a id="gameButton" href="#">Game</a></li>
+                    <li><a id="forumButton" href="#">Forum</a></li>
                 </ul>
                 
                 <section class="sectionMain" id="sectionMain">
@@ -74,25 +74,6 @@
                 </section>
             </aside>
         </div>
-        <div id="forumSection">
-            <section >
-                <h2>Game Forum</h2>
-                <div id="comments"></div>
-                <form id="commentForm">
-                    <label>Write your comment: </label>
-                    <br>
-                    <textarea id="comment"></textarea>
-                    <br>
-                    <button id="submitComment" type="button">Submit</button>
-                </form>
-            </section>
-            <section id="commentSection">
-                <h2>Forum</h2>
-                <div id="forum"></div>
-            </section>
-
-        </div>
-
         
         <footer>
             <div>

Project/static/js/game.js

@@ -16,6 +16,9 @@ const eDeleteReviewButton = document.getElementById('deleteReview');
 const addDeleteButton = document.getElementById('addDelete');
 const eSubmitCommentButton = document.getElementById('submitComment');
 const eComment = document.getElementById('comment');
+const forumButton = document.getElementById('forumButton');
+const sectionMain = document.getElementById('sectionMain');
+const gameButton = document.getElementById('gameButton');
 
 const loginButton = document.getElementById('loginButton');
 const userPageButton = document.getElementById('userPageButton');
@@ -53,8 +56,8 @@ onAuthStateChanged(auth, async (user) => {
     if (user) {
         currentUser = user
 
-        const idToken = await user.getIdToken();
-        getUserGameData(idToken);
+        currentUser.idToken = await user.getIdToken();
+        getUserGameData(currentUser.idToken);
     } else {
         eReviewForm.innerHTML = "";
         addDeleteButton.disabled = "disabled";
@@ -131,6 +134,49 @@ function getUserGameData(token) {
 showReviews();
 showComments();
 
+
+forumButton.addEventListener('click', function (event) {
+    // Clear the sectionMain content
+    sectionMain.innerHTML = '';
+
+    // Create the forum section HTML
+    const forumHTML = `
+        <div id="forumSection">
+            <section>
+                <h2>Game Forum</h2>
+                <div id="comments"></div>
+                <form id="commentForm">
+                    <label>Write your comment: </label>
+                    <br>
+                    <textarea id="comment"></textarea>
+                    <br>
+                    <button id="submitComment" type="button">Submit</button>
+                </form>
+            </section>
+            <section id="commentSection">
+                <h2>Forum</h2>
+                <div id="forum"></div>
+            </section>
+        </div>
+    `;
+
+    // Insert the forum HTML into sectionMain
+    sectionMain.innerHTML = forumHTML;
+
+    showComments();
+});
+
+gameButton.addEventListener('click', async (e) => {
+    e.preventDefault();
+    sectionMain.innerHTML = '';
+    getGameData();
+    if (currentUser && currentUser.idToken) {
+        getUserGameData(currentUser.idToken);
+    } else {
+        console.error("User token is missing or invalid.");
+    }
+});
+
 // Submit review and rating
 eFormButton.addEventListener('click', async (e) => {
     e.preventDefault();

Project/static/style/style_game.css

@@ -10,7 +10,7 @@ h1, h2, h4, p{ /*text for some reason has a invisible margin, removing this*/
     margin: 0;
     padding: 5px;
 }
-
+/*
 #forumSection {
     color : white;
     width: 95%;
@@ -20,4 +20,4 @@ h1, h2, h4, p{ /*text for some reason has a invisible margin, removing this*/
     
     overflow: auto;
     background-color: rgb(57, 62, 70);
-}
+}*/
\ No newline at end of file