Merge pull request #47 from bertt6/front-additions

game found animations and spectators front
berat-samli · Apr 22, 2024 · ab2145d · ab2145d
2 parents 69aac6b + 9ba575e
commit ab2145d
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 22 deletions.
diff --git a/API/Apps/Game/consumers.py b/API/Apps/Game/consumers.py
@@ -308,6 +308,8 @@ async def update(self):
                         'game': GameConsumer.game_states[self.game_id]
                     }
                 )
+                GameConsumer.game_states[self.game_id]['ball']['dx'] = 5
+                GameConsumer.game_states[self.game_id]['ball']['dy'] = 5
                 await asyncio.sleep(3.2)
         elif ball['x'] + 10 >= GameConsumer.game_states[self.game_id]['canvas_width'] / 2:
             GameConsumer.game_states[self.game_id]['player_one']['score'] += 1
@@ -336,6 +338,8 @@ async def update(self):
                         'game': GameConsumer.game_states[self.game_id]
                     }
                 )
+                GameConsumer.game_states[self.game_id]['ball']['dx'] = 5
+                GameConsumer.game_states[self.game_id]['ball']['dy'] = 5
                 await asyncio.sleep(3.2)
 
     def initialize_game_state(self, data):

diff --git a/Backend/static/scripts/game.js b/Backend/static/scripts/game.js
@@ -11,28 +11,64 @@ const paddleHeight = 200;
 const ballSize = 20;
 
 
-class Participants extends BaseComponent
-{
-    constructor(state,parentElement)
-    {
-        super(state,parentElement);
+class Participants extends BaseComponent {
+    constructor(state, parentElement) {
+        super(state, parentElement);
+        this.popupContainer = null;
     }
-    handleHTML()
-    {
+
+    handleHTML() {
         return `
-         ${this.state.spectators.map((spectator) => `
-         <div class="spectator-image">
-            <img src="${BASE_URL}${spectator.profile_picture}" alt="image cannot be loaded">
+            <div class="spectators-container">
+                ${this.state.spectators.map((spectator, index) => `
+                    <div class="spectator-image" data-index="${index}">
+                        <img src="${BASE_URL}${spectator.profile_picture}" alt="image cannot be loaded">
+                    </div>
+                `).join("")}
+            </div>
+        `;
+    }
+
+    showSpectatorDetails(index) {
+        this.popupContainer = document.createElement('div');
+        this.popupContainer.classList.add('popup-container');
+        this.parentElement.appendChild(this.popupContainer);
+
+        this.popupContainer.innerHTML = `
+        <div>
+            <h6>Spectators - ${this.state.spectators.length}</h6>
+                ${this.state.spectators.map((spectator, index) => `
+                    <div class="popup-content">
+                        <img class='spectator-image' src="${BASE_URL}${spectator.profile_picture}" alt="image cannot be loaded">
+                        <a>${spectator.nickname}</a>
+                    </div>
+                `).join('')}
         </div>
-         `).join("")}
-        `
+       `;
+        this.popupContainer.style.display = 'block';
+    }
+
+    hideSpectatorDetails() {
+        this.popupContainer.style.display = 'none';
+    }
+
+    attachEventListeners() {
+        const spectatorImages = this.parentElement.querySelectorAll('.spectators-container');
+        spectatorImages.forEach((image, index) => {
+            image.addEventListener('mouseover', () => this.showSpectatorDetails(index));
+            image.addEventListener('mouseleave', () => this.hideSpectatorDetails())
+
+        });
     }
+
     render() {
         this.parentElement.innerHTML = this.handleHTML();
+        this.attachEventListeners();
     }
-    setState(newState)
-    {
-        this.state = {...this.state,...newState};
+
+    setState(newState) {
+        this.state = {...this.state, ...newState};
+        this.render();
     }
 }
 let element = document.getElementById('spectators-wrapper')

diff --git a/Backend/static/scripts/matchmaking.js b/Backend/static/scripts/matchmaking.js
@@ -5,7 +5,7 @@ function handleText() {
   const text = document.getElementById("matchmaking text");
   console.log(text);
   let textIndex = 0;
-  setInterval(() => {
+  return setInterval(() => {
     text.innerText = BASE_TEXT + ".".repeat(textIndex % 3);
     textIndex += 1;
   }, 1000);
@@ -22,21 +22,32 @@ function handleTimer() {
     timer.innerText = `${minutes}:${seconds}`;
   }, 1000);
 }
+
+async function matchFounded() {
+  const text = document.getElementById("matchmaking text");
+  const exitButton = document.getElementById('close-matchmaking')
+  const timer = document.getElementById("matchmaking-timer");
+  text.innerText = 'MATCH FOUND!'
+  exitButton.hidden = true
+  timer.hidden = true
+  await new Promise(r => setTimeout(r, 5000));
+}
 async function connectToSocket() {
+  let interval;
   const nickname = localStorage.getItem("activeUserNickname")
     const socket = new WebSocket(`ws://localhost:8000/ws/matchmaking/${nickname}`);
     socket.onopen = () => {
-        console.log("Successfully connected to the server");
+      interval = handleText();
+      handleTimer();
     }
-    socket.onmessage = (event) => {
+  socket.onmessage = async (event) => {
         const data = JSON.parse(event.data);
-      console.log(data)
+    clearInterval(interval)
+    await matchFounded()
         loadPage(`/game/${data.game_id}`);
     }
 }
 async function App() {
-  handleText();
-  handleTimer();
   await connectToSocket();
 }
 App();
diff --git a/Backend/static/styles/game.css b/Backend/static/styles/game.css
@@ -114,7 +114,7 @@
 .spectators-wrapper{
     position: absolute;
     right: 50%;
-    top: 4rem;
+    top: 3rem;
     display: flex;
     justify-content: center;
 }
@@ -136,3 +136,31 @@ margin-right: -1rem; /* Half of the width */
     from { opacity: 0; }
     to { opacity: 1; }
 }
+
+.popup-container {
+    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
+    list-style: none;
+    z-index: 10;
+    border: 1px solid white;
+    user-select: none;
+    padding: 10px;
+    position: absolute;
+    top: 3rem;
+    display: flex;
+    flex-direction: column;
+    min-width: 150px;
+}
+
+.popup-container h6 {
+    text-align: center;
+}
+
+.popup-content {
+    padding: 2px;
+    gap: 25px;
+    width: 100px;
+    display: flex;
+    font-size: small;
+    align-items: center;
+    justify-content: space-between;
+}