GarpBot/cs2-WeaponPaints
1
0
Fork 0
mirror of https://github.com/Nereziel/cs2-WeaponPaints.git synced 2026-02-18 02:41:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor weapon skin selection in index.php to use toggle functionality for better user experience; update CSS for improved layout and transitions in weapon display and skin options.

Browse Source
This commit is contained in:
Bram Suurd
2025-06-29 23:05:29 +02:00
parent dbc8f2ebf8
commit 4ab85d09e2
2 changed files with 215 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

204
website/index.php
View File

@@ -135,20 +135,28 @@ if (isset($_SESSION['steamid'])) {
<div class="weapon-list" data-category="<?php echo strtolower($categoryName); ?>">
<?php if ($categoryName == 'Knives'): ?>
<?php foreach ($knifes as $knifeKey => $knife): ?>
<?php if ($knifeKey != 0): ?>
<div class="weapon-item" onclick="showKnifeSkins()">
<img src="<?php echo $knife['image_url']; ?>" alt="<?php echo $knife['paint_name']; ?>" class="weapon-icon">
<span class="weapon-name"><?php echo $knife['paint_name']; ?></span>
</div>
<?php endif; ?>
<?php endforeach; ?>
<div class="weapon-container">
<div class="weapon-item" onclick="toggleKnifeSkins()">
<img src="<?php echo $knifes[0]['image_url']; ?>" alt="Knives" class="weapon-icon">
<span class="weapon-name">Knives</span>
<span class="weapon-arrow">▶</span>
</div>
<div class="weapon-skins-grid" data-weapon="knives">
<!-- Knife skins will be populated by JavaScript -->
</div>
</div>
<?php else: ?>
<?php foreach ($categoryWeapons as $weaponDefindex): ?>
<?php if (isset($weapons[$weaponDefindex])): ?>
<div class="weapon-item" onclick="showWeaponSkins(<?php echo $weaponDefindex; ?>)">
<img src="<?php echo $weapons[$weaponDefindex]['image_url']; ?>" alt="<?php echo $weapons[$weaponDefindex]['paint_name']; ?>" class="weapon-icon">
<span class="weapon-name"><?php echo ucfirst(strtolower(str_replace('weapon_', '', $weapons[$weaponDefindex]['weapon_name']))); ?></span>
<div class="weapon-container">
<div class="weapon-item" onclick="toggleWeaponSkins(<?php echo $weaponDefindex; ?>)">
<img src="<?php echo $weapons[$weaponDefindex]['image_url']; ?>" alt="<?php echo $weapons[$weaponDefindex]['paint_name']; ?>" class="weapon-icon">
<span class="weapon-name"><?php echo ucfirst(strtolower(str_replace('weapon_', '', $weapons[$weaponDefindex]['weapon_name']))); ?></span>
<span class="weapon-arrow">▶</span>
</div>
<div class="weapon-skins-grid" data-weapon="<?php echo $weaponDefindex; ?>">
<!-- Skins will be populated by JavaScript -->
</div>
</div>
<?php endif; ?>
<?php endforeach; ?>
@@ -228,18 +236,7 @@ if (isset($_SESSION['steamid'])) {
</div>
</div>
<!-- Skin Selection Overlay -->
<div id="skinSelectionOverlay" class="overlay hidden">
<div class="overlay-content">
<div class="overlay-header">
<h3 id="overlayTitle">Select Skin</h3>
<button class="close-btn" onclick="closeSkinSelection()">&times;</button>
</div>
<div class="skin-grid" id="skinGrid">
<!-- Skins will be populated here by JavaScript -->
</div>
</div>
</div>
<!-- Customize Modal -->
<div id="customizeModal" class="modal hidden">
@@ -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 = `
<img src="${knife.image_url}" alt="${knife.paint_name}" class="skin-image">
<div class="skin-name">${knife.paint_name}</div>
`;
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 = `
<img src="${skin.image_url}" alt="${skin.paint_name}" class="skin-image">
<div class="skin-name">${skin.paint_name}</div>
`;
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 = `
<img src="${skin.image_url}" alt="${skin.paint_name}">
<div class="skin-option-name">${skin.paint_name.replace(/.*\| /, '')}</div>
`;
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 = `
<img src="${knife.image_url}" alt="${knife.paint_name}">
<div class="skin-option-name">${knife.paint_name}</div>
`;
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();
}

100
website/style.css
View File

@@ -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;
}