From 11eba1ccbe85e02d71b824ed784e33c4d7ce2dae Mon Sep 17 00:00:00 2001
From: RezenkovD <rezenkovdmitro@gmail.com>
Date: Fri, 11 Aug 2023 17:34:34 +0300
Subject: [PATCH] fix: dynamic pos ellips

---
 games/templates/games/games.html | 64 +++++++++++++++++++-------------
 games/templates/style/games.css  | 18 +--------
 2 files changed, 40 insertions(+), 42 deletions(-)

diff --git a/games/templates/games/games.html b/games/templates/games/games.html
index 95297fc..9db91e8 100644
--- a/games/templates/games/games.html
+++ b/games/templates/games/games.html
@@ -62,7 +62,7 @@
 {% endblock %}
 {% block script %}
 <script>
-  function getFilteredGames (gameMode) {
+    function getFilteredGames (gameMode) {
     fetch(`{% url 'api/games:filter_games' %}?game_mode=${gameMode}`, {
       method: "GET",
       headers: {
@@ -102,33 +102,45 @@
               `;
           gamePanel.insertAdjacentHTML('beforeend', gameCardHTML);
         }
+
+        positionEllipse();
       });
-  }
-  const divs = document.querySelectorAll('.filter div');
+    }
+    const divs = document.querySelectorAll('.filter div');
 
-  document.getElementById("both").addEventListener("click", function () {
+    document.getElementById("both").addEventListener("click", function () {
+        divs.forEach(div => div.classList.remove("all-games"));
+        divs.forEach(div => div.classList.add("fil-games"));
+        this.classList.remove("fil-games")
+        this.classList.add("all-games")
+        getFilteredGames ("both");
+    });
+    document.getElementById("multiplayer").addEventListener("click", function () {
+        divs.forEach(div => div.classList.remove("all-games"));
+        divs.forEach(div => div.classList.add("fil-games"));
+        this.classList.remove("fil-games")
+        this.classList.add("all-games")
+        getFilteredGames ("multiplayer");
+    });
+    document.getElementById("single").addEventListener("click", function () {
+        divs.forEach(div => div.classList.remove("all-games"));
+        divs.forEach(div => div.classList.add("fil-games"));
+        this.classList.remove("fil-games")
+        this.classList.add("all-games")
+        getFilteredGames ("single");
+    });
+    const div = document.getElementById("both")
+    div.classList.add("all-games")
     getFilteredGames ("both");
-    divs.forEach(div => div.classList.remove("all-games"));
-    divs.forEach(div => div.classList.add("fil-games"));
-    this.classList.remove("fil-games")
-    this.classList.add("all-games")
-  });
-  document.getElementById("multiplayer").addEventListener("click", function () {
-    getFilteredGames ("multiplayer");
-    divs.forEach(div => div.classList.remove("all-games"));
-    divs.forEach(div => div.classList.add("fil-games"));
-    this.classList.remove("fil-games")
-    this.classList.add("all-games")
-  });
-  document.getElementById("single").addEventListener("click", function () {
-    getFilteredGames ("single");
-    divs.forEach(div => div.classList.remove("all-games"));
-    divs.forEach(div => div.classList.add("fil-games"));
-    this.classList.remove("fil-games")
-    this.classList.add("all-games")
-  });
-  const div = document.getElementById("both")
-  div.classList.add("all-games")
-  getFilteredGames ("both");
+
+    function positionEllipse() {
+    var ellipse = document.querySelector('.ellipse-4');
+        ellipse.style.top = 0 + 'px';
+        var pageHeight = document.querySelector(".not-head").clientHeight;
+        console.log(pageHeight)
+        var newTop = pageHeight - 840;
+
+        ellipse.style.top = newTop + 'px';
+    }
 </script>
 {% endblock %}
\ No newline at end of file
diff --git a/games/templates/style/games.css b/games/templates/style/games.css
index 30f3e38..3b5cbaa 100644
--- a/games/templates/style/games.css
+++ b/games/templates/style/games.css
@@ -630,26 +630,12 @@
     }
 
     .ellipse-1 {
-        background: #ef7d1e;
-        border-radius: 50%;
-        width: 165px;
-        height: 165px;
-        position: absolute;
-        filter: blur(125px);
-        top: 1300px;
-        left: 0px;
+       display: none;
     }
 
 
     .ellipse-2 {
-        background: #ef7d1e;
-        border-radius: 50%;
-        width: 165px;
-        height: 165px;
-        position: absolute;
-        filter: blur(125px);
-        top: 600px;
-        left: 300px;
+        display: none;
     }