Upload 6 files

eleven_labs_script.js

@@ -0,0 +1,74 @@
+
+function injectElevenLabsWidget() {
+    const script = document.createElement('script');
+    script.src = 'https://elevenlabs.io/convai-widget/index.js';
+    script.async = true;
+    script.type = 'text/javascript';
+    document.head.appendChild(script);
+  
+    // Create the wrapper and widget
+    const wrapper = document.createElement('div');
+    wrapper.className = 'desktop';
+  
+    const widget = document.createElement('elevenlabs-convai');
+    widget.setAttribute('agent-id', 'SoMyS9WQqWMY0o3jhcfr');
+  
+    // Set initial colors based on current theme
+    updateWidgetColors(widget);
+  
+    // Watch for theme changes
+    const observer = new MutationObserver(() => {
+      updateWidgetColors(widget);
+    });
+  
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class'],
+    });
+  
+    function updateWidgetColors(widget) {
+      const isDarkMode = !document.documentElement.classList.contains('light');
+      if (isDarkMode) {
+        widget.setAttribute('avatar-orb-color-1', '#2E2E2E');
+        widget.setAttribute('avatar-orb-color-2', '#B8B8B8');
+      } else {
+        widget.setAttribute('avatar-orb-color-1', '#4D9CFF');
+        widget.setAttribute('avatar-orb-color-2', '#9CE6E6');
+      }
+    }
+  
+    widget.innerHTML = `\
+    <form slot="terms" class="prose text-sm">
+      <h3>Terms and conditions</h3>
+      <p>
+        By clicking "Continue," and each time I interact with this AI agent, I 
+        consent to ElevenLabs collecting and using my voice and data derived from 
+        it to interpret my speech, and provide the support services I request, and 
+        to the recording, storage, and sharing of my communications with 
+        third-party service providers, and as described in the 
+        <a href="/terms-of-use">Privacy Policy</a>. If you do not wish to have 
+        your conversations recorded, please refrain from using this service.
+    </form>`;
+  
+    // Listen for the widget's "call" event to inject client tools
+    widget.addEventListener('elevenlabs-convai:call', (event) => {
+      event.detail.config.clientTools = {
+        submitAdviceSentence: (
+          {adviceText}
+        ) => {
+          submitAdvice(adviceText)
+        }
+      };
+    });
+  
+    // Attach widget to the DOM
+    wrapper.appendChild(widget);
+    document.body.appendChild(wrapper);
+  }
+  
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', injectElevenLabsWidget);
+  } else {
+    injectElevenLabsWidget();
+  }
+  

game_logic.js

@@ -0,0 +1,238 @@
+// Core game elements
+const statusEl = document.getElementById('status');
+const timerEl = document.getElementById('timer');
+const gameInfoEl = document.getElementById('game-info');
+const guessInput = document.getElementById('guess-input');
+const submitGuessBtn = document.getElementById('submit-guess-btn');
+const feedbackSection = document.getElementById('feedback-section');
+const guessedWordEl = document.getElementById('guessed-word');
+const guessScoreEl = document.getElementById('guess-score');
+const feedbackTextEl = document.getElementById('feedback-text');
+const chatContent = document.getElementById('chat-content');
+const gridContainer = document.getElementById('grid-container');
+
+// Game state variables
+let countdownInterval;
+const playerName = 'Player1';
+let squareCount = 0;
+let chatCount = 1;
+
+// Grid management functions
+const updateGrid = () => {
+  const cols = Math.ceil(Math.sqrt(squareCount));
+  const rows = Math.ceil(squareCount / cols);
+  gridContainer.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+};
+
+const addSquare = () => {
+  squareCount++;
+  updateGrid();
+  const colors = ["cerulean", "light-sea-green", "sunset", "floral-white", "light-red"];
+  
+  const square = document.createElement("div");
+  square.className = `${colors[(squareCount - 1) % colors.length]} w-16 h-16 rounded-md shadow-md flex flex-col items-center justify-center text-black font-bold pop-in`;
+  square.innerHTML = `
+    <span class="iconify" data-icon="mdi:account" data-width="24" data-height="24"></span>
+    Student ${squareCount}
+  `;
+  gridContainer.appendChild(square);
+};
+
+const removeSquare = () => {
+  if (squareCount > 0) {
+    const squareToRemove = gridContainer.lastElementChild;
+    squareToRemove.classList.add("pop-out");
+    setTimeout(() => {
+      squareToRemove.remove();
+      squareCount--;
+      updateGrid();
+    }, 300);
+  }
+};
+
+// Chat functionality
+const addStreamMessage = (message, type = 'user') => {
+  if (!message.trim()) return;
+
+  const chatLine = document.createElement("div");
+  chatLine.className = "text-gray-700 flex items-center gap-2";
+  
+  if (type === 'system') {
+    chatLine.innerHTML = `<span class="font-bold text-blue-600">${message}</span>`;
+  } else {
+    chatLine.innerHTML = `<span class="font-bold">${chatCount}.</span> <span>${message}</span>`;
+    chatCount++;
+  }
+  
+  chatContent.appendChild(chatLine);
+  chatContent.scrollTop = chatContent.scrollHeight;
+};
+
+// Timer functionality
+function startCountdown(endTimestamp) {
+  if (countdownInterval) {
+    clearInterval(countdownInterval);
+  }
+
+  function updateTimer() {
+    const now = new Date().getTime();
+    const timeLeft = endTimestamp - now;
+
+    if (timeLeft <= 0) {
+      clearInterval(countdownInterval);
+      timerEl.textContent = 'Time\'s up!';
+      timerEl.classList.add('text-red-600');
+      //addStreamMessage('Time\'s up! Starting new round...', 'system');
+      fetchGameState();
+      return;
+    }
+
+    const seconds = Math.floor(timeLeft / 1000);
+    timerEl.textContent = `${seconds}s`;
+  }
+
+  updateTimer();
+  countdownInterval = setInterval(updateTimer, 1000);
+}
+
+// Game state management
+function updateGameState(data) {
+  gameInfoEl.innerHTML = '';
+  statusEl.textContent = data.message || '';
+
+  if (data.session_id) {
+    const infoHtml = `
+      <div>
+        Session: ${data.session_id || ''}<br>
+        Turn: ${data.turn_number || ''}<br>
+        Word: ${data.word || ''}
+      </div>
+    `;
+    gameInfoEl.innerHTML = infoHtml;
+
+    // Display hints based on turn number
+    const turnNumber = parseInt(data.turn_number) || 0;
+    
+    // Hint 0 on turn 1
+    if (turnNumber === 1 && data.hint0) {
+      addStreamMessage('New hint available:', 'system');
+      addStreamMessage(data.hint0, 'system');
+    }
+    // Hint 1 on turn 3
+    else if (turnNumber === 3 && data.hint1) {
+      addStreamMessage('New hint available:', 'system');
+      addStreamMessage(data.hint1, 'system');
+    }
+    // Hint 2 on turn 5
+    else if (turnNumber === 5 && data.hint2) {
+      addStreamMessage('New hint available:', 'system');
+      addStreamMessage(data.hint2, 'system');
+    }
+    // Hint 3 on turn 7
+    else if (turnNumber === 7 && data.hint3) {
+      addStreamMessage('New hint available:', 'system');
+      addStreamMessage(data.hint3, 'system');
+    }
+
+    if (data.end_timestamp) {
+      startCountdown(data.end_timestamp);
+    }
+  }
+}
+
+// API interactions
+async function submitAdvice(adviceText) {
+  if (!guessText) return;
+
+  submitGuessBtn.disabled = true;
+  submitGuessBtn.classList.add('opacity-75');
+
+  try {
+    const formData = new FormData();
+    formData.append('guess_text', guessText);
+    formData.append('player_name', playerName);
+    formData.append('personality', document.getElementById('personality-select').value);
+
+    const response = await fetch('https://lemot.online/player/submit_guess/', {
+      method: 'POST',
+      body: formData
+    });
+    
+    const data = await response.json();
+    
+    if (data.error) {
+      statusEl.textContent = data.message || "Error submitting guess.";
+      statusEl.classList.add('text-red-600');
+      addStreamMessage('Error submitting guess', 'system');
+    } else {
+      feedbackSection.classList.remove('hidden');
+      guessedWordEl.textContent = data.guessed_word;
+      guessScoreEl.textContent = `${data.score} / 10`;
+      feedbackTextEl.textContent = data.feedback;
+      
+      addStreamMessage(`${data.guessed_word} - Score: ${data.score} / 10`);
+      guessInput.value = '';
+      fetchGameState();
+    }
+  } catch (err) {
+    console.error(err);
+    statusEl.textContent = "Error submitting guess.";
+    statusEl.classList.add('text-red-600');
+  } finally {
+    submitGuessBtn.disabled = false;
+    submitGuessBtn.classList.remove('opacity-75');
+  }
+}
+
+function fetchGameState() {
+  const formData = new FormData();
+  formData.append('player_name', playerName);
+
+  fetch('https://lemot.online/player/play/', {
+    method: 'POST',
+    body: formData
+  })
+  .then(res => res.json())
+  .then(data => {
+    if (data.error) {
+      statusEl.textContent = data.message;
+      statusEl.classList.add('text-red-600');
+      addStreamMessage(data.message, 'system');
+    } else {
+      statusEl.classList.remove('text-red-600');
+      updateGameState(data);
+    }
+  })
+  .catch(err => {
+    console.error(err);
+    statusEl.textContent = "Error fetching game state.";
+    addStreamMessage("Error fetching game state", 'system');
+  });
+}
+
+// Event listeners
+submitGuessBtn.addEventListener('click', () => {
+  const guessText = guessInput.value.trim();
+  submitGuessb(guessText);
+});
+
+guessInput.addEventListener('keypress', (e) => {
+  if (e.key === 'Enter') {
+    const guessText = guessInput.value.trim();
+    submitGuessb(guessText);
+  }
+});
+
+// Add square button listeners if they exist
+const addSquareBtn = document.getElementById('add-square');
+const removeSquareBtn = document.getElementById('remove-square');
+
+if (addSquareBtn) {
+  addSquareBtn.addEventListener('click', addSquare);
+}
+if (removeSquareBtn) {
+  removeSquareBtn.addEventListener('click', removeSquare);
+}
+
+// Initialize game
+window.addEventListener('load', fetchGameState);

index.html

@@ -1,19 +1,110 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Word Game Interface</title>
+  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/iconify/2.0.0/iconify.min.js"></script>
+  <style>
+    :root {
+      --cerulean: #227c9dff;
+      --light-sea-green: #17c3b2ff;
+      --sunset: #ffcb77ff;
+      --floral-white: #fef9efff;
+      --light-red: #fe6d73ff;
+    }
+    .cerulean { background-color: var(--cerulean); }
+    .light-sea-green { background-color: var(--light-sea-green); }
+    .sunset { background-color: var(--sunset); }
+    .floral-white { background-color: var(--floral-white); }
+    .light-red { background-color: var(--light-red); }
+    .pop-in { animation: pop-in 0.3s ease-out; }
+    .pop-out { animation: pop-out 0.3s ease-out; }
+    @keyframes pop-in {
+      from { transform: scale(0.5); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+    @keyframes pop-out {
+      from { transform: scale(1); opacity: 1; }
+      to { transform: scale(0.5); opacity: 0; }
+    }
+  </style>
+</head>
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen flex flex-col items-center justify-center relative">
+  <!-- Hint Section -->
+  <div id="hints-container" class="absolute top-4 left-4 flex flex-col gap-4">
+    <!-- Hints will be dynamically inserted here -->
+  </div>
+
+  <!-- Professor Section -->
+  <div id="large-square" class="mb-10 w-48 h-48 bg-purple-500 flex flex-col items-center justify-center rounded-lg shadow-lg text-white font-bold text-xl">
+    <span class="iconify" data-icon="mdi:account-tie" data-width="48" data-height="48"></span>
+    Professor
+  </div>
+
+  <!-- Dynamic Grid -->
+  <div id="grid-container" class="grid gap-4 p-4"></div>
+
+  <!-- Chat Section -->
+  <div id="chat-box" class="w-96 bg-white p-4 flex flex-col overflow-y-auto border-l border-gray-300 absolute right-4 top-4 rounded-lg shadow-md h-[calc(100vh-8rem)]">
+    <h2 class="text-lg font-bold text-gray-700 mb-4">Stream</h2>
+    <div id="chat-content" class="flex-1 flex flex-col gap-2 overflow-y-auto"></div>
+  </div>
+
+  <!-- Input Field -->
+  <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 w-full max-w-lg">
+    <div class="flex items-center gap-2">
+      <input
+        id="guess-input"
+        type="text"
+        placeholder="Enter your advice..."
+        class="flex-1 border border-gray-300 rounded px-4 py-2 focus:ring focus:ring-blue-400 focus:outline-none"
+      />
+      <button
+        id="submit-guess"
+        class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-600 transition"
+      >
+        Send
+      </button>
+    </div>
+  </div>
+
+  <!-- Dev Interface (Bottom Left) -->
+  <div class="fixed bottom-4 left-4 w-64 bg-white shadow-lg rounded-lg p-4 text-sm">
+    <div id="status" class="text-xs mb-2"></div>
+    <div id="timer" class="text-sm font-bold mb-2"></div>
+    <div id="game-info" class="text-xs"></div>
+    
+    <div class="mt-2">
+      <select id="personality-select" class="w-full text-xs p-1 border rounded">
+        <option value="normal">normal</option>
+        <option value="genuine_friend">genuine friend</option>
+        <option value="sensitive_to_compliments">sensitive to compliments</option>
+        <option value="rebellious">rebel</option>
+      </select>
+      <input id="dev-guess-input" type="text" placeholder="Enter advice..." class="w-full text-xs p-1 mt-1 border rounded"/>
+      <button id="submit-guess-btn" class="w-full bg-indigo-600 text-white text-xs p-1 mt-1 rounded">
+        Submit
+      </button>
+    </div>
+
+    <div id="feedback-section" class="mt-2 text-xs hidden">
+      <div class="flex justify-between">
+        <span id="guessed-word"></span>
+        <span id="guess-score"></span>
+      </div>
+      <p id="feedback-text" class="mt-1"></p>
+    </div>
+  </div>
+
+  <script src="./game_logic.js"></script>
+  <script src="./music_controller.js"></script>
+  <script src="./eleven_labs_script.js"></script>
+  <script src="./personality_allocation.js"></script>
+  <script src="./populate_interface.js"></script>
+  
+  
+</body>
+</html>

music_controller.js

@@ -0,0 +1,58 @@
+// music_controller.js
+
+class MusicController {
+    constructor() {
+        this.bgMusic = document.getElementById('bgMusic');
+        this.musicToggle = document.getElementById('musicToggle');
+        this.isMusicPlaying = false;
+        this.initializeMusic();
+        this.setupEventListeners();
+    }
+
+    initializeMusic() {
+        if (this.bgMusic) {
+            this.bgMusic.volume = 0.5;
+        }
+    }
+
+    setupEventListeners() {
+        // Setup toggle button click handler
+        this.musicToggle.addEventListener('click', () => this.toggleMusic());
+
+        // Setup initial click handler for the whole document
+        document.addEventListener('click', () => {
+            if (!this.isMusicPlaying) {
+                this.playMusic().catch(error => console.log('Audio playback prevented:', error));
+            }
+        }, { once: true });
+    }
+
+    toggleMusic() {
+        if (this.isMusicPlaying) {
+            this.pauseMusic();
+        } else {
+            this.playMusic();
+        }
+        this.updateMusicIcon();
+        this.isMusicPlaying = !this.isMusicPlaying;
+    }
+
+    playMusic() {
+        return this.bgMusic.play();
+    }
+
+    pauseMusic() {
+        this.bgMusic.pause();
+    }
+
+    updateMusicIcon() {
+        const icon = this.musicToggle.querySelector('.iconify');
+        const iconName = this.isMusicPlaying ? 'mdi:speaker-off' : 'mdi:speaker';
+        icon.setAttribute('data-icon', iconName);
+    }
+}
+
+// Initialize the music controller when the document is ready
+document.addEventListener('DOMContentLoaded', () => {
+    const musicController = new MusicController();
+});

personality_allocation.js

@@ -0,0 +1,136 @@
+// personality_allocation.js
+
+// Personality and color mappings with additional visual properties
+const personalityConfig = {
+    normal: {
+        color: '#227c9d', // cerulean
+        name: 'normal',
+        icon: 'mdi:account-circle',
+        backgroundColor: 'cerulean',
+        borderColor: 'border-blue-600'
+    },
+    genuine_friend: {
+        color: '#17c3b2', // light-sea-green
+        name: 'genuine friend',
+        icon: 'mdi:account-heart',
+        backgroundColor: 'light-sea-green',
+        borderColor: 'border-teal-600'
+    },
+    sensitive_to_compliments: {
+        color: '#ffcb77', // sunset
+        name: 'sensitive to compliments',
+        icon: 'mdi:account-star',
+        backgroundColor: 'sunset',
+        borderColor: 'border-yellow-600'
+    },
+    rebellious: {
+        color: '#fe6d73', // light-red
+        name: 'rebellious',
+        icon: 'mdi:account-alert',
+        backgroundColor: 'light-red',
+        borderColor: 'border-red-600'
+    }
+};
+
+// Get random personality
+function getRandomPersonality() {
+    const personalities = Object.keys(personalityConfig);
+    const randomIndex = Math.floor(Math.random() * personalities.length);
+    return personalities[randomIndex];
+}
+
+// Create player square with personality
+function createPlayerSquare(personality) {
+    const config = personalityConfig[personality];
+    
+    // Create the square container
+    const square = document.createElement('div');
+    square.className = `w-16 h-16 rounded-md shadow-lg flex flex-col items-center justify-center text-white font-medium pop-in ${config.backgroundColor}`;
+    
+    // Add icon and label
+    square.innerHTML = `
+        <span class="iconify mb-1" data-icon="${config.icon}" data-width="24" data-height="24"></span>
+        <span class="text-xs">You</span>
+    `;
+    
+    return square;
+}
+
+// Initialize personality system
+function initializePersonalitySystem() {
+    // Get DOM elements
+    const personalitySelect = document.getElementById('personality-select');
+    const gridContainer = document.getElementById('grid-container');
+    const gameInfo = document.getElementById('game-info');
+    
+    // Get random personality
+    const selectedPersonality = getRandomPersonality();
+    const config = personalityConfig[selectedPersonality];
+    
+    // Set the select value programmatically
+    personalitySelect.value = selectedPersonality;
+    
+    // Create personality display
+    const personalityDisplay = document.createElement('div');
+    personalityDisplay.className = 'bg-white rounded-lg p-4 shadow-md mb-4';
+    personalityDisplay.innerHTML = `
+        <div class="text-sm text-gray-600 mb-2">Your Personality:</div>
+        <div class="flex items-center gap-2">
+            <div class="w-3 h-3 rounded-full" style="background-color: ${config.color}"></div>
+            <span class="font-medium capitalize">${config.name.replace(/_/g, ' ')}</span>
+        </div>
+    `;
+    
+    // Add personality info to game info
+    if (gameInfo) {
+        gameInfo.insertBefore(personalityDisplay, gameInfo.firstChild);
+    }
+    
+    // Create and add player square to grid
+    const playerSquare = createPlayerSquare(selectedPersonality);
+    if (gridContainer) {
+        // Clear existing squares if any
+        gridContainer.innerHTML = '';
+        gridContainer.appendChild(playerSquare);
+    }
+    
+    // Update game state with personality
+    window.playerPersonality = selectedPersonality;
+    
+    // Add to chat history
+    const chatContent = document.getElementById('chat-content');
+    if (chatContent) {
+        const personalityMessage = document.createElement('div');
+        personalityMessage.className = 'text-gray-600 text-sm italic mb-4';
+        personalityMessage.textContent = `You joined as a ${config.name.replace(/_/g, ' ')}`;
+        chatContent.appendChild(personalityMessage);
+    }
+}
+
+// Expose necessary functions and data
+window.personalitySystem = {
+    config: personalityConfig,
+    getRandomPersonality,
+    createPlayerSquare,
+    initialize: initializePersonalitySystem
+};
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', initializePersonalitySystem);
+
+// Handle personality updates in the game logic
+document.addEventListener('personalityUpdated', (event) => {
+    const newPersonality = event.detail.personality;
+    const config = personalityConfig[newPersonality];
+    
+    // Update the player square
+    const playerSquare = document.querySelector('#grid-container > div');
+    if (playerSquare) {
+        Object.keys(personalityConfig).forEach(personality => {
+            const pConfig = personalityConfig[personality];
+            playerSquare.classList.remove(pConfig.backgroundColor);
+        });
+        playerSquare.classList.add(config.backgroundColor);
+        playerSquare.querySelector('.iconify').setAttribute('data-icon', config.icon);
+    }
+});

populate_interface.js

@@ -0,0 +1,146 @@
+// 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');
+    }
+});