${upgrade.name}

${upgrade.description}

Level: ${upgrade.level}/${upgrade.maxLevel}

\n \n

\n `;\n \n const button = upgradeElement.querySelector('button');\n if (button && !isMaxLevel) {\n button.addEventListener('click', () => this.purchaseUpgrade(upgrade.id));\n }\n \n this.upgradesContainer.appendChild(upgradeElement);\n }\n }\n \n private renderStats(): void {\n const levelConfig = LEVEL_CONFIGS[this.state.level - 1];\n \n this.statsContainer.innerHTML = '';\n \n const stats = [\n { name: 'Grid Size', value: `${this.state.gridSize}x${this.state.gridSize}` },\n { name: 'Snakes', value: this.state.snakes.length.toString() },\n { name: 'Apples', value: this.state.apples.length.toString() },\n { name: 'Snake Speed', value: `${Math.round(1000 / this.state.tickSpeed)} cells/s` },\n { name: 'Score Multiplier', value: `${levelConfig.scoreMultiplier.toFixed(1)}x` },\n { name: 'Points per Apple', value: levelConfig.pointsPerApple.toString() },\n { name: 'Alive Snakes', value: this.state.snakes.filter(s => s.alive).length.toString() },\n { name: 'Longest Snake', value: Math.max(...this.state.snakes.map(s => s.body.length)).toString() }\n ];\n \n for (const stat of stats) {\n const statElement = document.createElement('div');\n statElement.className = 'bg-gray-700 p-2 rounded';\n statElement.innerHTML = `\n

${stat.name}

${stat.value}

\n `;\n this.statsContainer.appendChild(statElement);\n }\n }\n \n private purchaseUpgrade(upgradeId: string): void {\n const upgradeIndex = this.upgrades.findIndex(u => u.id === upgradeId);\n if (upgradeIndex === -1) return;\n \n const upgrade = this.upgrades[upgradeIndex];\n const cost = Math.floor(upgrade.cost * Math.pow(1.5, upgrade.level));\n \n if (this.state.points < cost || upgrade.level >= upgrade.maxLevel) {\n return;\n }\n \n // Apply the upgrade effect\n this.state = upgrade.effect(this.state);\n \n // Update upgrade level and deduct points\n this.upgrades[upgradeIndex].level++;\n this.state.points -= cost;\n \n // Update UI\n this.renderUI();\n this.renderer.render(this.state);\n }\n \n private handleResize(): void {\n this.renderer.resizeCanvas();\n this.renderer.render(this.state);\n }\n \n private handleCanvasClick(): void {\n if (this.state.isGameOver) {\n this.restart();\n }\n }\n}","deleted","label",[168,149],"frontend","permalink","https://www.val.town/x/blixt/incremental-snake-game/code/frontend/game-controller.ts","extension","actionData","errors"]