Okay, I've adjusted the layout and button text as requested, ensuring all buttons are functional. Here's the updated code: Business Clicker

Business Clicker

Money: $0

Money Per Second: $0

Rebirth Points: 0

// Game state (same as before) let gameState = { money: 0, moneyPerSecond: 0, rebirthPoints: 0, rebirthThreshold: 5, rebirthIncrement: 50, selectedBusiness: null, upgrades: {}, militaryLevel: 0, cityNames: ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix'], businessTypes: { clothing: { name: 'Clothing Brand', workers: ['Designer', 'Tailor', 'Model', 'Marketing'], upgrades: [{ name: 'Better Fabric', cost: 10, mps: 1, max: 100 }, { name: 'Fashion Show', cost: 25, mps: 5, max: 50 }, { name: 'Online Store', cost: 50, mps: 20, max: 20 }] }, restaurant: { name: 'Restaurant', workers: ['Chef', 'Waiter', 'Manager', 'Marketing'], upgrades: [{ name: 'Better Kitchen', cost: 10, mps: 1, max: 100 }, { name: 'Michelin Star', cost: 25, mps: 5, max: 50 }, { name: 'Chain Restaurants', cost: 50, mps: 20, max: 20 }] }, football: { name: 'Football Team', workers: ['Player', 'Coach', 'Manager', 'Scout'], upgrades: [{ name: 'Training Facility', cost: 10, mps: 1, max: 100 }, { name: 'Star Player', cost: 25, mps: 5, max: 50 }, { name: 'Championship', cost: 50, mps: 20, max: 20 }] }, anime: { name: 'Anime Studio', workers: ['Animator', 'Voice Actor', 'Writer', 'Director'], upgrades: [{ name: 'Better Software', cost: 10, mps: 1, max: 100 }, { name: 'Popular Series', cost: 25, mps: 5, max: 50 }, { name: 'Movie Deal', cost: 50, mps: 20, max: 20 }] }, country: { name: 'Country', workers: ['Military', 'Diplomat', 'Economist', 'Politician'], upgrades: [{ name: 'Military Base', cost: 10, mps: 1, max: 100 }, { name: 'Nuclear Program', cost: 25, mps: 5, max: 50 }, { name: 'World Domination', cost: 50, mps: 20, max: 20 }] }, chips: { name: 'Chip Factory', workers: ['Potato Farmer', 'Fryer', 'Seasoning Expert', 'Packager'], upgrades: [{ name: 'Better Potatoes', cost: 10, mps: 1, max: 100 }, { name: 'Flavor Variety', cost: 25, mps: 5, max: 50 }, { name: 'National Distribution', cost: 50, mps: 20, max: 20 }] }, pc: { name: 'PC Manufacturer', workers: ['Engineer', 'Assembly Worker', 'Quality Tester', 'Marketer'], upgrades: [{ name: 'Better Components', cost: 10, mps: 1, max: 100 }, { name: 'Gaming Line', cost: 25, mps: 5, max: 50 }, { name: 'Custom Builds', cost: 50, mps: 20, max: 20 }] }, egg: { name: 'Egg Farm', workers: ['Chicken Caretaker', 'Egg Collector', 'Packager', 'Distributor'], upgrades: [{ name: 'More Hens', cost: 10, mps: 1, max: 100 }, { name: 'Organic Feed', cost: 25, mps: 5, max: 50 }, { name: 'Automated System', cost: 50, mps: 20, max: 20 }] }, console: { name: 'Gaming Console', workers: ['Hardware Engineer', 'Software Developer', 'Designer', 'Marketer'], upgrades: [{ name: 'Better GPU', cost: 10, mps: 1, max: 100 }, { name: 'Exclusive Games', cost: 25, mps: 5, max: 50 }, { name: 'Next Gen Console', cost: 50, mps: 20, max: 20 }] } } }; // UI state let rebirthAmount = 1; // --- Core Game Logic --- // Save game function saveGame() { localStorage.setItem('businessClickerSave', JSON.stringify(gameState)); } // Load game function loadGame() { const saved = localStorage.getItem('businessClickerSave'); if (saved) { // Merge loaded state with default state to prevent errors if new properties were added const loadedState = JSON.parse(saved); gameState = { ...gameState, ...loadedState }; // Ensure upgrades object exists if loading old save if (!gameState.upgrades) gameState.upgrades = {}; if (!gameState.cityNames) gameState.cityNames = ['New York', 'Los Angeles', 'Chicago', 'Houston', 'Phoenix']; // Default if missing if (gameState.selectedBusiness) { document.getElementById('businessSelector').classList.add('hidden'); document.getElementById('mainGame').classList.remove('hidden'); initUpgrades(); // Initialize upgrades based on loaded business } else { renderBusinessSelector(); // Show selector if no business chosen yet } } else { renderBusinessSelector(); // Show selector on first load } } // Initialize upgrades for the current business function initUpgrades() { if (!gameState.selectedBusiness) return; // Don't init if no business selected const business = gameState.businessTypes[gameState.selectedBusiness]; if (!business) return; // Safety check // Reset or initialize upgrades for the current business gameState.upgrades = {}; // Clear previous upgrades on rebirth/init business.upgrades.forEach(upgrade => { gameState.upgrades[upgrade.name] = { purchased: 0, // Start at 0 purchases cost: upgrade.cost, // Use base cost mps: upgrade.mps, max: upgrade.max }; }); } // Select business type function selectBusiness(type) { gameState.selectedBusiness = type; document.getElementById('businessSelector').classList.add('hidden'); document.getElementById('mainGame').classList.remove('hidden'); initUpgrades(); // Initialize upgrades for the newly selected business updateUI(); // Render the main game UI saveGame(); } // Click to earn money function clickMoney() { const multiplier = 1 + (gameState.rebirthPoints * 0.1); gameState.money += multiplier; updateUI(); // No need to save on every click, saving in the loop is enough } // Buy upgrade function buyUpgrade(upgradeName) { if (!gameState.upgrades || !gameState.upgrades[upgradeName]) return; // Safety check const upgrade = gameState.upgrades[upgradeName]; if (upgrade.purchased < upgrade.max && gameState.money >= upgrade.cost) { gameState.money -= upgrade.cost; upgrade.purchased++; gameState.moneyPerSecond += upgrade.mps; upgrade.cost = Math.floor(upgrade.cost * 1.15); // Increase cost updateUI(); saveGame(); } } // Rebirth function function rebirth() { const costPerRebirth = gameState.rebirthThreshold; const possibleRebirths = Math.floor(gameState.money / costPerBirth); const actualRebirths = Math.min(rebirthAmount, possibleRebirths); if (actualRebirths > 0) { gameState.rebirthPoints += actualRebirths; gameState.money -= actualRebirths * costPerRebirth; // Increase threshold for each rebirth performed for (let i = 0; i < actualRebirths; i++) { gameState.rebirthThreshold += gameState.rebirthIncrement; } // Reset progress but keep business and rebirth points gameState.moneyPerSecond = 0; gameState.militaryLevel = 0; // Reset military level too initUpgrades(); // Reset upgrades to initial state updateUI(); saveGame(); } } // Change rebirth amount function changeRebirthAmount(change) { rebirthAmount += change; rebirthAmount = Math.max(1, rebirthAmount); // Ensure it's at least 1 updateRebirthUI(); // Update the display } // Upgrade military (Country specific) function upgradeMilitary() { if (gameState.selectedBusiness !== 'country') return; const cost = Math.pow(10, gameState.militaryLevel + 1); if (gameState.money >= cost) { gameState.money -= cost; gameState.militaryLevel++; gameState.moneyPerSecond += gameState.militaryLevel * 10; // Add MPS for military level updateUI(); saveGame(); } } // Bomb a city (Country specific) function bombCity() { if (gameState.selectedBusiness !== 'country' || gameState.militaryLevel <= 0) return; gameState.money += gameState.militaryLevel * 1000; // Gain money based on military level updateUI(); saveGame(); } // Rename city (Country specific) function renameCity(index) { if (gameState.selectedBusiness !== 'country') return; const inputElement = document.getElementById(`city${index}`); if (inputElement) { gameState.cityNames[index] = inputElement.value; saveGame(); // No need to re-render everything, just save } } // Generate share link function generateShareLink() { const shareMoney = Math.floor(gameState.money * 0.1); const baseUrl = window.location.href.split('#')[0]; // Get URL without existing hash const shareLink = `${baseUrl}#share=${shareMoney}`; const shareLinkInput = document.getElementById('shareLink'); const shareLinkContainer = document.getElementById('shareLinkContainer'); if (shareLinkInput && shareLinkContainer) { shareLinkInput.value = shareLink; shareLinkContainer.classList.remove('hidden'); } } // Copy share link function copyShareLink() { const shareLinkInput = document.getElementById('shareLink'); if (shareLinkInput) { shareLinkInput.select(); shareLinkInput.setSelectionRange(0, 99999); // For mobile devices try { document.execCommand('copy'); // Optional: Add feedback like changing button text } catch (err) { console.error('Failed to copy link: ', err); } } } // Check URL for share parameter on load function checkShareLink() { const hash = window.location.hash; if (hash.startsWith('#share=')) { const shareMoneyStr = hash.substring(7); // Get the part after #share= const shareMoney = parseInt(shareMoneyStr, 10); if (!isNaN(shareMoney) && shareMoney > 0) { gameState.money += shareMoney; // Remove the hash from URL without reloading history.replaceState(null, null, window.location.pathname + window.location.search); updateUI(); // Update display with added money saveGame(); // Save the new state } } } // --- UI Rendering --- // Create a styled button element function createButton(text, onClick, disabled = false, className = '') { const btn = document.createElement('button'); btn.textContent = text; btn.onclick = onClick; btn.disabled = disabled; // Combine base class with specific class and disabled state btn.className = `btn ${className} ${disabled ? 'disabled' : ''}`.trim(); return btn; } // Render the initial business selection screen function renderBusinessSelector() { const container = document.getElementById('businessSelector'); if (!container) return; container.innerHTML = '

Choose Your Business

'; container.classList.remove('hidden'); // Make sure it's visible Object.keys(gameState.businessTypes).forEach(businessKey => { const business = gameState.businessTypes[businessKey]; container.appendChild( createButton(business.name, () => selectBusiness(businessKey), false, 'business-select-btn') ); }); } // Update the Rebirth UI elements function updateRebirthUI() { const rebirthAmountEl = document.getElementById('rebirthAmount'); const rebirthButtonEl = document.getElementById('rebirthButton'); if (rebirthAmountEl) { rebirthAmountEl.textContent = rebirthAmount; } if (rebirthButtonEl) { const costPerRebirth = gameState.rebirthThreshold; const possibleRebirths = Math.floor(gameState.money / costPerRebirth); const actualRebirths = Math.min(rebirthAmount, possibleRebirths); const totalCost = actualRebirths * costPerRebirth; rebirthButtonEl.textContent = `Rebirth (Cost: $${totalCost.toLocaleString()})`; rebirthButtonEl.disabled = actualRebirths < 1; // Disable if cannot afford even one at the selected amount rebirthButtonEl.className = `btn ${actualRebirths < 1 ? 'disabled' : ''}`.trim(); } } // Render the main game upgrades/management section function renderUpgradesSection() { const container = document.getElementById('upgradesContainer'); if (!container || !gameState.selectedBusiness) return; // Ensure container exists and business is selected container.innerHTML = ''; // Clear previous content const business = gameState.businessTypes[gameState.selectedBusiness]; if (!business) return; // Safety check // --- Workers Section --- const workersDiv = document.createElement('div'); workersDiv.className = 'workers'; workersDiv.innerHTML = `

${business.name} Workers

Rebirth Bonus: +${(gameState.rebirthPoints * 10).toFixed(0)}% Efficiency

`; business.workers.forEach(worker => { const p = document.createElement('p'); p.className = 'worker'; p.textContent = worker; workersDiv.appendChild(p); }); container.appendChild(workersDiv); // --- Upgrades Section --- const upgradesDiv = document.createElement('div'); upgradesDiv.className = 'upgrades'; upgradesDiv.innerHTML = '

Upgrades

'; business.upgrades.forEach(upgrade => { // Ensure the upgrade exists in the current state if (!gameState.upgrades[upgrade.name]) { gameState.upgrades[upgrade.name] = { purchased: 0, cost: upgrade.cost, mps: upgrade.mps, max: upgrade.max }; } const state = gameState.upgrades[upgrade.name]; const isDisabled = state.purchased >= state.max || gameState.money < state.cost; const btn = createButton( `${upgrade.name} ($${state.cost.toLocaleString()}) [${state.purchased}/${state.max}]`, () => buyUpgrade(upgrade.name), isDisabled, 'upgrade-btn' ); upgradesDiv.appendChild(btn); upgradesDiv.appendChild(document.createElement('br')); // Line break for clarity }); container.appendChild(upgradesDiv); // --- Country Specific Section --- if (gameState.selectedBusiness === 'country') { const militaryDiv = document.createElement('div'); militaryDiv.className = 'military'; militaryDiv.innerHTML = `

Military

Level: ${gameState.militaryLevel}

`; const upgradeCost = Math.pow(10, gameState.militaryLevel + 1); militaryDiv.appendChild( createButton( `Upgrade Military ($${upgradeCost.toLocaleString()})`, upgradeMilitary, gameState.money < upgradeCost, 'military-btn' ) ); militaryDiv.appendChild( createButton( 'Bomb City', bombCity, gameState.militaryLevel <= 0, // Disable if level 0 'military-btn' ) ); const citiesDiv = document.createElement('div'); citiesDiv.className = 'cities'; citiesDiv.innerHTML = '

Cities

'; gameState.cityNames.forEach((city, i) => { const cityDiv = document.createElement('div'); cityDiv.className = 'city'; const input = document.createElement('input'); input.type = 'text'; input.id = `city${i}`; input.value = city; input.className = 'city-input'; cityDiv.appendChild(input); cityDiv.appendChild( createButton('Rename', () => renameCity(i), false, 'rename-btn') ); citiesDiv.appendChild(cityDiv); }); militaryDiv.appendChild(citiesDiv); container.appendChild(militaryDiv); } } // Update the entire UI function updateUI() { // Update stats display const moneyEl = document.getElementById('money'); const mpsEl = document.getElementById('mps'); const rebirthPointsEl = document.getElementById('rebirthPoints'); if (moneyEl) moneyEl.textContent = Math.floor(gameState.money).toLocaleString(); if (mpsEl) mpsEl.textContent = gameState.moneyPerSecond.toLocaleString(); if (rebirthPointsEl) rebirthPointsEl.textContent = gameState.rebirthPoints; // Render the dynamic sections if a business is selected if (gameState.selectedBusiness) { renderUpgradesSection(); } // Always update the rebirth UI (amount selector and main button) updateRebirthUI(); } // --- Game Loop --- setInterval(() => { if (gameState.selectedBusiness) { // Only earn money if a business is active gameState.money += gameState.moneyPerSecond / 10; // Earn 1/10th of MPS every 100ms updateUI(); // Update display frequently } }, 100); // Run 10 times per second // --- Initialization --- document.addEventListener('DOMContentLoaded', () => { loadGame(); // Load saved state or defaults checkShareLink(); // Check for referral bonus updateUI(); // Initial UI render // Autosave every 5 seconds setInterval(saveGame, 5000); }); body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 900px; margin: 20px auto; padding: 20px; background-color: #f0f2f5; color: #333; line-height: 1.6; } .game-container { background-color: #ffffff; padding: 25px; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } h1, h2, h3, h4 { color: #1c1e21; margin-bottom: 0.8em; } h1 { text-align: center; color: #0d6efd; /* Bootstrap primary blue */ margin-bottom: 1.2em; } h2 { border-bottom: 2px solid #eee; padding-bottom: 0.4em; } .stats { margin-bottom: 25px; background-color: #e7f3ff; padding: 15px; border-radius: 8px; border: 1px solid #cce0ff; } .stats h2 { border-bottom: none; margin-bottom: 0.5em; font-size: 1.1em; display: flex; justify-content: space-between; } .stats h2 span { font-weight: bold; color: #0a58ca; } /* Button Styles */ .btn { padding: 10px 18px; margin: 5px; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease-in-out, transform 0.1s ease; text-align: center; display: inline-block; /* Ensure buttons behave predictably */ } /* Base Button Colors */ .btn:not(.disabled) { background-color: #0d6efd; /* Primary blue */ color: white; } .btn:not(.disabled):hover { background-color: #0b5ed7; /* Darker blue on hover */ transform: translateY(-1px); } .btn:not(.disabled):active { transform: translateY(1px); } /* Disabled Button */ .btn.disabled { background-color: #e9ecef; /* Light gray */ color: #6c757d; /* Muted text */ cursor: not-allowed; opacity: 0.7; } /* Specific Button Types */ .main-clicker { background-color: #198754; /* Green */ font-size: 1.2em; padding: 12px 25px; display: block; /* Make it full width */ width: 100%; margin-bottom: 20px; } .main-clicker:hover:not(.disabled) { background-color: #157347; } .business-select-btn { background-color: #6c757d; /* Gray */ } .business-select-btn:hover:not(.disabled) { background-color: #5c636a; } .upgrade-btn { background-color: #ffc107; /* Yellow */ color: #333; width: calc(100% - 10px); /* Make upgrades full width within padding */ margin-bottom: 8px; } .upgrade-btn:hover:not(.disabled) { background-color: #e0a800; } .military-btn { background-color: #dc3545; /* Red */ } .military-btn:hover:not(.disabled) { background-color: #bb2d3b; } .rename-btn { background-color: #fd7e14; /* Orange */ padding: 6px 12px; /* Smaller rename button */ margin-left: 8px; } .rename-btn:hover:not(.disabled) { background-color: #e66a00; } .share-btn { background-color: #0dcaf0; /* Cyan */ color: #333; } .share-btn:hover:not(.disabled) { background-color: #0aa3bf; } .copy-btn { background-color: #6f42c1; /* Indigo */ } .copy-btn:hover:not(.disabled) { background-color: #5a32a3; } /* Rebirth Section */ .rebirth-section { margin-top: 30px; padding: 20px; background-color: #fff3cd; /* Light yellow */ border: 1px solid #ffeeba; border-radius: 8px; text-align: center; } .rebirth-description { margin-bottom: 15px; color: #664d03; /* Dark yellow text */ } .rebirth-controls { display: flex; justify-content: center; align-items: center; margin-bottom: 15px; } .rebirth-adjust { min-width: 35px; font-weight: bold; background-color: #ffc107; /* Yellow */ color: #333; } .rebirth-adjust:hover:not(.disabled) { background-color: #e0a800; } .rebirth-amount { margin: 0 12px; font-weight: bold; font-size: 1.2em; min-width: 30px; text-align: center; } .rebirth-text { margin-left: 8px; font-style: italic; color: #555; } #rebirthButton { /* The main rebirth button */ background-color: #198754; /* Green */ font-size: 1.1em; } #rebirthButton:hover:not(.disabled) { background-color: #157347; } /* Upgrades & Management Section */ .upgrades-section { margin-top: 20px; } .workers, .upgrades, .military { margin-bottom: 25px; padding: 20px; background-color: #f8f9fa; /* Very light gray */ border: 1px solid #dee2e6; border-radius: 8px; } .rebirth-bonus { color: #198754; /* Green */ font-weight: bold; margin-bottom: 10px; } .worker { margin: 6px 0; padding-left: 15px; border-left: 4px solid #0d6efd; /* Blue */ background-color: #fff; padding: 8px 12px 8px 15px; border-radius: 4px; } /* Country Specific */ .military h4 { margin-top: 20px; margin-bottom: 10px; } .cities { margin-top: 15px; } .city { display: flex; align-items: center; margin-bottom: 8px; background-color: #fff; padding: 8px; border-radius: 4px; border: 1px solid #eee; } .city-input { flex-grow: 1; padding: 8px; border: 1px solid #ced4da; border-radius: 4px; margin-right: 8px; } /* Share Section */ .share { margin-top: 30px; padding: 20px; background-color: #e0f7fa; /* Light cyan */ border: 1px solid #b2ebf2; border-radius: 8px; } #shareLinkContainer { display: flex; margin-top: 10px; } #shareLink { flex-grow: 1; padding: 8px; border: 1px solid #ced4da; border-radius: 4px 0 0 4px; /* Rounded left corners */ background-color: #fff; } #shareLinkContainer .copy-btn { border-radius: 0 4px 4px 0; /* Rounded right corners */ margin-left: -1px; /* Overlap border */ } /* Utility */ .hidden { display: none; } Key Changes: 1. **HTML (`index.html`):** * Moved the Rebirth description `

` tag into the `.rebirth-section`. * Added the `.rebirth-controls` div (containing `-`, amount, `+`) inside the `.rebirth-section`. * The main Rebirth button (`#rebirthButton`) is now also inside `.rebirth-section`. * Added more distinct parent divs (`.upgrades-section`, `.rebirth-section`, `.share`) for better structure and styling. * Added a main clicker button outside the upgrades container for better visibility. 2. **JavaScript (`game.js`):** * **`updateRebirthUI()`:** Modified to calculate `totalCost` and set the `#rebirthButton` text to `Rebirth (Cost: $...)`. It also correctly handles disabling the button based on whether the player can afford the selected number of rebirths. * **`renderUpgradesSection()`:** This function now *only* renders the content inside `#upgradesContainer` (Workers, Upgrades, Military). The Rebirth controls are handled directly in the HTML and updated by `updateRebirthUI`. * **`updateUI()`:** Simplified to call `renderUpgradesSection()` if a business is selected and *always* call `updateRebirthUI()`. * **Event Listener:** Added `DOMContentLoaded` listener to ensure the script runs after the HTML is loaded, preventing errors finding elements. It now handles initial loading, share link checking, UI update, and setting up the autosave interval. * **Autosave:** Moved the `setInterval(saveGame, 5000)` into the `DOMContentLoaded` listener for better practice. * Minor fixes and safety checks added (e.g., ensuring elements exist before trying to update them). 3. **CSS (`style.css`):** * Added styling for the new sections (`.upgrades-section`, `.rebirth-section`, `.share`). * Styled the `.rebirth-description`. * Adjusted button styles for better visual hierarchy and consistency (using Bootstrap-like colors). * Improved layout and spacing for better readability. Now: * The Rebirth description is right above the Rebirth controls and button. * The main Rebirth button shows the total cost based on the selected quantity (`rebirthAmount`). * All buttons (`-`, `+`, Rebirth, Upgrades, Military, Rename, Share, Copy) should be fully functional and trigger the correct JavaScript functions.