@@ -322,34 +319,7 @@ if (isset($_SESSION['steamid'])) {
}
}
- function showKnifeSkins() {
- const overlay = document.getElementById('skinSelectionOverlay');
- const title = document.getElementById('overlayTitle');
- const skinGrid = document.getElementById('skinGrid');
- title.textContent = 'Select Knife Skin';
-
- // Clear previous skins
- skinGrid.innerHTML = '';
-
- // Populate knife skins (all knife types)
- Object.entries(knivesData).forEach(([knifeId, knife]) => {
- if (knifeId != 0) { // Skip default knife
- const skinItem = document.createElement('div');
- skinItem.className = 'skin-item';
- skinItem.onclick = () => equipKnife(knifeId);
-
- skinItem.innerHTML = `
-
-
${knife.paint_name}
- `;
-
- skinGrid.appendChild(skinItem);
- }
- });
-
- overlay.classList.remove('hidden');
- }
function equipKnife(knifeId) {
// Create form and submit
@@ -421,37 +391,115 @@ if (isset($_SESSION['steamid'])) {
});
}
- function showWeaponSkins(weaponId) {
- const overlay = document.getElementById('skinSelectionOverlay');
- const title = document.getElementById('overlayTitle');
- const skinGrid = document.getElementById('skinGrid');
+ function toggleWeaponSkins(weaponId) {
+ const weaponItem = event.target.closest('.weapon-item');
+ const skinGrid = weaponItem.parentNode.querySelector('.weapon-skins-grid');
if (!skinsData[weaponId]) return;
- title.textContent = `Select ${weaponsData[weaponId].weapon_name.replace('weapon_', '').toUpperCase()} Skin`;
-
- // Clear previous skins
- skinGrid.innerHTML = '';
-
- // Populate skins
- Object.entries(skinsData[weaponId]).forEach(([paintId, skin]) => {
- const skinItem = document.createElement('div');
- skinItem.className = 'skin-item';
- skinItem.onclick = () => equipSkin(weaponId, paintId);
+ // Toggle the weapon item and skin grid
+ if (skinGrid.classList.contains('expanded')) {
+ // Collapse
+ skinGrid.classList.remove('expanded');
+ weaponItem.classList.remove('expanded');
+ } else {
+ // Collapse all other weapon skin grids first
+ document.querySelectorAll('.weapon-skins-grid').forEach(grid => {
+ grid.classList.remove('expanded');
+ });
+ document.querySelectorAll('.weapon-item').forEach(item => {
+ item.classList.remove('expanded');
+ });
- skinItem.innerHTML = `
-
-
${skin.paint_name}
- `;
-
- skinGrid.appendChild(skinItem);
- });
-
- overlay.classList.remove('hidden');
+ // Expand this weapon's skin grid
+ populateWeaponSkins(weaponId, skinGrid);
+ skinGrid.classList.add('expanded');
+ weaponItem.classList.add('expanded');
+ }
}
- function closeSkinSelection() {
- document.getElementById('skinSelectionOverlay').classList.add('hidden');
+ function populateWeaponSkins(weaponId, skinGrid) {
+ // Create skins container
+ const skinsContainer = document.createElement('div');
+ skinsContainer.className = 'skins-container';
+
+ // Clear previous content
+ skinGrid.innerHTML = '';
+
+ // Populate skins in 3-column grid
+ Object.entries(skinsData[weaponId]).forEach(([paintId, skin]) => {
+ const skinOption = document.createElement('div');
+ skinOption.className = 'skin-option';
+
+ // Check if this skin is currently equipped
+ if (selectedSkinsData[weaponId] && selectedSkinsData[weaponId].weapon_paint_id == paintId) {
+ skinOption.classList.add('active');
+ }
+
+ skinOption.onclick = () => equipSkin(weaponId, paintId);
+
+ skinOption.innerHTML = `
+
+
${skin.paint_name.replace(/.*\| /, '')}
+ `;
+
+ skinsContainer.appendChild(skinOption);
+ });
+
+ skinGrid.appendChild(skinsContainer);
+ }
+
+ function toggleKnifeSkins() {
+ const weaponItem = event.target.closest('.weapon-item');
+ const skinGrid = weaponItem.parentNode.querySelector('.weapon-skins-grid');
+
+ // Toggle the weapon item and skin grid
+ if (skinGrid.classList.contains('expanded')) {
+ // Collapse
+ skinGrid.classList.remove('expanded');
+ weaponItem.classList.remove('expanded');
+ } else {
+ // Collapse all other weapon skin grids first
+ document.querySelectorAll('.weapon-skins-grid').forEach(grid => {
+ grid.classList.remove('expanded');
+ });
+ document.querySelectorAll('.weapon-item').forEach(item => {
+ item.classList.remove('expanded');
+ });
+
+ // Expand knife skin grid
+ populateKnifeSkins(skinGrid);
+ skinGrid.classList.add('expanded');
+ weaponItem.classList.add('expanded');
+ }
+ }
+
+ function populateKnifeSkins(skinGrid) {
+ // Create skins container
+ const skinsContainer = document.createElement('div');
+ skinsContainer.className = 'skins-container';
+
+ // Clear previous content
+ skinGrid.innerHTML = '';
+
+ // Populate knife skins in 3-column grid
+ Object.entries(knivesData).forEach(([knifeId, knife]) => {
+ if (knifeId != 0) { // Skip default knife
+ const skinOption = document.createElement('div');
+ skinOption.className = 'skin-option';
+
+ skinOption.onclick = () => equipKnife(knifeId);
+
+ skinOption.innerHTML = `
+
+
${knife.paint_name}
+ `;
+
+ skinsContainer.appendChild(skinOption);
+ }
+ });
+
+ skinGrid.appendChild(skinsContainer);
}
function equipSkin(weaponId, paintId) {
@@ -521,14 +569,10 @@ if (isset($_SESSION['steamid'])) {
document.getElementById('wearInput').value = selectedValue;
}
- // Close overlays when clicking outside
+ // Close modals when clicking outside
document.addEventListener('click', function(e) {
- const overlay = document.getElementById('skinSelectionOverlay');
const modal = document.getElementById('customizeModal');
- if (e.target === overlay) {
- closeSkinSelection();
- }
if (e.target === modal) {
closeCustomizeModal();
}
diff --git a/website/style.css b/website/style.css
index 3a511771..137510df 100644
--- a/website/style.css
+++ b/website/style.css
@@ -124,7 +124,7 @@ body {
/* Sidebar */
.sidebar {
- width: 280px;
+ width: 320px;
background: var(--bg-secondary);
border-right: 1px solid var(--border-color);
display: flex;
@@ -725,17 +725,21 @@ body {
padding: 0.5rem 0;
}
+.weapon-container {
+ border-bottom: 1px solid var(--border-color);
+}
+
+.weapon-container:last-child {
+ border-bottom: none;
+}
+
.weapon-item {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
cursor: pointer;
transition: var(--transition);
- border-bottom: 1px solid var(--border-color);
-}
-
-.weapon-item:last-child {
- border-bottom: none;
+ position: relative;
}
.weapon-item:hover {
@@ -743,18 +747,96 @@ body {
padding-left: 1.25rem;
}
+.weapon-item.expanded {
+ background: var(--bg-hover);
+ border-bottom: 1px solid var(--border-color);
+}
+
.weapon-icon {
- width: 32px;
- height: 20px;
+ width: 48px;
+ height: 32px;
object-fit: contain;
margin-right: 0.75rem;
background: linear-gradient(145deg, #333, #222);
border-radius: 4px;
- padding: 2px;
+ padding: 4px;
}
.weapon-name {
color: var(--text-primary);
font-size: 0.85rem;
font-weight: 500;
+ flex: 1;
+}
+
+.weapon-arrow {
+ color: var(--text-muted);
+ font-size: 0.7rem;
+ transition: var(--transition);
+ margin-left: 0.5rem;
+}
+
+.weapon-item.expanded .weapon-arrow {
+ transform: rotate(90deg);
+ color: var(--accent-blue);
+}
+
+.weapon-skins-grid {
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.3s ease;
+ background: var(--bg-primary);
+ padding: 0;
+}
+
+.weapon-skins-grid.expanded {
+ max-height: 400px;
+ padding: 1rem;
+}
+
+.skins-container {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 0.5rem;
+}
+
+.skin-option {
+ background: var(--bg-secondary);
+ border-radius: var(--border-radius);
+ border: 1px solid var(--border-color);
+ overflow: hidden;
+ cursor: pointer;
+ transition: var(--transition);
+ aspect-ratio: 16/10;
+}
+
+.skin-option:hover {
+ border-color: var(--accent-blue);
+ transform: scale(1.02);
+}
+
+.skin-option.active {
+ border-color: var(--accent-green);
+ box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
+}
+
+.skin-option img {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ background: linear-gradient(145deg, #333, #222);
+ padding: 4px;
+ box-sizing: border-box;
+}
+
+.skin-option-name {
+ padding: 0.25rem;
+ font-size: 0.7rem;
+ color: var(--text-secondary);
+ text-align: center;
+ background: var(--bg-tertiary);
+ border-top: 1px solid var(--border-color);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
\ No newline at end of file
![<?php echo $knife['paint_name']; ?>](<?php echo $knife['image_url']; ?>)
-
- 
+ Knives
+ ▶
+ ![<?php echo $weapons[$weaponDefindex]['paint_name']; ?>](<?php echo $weapons[$weaponDefindex]['image_url']; ?>)
-
+