populate_interface.js

// populate_interface.js

class GridPopulator {
    constructor(gridContainerId, initialUsers = 10) {
        this.gridContainer = document.getElementById(gridContainerId);
        this.users = new Map();
        this.nextUserId = 1;
        this.updateInterval = 2000;
        this.maxUsers = 15;
        this.minUsers = 5;
        
        // Set up grid layout
        this.gridContainer.className = "grid gap-4 p-4";
        
        // Initialize with default users
        for (let i = 0; i < initialUsers; i++) {
            this.addUser();
        }

        this.updateGridLayout();
        this.startUpdates();
    }

    generateUserName() {
        return `${this.nextUserId}`;
    }

    updateGridLayout() {
        const cols = Math.ceil(Math.sqrt(this.users.size));
        this.gridContainer.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
    }

    addUser() {
        const personality = window.personalitySystem.getRandomPersonality();
        const square = window.personalitySystem.createPlayerSquare(personality);
        const userId = this.nextUserId++;
        
        // Update the square's text to show student instead of "You"
        const nameSpan = square.querySelector('.text-xs');
        nameSpan.textContent = this.generateUserName();

        this.users.set(userId, {
            element: square,
            personality: personality
        });

        this.gridContainer.appendChild(square);
        this.updateGridLayout();

        // Add to chat content
        /* const chatContent = document.getElementById('chat-content');
        if (chatContent) {
            const config = window.personalitySystem.config[personality];
            const joinMessage = document.createElement('div');
            joinMessage.className = 'text-gray-700 flex items-center gap-2';
            joinMessage.innerHTML = `
                <span class="font-bold">${this.users.size}.</span>
                <span>Student ${userId} joined as ${config.name}</span>
            `;
            chatContent.appendChild(joinMessage);
            chatContent.scrollTop = chatContent.scrollHeight;
        } */

        return userId;
    }

    removeUser() {
        if (this.users.size <= this.minUsers) return;

        const userIds = Array.from(this.users.keys());
        const randomId = userIds[Math.floor(Math.random() * userIds.length)];
        const user = this.users.get(randomId);

        user.element.classList.add('pop-out');

        // Add to chat content
        /* const chatContent = document.getElementById('chat-content');
        if (chatContent) {
            const config = window.personalitySystem.config[user.personality];
            const leaveMessage = document.createElement('div');
            leaveMessage.className = 'text-gray-700 flex items-center gap-2';
            leaveMessage.innerHTML = `
                <span class="font-bold">${this.users.size}.</span>
                <span>Student ${randomId} (${config.name}) left</span>
            `;
            chatContent.appendChild(leaveMessage);
            chatContent.scrollTop = chatContent.scrollHeight;
        } */

        setTimeout(() => {
            user.element.remove();
            this.users.delete(randomId);
            this.updateGridLayout();
        }, 300);
    }

    startUpdates() {
        setInterval(() => {
            const shouldAdd = Math.random() > 0.5;
            
            if (shouldAdd && this.users.size < this.maxUsers) {
                this.addUser();
            } else if (this.users.size > this.minUsers) {
                this.removeUser();
            }

            // Randomly update some existing users' personalities
            this.users.forEach((user, userId) => {
                if (Math.random() < 0.1) {
                    const newPersonality = window.personalitySystem.getRandomPersonality();
                    if (newPersonality !== user.personality) {
                        const event = new CustomEvent('personalityUpdated', {
                            detail: { personality: newPersonality }
                        });
                        user.element.dispatchEvent(event);
                        user.personality = newPersonality;
                        
                        // Update chat with personality change
                        /* const chatContent = document.getElementById('chat-content');
                        if (chatContent) {
                            const config = window.personalitySystem.config[newPersonality];
                            const changeMessage = document.createElement('div');
                            changeMessage.className = 'text-gray-700 flex items-center gap-2';
                            changeMessage.innerHTML = `
                                <span class="font-bold">${this.users.size}.</span>
                                <span>Student ${userId} changed to ${config.name}</span>
                            `;
                            chatContent.appendChild(changeMessage);
                            chatContent.scrollTop = chatContent.scrollHeight;
                        } */
                    }
                }
            });
        }, this.updateInterval);
    }
}

// Initialize when DOM is loaded
document.addEventListener('DOMContentLoaded', () => {
    // Make sure personality system is initialized first
    if (window.personalitySystem) {
        window.gridPopulator = new GridPopulator('grid-container');
    } else {
        console.error('Personality system must be initialized before grid populator');
    }
});