Save click count to localStorage

[ChrisCoy]

In order to implement this, I had to change the code a little bit. First, once the count was loaded from localStorage, the button kept shaking non-stop, so I had to create the initializeButton function. And to avoid changing the code structure too much, I created a global variable to control whether the audio can play.

[learning-thing]

Does this actually work on github pages?
I remember having an issue with that at some point.

[ChrisCoy]

Does this actually work on github pages? I remember having an issue with that at some point.

yeah, you can check on https://chriscoy.github.io/button/

[danhoang47]

LGTM !

[rexim]

Instead of replaying events I think it would be better to save the snapshot of the "State" of the app somehow. (Also please rebase onto latest changes, we've got quite a few PRs merged)

[ChrisCoy]

Instead of replaying events I think it would be better to save the snapshot of the "State" of the app somehow. (Also please rebase onto latest changes, we've got quite a few PRs merged)

Cool idea! What you think about something like this?

class AppState {
    #state = {
        popupVisible: false,
        clickCount: 0,
        buttonText: "Click me!",
        customCursorEnabled: false
    };

    constructor(){
        try {
            const savedState = localStorage.getItem(STORAGE_KEY);
            if (savedState) {
                this.#state = JSON.parse(savedState);
            }

            this.showPopup = this.#state.popupVisible;
            this.clickCount = this.#state.clickCount;
            this.buttonText = this.#state.buttonText;
            this.customCursorEnabled = this.#state.customCursorEnabled;
        } catch (error) {
            console.error("Failed to load state from localStorage:", error);
        }
    }

    #updateStorage() {
        try {
            localStorage.setItem(STORAGE_KEY, JSON.stringify(this.#state));
        } catch (error) {
            console.error("Failed to save state to localStorage:", error);
        }
    }

    set showPopup(visible) {
        this.#state.popupVisible = visible;
        popupText.style.visibility = visible ? "visible" : "hidden";
        this.#updateStorage();
    }

    set clickCount(count) {
        this.#state.clickCount = count;
        clickMeText.innerText = `Congrats! You clicked it ${count} times!`;
        this.#updateStorage();
    }

    set buttonText(text) {
        this.#state.buttonText = text;
        clickMeText.innerText = text;
        this.#updateStorage();
    }

    set customCursorEnabled(enabled) {
        this.#state.customCursorEnabled = enabled;
        if (enabled) {
            clickMeWrapper.classList.add("customCursor");
            clickMe.classList.add("customCursor");
        } else {
            clickMeWrapper.classList.remove("customCursor");
            clickMe.classList.remove("customCursor");
        }
        this.#updateStorage();
    }
}