Merge branch 'main' into tournament-front

berat-samli · Apr 30, 2024 · feba386 · feba386
2 parents 9afd40f + b4720f5
commit feba386
Show file tree

Hide file tree

Showing 10 changed files with 189 additions and 61 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/dictionaries/omer.xml b/.idea/dictionaries/omer.xml
diff --git a/.idea/ft-transcendence.iml b/.idea/ft-transcendence.iml
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/inspectionProfiles/profiles_settings.xml b/.idea/inspectionProfiles/profiles_settings.xml
diff --git a/.idea/misc.xml b/.idea/misc.xml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/Backend/static/scripts/profile.js b/Backend/static/scripts/profile.js
@@ -4,6 +4,7 @@ import { notify } from "../components/Notification.js";
 import { request } from "./Request.js";
 import {calculateDate, escapeHTML, getActiveUserNickname} from "./utils.js";
 
+
 class History extends BaseComponent {
     constructor(state, parentElement = null) {
         super(state, parentElement);
@@ -68,6 +69,82 @@ class BlockedUsers extends BaseComponent {
         this.parentElement.innerHTML = this.html;
     }
 }
+
+class PaddleColor extends BaseComponent {
+    constructor(state, parentElement = null) {
+        super(state, parentElement);
+        this.html = this.handleHTML();
+    }
+
+    handleHTML() {
+
+        return `
+        <form>
+    <div class="paddle-color-wrapper">
+        <div class="colors-text">COLORS</div>
+        <div class="paddle-color-row">
+            <div class="paddle-color-item">
+                <input type="radio" id="red1" name="color_row1" value="red1">
+                <label for="red1">
+                    <div>
+                        <p>Red</p>
+                    </div>
+                    <div class="red">
+                        <img src="/static/public/SingleCloud.png" alt="">
+                    </div>
+                </label>
+            </div>
+            <div class="paddle-color-item">
+                <input type="radio" id="red2" name="color_row1" value="red2">
+                <label for="red2">
+                    <div>
+                        <p>Red</p>
+                    </div>
+                    <div class="red">
+                        <img src="/static/public/SingleCloud.png" alt="">
+                    </div>
+                </label>
+            </div>
+        </div>
+        <div class="paddle-color-row">
+            <div class="paddle-color-item">
+                <input type="radio" id="red3" name="color_row1" value="red3">
+                <label for="red3">
+                    <div>
+                        <p>Red</p>
+                    </div>
+                    <div class="red">
+                        <img src="/static/public/SingleCloud.png" alt="">
+                    </div>
+                </label>
+            </div>
+            <div class="paddle-color-item">
+                <input type="radio" id="red4" name="color_row1" value="red4">
+                <label for="red4">
+                    <div>
+                        <p>Red</p>
+                    </div>
+                    <div class="red">
+                        <img src="/static/public/SingleCloud.png" alt="">
+                    </div>
+                </label>
+            </div>
+        </div>
+    </div>
+</form>
+    `;
+    }
+
+    render() {
+        this.parentElement.innerHTML = this.html;
+    }
+}
+
+function calculateWinRate(wins, losses) {
+    let winRate = wins + losses === 0 ? 0 : (wins / (wins + losses)) * 100;
+    return parseFloat(winRate.toFixed(2));
+}
+
 class Stats extends BaseComponent {
     constructor(state, parentElement = null) {
         super(state, parentElement);
@@ -100,7 +177,8 @@ class Stats extends BaseComponent {
     <div class="stats-row">
         <div class="stats-item">
             <h3>Win Rate</h3>
-            <p class="stats-value">%${((parseInt(this.state.statsInfo.total_wins) / (parseInt(this.state.statsInfo.total_wins) + parseInt(this.state.statsInfo.total_losses))) * 100).toFixed(2)}</p>
+            <p class="stats-value">%${calculateWinRate(parseInt((this.state.statsInfo.total_wins)), parseInt(this.state.statsInfo.total_losses))}</p>
+            
         </div>
         <div class="stats-item">
             <h3 href="leaderboard" class="stats-value">Rank</>
@@ -220,7 +298,7 @@ class ProfileInfo extends BaseComponent {
               </div>`
     }
 
-updateProfile = async (formData) => {
+    updateProfile = async (formData) => {
 
         try {
             let response = await request(`${API_URL}/profile/`, {
@@ -301,6 +379,8 @@ async function assignDataRouting() {
     const friendsButton = document.getElementById('friends-button');
     const statsButton = document.getElementById('stats-button');
     const blockedUsersButton = document.getElementById('blocked-users-button');
+    const paddleColorButton = document.getElementById('paddle-color-button');
+
     historyButton.addEventListener('click', () => {
         history.replaceState(null, null, '#history')
         handleRouting()
@@ -317,6 +397,10 @@ async function assignDataRouting() {
         history.replaceState(null, null, '#blockedusers')
         handleRouting()
     });
+    paddleColorButton.addEventListener('click', () => {
+        history.replaceState(null, null, '#paddlecolor')
+        handleRouting()
+    });
 }
 
 async function fetchBlockedUsers() {
@@ -329,6 +413,17 @@ async function fetchBlockedUsers() {
     ];
     return users;
 }
+
+async function fetchPaddleColor() {
+    const colors = [
+        { color: "red", hex: "#FF0000" },
+        { color: "green", hex: "#00FF00" },
+        { color: "blue", hex: "#0000FF" },
+        { color: "yellow", hex: "#FFFF00" },
+        { color: "purple", hex: "#800080" }
+    ];
+    return colors;
+}
 async function fetchStats() {
     try {
         let response = await request(`${API_URL}/profile/stats/`, {
@@ -401,9 +496,13 @@ async function handleRouting() {
         const blockedUsers = new BlockedUsers({ blockedUsers: data }, parentElement);
         blockedUsers.render();
     }
+    if (hash == '#paddlecolor') {
+        const paddleColor = await fetchPaddleColor();
+        const paddleColorComponent = new PaddleColor({ colors: paddleColor }, parentElement);
+        paddleColorComponent.render();
+    }
 }
-function getUsernameFromURL()
-{
+function getUsernameFromURL() {
     const pathName = window.location.pathname;
     const pathParts = pathName.split('/');
     return pathParts[pathParts.length - 1];

diff --git a/Backend/static/styles/profile.css b/Backend/static/styles/profile.css
@@ -296,4 +296,88 @@
 .blocked-user-more {
   display: flex;
   gap: 0.5rem;
-}
+}
+
+.paddle-color-button {
+  background-color: #4CAF50;
+  color: rgb(0, 0, 0);
+  padding: 8px 14px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease; 
+}
+
+.paddle-color-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.paddle-color-row {
+  flex-wrap: wrap;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+@media (max-width: 780px) {
+
+  .profile-wrapper{
+    justify-content: center;
+  flex-direction: column;
+  }
+}
+.paddle-color-item {
+  flex-basis: calc(50% - 10px); 
+  background-color: rgba(0, 0, 0, 0.5); 
+  padding: 60px;
+  box-sizing: border-box;
+  text-align: center;
+  position: relative;
+  margin: 0 5px;
+}
+
+.paddle-color-item h3 {
+  color: white;
+  margin-bottom: 10px;
+  font-size: 16px;
+}
+
+.paddle-color-value {
+  color: white;
+  font-size: 24px;
+  margin: 0;
+  animation: fadeIn 1s ease forwards; 
+  opacity: 0;
+}
+
+.colors-text {
+  margin-left: 7px;
+}
+
+input[type="radio"] {
+  display: none;
+}
+
+input[type="radio"] + label {
+  position: relative;
+  padding-left: 25px;
+}
+
+input[type="radio"] + label:before {
+  content: "";
+  display: inline-block;
+  width: 18px;
+  height: 18px;
+  border: 2px solid #ccc;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+input[type="radio"]:checked + label:before {
+  background-color: #ffffff
+}
diff --git a/Backend/templates/profile/profile.html b/Backend/templates/profile/profile.html
@@ -49,6 +49,7 @@ <h1></h1>
               <button class="header-wrapper" id="friends-button"><span> FRIENDS </span></button>
               <button class="header-wrapper" id="stats-button"><span>STATS</span></button>
               <button class="header-wrapper" id="blocked-users-button"><span>BLOCKED</span></button>
+              <button class="header-wrapper" id="paddle-color-button"><span>PADDLE COLOR</span></button>
             </div>
           <div id="data-wrapper">
                 <div class="friends-wrapper" style="display: none">