Below is the source code for a Svelte game called soda clicker. Make 2 updates:
- Give it a stylish look and a dark mode aesthetic
- Instead of "soda.png", use vector graphics to define a cool soda bottle image

// Source code begins below here

<script>
    import { fade } from "svelte/transition";
    import { onMount } from "svelte";

    // Resources
    let soda = 0;
    let cash = 0;

    // Rates
    let sodaPerClick = 1;
    let sodaPerSecond = 0;

    // Upgrades
    let bartenders = 0;
    let bartendersCost = 10;

    let managers = 0;
    let managersCost = 100;

    let sommeliers = 0;
    let sommeliersCost = 1000;

    let moguls = 0;
    let mogulsCost = 5000;

    let happyHourActive = false;
    let happyHourCost = 2500;

    function activateHappyHour() {
        if (cash >= happyHourCost && !happyHourActive) {
            cash -= happyHourCost;
            happyHourActive = true;
            setTimeout(() => {
                happyHourActive = false;
            }, 60000); // Active for 60 seconds
        }
    }

    $: sodaPerClickBonus = happyHourActive ? 2 : 1;
    $: sodaPerSecondBonus = happyHourActive ? 2 : 1;

    let showSecretUpgrade = false;

    $: if (bartenders >= 10 && !showSecretUpgrade) {
        showSecretUpgrade = true;
    }

    function buySecretUpgrade() {
        if (cash >= 10000) {
            cash -= 10000;
            sodaPerSecond += 500;
            alert(
                "You unlocked the Secret Formula! Soda production skyrockets!",
            );
            showSecretUpgrade = false;
        }
    }

    function buySommelier() {
        if (cash >= sommeliersCost) {
            cash -= sommeliersCost;
            sommeliers += 1;
            sodaPerSecond += 20;
            sommeliersCost = Math.floor(sommeliersCost * 1.15);
        }
    }

    function buyMogul() {
        if (cash >= mogulsCost) {
            cash -= mogulsCost;
            moguls += 1;
            sodaPerSecond += 100;
            mogulsCost = Math.floor(mogulsCost * 1.15);
        }
    }

    // Functions
    function makeSoda() {
        soda += sodaPerClick * sodaPerClickBonus;
    }

    function sellSoda() {
        cash += soda;
        soda = 0;
    }

    function buyBartender() {
        if (cash >= bartendersCost) {
            cash -= bartendersCost;
            bartenders += 1;
            sodaPerSecond += Math.floor(1 * Math.pow(1.1, bartenders));
            bartendersCost = Math.floor(bartendersCost * 1.25);
        }
    }

    function buyManager() {
        if (cash >= managersCost) {
            cash -= managersCost;
            managers += 1;
            sodaPerSecond += 5;
            managersCost = Math.floor(managersCost * 1.15);
        }
    }

    // Passive soda production
    onMount(() => {
        const interval = setInterval(() => {
            soda += sodaPerSecond * sodaPerSecondBonus;
        }, 1000);

        return () => clearInterval(interval);
    });

    onMount(() => {
        const savedData = localStorage.getItem("sodaClickerData");
        if (savedData) {
            const data = JSON.parse(savedData);
            soda = data.soda;
            cash = data.cash;
            // ...load other variables
        }

        const saveInterval = setInterval(() => {
            localStorage.setItem(
                "sodaClickerData",
                JSON.stringify({
                    soda,
                    cash,
                    bartenders,
                    bartendersCost,
                    managers,
                    managersCost,
                    // ...other variables
                }),
            );
        }, 5000); // Save every 5 seconds

        return () => clearInterval(saveInterval);
    });
</script>

<div class="container">
    <h1>Soda Clicker 🍹</h1>

    <!-- Display resources -->
    <div class="resources">
        <p>Soda: <span transition:fade>{soda}</span></p>
        <p>Cash: $<span transition:fade>{cash}</span></p>
    </div>

    <!-- Actions -->
    <div class="actions">
        <img src={"soda.png"} alt="Soda Glass" on:click={makeSoda} style="cursor: pointer; width: 100px;" />
        <p>Click the soda to make more!</p>
        <button on:click={sellSoda}>Sell All Soda</button>
    </div>

    <!-- Upgrades -->
    <div class="upgrades">
        <div>
            <button on:click={activateHappyHour} disabled={happyHourActive}>
                Activate Happy Hour (Cost: ${happyHourCost})
            </button>
            {#if happyHourActive}
                <p>
                    Happy Hour is active! Production is doubled for a limited
                    time.
                </p>
            {/if}
        </div>
        <h2>Upgrades</h2>
        <div>
            <button on:click={buyBartender}>
                Hire Fizzician (Cost: ${bartendersCost}) - You have {bartenders}
            </button>
            <p>A master of bubbles, shakes up soda faster!</p>
        </div>
        <div>
            <button on:click={buyManager}>
                Appoint Bubble Manager (Cost: ${managersCost}) - You have {managers}
            </button>
            <p>Keeps the fizz flowing by managing your Fizzicians.</p>
        </div>
        <div>
            <button on:click={buySommelier}>
                Hire Soda Sommelier (Cost: ${sommeliersCost}) - You have {sommeliers}
            </button>
            <p>Enhances the flavor profile, attracting more customers!</p>
        </div>
        <div>
            <button on:click={buyMogul}>
                Partner with Soda Mogul (Cost: ${mogulsCost}) - You have {moguls}
            </button>
            <p>Big business moves that skyrocket your production!</p>
        </div>
        {#if showSecretUpgrade}
            <div>
                <button on:click={buySecretUpgrade}>
                    Unlock Secret Formula (Cost: $10000)
                </button>
                <p>
                    Rumor has it this formula can boost your production
                    immensely!
                </p>
            </div>
        {/if}
    </div>
</div>

<style>
    /* Simple styling for layout */
    .container {
        max-width: 600px;
        margin: auto;
        text-align: center;
    }
    .resources,
    .actions,
    .upgrades {
        margin: 20px 0;
    }
    button {
        padding: 10px 20px;
        margin: 5px;
    }
</style>