Refactor knife skin selection in index.php to support multiple knife types and improve user interaction; update CSS to enhance layout and scrolling behavior for weapon lists and skins.

website/index.php

@@ -9,6 +9,9 @@ if (isset($_SESSION['steamid'])) {
 
 	$steamid = $_SESSION['steamid'];
 	
+	// Fetch Steam user information
+	require_once 'steamauth/userInfo.php';
+
 	$weapons = UtilsClass::getWeaponsFromArray();
 	$skins = UtilsClass::skinsFromJson();
     $querySelected = $db->select("
@@ -135,16 +138,20 @@ if (isset($_SESSION['steamid'])) {
 								
 								<div class="weapon-list" data-category="<?php echo strtolower($categoryName); ?>">
 									<?php if ($categoryName == 'Knives'): ?>
-										<div class="weapon-container">
+										<?php foreach ($knifes as $knifeKey => $knife): ?>
-											<div class="weapon-item" onclick="toggleKnifeSkins()">
+											<?php if ($knifeKey != 0): ?>
-												<img src="<?php echo $knifes[0]['image_url']; ?>" alt="Knives" class="weapon-icon">
+												<div class="weapon-container">
-												<span class="weapon-name">Knives</span>
+													<div class="weapon-item" onclick="toggleKnifeSkins(<?php echo $knifeKey; ?>)">
-												<span class="weapon-arrow">▶</span>
+														<img src="<?php echo $knife['image_url']; ?>" alt="<?php echo $knife['paint_name']; ?>" class="weapon-icon">
-											</div>
+														<span class="weapon-name"><?php echo $knife['paint_name']; ?></span>
-											<div class="weapon-skins-grid" data-weapon="knives">
+														<span class="weapon-arrow">▶</span>
-												<!-- Knife skins will be populated by JavaScript -->
+													</div>
-											</div>
+													<div class="weapon-skins-grid" data-weapon="knife-<?php echo $knifeKey; ?>">
-										</div>
+														<!-- Knife skins will be populated by JavaScript -->
+													</div>
+												</div>
+											<?php endif; ?>
+										<?php endforeach; ?>
 									<?php else: ?>
 										<?php foreach ($categoryWeapons as $weaponDefindex): ?>
 											<?php if (isset($weapons[$weaponDefindex])): ?>
@@ -449,7 +456,7 @@ if (isset($_SESSION['steamid'])) {
 				skinGrid.appendChild(skinsContainer);
 			}
 
-			function toggleKnifeSkins() {
+			function toggleKnifeSkins(knifeType) {
 				const weaponItem = event.target.closest('.weapon-item');
 				const skinGrid = weaponItem.parentNode.querySelector('.weapon-skins-grid');
 
@@ -467,14 +474,14 @@ if (isset($_SESSION['steamid'])) {
 						item.classList.remove('expanded');
 					});
 					
-					// Expand knife skin grid
+					// Expand this knife type's skin grid
-					populateKnifeSkins(skinGrid);
+					populateKnifeTypeSkins(knifeType, skinGrid);
 					skinGrid.classList.add('expanded');
 					weaponItem.classList.add('expanded');
 				}
 			}
 
-			function populateKnifeSkins(skinGrid) {
+			function populateKnifeTypeSkins(knifeType, skinGrid) {
 				// Create skins container
 				const skinsContainer = document.createElement('div');
 				skinsContainer.className = 'skins-container';
@@ -482,22 +489,44 @@ if (isset($_SESSION['steamid'])) {
 				// Clear previous content
 				skinGrid.innerHTML = '';
 				
-				// Populate knife skins in 3-column grid
+				// Check if this knife type has skins in the skins data
-				Object.entries(knivesData).forEach(([knifeId, knife]) => {
+				if (skinsData[knifeType]) {
-					if (knifeId != 0) { // Skip default knife
+					// This knife type has multiple skins
+					Object.entries(skinsData[knifeType]).forEach(([paintId, skin]) => {
 						const skinOption = document.createElement('div');
 						skinOption.className = 'skin-option';
 						
-						skinOption.onclick = () => equipKnife(knifeId);
+						// Check if this skin is currently equipped
+						if (selectedSkinsData[knifeType] && selectedSkinsData[knifeType].weapon_paint_id == paintId) {
+							skinOption.classList.add('active');
+						}
+						
+						skinOption.onclick = () => equipSkin(knifeType, paintId);
+						
+						skinOption.innerHTML = `
+							<img src="${skin.image_url}" alt="${skin.paint_name}">
+							<div class="skin-option-name">${skin.paint_name.replace(/.*\| /, '')}</div>
+						`;
+						
+						skinsContainer.appendChild(skinOption);
+					});
+				} else {
+					// This knife type has only one variant (the knife itself)
+					const knife = knivesData[knifeType];
+					if (knife) {
+						const skinOption = document.createElement('div');
+						skinOption.className = 'skin-option';
+						
+						skinOption.onclick = () => equipKnife(knifeType);
 						
 						skinOption.innerHTML = `
 							<img src="${knife.image_url}" alt="${knife.paint_name}">
-							<div class="skin-option-name">${knife.paint_name}</div>
+							<div class="skin-option-name">Default</div>
 						`;
 						
 						skinsContainer.appendChild(skinOption);
 					}
-				});
+				}
 				
 				skinGrid.appendChild(skinsContainer);
 			}

website/style.css

@@ -130,6 +130,8 @@ body {
 	display: flex;
 	flex-direction: column;
 	position: relative;
+	max-height: 100vh;
+	overflow: hidden;
 }
 
 .sidebar-header {
@@ -172,6 +174,8 @@ body {
 .sidebar-nav {
 	flex: 1;
 	padding: 1rem 0;
+	overflow-y: auto;
+	overflow-x: hidden;
 }
 
 .nav-item {
@@ -721,7 +725,7 @@ body {
 }
 
 .weapon-list.expanded {
-	max-height: 500px;
+	max-height: 300px;
 	padding: 0.5rem 0;
 	overflow-y: auto;
 	overflow-x: hidden;
@@ -792,7 +796,7 @@ body {
 }
 
 .weapon-skins-grid.expanded {
-	max-height: 400px;
+	max-height: 250px;
 	padding: 1rem;
 	overflow-y: auto;
 	overflow-x: hidden;