${item.icon}

${item.name}

${isOwned ? 'OWNED' : '🪙 ' + item.cost}

\n `;\n if (!isOwned) {\n div.onclick = () => this.buyTower(item);\n }\n shopContainer.appendChild(div);\n });\n\n }\n\n buyTower(item) {\n let coins = parseInt(localStorage.getItem('td_coins') || '0');\n if (coins >= item.cost) {\n coins -= item.cost;\n localStorage.setItem('td_coins', coins.toString());\n const owned = JSON.parse(localStorage.getItem('td_owned_towers') || '[]');\n owned.push(item.id);\n localStorage.setItem('td_owned_towers', JSON.stringify(owned));\n this.initPersistentStorage();\n this.audio.play('newplace.mp3');\n } else {\n alert('Not enough coins! Beat maps to earn more.');\n }\n }\n\n setupEventListeners() {\n document.getElementById('pause-btn').addEventListener('click', () => {\n if (this.game) this.game.togglePause();\n });\n\n document.getElementById('resume-btn').addEventListener('click', () => {\n if (this.game) this.game.togglePause();\n });\n\n document.getElementById('exit-btn').addEventListener('click', () => {\n if (this.game) this.game.isRunning = false;\n location.reload();\n });\n\n // Start menu music on first interaction\n const startMusic = () => {\n this.audio.playMusic('menu_music.mp3');\n window.removeEventListener('pointerdown', startMusic);\n };\n window.addEventListener('pointerdown', startMusic);\n\n window.addEventListener('resize', () => {\n this.camera.aspect = window.innerWidth / window.innerHeight;\n this.camera.updateProjectionMatrix();\n this.renderer.setSize(window.innerWidth, window.innerHeight);\n });\n\n const raycaster = new THREE.Raycaster();\n const mouse = new THREE.Vector2();\n\n this.renderer.domElement.addEventListener('pointerdown', (event) => {\n mouse.x = (event.clientX / window.innerWidth) * 2 - 1;\n mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;\n\n raycaster.setFromCamera(mouse, this.camera);\n const intersects = raycaster.intersectObjects(this.game.gridGroup.children);\n\n if (intersects.length > 0) {\n const cell = intersects[0].object;\n this.game.handleCellClick(cell.userData.gridX, cell.userData.gridZ);\n }\n });\n\n // Refund Button Listener\n const refundBtn = document.querySelector('.tower-btn[data-type=\"delete\"]');\n if (refundBtn) {\n refundBtn.addEventListener('click', () => {\n document.querySelectorAll('.tower-btn').forEach(b => b.classList.remove('selected'));\n refundBtn.classList.add('selected');\n if (this.game) this.game.setSelectedTowerType('delete');\n });\n }\n\n // Map Selection UI\n document.querySelectorAll('.mode-btn').forEach(btn => {\n btn.addEventListener('click', (e) => {\n const mode = btn.dataset.mode;\n if (!mode) return;\n this.selectedMode = mode;\n this.showLoadoutScreen();\n });\n });\n\n // Profile open/close/save handlers\n const profileOpenBtn = document.getElementById('profile-open-btn');\n const profileScreen = document.getElementById('profile-screen');\n const profileCloseBtn = document.getElementById('profile-close-btn');\n const profileSaveBtn = document.getElementById('profile-save-btn');\n const profileName = document.getElementById('profile-name');\n const profileDesc = document.getElementById('profile-desc');\n const profileUsernameDisplay = document.getElementById('profile-username-display');\n const profileCoinsDisplay = document.getElementById('profile-coins-display');\n\n if (profileOpenBtn && profileScreen) {\n profileOpenBtn.addEventListener('click', () => {\n // refresh coins and profile fields before showing\n const coins = parseInt(localStorage.getItem('td_coins') || '0');\n const raw = localStorage.getItem('td_profile');\n let profile = { name: 'Player', description: '', avatar: null };\n try { if (raw) profile = JSON.parse(raw); } catch(e) { profile = { name: 'Player', description: '', avatar: null }; }\n\n if (profileName) profileName.value = profile.name || 'Player';\n if (profileDesc) profileDesc.value = profile.description || '';\n if (profileUsernameDisplay) profileUsernameDisplay.textContent = profile.name || 'Player';\n if (profileCoinsDisplay) profileCoinsDisplay.textContent = `🪙 ${coins} coins`;\n // avatar\n const avatarEl = document.getElementById('profile-avatar');\n if (avatarEl) avatarEl.src = profile.avatar || 'svg_ball.png';\n\n // prepare pfp options if not already populated\n const pfpOptions = document.getElementById('pfp-options');\n if (pfpOptions && pfpOptions.children.length === 0) {\n const pfpList = ['Pfp1.png','Pfp2.png','Pfp3.png','Pfp4.png','Pfp5.png','Pfp6.png','Pfp7.webp'];\n pfpList.forEach(fname => {\n const btn = document.createElement('button');\n btn.className = 'mode-btn';\n btn.style.padding = '4px';\n btn.style.minWidth = '48px';\n btn.style.minHeight = '48px';\n btn.style.background = 'transparent';\n btn.style.border = '2px solid rgba(255,255,255,0.06)';\n btn.style.borderRadius = '6px';\n btn.style.display = 'flex';\n btn.style.alignItems = 'center';\n btn.style.justifyContent = 'center';\n btn.title = fname;\n const img = document.createElement('img');\n img.src = fname;\n img.style.width = '40px';\n img.style.height = '40px';\n img.style.borderRadius = '6px';\n img.style.objectFit = 'cover';\n btn.appendChild(img);\n btn.onclick = () => {\n // preview selection immediately\n if (avatarEl) avatarEl.src = fname;\n // save selection to local storage but keep name/desc until Save is pressed\n const rawProf = localStorage.getItem('td_profile');\n let current = { name: 'Player', description: '', avatar: null };\n try { if (rawProf) current = JSON.parse(rawProf); } catch(e) {}\n current.avatar = fname;\n localStorage.setItem('td_profile', JSON.stringify(current));\n // also update small avatar on start screen and top persistent display\n const startAvatar = document.getElementById('profile-avatar');\n if (startAvatar) startAvatar.src = fname;\n const topAvatar = document.querySelector('#start-screen img');\n if (topAvatar) topAvatar.src = fname;\n // close selector\n document.getElementById('pfp-selector').style.display = 'none';\n };\n pfpOptions.appendChild(btn);\n });\n }\n\n // toggle pfp selector visibility via change button\n const changeBtn = document.getElementById('change-pfp-btn');\n const selector = document.getElementById('pfp-selector');\n if (changeBtn && selector) {\n changeBtn.onclick = () => {\n selector.style.display = selector.style.display === 'none' ? 'block' : 'none';\n };\n }\n\n // cancel button inside selector\n const cancelBtn = document.getElementById('pfp-cancel-btn');\n if (cancelBtn && selector) {\n cancelBtn.onclick = () => { selector.style.display = 'none'; };\n }\n\n profileScreen.style.display = 'block';\n });\n }\n if (profileCloseBtn && profileScreen) {\n profileCloseBtn.addEventListener('click', () => {\n profileScreen.style.display = 'none';\n });\n }\n if (profileSaveBtn) {\n profileSaveBtn.addEventListener('click', () => {\n const name = profileName ? profileName.value.trim() : 'Player';\n const description = profileDesc ? profileDesc.value.trim() : '';\n // preserve avatar if present\n const rawProf = localStorage.getItem('td_profile');\n let current = { name: name || 'Player', description, avatar: null };\n try { if (rawProf) current = JSON.parse(rawProf); } catch(e) {}\n current.name = name || current.name || 'Player';\n current.description = description || current.description || '';\n localStorage.setItem('td_profile', JSON.stringify(current));\n if (profileUsernameDisplay) profileUsernameDisplay.textContent = current.name;\n // update start screen avatar and profile avatar img\n const avatarEl = document.getElementById('profile-avatar');\n if (avatarEl && current.avatar) avatarEl.src = current.avatar;\n const startAvatar = document.querySelector('#start-screen img');\n if (startAvatar && current.avatar) startAvatar.src = current.avatar;\n // small feedback: close modal\n const screen = document.getElementById('profile-screen');\n if (screen) screen.style.display = 'none';\n });\n }\n\n document.getElementById('start-battle-btn').addEventListener('click', () => {\n if (this.loadout.length === 4) {\n document.getElementById('loadout-screen').style.display = 'none';\n document.getElementById('ingame-controls').style.display = 'flex';\n // We no longer stop the music here so the calm atmosphere persists in-game\n this.game = new GameEngine(this.scene, this.audio, this.selectedMode, this.loadout);\n\n // If endless mode, add a Stop button\n if (this.selectedMode === 'endless') {\n if (!document.getElementById('stop-btn')) {\n const stopBtn = document.createElement('button');\n stopBtn.id = 'stop-btn';\n stopBtn.className = 'control-btn';\n stopBtn.style.background = '#333';\n stopBtn.style.borderColor = '#FFD700';\n stopBtn.textContent = 'STOP';\n document.getElementById('ingame-controls').appendChild(stopBtn);\n\n stopBtn.onclick = () => {\n if (!this.game) return;\n const currentWave = this.game.wave;\n // reward logic: 2 coins if wave passed is divisible by 3 (approx death reward in that tier)\n let reward = 0;\n if (currentWave > 1 && (currentWave % 3 === 0)) reward = 2;\n \n let coins = parseInt(localStorage.getItem('td_coins') || '0');\n coins += reward;\n localStorage.setItem('td_coins', coins.toString());\n location.reload();\n };\n }\n }\n }\n });\n }\n\n showLoadoutScreen() {\n document.getElementById('start-screen').style.display = 'none';\n document.getElementById('loadout-screen').style.display = 'flex';\n this.loadout = [];\n this.updateLoadoutUI();\n }\n\n updateLoadoutUI() {\n const container = document.getElementById('loadout-items');\n if (!container) return;\n container.innerHTML = '';\n \n let currentPool = [\n { id: 'basic', name: 'Dominica', icon: '🇩🇲', cost: '$25' },\n { id: 'sniper', name: 'Sweden', icon: '🇸🇪', cost: '$60' },\n { id: 'chile', name: 'Chile', icon: '🇨🇱', cost: '$100' },\n { id: 'bomb', name: 'Kazakhstan', icon: '🇰🇿', cost: '$100' }\n ];\n\n if (this.selectedMode === 'ww1') {\n currentPool = [\n { id: 'france', name: 'France', icon: '🇫🇷', cost: '$25' },\n { id: 'russian_empire', name: 'Russia', icon: '🇷🇺', cost: '$60' },\n { id: 'uk_sphere', name: 'UK', icon: '🇬🇧', cost: '$100' },\n { id: 'usa_aoe', name: 'USA', icon: '🇺🇸', cost: '$100' }\n ];\n } else if (this.selectedMode === 'ww2') {\n currentPool = [\n { id: 'france', name: 'France', icon: '🇫🇷', cost: '$25' },\n { id: 'taiwan', name: 'Taiwan', icon: '🇹🇼', cost: '$60' },\n { id: 'uk_sphere', name: 'UK', icon: '🇬🇧', cost: '$100' },\n { id: 'usa_aoe', name: 'USA', icon: '🇺🇸', cost: '$100' }\n ];\n }\n\n const premiumData = {\n 'svg': { id: 'svg', name: 'St. Vincent', icon: '🇻🇨', cost: '$100' },\n 'venezuela': { id: 'venezuela', name: 'Venezuela', icon: '🇻🇪', cost: '$120' },\n 'algeria': { id: 'algeria', name: 'Algeria', icon: '🇩🇿', cost: '$40' },\n 'egypt': { id: 'egypt', name: 'Egypt', icon: '🇪🇬', cost: '$150' },\n 'mongolia': { id: 'mongolia', name: 'Mongol Empire', icon: '🇲🇳', cost: '$250' },\n 'switzerland': { id: 'switzerland', name: 'Switzerland', icon: '🇨🇭', cost: '$275' },\n 'north_korea': { id: 'north_korea', name: 'North Korea', icon: '🇰🇵', cost: '$200' },\n 'serbia': { id: 'serbia', name: 'Serbia', icon: '🇷🇸', cost: '$50' },\n 'brazil': { id: 'brazil', name: 'Brazil', icon: '🇧🇷', cost: '$70' },\n // Add Russia and Roman Empire to the premium pool so they appear in testing mode\n 'russia': { id: 'russia', name: 'Russia', icon: '🇷🇺', cost: '$200' },\n 'roman_empire': { id: 'roman_empire', name: 'Roman Empire', icon: '🏛️', cost: '$350' },\n // Yugoslavia added to premium pool so purchased item shows up in loadout\n 'yugoslavia': { id: 'yugoslavia', name: 'Yugoslavia', icon: '🛡️', cost: '$60' },\n // Airstrike plane (purchased with persistent coins) should appear in loadout if owned\n 'airstrike_plane': { id: 'airstrike_plane', name: 'Airstrike Plane', icon: '✈️', cost: '$300' }\n };\n\n let ownedIds = [];\n try {\n const raw = localStorage.getItem('td_owned_towers');\n ownedIds = raw ? JSON.parse(raw) : [];\n if (!Array.isArray(ownedIds)) ownedIds = [];\n } catch(e) { ownedIds = []; }\n\n if (this.selectedMode === 'testing') {\n ownedIds = Object.keys(premiumData);\n }\n\n const allAvailable = [...currentPool];\n ownedIds.forEach(id => {\n const tower = premiumData[id];\n if (tower && !allAvailable.find(t => t.id === id)) {\n allAvailable.push(tower);\n }\n });\n\n\n\n allAvailable.forEach(tower => {\n if (!tower) return;\n const btn = document.createElement('div');\n btn.className = 'tower-btn';\n btn.style.width = '100px';\n btn.style.height = '100px';\n if (this.loadout.includes(tower.id)) btn.classList.add('selected');\n\n btn.innerHTML = `\n

${tower.icon || '?'}

${tower.name || 'Unknown'}

${tower.cost || '0'}

\n `;\n\n btn.onclick = () => {\n if (this.loadout.includes(tower.id)) {\n this.loadout = this.loadout.filter(id => id !== tower.id);\n } else if (this.loadout.length < 10) {\n this.loadout.push(tower.id);\n }\n this.updateLoadoutUI();\n };\n container.appendChild(btn);\n });\n\n const counter = document.getElementById('loadout-counter');\n if (counter) counter.textContent = `Selected: ${this.loadout.length}/4`;\n const startBtn = document.getElementById('start-battle-btn');\n if (this.loadout.length === 10) {\n startBtn.style.opacity = '1';\n startBtn.style.pointerEvents = 'auto';\n } else {\n startBtn.style.opacity = '0.5';\n startBtn.style.pointerEvents = 'none';\n }\n }\n\n animate() {\n requestAnimationFrame(() => this.animate());\n const delta = 1/60; // Assume 60fps for simple physics\n \n if (this.game) this.game.update(delta);\n this.controls.update();\n this.renderer.render(this.scene, this.camera);\n }\n}\n```\n\nTower.js\n```Tower.js\n```\n\ngame.js\n```game.js\n```\n\nSummary: I created a small bootstrap main.js that simply imports and instantiates a new App class, moved the large app logic originally in main.js into a new App.js module, and added tombstone comments at the top of Tower.js and game.js indicating where code was refactored/moved for maintainability.","page_description","cursor","eyJpZCI6InVsa2g5ZDd5ZmhjNHY2NnJ2d3loIn0","token","included",[],"routes/browser/layout","actionData","errors"]

Tower Defense Simulator 2