mirror of
https://github.com/Nereziel/cs2-WeaponPaints.git
synced 2026-02-18 02:41:54 +00:00
Refactor index.php to enhance UI and functionality; added weapon categories, improved layout, and implemented skin selection modal.
This commit is contained in:
Bram Suurd
@@ -29,8 +29,8 @@ if (isset($_SESSION['steamid'])) {
|
||||
$db->query("INSERT INTO `wp_player_knife` (`steamid`, `knife`, `weapon_team`) VALUES(:steamid, :knife, 3) ON DUPLICATE KEY UPDATE `knife` = :knife", ["steamid" => $steamid, "knife" => $knifes[$ex[1]]['weapon_name']]);
|
||||
} else {
|
||||
if (array_key_exists($ex[1], $skins[$ex[0]]) && isset($_POST['wear']) && $_POST['wear'] >= 0.00 && $_POST['wear'] <= 1.00 && isset($_POST['seed'])) {
|
||||
$wear = floatval($_POST['wear']); // wear
|
||||
$seed = intval($_POST['seed']); // seed
|
||||
$wear = floatval($_POST['wear']);
|
||||
$seed = intval($_POST['seed']);
|
||||
if (array_key_exists($ex[0], $selectedSkins)) {
|
||||
$db->query("UPDATE wp_player_skins SET weapon_paint_id = :weapon_paint_id, weapon_wear = :weapon_wear, weapon_seed = :weapon_seed WHERE steamid = :steamid AND weapon_defindex = :weapon_defindex", ["steamid" => $steamid, "weapon_defindex" => $ex[0], "weapon_paint_id" => $ex[1], "weapon_wear" => $wear, "weapon_seed" => $seed]);
|
||||
} else {
|
||||
@@ -41,228 +41,470 @@ if (isset($_SESSION['steamid'])) {
|
||||
}
|
||||
header("Location: {$_SERVER['PHP_SELF']}");
|
||||
}
|
||||
|
||||
// Organize weapons by categories
|
||||
$weaponCategories = [
|
||||
'Knives' => [],
|
||||
'Gloves' => [],
|
||||
'Rifles' => [7, 8, 10, 13, 16, 60, 39, 40, 38],
|
||||
'Pistols' => [1, 2, 3, 4, 30, 32, 36, 61, 63, 64],
|
||||
'SMGs' => [17, 19, 24, 26, 33, 34],
|
||||
'Shotguns' => [25, 27, 29, 35],
|
||||
'Snipers' => [9, 11, 38],
|
||||
'Machine Guns' => [14, 28],
|
||||
'Grenades' => [43, 44, 45, 46, 47, 48]
|
||||
];
|
||||
|
||||
// Add knives to categories
|
||||
foreach ($knifes as $knifeKey => $knife) {
|
||||
if ($knifeKey != 0) {
|
||||
$weaponCategories['Knives'][$knifeKey] = $knife;
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en"<?php if(WEB_STYLE_DARK) echo 'data-bs-theme="dark"'?>>
|
||||
<html lang="en" data-theme="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
|
||||
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<title>CS2 Simple Weapon Paints</title>
|
||||
<title>CS2 Weapon Paints</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<?php
|
||||
if (!isset($_SESSION['steamid'])) {
|
||||
echo "<div class='bg-primary'><h2>To choose weapon paints loadout, you need to ";
|
||||
loginbutton("rectangle");
|
||||
echo "</h2></div>";
|
||||
} else {
|
||||
echo "<div class='bg-primary'><h2>Your current weapon skin loadout <a class='btn btn-danger' href='{$_SERVER['PHP_SELF']}?logout'>Logout</a></h2> </div>";
|
||||
echo "<div class='card-group mt-2'>";
|
||||
?>
|
||||
|
||||
<div class="col-sm-2">
|
||||
<div class="card text-center mb-3 border border-primary">
|
||||
<div class="card-body">
|
||||
<?php
|
||||
$actualKnife = $knifes[0];
|
||||
if ($selectedKnife != null)
|
||||
{
|
||||
foreach ($knifes as $knife) {
|
||||
if ($selectedKnife[0]['knife'] == $knife['weapon_name']) {
|
||||
$actualKnife = $knife;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
echo "<div class='card-header'>";
|
||||
echo "<h6 class='card-title item-name'>Knife type</h6>";
|
||||
echo "<h5 class='card-title item-name'>{$actualKnife["paint_name"]}</h5>";
|
||||
echo "</div>";
|
||||
echo "<img src='{$actualKnife["image_url"]}' class='skin-image'>";
|
||||
?>
|
||||
<?php if (!isset($_SESSION['steamid'])): ?>
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>CS2 Weapon Paints</h1>
|
||||
<p>Connect your Steam account to customize your weapon loadout</p>
|
||||
<?php loginbutton("rectangle"); ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="app-container">
|
||||
<!-- Header -->
|
||||
<header class="app-header">
|
||||
<div class="header-left">
|
||||
<h1>CS2 Weapon Paints</h1>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<form action="" method="POST">
|
||||
<select name="forma" class="form-control select" onchange="this.form.submit()" class="SelectWeapon">
|
||||
<option disabled>Select knife</option>
|
||||
<div class="header-right">
|
||||
<span class="user-info">Welcome, <?php echo $_SESSION['steam_personaname'] ?? 'Player'; ?></span>
|
||||
<a href="<?php echo $_SERVER['PHP_SELF']; ?>?logout" class="logout-btn">Logout</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="app-main">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h3>Weapons</h3>
|
||||
<div class="search-container">
|
||||
<input type="text" id="weaponSearch" placeholder="Search weapons..." onkeyup="searchWeapons(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
<nav class="sidebar-nav">
|
||||
<?php foreach ($weaponCategories as $categoryName => $categoryWeapons): ?>
|
||||
<?php
|
||||
foreach ($knifes as $knifeKey => $knife) {
|
||||
if ($selectedKnife[0]['knife'] == $knife['weapon_name'])
|
||||
echo "<option selected value=\"knife-{$knifeKey}\">{$knife['paint_name']}</option>";
|
||||
else
|
||||
echo "<option value=\"knife-{$knifeKey}\">{$knife['paint_name']}</option>";
|
||||
// Count weapons in this category
|
||||
$weaponCount = 0;
|
||||
if ($categoryName == 'Knives') {
|
||||
$weaponCount = count($knifes) - 1; // Exclude default knife
|
||||
} else {
|
||||
foreach ($categoryWeapons as $weaponDefindex) {
|
||||
if (isset($weapons[$weaponDefindex])) {
|
||||
$weaponCount++;
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="nav-item" data-category="<?php echo strtolower($categoryName); ?>" onclick="toggleCategory('<?php echo strtolower($categoryName); ?>')">
|
||||
<span class="nav-icon">
|
||||
<?php echo $categoryName == 'Knives' ? '🗡️' : ($categoryName == 'Gloves' ? '🧤' : ($categoryName == 'Rifles' ? '🔫' : ($categoryName == 'Pistols' ? '🔫' : ($categoryName == 'SMGs' ? '🔫' : ($categoryName == 'Shotguns' ? '🔫' : ($categoryName == 'Snipers' ? '🎯' : ($categoryName == 'Machine Guns' ? '⚡' : '💣'))))))); ?>
|
||||
</span>
|
||||
<div class="nav-content">
|
||||
<span class="nav-text"><?php echo $categoryName; ?></span>
|
||||
<span class="nav-count"><?php echo $weaponCount; ?></span>
|
||||
</div>
|
||||
<span class="nav-arrow">▶</span>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="main-content">
|
||||
<div class="loadout-header">
|
||||
<h2>Current Loadout</h2>
|
||||
<p>Hover over items to customize</p>
|
||||
</div>
|
||||
|
||||
<div class="loadout-grid">
|
||||
<!-- Knife -->
|
||||
<div class="loadout-item" data-weapon-type="knife">
|
||||
<?php
|
||||
$actualKnife = $knifes[0];
|
||||
if ($selectedKnife != null) {
|
||||
foreach ($knifes as $knife) {
|
||||
if ($selectedKnife[0]['knife'] == $knife['weapon_name']) {
|
||||
$actualKnife = $knife;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<div class="item-image-container">
|
||||
<img src="<?php echo $actualKnife['image_url']; ?>" alt="<?php echo $actualKnife['paint_name']; ?>" class="item-image">
|
||||
<div class="item-overlay">
|
||||
<button class="customize-btn" onclick="openCustomizeModal('knife', 0)">Customize</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="item-category">Knife</div>
|
||||
<div class="item-name"><?php echo $actualKnife['paint_name']; ?></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Weapons -->
|
||||
<?php foreach ($weapons as $defindex => $weapon): ?>
|
||||
<div class="loadout-item" data-weapon-id="<?php echo $defindex; ?>" <?php echo array_key_exists($defindex, $selectedSkins) ? 'data-equipped="true"' : ''; ?>>
|
||||
<div class="item-image-container">
|
||||
<?php if (array_key_exists($defindex, $selectedSkins)): ?>
|
||||
<img src="<?php echo $skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]['image_url']; ?>"
|
||||
alt="<?php echo $skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]['paint_name']; ?>"
|
||||
class="item-image">
|
||||
<div class="item-overlay">
|
||||
<button class="customize-btn" onclick="openCustomizeModal('weapon', <?php echo $defindex; ?>)">Customize</button>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<img src="<?php echo $weapon['image_url']; ?>" alt="<?php echo $weapon['paint_name']; ?>" class="item-image">
|
||||
<div class="item-overlay">
|
||||
<button class="equip-btn" onclick="showWeaponSkins(<?php echo $defindex; ?>)">Equip Skin</button>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<div class="item-category"><?php echo ucfirst(strtolower(str_replace('weapon_', '', $weapon['weapon_name']))); ?></div>
|
||||
<div class="item-name">
|
||||
<?php echo array_key_exists($defindex, $selectedSkins) ?
|
||||
$skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]['paint_name'] :
|
||||
$weapon['paint_name']; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</main>
|
||||
</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()">×</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">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h3 id="modalTitle">Customize Weapon</h3>
|
||||
<button class="close-btn" onclick="closeCustomizeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="customizeForm" method="POST">
|
||||
<input type="hidden" id="customizeWeaponId" name="forma" value="">
|
||||
|
||||
<div class="customize-grid">
|
||||
<div class="customize-section">
|
||||
<label for="wearSelect">Wear Condition</label>
|
||||
<select id="wearSelect" name="wearSelect" onchange="updateWearValue(this.value)">
|
||||
<option value="0.00">Factory New</option>
|
||||
<option value="0.07">Minimal Wear</option>
|
||||
<option value="0.15">Field-Tested</option>
|
||||
<option value="0.38">Well-Worn</option>
|
||||
<option value="0.45">Battle-Scarred</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="customize-section">
|
||||
<label for="wearInput">Float Value</label>
|
||||
<input type="number" id="wearInput" name="wear" min="0" max="1" step="0.001" value="0.00">
|
||||
</div>
|
||||
|
||||
<div class="customize-section">
|
||||
<label for="seedInput">Pattern Seed</label>
|
||||
<input type="number" id="seedInput" name="seed" min="0" max="1000" value="0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" onclick="closeCustomizeModal()">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary">Apply Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php
|
||||
foreach ($weapons as $defindex => $default) { ?>
|
||||
<div class="col-sm-2">
|
||||
<div class="card text-center mb-3">
|
||||
<div class="card-body">
|
||||
<?php
|
||||
if (array_key_exists($defindex, $selectedSkins)) {
|
||||
echo "<div class='card-header'>";
|
||||
echo "<h5 class='card-title item-name'>{$skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]["paint_name"]}</h5>";
|
||||
echo "</div>";
|
||||
echo "<img src='{$skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]['image_url']}' class='skin-image'>";
|
||||
} else {
|
||||
echo "<div class='card-header'>";
|
||||
echo "<h5 class='card-title item-name'>{$default["paint_name"]}</h5>";
|
||||
echo "</div>";
|
||||
echo "<img src='{$default["image_url"]}' class='skin-image'>";
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<form action="" method="POST">
|
||||
<select name="forma" class="form-control select" onchange="this.form.submit()" class="SelectWeapon">
|
||||
<option disabled>Select skin</option>
|
||||
<?php
|
||||
foreach ($skins[$defindex] as $paintKey => $paint) {
|
||||
if (array_key_exists($defindex, $selectedSkins) && $selectedSkins[$defindex]['weapon_paint_id'] == $paintKey)
|
||||
echo "<option selected value=\"{$defindex}-{$paintKey}\">{$paint['paint_name']}</option>";
|
||||
else
|
||||
echo "<option value=\"{$defindex}-{$paintKey}\">{$paint['paint_name']}</option>";
|
||||
}
|
||||
?>
|
||||
</select>
|
||||
<br></br>
|
||||
<?php
|
||||
$selectedSkinInfo = isset($selectedSkins[$defindex]) ? $selectedSkins[$defindex] : null;
|
||||
$steamid = $_SESSION['steamid'];
|
||||
<script>
|
||||
// Store weapon and skin data for JavaScript
|
||||
const weaponsData = <?php echo json_encode($weapons); ?>;
|
||||
const skinsData = <?php echo json_encode($skins); ?>;
|
||||
const selectedSkinsData = <?php echo json_encode($selectedSkins); ?>;
|
||||
const knivesData = <?php echo json_encode($knifes); ?>;
|
||||
const weaponCategories = <?php echo json_encode($weaponCategories); ?>;
|
||||
|
||||
if ($selectedSkinInfo) :
|
||||
?>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#weaponModal<?php echo $defindex ?>">
|
||||
Settings
|
||||
</button>
|
||||
<?php else : ?>
|
||||
<button type="button" class="btn btn-primary" onclick="showSkinSelectionAlert()">
|
||||
Settings
|
||||
</button>
|
||||
<script>
|
||||
function showSkinSelectionAlert() {
|
||||
alert("You need to select a skin first.");
|
||||
}
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
let currentFilter = 'all';
|
||||
|
||||
</div>
|
||||
function toggleCategory(category) {
|
||||
const navItem = document.querySelector(`[data-category="${category}"]`);
|
||||
const arrow = navItem.querySelector('.nav-arrow');
|
||||
|
||||
<?php
|
||||
// wear value
|
||||
$selectedSkinInfo = isset($selectedSkins[$defindex]['weapon_paint_id']) ? $selectedSkins[$defindex] : null;
|
||||
$queryWear = $selectedSkins[$defindex]['weapon_wear'] ?? 1.0;
|
||||
$initialWearValue = isset($selectedSkinInfo['weapon_wear']) ? $selectedSkinInfo['weapon_wear'] : (isset($queryWear[0]['weapon_wear']) ? $queryWear[0] : 0.0);
|
||||
|
||||
// seed value
|
||||
$querySeed = $selectedSkins[$defindex]['weapon_seed'] ?? 0;
|
||||
$initialSeedValue = isset($selectedSkinInfo['weapon_seed']) ? $selectedSkinInfo['weapon_seed'] : 0;
|
||||
?>
|
||||
|
||||
|
||||
<div class="modal fade" id="weaponModal<?php echo $defindex ?>" tabindex="-1" role="dialog" aria-labelledby="weaponModalLabel<?php echo $defindex ?>" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class='card-title item-name'>
|
||||
<?php
|
||||
if (array_key_exists($defindex, $selectedSkins)) {
|
||||
echo "{$skins[$defindex][$selectedSkins[$defindex]['weapon_paint_id']]["paint_name"]} Settings";
|
||||
} else {
|
||||
echo "{$default["paint_name"]} Settings";
|
||||
}
|
||||
?>
|
||||
</h5>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="form-group">
|
||||
<select class="form-select" id="wearSelect<?php echo $defindex ?>" name="wearSelect" onchange="updateWearValue<?php echo $defindex ?>(this.value)">
|
||||
<option disabled>Select Wear</option>
|
||||
<option value="0.00" <?php echo ($initialWearValue == 0.00) ? 'selected' : ''; ?>>Factory New</option>
|
||||
<option value="0.07" <?php echo ($initialWearValue == 0.07) ? 'selected' : ''; ?>>Minimal Wear</option>
|
||||
<option value="0.15" <?php echo ($initialWearValue == 0.15) ? 'selected' : ''; ?>>Field-Tested</option>
|
||||
<option value="0.38" <?php echo ($initialWearValue == 0.38) ? 'selected' : ''; ?>>Well-Worn</option>
|
||||
<option value="0.45" <?php echo ($initialWearValue == 0.45) ? 'selected' : ''; ?>>Battle-Scarred</option>
|
||||
</select>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="wear">Wear:</label>
|
||||
<input type="text" value="<?php echo $initialWearValue; ?>" class="form-control" id="wear<?php echo $defindex ?>" name="wear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<label for="seed">Seed:</label>
|
||||
<input type="text" value="<?php echo $initialSeedValue; ?>" class="form-control" id="seed<?php echo $defindex ?>" name="seed" oninput="validateSeed(this)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="submit" class="btn btn-danger">Use</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
// wear
|
||||
function updateWearValue<?php echo $defindex ?>(selectedValue) {
|
||||
var wearInputElement = document.getElementById("wear<?php echo $defindex ?>");
|
||||
wearInputElement.value = selectedValue;
|
||||
// Check if already active
|
||||
if (navItem.classList.contains('active')) {
|
||||
// Deactivate and show all
|
||||
arrow.textContent = '▶';
|
||||
hideCategoryWeapons(category);
|
||||
showAllWeapons();
|
||||
currentFilter = 'all';
|
||||
} else {
|
||||
// Activate and filter
|
||||
arrow.textContent = '▼';
|
||||
showCategoryWeapons(category);
|
||||
filterWeaponsByCategory(category);
|
||||
currentFilter = category;
|
||||
}
|
||||
}
|
||||
|
||||
function validateWear(inputElement) {
|
||||
inputElement.value = inputElement.value.replace(/[^0-9]/g, '');
|
||||
}
|
||||
// seed
|
||||
function validateSeed(input) {
|
||||
// Check entered value
|
||||
var inputValue = input.value.replace(/[^0-9]/g, ''); // Just get the numbers
|
||||
function showCategoryWeapons(category) {
|
||||
// Clear all active states
|
||||
document.querySelectorAll('.nav-item').forEach(item => {
|
||||
item.classList.remove('active');
|
||||
item.querySelector('.nav-arrow').textContent = '▶';
|
||||
});
|
||||
|
||||
if (inputValue === "") {
|
||||
input.value = 0; // Set to 0 if empty or no numbers
|
||||
// Set active state
|
||||
const navItem = document.querySelector(`[data-category="${category}"]`);
|
||||
navItem.classList.add('active');
|
||||
navItem.querySelector('.nav-arrow').textContent = '▼';
|
||||
}
|
||||
|
||||
function hideCategoryWeapons(category) {
|
||||
document.querySelector(`[data-category="${category}"]`).classList.remove('active');
|
||||
}
|
||||
|
||||
function filterWeaponsByCategory(category) {
|
||||
const loadoutItems = document.querySelectorAll('.loadout-item');
|
||||
|
||||
loadoutItems.forEach(item => {
|
||||
const weaponId = item.dataset.weaponId;
|
||||
const weaponType = item.dataset.weaponType;
|
||||
let shouldShow = false;
|
||||
|
||||
if (category === 'knives' && weaponType === 'knife') {
|
||||
shouldShow = true;
|
||||
} else if (category !== 'knives' && weaponId && weaponCategories[category.charAt(0).toUpperCase() + category.slice(1)]) {
|
||||
shouldShow = weaponCategories[category.charAt(0).toUpperCase() + category.slice(1)].includes(parseInt(weaponId));
|
||||
}
|
||||
|
||||
if (shouldShow) {
|
||||
item.style.display = 'block';
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'scale(1)';
|
||||
} else {
|
||||
var numericValue = parseInt(inputValue);
|
||||
numericValue = Math.min(1000, Math.max(1, numericValue)); // Interval control
|
||||
item.style.opacity = '0.3';
|
||||
item.style.transform = 'scale(0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
input.value = numericValue;
|
||||
// Update header
|
||||
const loadoutHeader = document.querySelector('.loadout-header h2');
|
||||
loadoutHeader.textContent = `${category.charAt(0).toUpperCase() + category.slice(1)} Loadout`;
|
||||
}
|
||||
|
||||
function showAllWeapons() {
|
||||
const loadoutItems = document.querySelectorAll('.loadout-item');
|
||||
loadoutItems.forEach(item => {
|
||||
item.style.display = 'block';
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'scale(1)';
|
||||
});
|
||||
|
||||
// Reset header
|
||||
const loadoutHeader = document.querySelector('.loadout-header h2');
|
||||
loadoutHeader.textContent = 'Current Loadout';
|
||||
}
|
||||
|
||||
function searchWeapons(query) {
|
||||
if (!query.trim()) {
|
||||
// If search is empty, apply current filter or show all
|
||||
if (currentFilter === 'all') {
|
||||
showAllWeapons();
|
||||
} else {
|
||||
filterWeaponsByCategory(currentFilter);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const loadoutItems = document.querySelectorAll('.loadout-item');
|
||||
const searchTerm = query.toLowerCase();
|
||||
|
||||
loadoutItems.forEach(item => {
|
||||
const weaponId = item.dataset.weaponId;
|
||||
const weaponType = item.dataset.weaponType;
|
||||
let weaponName = '';
|
||||
let skinName = '';
|
||||
|
||||
if (weaponType === 'knife') {
|
||||
weaponName = 'knife';
|
||||
skinName = item.querySelector('.item-name').textContent.toLowerCase();
|
||||
} else if (weaponId && weaponsData[weaponId]) {
|
||||
weaponName = weaponsData[weaponId].weapon_name.replace('weapon_', '').toLowerCase();
|
||||
skinName = item.querySelector('.item-name').textContent.toLowerCase();
|
||||
}
|
||||
|
||||
const matches = weaponName.includes(searchTerm) || skinName.includes(searchTerm);
|
||||
|
||||
if (matches) {
|
||||
item.style.display = 'block';
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'scale(1)';
|
||||
} else {
|
||||
item.style.opacity = '0.3';
|
||||
item.style.transform = 'scale(0.95)';
|
||||
}
|
||||
});
|
||||
|
||||
// Update header
|
||||
const loadoutHeader = document.querySelector('.loadout-header h2');
|
||||
loadoutHeader.textContent = `Search Results: "${query}"`;
|
||||
}
|
||||
|
||||
function showWeaponSkins(weaponId) {
|
||||
const overlay = document.getElementById('skinSelectionOverlay');
|
||||
const title = document.getElementById('overlayTitle');
|
||||
const skinGrid = document.getElementById('skinGrid');
|
||||
|
||||
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);
|
||||
|
||||
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');
|
||||
}
|
||||
|
||||
function closeSkinSelection() {
|
||||
document.getElementById('skinSelectionOverlay').classList.add('hidden');
|
||||
}
|
||||
|
||||
function equipSkin(weaponId, paintId) {
|
||||
// Create form and submit
|
||||
const form = document.createElement('form');
|
||||
form.method = 'POST';
|
||||
form.style.display = 'none';
|
||||
|
||||
const formaInput = document.createElement('input');
|
||||
formaInput.name = 'forma';
|
||||
formaInput.value = `${weaponId}-${paintId}`;
|
||||
|
||||
const wearInput = document.createElement('input');
|
||||
wearInput.name = 'wear';
|
||||
wearInput.value = '0.00';
|
||||
|
||||
const seedInput = document.createElement('input');
|
||||
seedInput.name = 'seed';
|
||||
seedInput.value = '0';
|
||||
|
||||
form.appendChild(formaInput);
|
||||
form.appendChild(wearInput);
|
||||
form.appendChild(seedInput);
|
||||
document.body.appendChild(form);
|
||||
form.submit();
|
||||
}
|
||||
|
||||
function openCustomizeModal(type, weaponId) {
|
||||
const modal = document.getElementById('customizeModal');
|
||||
const title = document.getElementById('modalTitle');
|
||||
const form = document.getElementById('customizeForm');
|
||||
const weaponIdInput = document.getElementById('customizeWeaponId');
|
||||
const wearSelect = document.getElementById('wearSelect');
|
||||
const wearInput = document.getElementById('wearInput');
|
||||
const seedInput = document.getElementById('seedInput');
|
||||
|
||||
if (type === 'knife') {
|
||||
title.textContent = 'Customize Knife';
|
||||
weaponIdInput.value = 'knife-0';
|
||||
} else {
|
||||
title.textContent = `Customize ${weaponsData[weaponId].weapon_name.replace('weapon_', '').toUpperCase()}`;
|
||||
weaponIdInput.value = `${weaponId}-${selectedSkinsData[weaponId]?.weapon_paint_id || 0}`;
|
||||
|
||||
// Set current values
|
||||
if (selectedSkinsData[weaponId]) {
|
||||
wearInput.value = selectedSkinsData[weaponId].weapon_wear;
|
||||
seedInput.value = selectedSkinsData[weaponId].weapon_seed;
|
||||
|
||||
// Set wear select based on value
|
||||
const wear = parseFloat(selectedSkinsData[weaponId].weapon_wear);
|
||||
if (wear <= 0.00) wearSelect.value = "0.00";
|
||||
else if (wear <= 0.07) wearSelect.value = "0.07";
|
||||
else if (wear <= 0.15) wearSelect.value = "0.15";
|
||||
else if (wear <= 0.38) wearSelect.value = "0.38";
|
||||
else wearSelect.value = "0.45";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<?php } ?>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
|
||||
<div class="col-md-4 d-flex align-items-center">
|
||||
<span class="mb-3 mb-md-0 text-body-secondary">© 2023 <a href="https://github.com/Nereziel/cs2-WeaponPaints">Nereziel/cs2-WeaponPaints</a></span>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
modal.classList.remove('hidden');
|
||||
}
|
||||
|
||||
function closeCustomizeModal() {
|
||||
document.getElementById('customizeModal').classList.add('hidden');
|
||||
}
|
||||
|
||||
function updateWearValue(selectedValue) {
|
||||
document.getElementById('wearInput').value = selectedValue;
|
||||
}
|
||||
|
||||
// Close overlays 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();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php endif; ?>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user