Snidle Hands

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #1e1e2f;
    color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#game-container {
    text-align: center;
    width: 90%;
    max-width: 600px;
    border: 2px solid #d1f734;
    border-radius: 10px;
    padding: 20px;
    background-color: #2e2e3d;
}

header {
    margin-bottom: 20px;
}

#game {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#mine {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#mine img {
    width: 150px;
    height: auto;
    margin-bottom: 10px;
}

#mine-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #d1f734;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#mine-button:hover {
    background-color: #b1d324;
}

#upgrades {
    text-align: left;
    margin: 0 auto;
}

#upgrades button {
    padding: 10px;
    font-size: 14px;
    background-color: #0fc30a;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#upgrades button:disabled {
    background-color: #555;
    cursor: not-allowed;
}

#comics {
    text-align: left;
    margin: 0 auto;
}

#comic-list {
    list-style: none;
    padding: 0;
}

<script>
// script.js

// Game State Variables
let coalCount = 0;
let pickaxeLevel = 1;
const pickaxeCost = 10;
const comicsUnlocked = [];

// DOM Elements
const mineButton = document.getElementById("mine-button");
const resourceCount = document.getElementById("resource-count");
const upgradePickaxeButton = document.getElementById("upgrade-pickaxe");
const pickaxeLevelDisplay = document.getElementById("pickaxe-level");
const comicList = document.getElementById("comic-list");

// Mining Functionality
mineButton.addEventListener("click", () => {
    const coalPerClick = pickaxeLevel;
    coalCount += coalPerClick;
    resourceCount.textContent = `Coal: ${coalCount}`;
    checkUpgradeAvailability();
    checkComicUnlock();
});

// Upgrade Functionality
upgradePickaxeButton.addEventListener("click", () => {
    if (coalCount >= pickaxeCost) {
        coalCount -= pickaxeCost;
        pickaxeLevel += 1;
        resourceCount.textContent = `Coal: ${coalCount}`;
        pickaxeLevelDisplay.textContent = `Pickaxe Level: ${pickaxeLevel}`;
        checkUpgradeAvailability();
    }
});

// Check if Pickaxe Upgrade is Available
function checkUpgradeAvailability() {
    upgradePickaxeButton.disabled = coalCount < pickaxeCost;
}

// Unlock Comics
function checkComicUnlock() {
    if (coalCount >= 20 && !comicsUnlocked.includes("The First Discovery")) {
        comicsUnlocked.push("The First Discovery");
        addComicToList("The First Discovery");
    }
}

// Add Comic to List
function addComicToList(comicName) {
    const listItem = document.createElement("li");
    listItem.textContent = comicName;
    comicList.appendChild(listItem);
}