From a2ea80c4e5c38babed55721c184901910faf4e8a Mon Sep 17 00:00:00 2001
From: andreiextr <andreikropinov17121988@gmail.com>
Date: Sat, 11 May 2024 22:59:02 +0300
Subject: [PATCH] edit page_gamer

---
 global.js       |   7 +++
 index.html      |   2 +-
 page_gamer.html |   6 +--
 page_gamer.js   |  68 +++++++++++++++++++++++++++++
 script.js       | 112 ++++++++++++++++--------------------------------
 5 files changed, 117 insertions(+), 78 deletions(-)
 create mode 100644 page_gamer.js

diff --git a/global.js b/global.js
index 9316873..f4a1dc5 100644
--- a/global.js
+++ b/global.js
@@ -2,8 +2,12 @@
 window.onload = function() {
   const firstItem = document.querySelector('.nav-item');
   firstItem.classList.add('active');
+
+  // Активируем раздел "Игроки" по умолчанию
+  togglePage('page1');
 };
 
+
 // ПЕРЕКЛЮЧЕНИЯ ПО ВКЛАДКАМ В SIDEBAR
 function togglePage(pageId) {
   var pages = document.querySelectorAll('.page');
@@ -20,10 +24,13 @@ function togglePage(pageId) {
 const items = document.querySelectorAll('.nav-item');
 items.forEach(item => {
   item.addEventListener('click', () => {
+    // Удаляем класс 'active' у всех других элементов
     items.forEach(otherItem => {
       otherItem.classList.remove('active');
     });
+    // Добавляем класс 'active' к текущему элементу
     item.classList.add('active');
   });
 });
 
+
diff --git a/index.html b/index.html
index 01ea491..c1990a9 100644
--- a/index.html
+++ b/index.html
@@ -75,7 +75,7 @@
                 </svg>      
             </div>
 
-            <div id="page1" class="page">
+            <div id="page1" hidden class="page">
                 <div class="title">
                     <h1>Ближайший матч</h1>
                     <div class="tabs">
diff --git a/page_gamer.html b/page_gamer.html
index 7b25e00..fc09d91 100644
--- a/page_gamer.html
+++ b/page_gamer.html
@@ -73,7 +73,7 @@
                 <path d="M18 13.18V10C17.9986 8.58312 17.4958 7.21247 16.5806 6.13077C15.6655 5.04908 14.3971 4.32615 13 4.09V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4.09C9.60294 4.32615 8.33452 5.04908 7.41939 6.13077C6.50425 7.21247 6.00144 8.58312 6 10V13.18C5.41645 13.3863 4.911 13.7681 4.55294 14.2729C4.19488 14.7778 4.00174 15.3811 4 16V18C4 18.2652 4.10536 18.5196 4.29289 18.7071C4.48043 18.8946 4.73478 19 5 19H8.14C8.37028 19.8474 8.873 20.5954 9.5706 21.1287C10.2682 21.6621 11.1219 21.951 12 21.951C12.8781 21.951 13.7318 21.6621 14.4294 21.1287C15.127 20.5954 15.6297 19.8474 15.86 19H19C19.2652 19 19.5196 18.8946 19.7071 18.7071C19.8946 18.5196 20 18.2652 20 18V16C19.9983 15.3811 19.8051 14.7778 19.4471 14.2729C19.089 13.7681 18.5835 13.3863 18 13.18ZM8 10C8 8.93913 8.42143 7.92172 9.17157 7.17157C9.92172 6.42143 10.9391 6 12 6C13.0609 6 14.0783 6.42143 14.8284 7.17157C15.5786 7.92172 16 8.93913 16 10V13H8V10ZM12 20C11.651 19.9979 11.3086 19.9045 11.0068 19.7291C10.7051 19.5536 10.4545 19.3023 10.28 19H13.72C13.5455 19.3023 13.2949 19.5536 12.9932 19.7291C12.6914 19.9045 12.349 19.9979 12 20ZM18 17H6V16C6 15.7348 6.10536 15.4804 6.29289 15.2929C6.48043 15.1054 6.73478 15 7 15H17C17.2652 15 17.5196 15.1054 17.7071 15.2929C17.8946 15.4804 18 15.7348 18 16V17Z"/>
             </svg>      
         </div>
-        <div id="page2.1" hidden class="page">
+        <div id="page2.1" class="page">
             <div class="p_title">
                 <button class ="button_back" onclick="goBack()">
                     <svg  class="icon_left" xmlns="http://www.w3.org/2000/svg"  width="32" height="32" viewBox="0 0 24 24">
@@ -363,7 +363,7 @@ <h1 class="page_title">Игрок</h1>
         </div>
     </div>
 </div>
-<script src="global.js" ></script>
-<script src="script.js" ></script>
+
+<script src="page_gamer.js" ></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/page_gamer.js b/page_gamer.js
new file mode 100644
index 0000000..1aa6c98
--- /dev/null
+++ b/page_gamer.js
@@ -0,0 +1,68 @@
+// Устанавливаем вкладку "Игроки" в фокусе после перехода на страницу игрока
+const playersTab = document.getElementById('item2');
+playersTab.classList.add('active');
+
+
+// СКРОЛЛ ДЛЯ БЛОКА ВИДЕО, ДРУЗЬЯ И МАТЧИ
+let currentIndexV = 0;
+const slidesV = document.querySelectorAll('.slidV');
+const totalSlidesV = slidesV.length;
+
+let currentIndexF = 0;
+const slidesF = document.querySelectorAll('.slidF');
+const totalSlidesF = slidesF.length;
+
+function scrollSliderV(direction) {
+  currentIndexV = (currentIndexV + direction + totalSlidesV) % totalSlidesV;
+  const offset = -currentIndexV * slidesV[0].offsetWidth;
+  document.querySelector('.sliderV').style.transform = `translateX(${offset}px)`;
+}
+
+function scrollSliderF(direction) {
+  currentIndexF = (currentIndexF + direction + totalSlidesF) % totalSlidesF;
+  const offset = -currentIndexF * slidesF[0].offsetWidth;
+  document.querySelector('.sliderF').style.transform = `translateX(${offset}px)`;
+}
+
+// ==========================
+
+//ДИАГРАММА
+var options = {
+  series: [22, 78, 67, 83],
+  chart: {
+    height: 220,
+    type: "radialBar",
+  },
+  series: [67, 84, 97, 61],
+  plotOptions: {
+    radialBar: {
+      track: {
+        background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
+      },
+      dataLabels: {
+        total: {
+          show: true,
+          label: 'Рейтинг',
+          color: '#DDDDDD'
+        },
+        name: {
+          fontSize: '12px',
+        },
+        value: {
+          fontSize: '12px',
+          color: '#DDDDDD',
+        },
+      }
+    },
+    track: {
+          background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
+    },      
+  },
+  stroke: {
+      lineCap: 'round',
+    },  
+  labels: ['Скорость', 'Точность', 'Ловкость', 'Сила']
+};
+
+var chart = new ApexCharts(document.querySelector("#chart"), options);
+  chart.render();
\ No newline at end of file
diff --git a/script.js b/script.js
index 8c6bf59..8aa1e14 100644
--- a/script.js
+++ b/script.js
@@ -133,97 +133,61 @@ document.addEventListener('DOMContentLoaded', function () {
 
 // ==========================
 
-// ПЕРЕХОД ИЗ СПИСКА КАРТОЧЕК НА СТРАНИЦУ ИГРОКА
+
+
+// // ПЕРЕХОД ИЗ СПИСКА КАРТОЧЕК НА СТРАНИЦУ ИГРОКА
 document.addEventListener('DOMContentLoaded', function() {
   // Получаем все карточки игроков
   const cardGamers = document.querySelectorAll('.cards_row_gamer');
 
+  // Получаем текущий активный раздел в боковой панели
+  const currentActiveSection = document.querySelector('.sidebar .nav-item.active');
+
   // Для каждой карточки игрока добавляем обработчик события клика
   cardGamers.forEach(function(cardGamer) {
     cardGamer.addEventListener('click', function() {
-      // Переходим на страницу игрока с id="page2.1"
-      togglePage('page2.1');
+      // Переходим на страницу игрока
+      window.location.href = `page_gamer.html`;
       
-      // Добавляем/удаляем классы активности для визуального отображения текущей страницы в навигации
-      const items = document.querySelectorAll('.nav-item');
-      items.forEach(item => {
-        if (item.id === 'item2.1') {
-          item.classList.add('active');
-        } else {
-          item.classList.remove('active');
-        }
-      });
 
       // Устанавливаем вкладку "Игроки" в фокусе после перехода на страницу игрока
       const playersTab = document.getElementById('item2');
       playersTab.classList.add('active');
     });
   });
-});
-
-// ==========================
-
-// СКРОЛЛ ДЛЯ БЛОКА ВИДЕО, ДРУЗЬЯ И МАТЧИ
-let currentIndexV = 0;
-const slidesV = document.querySelectorAll('.slidV');
-const totalSlidesV = slidesV.length;
 
-let currentIndexF = 0;
-const slidesF = document.querySelectorAll('.slidF');
-const totalSlidesF = slidesF.length;
+  // Если текущий активный раздел в боковой панели был "Игроки", активируем его снова
+  if (currentActiveSection && currentActiveSection.id === 'item2') {
+    currentActiveSection.classList.add('active');
+  }
+});
 
-function scrollSliderV(direction) {
-  currentIndexV = (currentIndexV + direction + totalSlidesV) % totalSlidesV;
-  const offset = -currentIndexV * slidesV[0].offsetWidth;
-  document.querySelector('.sliderV').style.transform = `translateX(${offset}px)`;
-}
 
-function scrollSliderF(direction) {
-  currentIndexF = (currentIndexF + direction + totalSlidesF) % totalSlidesF;
-  const offset = -currentIndexF * slidesF[0].offsetWidth;
-  document.querySelector('.sliderF').style.transform = `translateX(${offset}px)`;
-}
+// document.addEventListener('DOMContentLoaded', function() {
+//   // Получаем все карточки игроков
+//   const cardGamers = document.querySelectorAll('.cards_row_gamer');
 
-// ==========================
+//   // Для каждой карточки игрока добавляем обработчик события клика
+//   cardGamers.forEach(function(cardGamer) {
+//     cardGamer.addEventListener('click', function() {
+//       // // Переходим на страницу игрока с id="page2.1"
+//       window.location.href = `page_gamer.html`;
+      
+//       // Добавляем/удаляем классы активности для визуального отображения текущей страницы в навигации
+//       const items = document.querySelectorAll('.nav-item');
+//       items.forEach(item => {
+//         if (item.id === 'item2.1') {
+//           item.classList.add('active');
+//         } else {
+//           item.classList.remove('active');
+//         }
+//       });
+
+//       // Устанавливаем вкладку "Игроки" в фокусе после перехода на страницу игрока
+//       const playersTab = document.getElementById('item2');
+//       playersTab.classList.add('active');
+//     });
+//   });
+// });
 
-//ДИАГРАММА
-var options = {
-  series: [22, 78, 67, 83],
-  chart: {
-    height: 200,
-    type: "radialBar",
-  },
-  series: [67, 84, 97, 61],
-  plotOptions: {
-    radialBar: {
-      track: {
-        background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
-      },
-      dataLabels: {
-        total: {
-          show: true,
-          label: 'Рейтинг',
-          color: '#DDDDDD'
-        },
-        name: {
-          fontSize: '12px',
-        },
-        value: {
-          fontSize: '18px',
-          color: '#DDDDDD',
-        },
-      }
-    },
-    track: {
-          background: '#1f1f1f', // Укажите желаемый цвет контуров здесь
-    },      
-  },
-  stroke: {
-      lineCap: 'round',
-    },  
-  labels: ['Скорость', 'Точность', 'Ловкость', 'Сила']
-};
-
-var chart = new ApexCharts(document.querySelector("#chart"), options);
-  chart.render();