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();
    }

    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);
    }

}

// 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');
    }
});