William Longley23

CS:GO Case Simulator

<!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS:GO Case Simulator</title>  <script src="https://cdn.tailwindcss.com"></script>  <style> /* General Styles */ body { background-color: #0d1117; color: #c9d1d9; } .case { background-color: #161b22; border-radius: 8px; padding: 20px; margin-top: 20px; position: relative; } .case-image { transition: transform 1s ease; width: 100%; border-radius: 8px; margin-bottom: 10px; } .spin { transform: rotate(360deg); } /* Modal Styles */ #skin-display { z-index: 50; } </style> </head> <body>  <div class="container mx-auto max-w-5xl mt-10">  <h1 class="text-4xl font-bold text-center mb-6">CS:GO Case Simulator</h1>  <div id="login-form" class="mt-10"> <h2 class="text-3xl font-bold mb-4">Login</h2> <input type="text" id="login-username" placeholder="Username" class="p-2 rounded mb-2 w-full text-black"> <input type="password" id="login-password" placeholder="Password" class="p-2 rounded mb-2 w-full text-black"> <button onclick="login()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg w-full mb-2">Login</button> <p class="mt-2">Don't have an account? <a href="#" onclick="showRegisterForm()" class="text-blue-400">Register here</a></p> </div> <div id="register-form" class="mt-10" style="display: none;"> <h2 class="text-3xl font-bold mb-4">Register</h2> <input type="text" id="register-username" placeholder="Username" class="p-2 rounded mb-2 w-full text-black"> <input type="password" id="register-password" placeholder="Password" class="p-2 rounded mb-2 w-full text-black"> <button onclick="register()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-lg w-full mb-2">Register</button> <p class="mt-2">Already have an account? <a href="#" onclick="showLoginForm()" class="text-blue-400">Login here</a></p> </div>  <div id="app-content" style="display: none;">  <div class="flex flex-col md:flex-row justify-between items-center mt-6 mb-6">  <div class="bg-gray-800 text-center text-white p-4 rounded-lg mb-4 md:mb-0"> <span class="text-2xl font-semibold">Balance: $<span id="balance">58.00</span></span> </div>  <button onclick="deleteData()" class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-lg mb-4 md:mb-0">Delete Data</button> </div>  <div class="statistics bg-gray-800 p-6 rounded-lg mb-6"> <h2 class="text-3xl font-bold mb-4">Statistics</h2> <ul> <li>Total Spent: $<span id="total-spent">0.00</span></li> <li>Total Inventory Value: $<span id="inventory-value">0.00</span></li> <li>Cases Opened: <span id="cases-opened">0</span></li> <li>Skins Obtained: <span id="skins-obtained">0</span></li> </ul> </div>  <div id="cases-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">  </div>  <div id="skin-display" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75" style="display: none;"> <div class="bg-gray-900 p-6 rounded-lg text-center"> <h2 id="obtained-skin-name" class="text-2xl font-bold mb-4"></h2> <img id="obtained-skin-image" src="" alt="Obtained Skin" class="mx-auto mb-4 rounded-lg"> <p id="obtained-skin-value" class="text-xl mb-4"></p> <button onclick="closeSkinDisplay()" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">Close</button> </div> </div>  <div class="inventory mt-10"> <h2 class="text-3xl font-bold mb-4">Your Inventory</h2> <div id="inventory-items" class="grid grid-cols-1 md:grid-cols-3 gap-4">  </div> </div>  <div class="market mt-10"> <h2 class="text-3xl font-bold mb-4">Player Market</h2> <div id="market-items" class="grid grid-cols-1 md:grid-cols-3 gap-4">  </div> </div> </div>  <script> // User Authentication Variables let currentUser = null; let users = {}; loadUsers(); // Game Variables let balance = 0; let inventory = []; let totalSpent = 0; let casesOpened = 0; // Starting Balance const startingBalance = 58.00; // Function to generate image data URIs function generateImage(text, width = 300, height = 200, bgColor = '#1a1a1a', textColor = '#ffffff') { const svg = ` <svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"> <rect width="100%" height="100%" fill="${bgColor}"/> <text x="50%" y="50%" font-size="20" fill="${textColor}" text-anchor="middle" dominant-baseline="middle" font-family="Arial">${text}</text> </svg> `; return `data:image/svg+xml;base64,${btoa(svg)}`; } // Cases Data with Generated Images const cases = [ { name: 'Operation Phoenix Case', cost: 6.99, image: generateImage('Operation Phoenix Case'), skins: [ { name: 'M4A4 | Dragon King', rarity: 0.05, image: generateImage('M4A4 | Dragon King', 200, 100), price: 200.00 }, { name: 'AWP | Asiimov', rarity: 0.10, image: generateImage('AWP | Asiimov', 200, 100), price: 150.00 }, { name: 'AK-47 | Redline', rarity: 0.25, image: generateImage('AK-47 | Redline', 200, 100), price: 50.00 }, { name: 'P250 | Supernova', rarity: 0.60, image: generateImage('P250 | Supernova', 200, 100), price: 30.00 } ] }, // Add additional cases here with generated images // Genesis Case { name: 'Genesis Case', cost: 12.99, image: generateImage('Genesis Case'), skins: [ { name: 'Nebula Knife', rarity: 0.02, image: generateImage('Nebula Knife', 200, 100), price: 500.00 }, { name: 'Aurora Sniper', rarity: 0.05, image: generateImage('Aurora Sniper', 200, 100), price: 300.00 }, { name: 'Cosmic Carbine', rarity: 0.08, image: generateImage('Cosmic Carbine', 200, 100), price: 250.00 }, { name: 'Quantum Rifle', rarity: 0.10, image: generateImage('Quantum Rifle', 200, 100), price: 200.00 }, { name: 'Photon Pistol', rarity: 0.15, image: generateImage('Photon Pistol', 200, 100), price: 150.00 }, { name: 'Stellar SMG', rarity: 0.20, image: generateImage('Stellar SMG', 200, 100), price: 100.00 }, { name: 'Orbit Shotgun', rarity: 0.20, image: generateImage('Orbit Shotgun', 200, 100), price: 80.00 }, { name: 'Gravity Grenade', rarity: 0.10, image: generateImage('Gravity Grenade', 200, 100), price: 60.00 }, { name: 'Meteor Machete', rarity: 0.07, image: generateImage('Meteor Machete', 200, 100), price: 40.00 }, { name: 'Solar Sword', rarity: 0.03, image: generateImage('Solar Sword', 200, 100), price: 20.00 }, ] }, // Eclipse Case { name: 'Eclipse Case', cost: 15.99, image: generateImage('Eclipse Case'), skins: [ { name: 'Shadow Dagger', rarity: 0.015, image: generateImage('Shadow Dagger', 200, 100), price: 550.00 }, { name: 'Midnight Sniper', rarity: 0.05, image: generateImage('Midnight Sniper', 200, 100), price: 320.00 }, { name: 'Void Carbine', rarity: 0.07, image: generateImage('Void Carbine', 200, 100), price: 270.00 }, { name: 'Eclipse Rifle', rarity: 0.10, image: generateImage('Eclipse Rifle', 200, 100), price: 220.00 }, { name: 'Nightfall Pistol', rarity: 0.15, image: generateImage('Nightfall Pistol', 200, 100), price: 170.00 }, { name: 'Dusklight SMG', rarity: 0.20, image: generateImage('Dusklight SMG', 200, 100), price: 120.00 }, { name: 'Twilight Shotgun', rarity: 0.20, image: generateImage('Twilight Shotgun', 200, 100), price: 90.00 }, { name: 'Crescent Grenade', rarity: 0.10, image: generateImage('Crescent Grenade', 200, 100), price: 70.00 }, { name: 'Nova Machete', rarity: 0.07, image: generateImage('Nova Machete', 200, 100), price: 50.00 }, { name: 'Lunar Sword', rarity: 0.03, image: generateImage('Lunar Sword', 200, 100), price: 30.00 }, ] }, // Mythic Case { name: 'Mythic Case', cost: 18.99, image: generateImage('Mythic Case'), skins: [ { name: 'Dragon Slayer', rarity: 0.01, image: generateImage('Dragon Slayer', 200, 100), price: 600.00 }, { name: 'Phoenix Sniper', rarity: 0.03, image: generateImage('Phoenix Sniper', 200, 100), price: 400.00 }, { name: 'Griffin Carbine', rarity: 0.05, image: generateImage('Griffin Carbine', 200, 100), price: 350.00 }, { name: 'Hydra Rifle', rarity: 0.07, image: generateImage('Hydra Rifle', 200, 100), price: 300.00 }, { name: 'Unicorn Pistol', rarity: 0.10, image: generateImage('Unicorn Pistol', 200, 100), price: 250.00 }, { name: 'Minotaur SMG', rarity: 0.15, image: generateImage('Minotaur SMG', 200, 100), price: 200.00 }, { name: 'Siren Shotgun', rarity: 0.20, image: generateImage('Siren Shotgun', 200, 100), price: 150.00 }, { name: 'Cyclops Grenade', rarity: 0.20, image: generateImage('Cyclops Grenade', 200, 100), price: 100.00 }, { name: 'Medusa Machete', rarity: 0.15, image: generateImage('Medusa Machete', 200, 100), price: 80.00 }, { name: 'Titan Sword', rarity: 0.04, image: generateImage('Titan Sword', 200, 100), price: 50.00 }, ] } ]; // Initialize App function initializeApp() { generateCases(); loadUserData(); showAppContent(); updateMarketDisplay(); } // Load Users from Local Storage function loadUsers() { const savedUsers = localStorage.getItem('users'); if (savedUsers) { users = JSON.parse(savedUsers); } } // User Authentication Functions function register() { const username = document.getElementById('register-username').value.trim(); const password = document.getElementById('register-password').value; if (!username || !password) { alert('Please enter a username and password.'); return; } if (users[username]) { alert('Username already exists.'); return; } users[username] = { password: password, balance: startingBalance, inventory: [], totalSpent: 0, casesOpened: 0, marketListings: [] }; localStorage.setItem('users', JSON.stringify(users)); alert('Registration successful!'); showLoginForm(); } function login() { const username = document.getElementById('login-username').value.trim(); const password = document.getElementById('login-password').value; if (!username || !password) { alert('Please enter a username and password.'); return; } if (users[username] && users[username].password === password) { currentUser = username; initializeApp(); } else { alert('Invalid username or password.'); } } function showLoginForm() { document.getElementById('login-form').style.display = 'block'; document.getElementById('register-form').style.display = 'none'; document.getElementById('app-content').style.display = 'none'; } function showRegisterForm() { document.getElementById('login-form').style.display = 'none'; document.getElementById('register-form').style.display = 'block'; document.getElementById('app-content').style.display = 'none'; } function showAppContent() { document.getElementById('login-form').style.display = 'none'; document.getElementById('register-form').style.display = 'none'; document.getElementById('app-content').style.display = 'block'; } // Load and Save User Data function loadUserData() { const userData = users[currentUser]; balance = userData.balance; inventory = userData.inventory; totalSpent = userData.totalSpent; casesOpened = userData.casesOpened; users[currentUser].marketListings = userData.marketListings || []; updateBalanceDisplay(); updateInventoryDisplay(); updateStatisticsDisplay(); } function saveUserData() { users[currentUser] = { ...users[currentUser], balance: balance, inventory: inventory, totalSpent: totalSpent, casesOpened: casesOpened, marketListings: users[currentUser].marketListings || [] }; localStorage.setItem('users', JSON.stringify(users)); } // Balance and Funds Functions function updateBalanceDisplay() { document.getElementById('balance').innerText = balance.toFixed(2); } // Cases Functions function generateCases() { const casesGrid = document.getElementById('cases-grid'); casesGrid.innerHTML = ''; cases.forEach(caseItem => { const caseDiv = document.createElement('div'); caseDiv.className = 'case'; const caseId = caseItem.name.toLowerCase().replace(/\s/g, '-'); // Generate rarity bars let rarityBars = ''; caseItem.skins.forEach(skin => { let color = getRarityColor(skin.rarity); rarityBars += ` <div class="relative w-full h-4 bg-gray-700 rounded mb-1 overflow-hidden"> <div class="h-full ${color}" style="width: ${(skin.rarity * 100).toFixed(2)}%;" title="${skin.name} - ${(skin.rarity * 100).toFixed(2)}%"></div> </div> `; }); caseDiv.innerHTML = ` <h2 class="text-3xl font-bold mb-4">${caseItem.name}</h2> <img src="${caseItem.image}" alt="${caseItem.name}" class="case-image" id="${caseId}-img"> <p class="text-gray-300 mb-2">Cost: $${caseItem.cost.toFixed(2)}</p>  ${rarityBars} <button onclick="openDynamicCase(${caseItem.cost}, '${caseItem.name}')" class="w-full bg-yellow-600 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-lg mt-4">Unlock ($${caseItem.cost.toFixed(2)})</button> `; casesGrid.appendChild(caseDiv); }); } function getRarityColor(rarity) { if (rarity <= 0.01) { return 'bg-red-500'; // Extremely rare } else if (rarity <= 0.05) { return 'bg-yellow-500'; // Legendary } else if (rarity <= 0.15) { return 'bg-purple-500'; // Epic } else if (rarity <= 0.30) { return 'bg-blue-500'; // Rare } else { return 'bg-gray-500'; // Common } } function openDynamicCase(cost, caseName) { if (balance >= cost) { balance -= cost; totalSpent += cost; casesOpened += 1; updateBalanceDisplay(); saveUserData(); // Find the case const caseItem = cases.find(c => c.name === caseName); // Case animation animateCaseOpening(caseItem); // Determine random drop const skinIndex = getRandomSkinIndex(caseItem.skins); const skin = caseItem.skins[skinIndex]; // Add the skin to the inventory const obtainedSkin = { skin: skin.name, skinImage: skin.image, price: skin.price }; inventory.push(obtainedSkin); saveUserData(); // Update displays updateInventoryDisplay(); updateStatisticsDisplay(); // Show the skin and skin image after animation setTimeout(() => { displaySkin(skin.name, skin.image, skin.price); }, 1000); } else { alert('Not enough funds to open this case!'); } } function animateCaseOpening(caseItem) { const caseId = caseItem.name.toLowerCase().replace(/\s/g, '-'); const caseImage = document.getElementById(caseId + '-img'); caseImage.classList.add('spin'); setTimeout(() => { caseImage.classList.remove('spin'); }, 1000); // Animation duration } function getRandomSkinIndex(skins) { const randomValue = Math.random(); let accumulatedProbability = 0; for (let i = 0; i < skins.length; i++) { accumulatedProbability += skins[i].rarity; if (randomValue <= accumulatedProbability) { return i; } } return skins.length - 1; // Default to last index if something goes wrong } // Inventory Functions function updateInventoryDisplay() { const inventoryContainer = document.getElementById('inventory-items'); inventoryContainer.innerHTML = ''; // Clear existing items if (inventory.length === 0) { inventoryContainer.innerHTML = '<p>You have no items in your inventory.</p>'; } else { inventory.forEach((item, index) => { const skinDiv = document.createElement('div'); skinDiv.className = 'skin bg-gray-800 p-4 rounded-lg'; const skinImg = document.createElement('img'); skinImg.src = item.skinImage; skinImg.alt = item.skin; skinImg.className = 'rounded-lg mb-2'; const skinName = document.createElement('p'); skinName.innerText = item.skin; const skinValue = document.createElement('p'); skinValue.innerText = `Value: $${item.price.toFixed(2)}`; skinValue.className = 'text-sm text-gray-300'; // Sell button const sellButton = document.createElement('button'); sellButton.innerText = 'Sell Skin'; sellButton.className = 'bg-red-600 hover:bg-red-700 text-white font-bold py-1 px-2 rounded mt-2'; sellButton.onclick = () => sellSkin(index); // List on Market button const listButton = document.createElement('button'); listButton.innerText = 'List on Market'; listButton.className = 'bg-green-600 hover:bg-green-700 text-white font-bold py-1 px-2 rounded mt-2 ml-2'; listButton.onclick = () => listSkinOnMarket(index); skinDiv.appendChild(skinImg); skinDiv.appendChild(skinName); skinDiv.appendChild(skinValue); skinDiv.appendChild(sellButton); skinDiv.appendChild(listButton); inventoryContainer.appendChild(skinDiv); }); } } function sellSkin(index) { const skinToSell = inventory[index]; const sellPrice = calculateSellPrice(skinToSell.price); balance += sellPrice; updateBalanceDisplay(); // Remove the skin from inventory inventory.splice(index, 1); saveUserData(); updateInventoryDisplay(); updateStatisticsDisplay(); alert(`Sold ${skinToSell.skin} for $${sellPrice.toFixed(2)}.`); } function calculateSellPrice(skinPrice) { return skinPrice * 0.5; // Sell for 50% of the skin's price } // Listing Skins on Market function listSkinOnMarket(index) { const skinToList = inventory[index]; const listingPrice = parseFloat(prompt(`Enter the price you want to sell ${skinToList.skin} for:`)); if (isNaN(listingPrice) || listingPrice <= 0) { alert('Invalid price.'); return; } // Remove skin from inventory and add to market listings inventory.splice(index, 1); saveUserData(); const marketItem = { seller: currentUser, skin: skinToList.skin, skinImage: skinToList.skinImage, price: listingPrice }; users[currentUser].marketListings.push(marketItem); saveUserData(); updateInventoryDisplay(); updateMarketDisplay(); alert(`${skinToList.skin} has been listed on the market for $${listingPrice.toFixed(2)}.`); } // Market Functions function updateMarketDisplay() { const marketContainer = document.getElementById('market-items'); marketContainer.innerHTML = ''; // Clear existing items let allListings = []; // Collect listings from all users Object.keys(users).forEach(username => { const userListings = users[username].marketListings || []; userListings.forEach(listing => { allListings.push({ ...listing, sellerUsername: username }); }); }); if (allListings.length === 0) { marketContainer.innerHTML = '<p>No items are currently listed on the market.</p>'; } else { allListings.forEach((item, index) => { if (item.sellerUsername !== currentUser) { // Don't show own listings const marketDiv = document.createElement('div'); marketDiv.className = 'skin bg-gray-800 p-4 rounded-lg'; const skinImg = document.createElement('img'); skinImg.src = item.skinImage; skinImg.alt = item.skin; skinImg.className = 'rounded-lg mb-2'; const skinName = document.createElement('p'); skinName.innerText = item.skin; const sellerInfo = document.createElement('p'); sellerInfo.innerText = `Seller: ${item.sellerUsername}`; sellerInfo.className = 'text-sm text-gray-300'; const skinPrice = document.createElement('p'); skinPrice.innerText = `Price: $${item.price.toFixed(2)}`; skinPrice.className = 'text-sm text-gray-300'; // Buy button const buyButton = document.createElement('button'); buyButton.innerText = 'Buy Skin'; buyButton.className = 'bg-blue-600 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded mt-2'; buyButton.onclick = () => buySkinFromMarket(item); marketDiv.appendChild(skinImg); marketDiv.appendChild(skinName); marketDiv.appendChild(sellerInfo); marketDiv.appendChild(skinPrice); marketDiv.appendChild(buyButton); marketContainer.appendChild(marketDiv); } }); } } function buySkinFromMarket(item) { if (balance >= item.price) { if (confirm(`Do you want to buy ${item.skin} from ${item.sellerUsername} for $${item.price.toFixed(2)}?`)) { // Deduct balance balance -= item.price; updateBalanceDisplay(); // Add skin to inventory inventory.push({ skin: item.skin, skinImage: item.skinImage, price: item.price // Purchase price }); // Remove item from seller's market listings const sellerListings = users[item.sellerUsername].marketListings; const listingIndex = sellerListings.findIndex(listing => listing.skin === item.skin && listing.price === item.price); if (listingIndex !== -1) { sellerListings.splice(listingIndex, 1); } // Add funds to seller's balance users[item.sellerUsername].balance += item.price; // Save data saveUserData(); localStorage.setItem('users', JSON.stringify(users)); // Update displays updateInventoryDisplay(); updateMarketDisplay(); alert(`You have purchased ${item.skin} for $${item.price.toFixed(2)}.`); } } else { alert('You do not have enough balance to purchase this skin.'); } } // Skin Display Functions function displaySkin(skinName, skinImage, skinPrice) { const skinDisplay = document.getElementById('skin-display'); const skinNameElement = document.getElementById('obtained-skin-name'); const skinImg = document.getElementById('obtained-skin-image'); const skinValueElement = document.getElementById('obtained-skin-value'); skinNameElement.innerText = `You obtained: ${skinName}!`; skinImg.src = skinImage; skinValueElement.innerText = `Value: $${skinPrice.toFixed(2)}`; skinDisplay.style.display = 'block'; } function closeSkinDisplay() { document.getElementById('skin-display').style.display = 'none'; } // Statistics Functions function updateStatisticsDisplay() { document.getElementById('total-spent').innerText = totalSpent.toFixed(2); document.getElementById('cases-opened').innerText = casesOpened; document.getElementById('skins-obtained').innerText = inventory.length; const inventoryValue = calculateInventoryValue(); document.getElementById('inventory-value').innerText = inventoryValue.toFixed(2); } function calculateInventoryValue() { let totalValue = 0; inventory.forEach(item => { totalValue += item.price; }); return totalValue; } // Delete Data Function function deleteData() { if (confirm('Are you sure you want to delete your data? This cannot be undone.')) { // Remove user's market listings from other users' views Object.keys(users).forEach(username => { if (username !== currentUser) { const userListings = users[username].marketListings || []; users[username].marketListings = userListings.filter(listing => listing.seller !== currentUser); } }); // Delete user data delete users[currentUser]; localStorage.setItem('users', JSON.stringify(users)); alert('Your data has been deleted.'); location.reload(); } } // Start the App when a user logs in // The initializeApp() function is called after a successful login </script> </div> </body> </html> add all the cases and feautres from this code

Prompt

About

Experience the thrill of opening virtual CS:GO cases, collecting skins, trading on the market, and tracking your stats with our immersive CS:GO Case Simulator. Register, open cases, sell skins, and build your inventory today!

CS:GO Case Simulator

About

Tags

Share