JIT
Game with menu shop eloelo120
Log in
@adrianpartd
wygeneruj mi jakąś gre z menu i dodaj shop i w shop codes codes to ma być eloelo120
Gemini 2.5 Pro

Jasne, oto podstawowa struktura:

Updated files
v1
@adrianpartd
ale to ma wyglądać mega łądnie
Gemini 2.5 Pro

Jasne, oto ulepszona wersja z ładniejszym wyglądem:

Updated files
v2
@adrianpartd
dodaj za 100 kliknięc w sklep dodaj x2 coins i dodaj X100 coins też za 150 klikniec
Gemini 2.5 Pro

Jasne, dodaję te ulepszenia do sklepu:

Updated files
v3
@adrianpartd
usuń x2 kliknięcia i doodaj w menu doddaj inną zakładne dodaj ulepszenia i to ma wyglądać mega mega ładnie a i dodaj 30 koduw enyk1 enyk2 enyk3 ale dodaj że tylko raz moża używać kodów
Gemini 2.5 Pro

Jasne, oto zaktualizowana wersja z nową sekcją ulepszeń, nowymi kodami i mechanizmem jednorazowego użytku kodów:

Updated files
v4
@adrianpartd
dodaj mega mega rozgrywake dodaj zakładke jak grać
Gemini 2.5 Pro

Jasne, oto wersja z ulepszoną rozgrywką (ruchomy przycisk) i zakładką "Jak Grać":

Updated files
v5
@adrianpartd
dodaj wszystki inne a nie takie same ma być teraz wersja 1.1
Gemini 2.5 Pro

Jasne, oto wersja 1.1 z nowymi funkcjami, ulepszeniami i zmianami, aby gra była bardziej rozbudowana:

<jitProject id="html-game-with-shop-v1.1" title="HTML Game with Shop v1.1"> <jitFile type="file" filePath="index.html"> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Super Gra v1.1</title> <link rel="stylesheet" href="style.css"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Roboto:wght@400;700&display=swap" rel="stylesheet"> </head> <body> <div id="menu" class="screen active"> <h1>Super Gra <span class="version">v1.1</span></h1> <div class="button-container"> <button class="menu-button" onclick="showScreen('game')">Graj</button> <button class="menu-button" onclick="showScreen('upgrades')">Ulepszenia (Punkty)</button> <button class="menu-button" onclick="showScreen('shop')">Sklepik (Monety)</button> <button class="menu-button" onclick="showScreen('codes')">Kody</button> <button class="menu-button" onclick="showScreen('howToPlay')">Jak Grać?</button> </div> </div> 
    <div id="game" class="screen">
      <h1>Rozgrywka</h1>
      <div class="stats">
        Punkty: <span id="score">0</span> | Monety: <span id="gameCoins">0</span>
      </div>
      <div class="stats secondary-stats">
         Punkty/klik: <span id="clickPowerDisplay">1</span> | Punkty/sek: <span id="autoClickRateDisplay">0</span>
      </div>
      <div class="game-area">
        <button id="clickButton" class="color-default">Kliknij mnie!</button>
      </div>
      <button class="back-button" onclick="showScreen('menu')">Powrót do Menu</button>
    </div>

    <div id="upgrades" class="screen">
       <h1>Ulepszenia (Punkty)</h1>
       <div class="stats">
         Twoje Punkty: <span id="upgradesScore">0</span>
       </div>
       <div class="shop-section">
         <h2>Rozgrywka</h2>
          <div class="shop-item">
           <span>Więcej Punktów za Kliknięcie (+1)</span>
           <button id="buyClickPowerButton" class="action-button shop-button" onclick="buyUpgrade('clickPower')">Kup (<span id="clickPowerCost">50</span> Punktów)</button>
           <span id="statusClickPower" class="purchase-status">Poziom: <span id="clickPowerLevel">1</span></span>
         </div>
          <div class="shop-item">
           <span>Automatyczne Kliknięcia (+1/sek)</span>
           <button id="buyAutoClickerButton" class="action-button shop-button" onclick="buyUpgrade('autoClicker')">Kup (<span id="autoClickerCost">200</span> Punktów)</button>
           <span id="statusAutoClicker" class="purchase-status">Poziom: <span id="autoClickerLevel">0</span></span>
         </div>
       </div>
       <div class="shop-section">
         <h2>Monety</h2>
         <div class="shop-item">
           <span>x100 Monety za Kliknięcia</span>
           <button id="buyX100Button" class="action-button shop-button" onclick="buyUpgrade('x100')">Kup (150 Punktów)</button>
           <span id="statusX100" class="purchase-status"></span>
         </div>
       </div>
       <button class="back-button" onclick="showScreen('menu')">Powrót do Menu</button>
    </div>

    <div id="shop" class="screen">
      <h1>Sklepik (Monety)</h1>
       <div class="stats">
         Twoje Monety: <span id="shopCoins">0</span>
       </div>
       <div class="shop-section">
         <h2>Wygląd Przycisku</h2>
         <div class="shop-item">
           <span>Domyślny Kolor (Złoty)</span>
           <button id="buyColorDefault" class="action-button shop-button" onclick="buyCosmetic('color-default', 10)">Kup (10 Monet)</button>
         </div>
         <div class="shop-item">
           <span>Czerwony Kolor</span>
           <button id="buyColorRed" class="action-button shop-button" onclick="buyCosmetic('color-red', 50)">Kup (50 Monet)</button>
         </div>
          <div class="shop-item">
           <span>Niebieski Kolor</span>
           <button id="buyColorBlue" class="action-button shop-button" onclick="buyCosmetic('color-blue', 50)">Kup (50 Monet)</button>
         </div>
         <div class="shop-item">
           <span>Zielony Kolor</span>
           <button id="buyColorGreen" class="action-button shop-button" onclick="buyCosmetic('color-green', 50)">Kup (50 Monet)</button>
         </div>
         <p id="cosmeticMessage" class="message"></p>
       </div>
       <button class="back-button" onclick="showScreen('menu')">Powrót do Menu</button>
    </div>


    <div id="codes" class="screen">
      <h1>Kody Promocyjne</h1>
      <div class="stats">
        Twoje Monety: <span id="codesCoins">0</span>
      </div>
      <div class="shop-section">
        <h2>Wpisz Kod</h2>
        <input type="text" id="codeInput" placeholder="Wpisz kod...">
        <button class="action-button" onclick="redeemCode()">Zrealizuj</button>
        <p id="codeMessage" class="message"></p>
      </div>
      <button class="back-button" onclick="showScreen('menu')">Powrót do Menu</button>
    </div>

    <div id="howToPlay" class="screen">
      <h1>Jak Grać? (v1.1)</h1>
      <div class="instructions">
        <h2>Podstawy</h2>
        <p>Witaj w Super Grze!</p>
        <p>Twoim celem jest zdobywanie <strong>Punktów</strong> i <strong>Monet</strong>.</p>
        <ul>
          <li>Przejdź do sekcji <strong>Graj</strong> z Menu Głównego.</li>
          <li>Klikaj szybko na przycisk <strong>"Kliknij mnie!"</strong>, aby zdobywać punkty. Uważaj, przycisk zmienia pozycję po każdym kliknięciu!</li>
          <li>Ilość punktów za kliknięcie zależy od ulepszenia <strong>"Więcej Punktów za Kliknięcie"</strong>.</li>
          <li>Co 5 zdobytych punktów otrzymasz również <strong>Monety</strong> (ich ilość może wzrosnąć dzięki ulepszeniu <strong>x100 Monety</strong>).</li>
        </ul>
        <h2>Ulepszenia (Punkty)</h2>
        <p>W sekcji <strong>Ulepszenia</strong> możesz wydawać swoje <strong>Punkty</strong> na stałe bonusy:</p>
         <ul>
            <li><strong>Więcej Punktów za Kliknięcie:</strong> Zwiększa liczbę punktów zdobywanych za każde kliknięcie przycisku.</li>
            <li><strong>Automatyczne Kliknięcia:</strong> Gra zaczyna generować punkty automatycznie co sekundę.</li>
            <li><strong>x100 Monety:</strong> Znacząco zwiększa liczbę monet zdobywanych co 5 punktów.</li>
         </ul>
        <h2>Sklepik (Monety)</h2>
        <p>W sekcji <strong>Sklepik</strong> możesz wydawać swoje <strong>Monety</strong> na przedmioty kosmetyczne, takie jak zmiana koloru głównego przycisku do klikania.</p>
        <h2>Kody</h2>
        <p>W sekcji <strong>Kody</strong> możesz wpisywać specjalne kody promocyjne, aby otrzymać darmowe <strong>Monety</strong>. Każdy kod można użyć tylko raz!</p>
        <h2>Powodzenia!</h2>
      </div>
      <button class="back-button" onclick="showScreen('menu')">Powrót do Menu</button>
    </div>


    <script src="script.js"></script>
  </body>
</html>
</jitFile> <jitFile type="file" filePath="style.css"> body { font-family: 'Roboto', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; text-align: center; overflow-x: hidden; /* Prevent horizontal scroll */ } 
.screen {
  display: none;
  background-color: rgba(0, 0, 0, 0.7); /* Slightly darker background */
  padding: 30px 40px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Stronger shadow */
  width: 90%;
  max-width: 600px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  position: relative; /* Needed for absolute positioning inside */
}

.screen.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

h1 {
  font-family: 'Press Start 2P', cursive;
  color: #f0e68c; /* Khaki */
  margin-bottom: 30px;
  font-size: 1.8em;
  text-shadow: 3px 3px 5px rgba(0,0,0,0.6); /* Enhanced shadow */
}

h1 .version {
    font-size: 0.5em;
    vertical-align: middle;
    color: #aaa;
}

h2 {
  font-family: 'Press Start 2P', cursive; /* Pixel font for headers */
  color: #add8e6; /* Light Blue */
  margin-top: 25px;
  margin-bottom: 20px; /* More space */
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 8px;
  font-size: 1.1em; /* Slightly smaller */
  text-align: left;
}

/* Specific H2 style for HowToPlay */
#howToPlay h2 {
    text-align: center;
    font-size: 1.3em;
    color: #90ee90; /* Light Green */
}
 #howToPlay h2:first-of-type {
     margin-top: 0;
 }


button {
  font-family: 'Roboto', sans-serif;
  padding: 12px 25px;
  margin: 10px 5px;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  font-size: 1em;
  font-weight: bold;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  text-transform: uppercase; /* Uppercase text */
}

button:disabled {
    background-color: #aaa !important; /* Use !important to override gradients */
    background-image: none !important; /* Ensure gradient is removed */
    color: #555;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.menu-button {
  background: linear-gradient(45deg, #ff6347, #ff4500); /* Tomato gradient */
  color: white;
  min-width: 150px; /* Ensure buttons have similar width */
}

.menu-button:hover:not(:disabled) {
  background: linear-gradient(45deg, #e5533d, #cc3700); /* Darker gradient */
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.action-button {
  background: linear-gradient(45deg, #4682b4, #4169e1); /* Steel Blue gradient */
  color: white;
}

.action-button:hover:not(:disabled) {
  background: linear-gradient(45deg, #3a6d9a, #355abd); /* Darker gradient */
  transform: translateY(-2px);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.shop-button {
    padding: 8px 15px;
    font-size: 0.9em;
}

.back-button {
  background-color: #6c757d; /* Gray */
  color: white;
  margin-top: 30px; /* More space above back button */
}

.back-button:hover:not(:disabled) {
  background-color: #5a6268;
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3);
}

.game-area {
    padding: 20px 0;
    height: 200px; /* Give the game area a fixed height */
    position: relative; /* Needed for absolute positioning of the button */
    border: 1px dashed rgba(255, 255, 255, 0.3); /* Visualize the area */
    margin-bottom: 10px; /* Reduced margin */
    overflow: hidden; /* Hide button if it goes slightly out */
}

#clickButton {
  /* Default color is set by class 'color-default' */
  color: #333;
  padding: 0;
  width: 100px;
  height: 100px;
  font-size: 1em;
  border-radius: 50%;
  font-weight: bold;
  border: 2px solid rgba(255, 255, 255, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.2s ease-out, left 0.2s ease-out, transform 0.1s ease, background 0.3s ease; /* Added background transition */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  line-height: 1.2;
}

/* Button Color Classes */
#clickButton.color-default {
    background: linear-gradient(45deg, #ffdf00, #ffb300); /* Gold */
    color: #333;
}
#clickButton.color-red {
    background: linear-gradient(45deg, #ff4747, #d60000); /* Red */
    color: white;
}
 #clickButton.color-blue {
    background: linear-gradient(45deg, #476eff, #0033d6); /* Blue */
    color: white;
}
 #clickButton.color-green {
    background: linear-gradient(45deg, #47ff75, #00d635); /* Green */
    color: white;
}


#clickButton:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

#clickButton:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(0.98);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.stats {
  font-size: 1.2em;
  margin-bottom: 15px; /* Adjusted margin */
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 15px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.secondary-stats {
    font-size: 0.9em;
    padding: 8px 10px;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.1);
}

.stats span {
  font-weight: bold;
  color: #f0e68c; /* Khaki */
  margin: 0 5px;
}

input[type="text"] {
  padding: 12px;
  margin-right: 8px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1em;
  background-color: rgba(255, 255, 255, 0.9);
  color: #333;
  min-width: 200px;
}

.message { /* General class for codeMessage and cosmeticMessage */
  margin-top: 20px;
  font-weight: bold;
  min-height: 1.2em;
  font-size: 1.1em;
}

.placeholder-text {
  color: #aaa;
  font-style: italic;
}

.button-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.button-container .menu-button {
    width: 80%;
    margin-bottom: 15px;
}

.shop-section {
    margin-bottom: 25px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.shop-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.shop-item:last-child {
    border-bottom: none;
}

.shop-item span {
    flex-grow: 1;
    text-align: left;
    margin-right: 15px;
    font-size: 1.1em;
}

.purchase-status {
    font-style: italic;
    color: #90ee90; /* LightGreen */
    min-width: 80px;
    text-align: right;
    font-weight: bold;
}
 .purchase-status span { /* Target spans inside status for levels */
     color: #fff; /* White color for level number */
     font-style: normal;
 }

/* How to Play Screen Styles */
.instructions {
    text-align: left;
    line-height: 1.6;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.instructions p {
    margin-bottom: 15px;
}

.instructions ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 15px;
}

 .instructions li {
    margin-bottom: 8px;
 }

.instructions strong {
    color: #f0e68c; /* Khaki */
    font-weight: bold;
}
</jitFile> <jitFile type="file" filePath="script.js"> // Game State let score = 0; let coins = 0; let clickPower = 1; let autoClickRate = 0; // Points per second let coinMultiplier = 1; let currentButtonColorClass = 'color-default'; // Track current button color 
// --- Upgrade Definitions ---
const upgrades = {
  // Click Power Upgrade
  clickPower: {
    level: 1,
    cost: 50,
    costIncreaseFactor: 1.8, // How much cost increases each level
    powerIncrease: 1, // How much click power increases each level
    purchased: false // Legacy, level > 1 indicates purchase
  },
  // Auto Clicker Upgrade
  autoClicker: {
    level: 0,
    cost: 200,
    costIncreaseFactor: 2.5,
    rateIncrease: 1, // How much rate increases each level
    purchased: false // Legacy, level > 0 indicates purchase
  },
  // Coin Multiplier Upgrade
  x100: {
    cost: 150,
    purchased: false,
    multiplier: 100
  }
};

// --- Cosmetic Definitions ---
const cosmetics = {
    'color-default': { cost: 10 },
    'color-red': { cost: 50 },
    'color-blue': { cost: 50 },
    'color-green': { cost: 50 }
};

// --- Code Definitions ---
const availableCodes = {};
for (let i = 1; i <= 30; i++) {
  availableCodes[`enyk${i}`] = 50; // Each code gives 50 coins
}
availableCodes['eloelo120'] = 100; // Keep the original code
const redeemedCodes = new Set();

// --- DOM Elements ---
// Screens
const screens = document.querySelectorAll('.screen');
// Game Screen
const scoreDisplay = document.getElementById('score');
const gameCoinsDisplay = document.getElementById('gameCoins');
const clickPowerDisplay = document.getElementById('clickPowerDisplay');
const autoClickRateDisplay = document.getElementById('autoClickRateDisplay');
const clickButton = document.getElementById('clickButton');
const gameArea = document.querySelector('.game-area');
// Upgrades Screen
const upgradesScoreDisplay = document.getElementById('upgradesScore');
const buyClickPowerButton = document.getElementById('buyClickPowerButton');
const clickPowerCostDisplay = document.getElementById('clickPowerCost');
const clickPowerLevelDisplay = document.getElementById('clickPowerLevel');
const buyAutoClickerButton = document.getElementById('buyAutoClickerButton');
const autoClickerCostDisplay = document.getElementById('autoClickerCost');
const autoClickerLevelDisplay = document.getElementById('autoClickerLevel');
const buyX100Button = document.getElementById('buyX100Button');
const statusX100 = document.getElementById('statusX100');
// Shop Screen (Cosmetics)
const shopCoinsDisplay = document.getElementById('shopCoins');
const cosmeticMessage = document.getElementById('cosmeticMessage');
// Codes Screen
const codesCoinsDisplay = document.getElementById('codesCoins');
const codeInput = document.getElementById('codeInput');
const codeMessage = document.getElementById('codeMessage');

// --- Game Loop Timer ---
let autoClickTimer = null;

// --- Functions ---

function showScreen(screenId) {
  screens.forEach(screen => {
    screen.classList.remove('active');
  });
  const activeScreen = document.getElementById(screenId);
  if (activeScreen) {
    activeScreen.classList.add('active');
  }
  updateDisplays(); // Update displays when changing screens
  if (screenId === 'upgrades') {
    updateUpgradesUI();
  }
  if (screenId !== 'codes') {
     clearCodeMessage();
  }
   if (screenId !== 'shop') {
     clearCosmeticMessage();
  }
  if (screenId === 'game') {
      resetButtonPosition();
  }
}

function updateDisplays() {
  // Update game screen displays
  if (scoreDisplay) scoreDisplay.textContent = Math.floor(score); // Show whole numbers
  if (gameCoinsDisplay) gameCoinsDisplay.textContent = coins;
  if (clickPowerDisplay) clickPowerDisplay.textContent = clickPower;
  if (autoClickRateDisplay) autoClickRateDisplay.textContent = autoClickRate;

  // Update upgrades screen displays
  if (upgradesScoreDisplay) upgradesScoreDisplay.textContent = Math.floor(score);

  // Update shop/cosmetics screen displays
  if (shopCoinsDisplay) shopCoinsDisplay.textContent = coins;

  // Update codes screen displays
  if (codesCoinsDisplay) codesCoinsDisplay.textContent = coins;
}

function updateUpgradesUI() {
    // Update Click Power Button
    if (buyClickPowerButton) {
        upgrades.clickPower.cost = Math.ceil(50 * Math.pow(upgrades.clickPower.costIncreaseFactor, upgrades.clickPower.level - 1));
        clickPowerCostDisplay.textContent = upgrades.clickPower.cost;
        clickPowerLevelDisplay.textContent = upgrades.clickPower.level;
        buyClickPowerButton.disabled = score < upgrades.clickPower.cost;
    }

    // Update Auto Clicker Button
    if (buyAutoClickerButton) {
         upgrades.autoClicker.cost = Math.ceil(200 * Math.pow(upgrades.autoClicker.costIncreaseFactor, upgrades.autoClicker.level));
         autoClickerCostDisplay.textContent = upgrades.autoClicker.cost;
         autoClickerLevelDisplay.textContent = upgrades.autoClicker.level;
         buyAutoClickerButton.disabled = score < upgrades.autoClicker.cost;
    }

    // Update x100 Button
    if (buyX100Button && statusX100) {
        if (upgrades.x100.purchased) {
            buyX100Button.disabled = true;
            buyX100Button.textContent = 'Kupione';
            statusX100.textContent = 'Aktywne';
        } else {
            buyX100Button.disabled = score < upgrades.x100.cost;
            buyX100Button.textContent = `Kup (${upgrades.x100.cost} Punktów)`;
            statusX100.textContent = '';
        }
    }
}

function clearCodeMessage() {
    if (codeMessage) {
        codeMessage.textContent = '';
        codeMessage.style.color = '';
    }
}
 function clearCosmeticMessage() {
    if (cosmeticMessage) {
        cosmeticMessage.textContent = '';
        cosmeticMessage.style.color = '';
    }
}

function buyUpgrade(upgradeId) {
    const upgrade = upgrades[upgradeId];

    if (upgradeId === 'clickPower' && score >= upgrade.cost) {
        score -= upgrade.cost;
        upgrade.level++;
        clickPower += upgrade.powerIncrease;
    } else if (upgradeId === 'autoClicker' && score >= upgrade.cost) {
         score -= upgrade.cost;
         upgrade.level++;
         autoClickRate += upgrade.rateIncrease;
         startAutoClicker(); // Ensure timer is running/updated
    } else if (upgradeId === 'x100' && !upgrade.purchased && score >= upgrade.cost) {
        score -= upgrade.cost;
        upgrade.purchased = true;
        coinMultiplier = upgrade.multiplier;
    } else {
         console.log("Nie można kupić ulepszenia (za mało punktów lub już kupione/max level?)");
         // Optionally show a message to the user
         return; // Exit if purchase failed
    }

    updateDisplays();
    updateUpgradesUI(); // Update button states and costs immediately
}

function buyCosmetic(colorClass, cost) {
    if (coins >= cost) {
        coins -= cost;
        // Remove existing color classes
        clickButton.classList.remove('color-default', 'color-red', 'color-blue', 'color-green');
        // Add the new color class
        clickButton.classList.add(colorClass);
        currentButtonColorClass = colorClass; // Store the current class

        cosmeticMessage.textContent = 'Kolor przycisku zmieniony!';
        cosmeticMessage.style.color = '#90ee90'; // LightGreen
        updateDisplays();
        setTimeout(clearCosmeticMessage, 3000);
    } else {
        cosmeticMessage.textContent = 'Za mało monet!';
        cosmeticMessage.style.color = '#f08080'; // LightCoral
         setTimeout(clearCosmeticMessage, 3000);
    }
}


function redeemCode() {
  const code = codeInput.value.trim().toLowerCase();

  clearCodeMessage(); // Clear previous message first

  if (code === '') {
      codeMessage.textContent = 'Wpisz kod.';
      codeMessage.style.color = '#ffa07a'; // LightSalmon
  } else if (redeemedCodes.has(code)) {
      codeMessage.textContent = 'Ten kod został już użyty.';
      codeMessage.style.color = '#f08080'; // LightCoral
  } else if (availableCodes.hasOwnProperty(code)) {
      const reward = availableCodes[code];
      coins += reward;
      redeemedCodes.add(code);
      codeMessage.textContent = `Kod poprawny! +${reward} Monet!`;
      codeMessage.style.color = '#90ee90'; // LightGreen
      updateDisplays();
      codeInput.value = '';
  } else {
      codeMessage.textContent = 'Nieprawidłowy kod.';
      codeMessage.style.color = '#f08080'; // LightCoral
  }

  // Don't auto-clear success/failure messages immediately if preferred
  // setTimeout(clearCodeMessage, 4000);
}

function moveButtonRandomly() {
    if (!clickButton || !gameArea) return;
    const areaRect = gameArea.getBoundingClientRect();
    const buttonRect = clickButton.getBoundingClientRect();

    // Ensure dimensions are valid
    if (areaRect.height <= buttonRect.height || areaRect.width <= buttonRect.width) {
        console.warn("Game area too small for button movement.");
        resetButtonPosition(); // Put button in center if area is too small
        return;
    }

    const maxTop = areaRect.height - buttonRect.height;
    const maxLeft = areaRect.width - buttonRect.width;

    const randomTop = Math.random() * maxTop;
    const randomLeft = Math.random() * maxLeft;

    // Position relative to the game area using pixels
    clickButton.style.top = `${randomTop}px`;
    clickButton.style.left = `${randomLeft}px`;
    clickButton.style.transform = 'translate(0, 0)'; // Use top/left for positioning origin
}

 function resetButtonPosition() {
    if (!clickButton) return;
    // Center using absolute positioning and transform
    clickButton.style.top = '50%';
    clickButton.style.left = '50%';
    clickButton.style.transform = 'translate(-50%, -50%)';
}

function handleManualClick() {
    score += clickPower; // Add points based on click power
    // Gain coins every 5 points (consider multiplier)
    // Check based on score *before* adding auto-click points for consistency
    if (Math.floor(score / 5) > Math.floor((score - clickPower) / 5)) {
         coins += (1 * coinMultiplier);
         animateCoinGain();
    }
    updateDisplays();
    moveButtonRandomly(); // Move button after click

    // Update upgrades buttons availability if the upgrades screen is active
    if (document.getElementById('upgrades').classList.contains('active')) {
        updateUpgradesUI();
    }
}

function animateCoinGain() {
     if(gameCoinsDisplay) {
           gameCoinsDisplay.parentElement.style.transition = 'transform 0.2s ease, color 0.2s ease';
           gameCoinsDisplay.style.color = '#fff700'; // Flash yellow
           gameCoinsDisplay.parentElement.style.transform = 'scale(1.05)';
           setTimeout(() => {
               if (gameCoinsDisplay) {
                   gameCoinsDisplay.parentElement.style.transform = 'scale(1)';
                   gameCoinsDisplay.style.color = '#f0e68c'; // Return to normal color
               }
           }, 200);
       }
}

function startAutoClicker() {
    if (autoClickTimer) {*
Updated files
v6
@adrianpartd
ale mega mega lepsze mega lepsze dodaj inna gre rozgrywke
Gemini 2.5 Pro

Jasne, oto wersja 1.2 z całkowicie nową rozgrywką w stylu "Whack-a-Mole" (uderz kreta)!

Updated files
v7