Untitled

<div id="select-grid">
<div class="selected-character"><img src="avatar/avatar1.png" alt="Character 1"></div>
<input type="text" id="username" placeholder="Enter your username">
</div>

<div class="character-selection">
    <div class="characters">
        <div class="character"><img src="avatar/avatar1.png" alt="Character 1"></div>
        <div class="character"><img src="avatar/avatar2.png" alt="Character 2"></div>
        <div class="character"><img src="avatar/avatar3.png" alt="Character 3"></div>
        <div class="character"><img src="avatar/avatar4.png" alt="Character 4"></div>
        <div class="character"><img src="avatar/avatar5.png" alt="Character 5"></div>
        <div class="character"><img src="avatar/avatar6.png" alt="Character 6"></div>
        <div class="character"><img src="avatar/avatar1.png" alt="Character 1"></div>
        <div class="character"><img src="avatar/avatar2.png" alt="Character 2"></div>
        <div class="character"><img src="avatar/avatar3.png" alt="Character 3"></div>
        <div class="character"><img src="avatar/avatar4.png" alt="Character 4"></div>
        <div class="character"><img src="avatar/avatar5.png" alt="Character 5"></div>
        <div class="character"><img src="avatar/avatar6.png" alt="Character 6"></div>
        <!-- Add more characters here -->
    </div>
    <button class="select-btn">Ready</button>
</div>

<style>
.character-selection {
    display: flex;
    flex-direction: column;
    align-items: center;
}
div#select-grid {
    text-align: center;
}
.characters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.character {
    padding: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.selected-character {
    text-align: center;
}
.character img {
    width: 90px; /* Adjust the size of the images */
    height: 90px; /* Adjust the size of the images */
}

.character.selected {
    background-color: lightblue;
    animation: highlight 0.5s infinite alternate;
}

.selected-character {
    margin-top: 20px;
}

button {
    margin-top: 10px;
}

input {
    margin-top: 10px;
    padding: 5px;
}
</style>
<script>
const characters = document.querySelectorAll('.character');
const selectBtn = document.querySelector('.select-btn');
const selectedCharacter = document.querySelector('.selected-character');
const usernameInput = document.getElementById('username');

let selectedCharacterIndex = localStorage.getItem('selectedCharacterIndex') || 0;
let savedUsername = localStorage.getItem('username') || '';

characters.forEach((character, index) => {
    character.addEventListener('click', () => {
        characters.forEach((c) => c.classList.remove('selected'));
        character.classList.add('selected');
        selectedCharacterIndex = index;
        localStorage.setItem('selectedCharacterIndex', selectedCharacterIndex);
    });
});

selectBtn.addEventListener('click', () => {
    const selectedImageSrc = document.querySelector('.character.selected img').getAttribute('src');
    selectedCharacter.textContent = `Selected: ${characters[selectedCharacterIndex].textContent}`;
    localStorage.setItem('selectedCharacter', characters[selectedCharacterIndex].textContent);
    savedUsername = usernameInput.value;
    localStorage.setItem('username', savedUsername);
    selectedCharacter.innerHTML = `<img src="${selectedImageSrc}" alt="Selected Character Image"><br>Username: ${savedUsername}`;
});

// Highlight the selected character when the page is loaded
characters[selectedCharacterIndex].classList.add('selected');
selectedCharacter.textContent = `Selected: ${characters[selectedCharacterIndex].textContent}`;
selectedCharacter.innerHTML += `<br>Username: ${savedUsername}`;
usernameInput.value = savedUsername;

// Load the selected character image and name from localStorage on page load
document.addEventListener('DOMContentLoaded', function() {
    const defaultCharacterImage = 'avatar/avatar1.png';
    const defaultCharacterName = 'Default Character';

    if (localStorage.getItem('selectedCharacterIndex')) {
        const selectedCharacterIndex = localStorage.getItem('selectedCharacterIndex');
        const selectedImageSrc = localStorage.getItem('selectedCharacterImage');
        const selectedCharacterName = characters[selectedCharacterIndex].textContent;

        selectedCharacter.innerHTML = `<img src="${selectedImageSrc}" alt="Selected Character Image"><br>Username: ${localStorage.getItem('username')}`;
    } else {
        selectedCharacter.innerHTML = `<img src="${defaultCharacterImage}" alt="${defaultCharacterName}">`;
        localStorage.setItem('selectedCharacterIndex', -1);
        localStorage.setItem('selectedCharacterImage', defaultCharacterImage);
        localStorage.setItem('selectedCharacter', defaultCharacterName);
    }
});

// Update the character selection and username in local storage
characters.forEach((character, index) => {
    character.addEventListener('click', () => {
        characters.forEach((c) => c.classList.remove('selected'));
        character.classList.add('selected');
        localStorage.setItem('selectedCharacterIndex', index);

        const selectedImageSrc = character.querySelector('img').getAttribute('src');
        localStorage.setItem('selectedCharacterImage', selectedImageSrc);
        localStorage.setItem('selectedCharacter', character.textContent);
    });
});

function saveSelection() {
    const selectedCharacter = 'avatar/avatar1.png'; // Replace with the actual selected character image path
    const username = document.getElementById('username').value;

    localStorage.setItem('selectedCharacter', selectedCharacter); // Store the selected character image path
    localStorage.setItem('username', username);
    window.location.href = 'demo2.html'; // Redirect to the next page
}
</script>