a

hu8813 · Apr 25, 2024 · e1f1b90 · e1f1b90
1 parent c3f0a7f
commit e1f1b90
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 5 deletions.
diff --git a/srcs/frontend/css/Profile.css b/srcs/frontend/css/Profile.css
@@ -211,3 +211,35 @@ li {
 .friends > * {
   margin-bottom: 10px; /* Adjust as needed */
 }
+.game-history-container {
+  display: none;  
+  position: fixed; /* Change position to fixed */
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 10px;
+  padding: 20px;
+  flex-direction: row; /* Change flex direction to row */
+  color: #333333;
+  max-height: 80vh; /* Limit height to 80% of viewport height */
+  overflow-y: auto; /* Enable vertical scrolling */
+  z-index: 1000; /* Ensure it's above other elements */
+}
+
+.close-button {
+  display: block; /* Ensure the close button is visible */
+  position: absolute;
+  color: #333333;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 1.2rem;
+  color: #333;
+  cursor: pointer;
+}
+
+.close-button:hover {
+  color: #555;
+}
diff --git a/srcs/frontend/css/ViewProfile.css b/srcs/frontend/css/ViewProfile.css
@@ -93,6 +93,41 @@ display: inline-block;
   .message-container {
     color: red;
   }
+  .game-history-container {
+    display: none;  
+    position: fixed; /* Change position to fixed */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+    padding: 20px;
+    flex-direction: row; /* Change flex direction to row */
+    color: #333333;
+    max-height: 80vh; /* Limit height to 80% of viewport height */
+    max-width: 80vw; /* Limit width to 80% of viewport width */
+    overflow-y: auto; /* Enable vertical scrolling */
+    z-index: 1000; /* Ensure it's above other elements */
+}
+
+.close-button {
+    display: block; /* Ensure the close button is visible */
+    position: absolute;
+    color: #333333;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 1.2rem;
+    color: #333;
+    cursor: pointer;
+}
+
+.close-button:hover {
+    color: #555;
+}
+
+
 
   @media only screen and (max-width: 600px) {
     .buttons {

diff --git a/srcs/frontend/js/ViewProfile.js b/srcs/frontend/js/ViewProfile.js
@@ -1,4 +1,17 @@
+window.addEventListener('click', function(event) {
+    const gameHistoryContainer = document.getElementById('gameHistory2');
+    if (gameHistoryContainer && event.target !== gameHistoryContainer && !gameHistoryContainer.contains(event.target)) {
+        gameHistoryContainer.style.display = 'none';
+    }
+});
 
+// Function to close the game history container
+function closeGameHistory() {
+    const gameHistoryContainer = document.getElementById('gameHistory2');
+    if (gameHistoryContainer) {
+        gameHistoryContainer.style.display = 'none';
+    }
+}
 
 async function fetchAndDisplayViewProfile(username) {
 
@@ -55,8 +68,10 @@ async function fetchAndDisplayViewProfile(username) {
                         const gameHistoryData = await gameHistoryResponse.json();
 
                         const gameHistoryContainer = document.getElementById('gameHistory2');
-                        gameHistoryContainer.innerHTML = ''; 
-
+                        if (gameHistoryContainer){
+                            gameHistoryContainer.style.display = 'flex'; // Change display to flex
+                            gameHistoryContainer.innerHTML = '<button id="closeGameHistoryBtn" class="close-button" onclick="closeGameHistory()">Close</button>';
+                        }
                         // Sort game history by date_time_played in descending order
                         gameHistoryData.sort((a, b) => new Date(b.date_time_played) - new Date(a.date_time_played));
 
@@ -81,6 +96,7 @@ async function fetchAndDisplayViewProfile(username) {
                     console.error('Error fetching and displaying game history:', error);
                 }
             });
+
 
             document.getElementById('addfriend').addEventListener('click', async function() {
                 try {

diff --git a/srcs/frontend/views/viewprofile.html b/srcs/frontend/views/viewprofile.html
@@ -37,6 +37,7 @@ <h2 class="view-info-header"><span id="scorelbl">Score</span>: <span id="scoread
 
   <div id="messageContainer" class="message-container"></div>
 
-
-<button id="showGameHistoryBtn2" class="bn" style="color:#333333;" id="showGameHistory();" class="profile-button">Show Game History</button>
-        <div id="gameHistory2"></div> </div>
+  <button id="showGameHistoryBtn2" class="bn" style="color:#333333;" onclick="showGameHistory();" class="profile-button">Show Game History</button>
+  <div id="gameHistory2" class="game-history-container">
+  </div>
+