Connecting Chat to Multiplayer

[myamadriaga]

Idealization:

• Find a way to implement the fun fact function into the game in some kind of way/ add it to each level if wanted, can help be along with the boss etc; (dialogue between characters, dialogue with the player, on collision with an object the player will start speaking, etc;)
• Find a way to display a container above the player (including in multiplayer)
• Add useable objects that can change the sprite size etc; along with other sound effects
• Make the theme an object so that it can be an indicated switch on each level.
• Make the leaderboard apart of the lightmode/darkmode style so that it actually changes on the prompted switch
• Add funFact toggle to localstorage so it can be constantly on/off

---

- connect the chat to multiplayer, so that then we can actually do the functions above

[myamadriaga]

Storing Fun Fact Toggle in LocalStorage:

You were able to toggle the fun facts off, but after refreshing the page it did not stay off. I added code so that it stores whether the toggle is on or off in localstorage, so now after refreshing the page it should not reappear.

// Create the hints button (checkbox)
var hintsButton = document.createElement("input");
hintsButton.type = "checkbox";

// Reference the hints section
const hints = document.getElementsByClassName("fun_facts")[0];

// Check localStorage for existing funFact state and set the initial state
const localStorageFunFact = localStorage.getItem('funFact');
if (localStorageFunFact !== null) {
    GameEnv.funFact = localStorageFunFact.toLowerCase() === "true";
} else {
    // Default value if nothing is found in localStorage
    GameEnv.funFact = true;
}

// Set the initial state of hints and the checkbox based on GameEnv.funFact
if (GameEnv.funFact) {
    hints.style.display = "unset";
    hintsButton.checked = true;
} else {
    hints.style.display = "none";
    hintsButton.checked = false;
}

// Add the button to the DOM (assuming there is an element to append it to)
document.body.appendChild(hintsButton);

// Add event listener to the button to update display and localStorage
hintsButton.addEventListener("click", () => {
    if (!hintsButton.checked) {
        hints.style.display = "none";
        GameEnv.funFact = false;
    } else {
        hints.style.display = "unset";
        GameEnv.funFact = true;
    }
    localStorage.setItem('funFact', GameEnv.funFact);
    console.log(GameEnv.funFact);
});

There was already an input that created the button, as well as the code for the toggle. Thats what I kept.

• Setting Initial State from localStorage:
  I stored funFact state within gameEnv, and defaulted it to false. If a value is found in localStorage, we set GameEnv.funFact based on that value.

• Updating Display and Checkbox Based on Initial State:
  I set the display style of hints and the checked state of hintsButton based on GameEnv.funFact.

• Event Listener for Checkbox:
  When the checkbox is toggled, we update the display style of hints, update GameEnv.funFact, and store the new state in localStorage.

---

Corrections Made:
Added initial state setup based on localStorage.
Appended the hintsButton to the DOM to ensure it is visible and functional.
Corrected localstorage to localStorage in the event listener.
Corrected the keys used in localStorage to be consistent (used 'funFact' key).

This code should work correctly by persisting the fun facts visibility state across page reloads using localStorage. When you reload the page, the fun facts will look like its coming back, but then the page will eventually unload it once it loads properly.

[myamadriaga]

Fixing Issues on Function:

---

We needed the website to start on light mode, so I worked with Trevor in order to revise the code, this is what he changed it to:

get isThemeInput() {
        const localstorage = window.localStorage
        const lightmodekey = "islightMode"
        const div = document.createElement("div");
        div.innerHTML = "Theme Change:"; // label
        GameEnv.isLightMode = localstorage.getItem(lightmodekey).toLowerCase() === "true"


        const islightMode = document.createElement("input");  // get user defined lightmode boolean
        islightMode.type = "checkbox";
        if (GameEnv.isLightMode) {
            enableLightMode();
            islightMode.checked = true;
        } else {
            enableDarkMode();
            islightMode.checked = false;
        }
        islightMode.addEventListener('change', () => {
            if (islightMode.checked) {
                enableLightMode();
                GameEnv.isLightMode = true;
                localstorage.setItem(lightmodekey, GameEnv.isLightMode)
            } else {
                enableDarkMode();
                GameEnv.isLightMode = false;
                localstorage.setItem(lightmodekey, GameEnv.isLightMode)
            }
        console.log(GameEnv.isLightMode)
        });


        // Append elements to the DOM or wherever appropriate
        div.appendChild(islightMode); 
        return div
        // Append div to your settings container
        // For example:
        // document.getElementById('settingsContainer').appendChild(div);
    }

within this code, we saved it to local storage, and changed the code from a string to boolean so that it actually inputs into local storage. We defined localstorage, and lightmodekey so that it can be stored as true or false.