Spaces:

MikeDoes
/

test

Running

File size: 12,275 Bytes

07b11dd

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Current Game</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/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">
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
<div class="container mx-auto py-8 px-4 sm:px-6 lg:px-8 max-w-4xl">
  <!-- Header Section -->
  <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
    <div class="flex justify-between items-center">
      <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">Word Game</h1>
        <p class="text-sm text-gray-600 font-medium">Welcome, <span id="player-name" class="text-indigo-600"></span>!</p>
      </div>
      <div id="timer" class="text-2xl font-bold text-indigo-600 bg-indigo-50 px-6 py-3 rounded-xl shadow-sm"></div>
    </div>
  </div>

  <!-- Game Status -->
  <div id="status" class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-8 text-blue-700 font-medium shadow-sm"></div>

  <!-- Feedback Section -->
  <div id="feedback-section" class="bg-white rounded-2xl shadow-lg p-6 mb-8 hidden">
    <div class="flex items-center justify-between">
      <div class="flex-1">
        <h3 class="text-lg font-semibold text-gray-800 mb-2">Latest Guess Results</h3>
        <div class="flex items-center space-x-4">
          <div class="bg-gray-50 rounded-lg px-4 py-2">
            <span class="text-gray-500 text-sm">Word:</span>
            <span id="guessed-word" class="font-medium text-gray-800 ml-2"></span>
          </div>
          <div class="bg-indigo-50 rounded-lg px-4 py-2">
            <span class="text-indigo-500 text-sm">Score:</span>
            <span id="guess-score" class="font-medium text-indigo-600 ml-2"></span>
          </div>
        </div>
        <p id="feedback-text" class="mt-3 text-gray-700"></p>
      </div>
      <div id="score-indicator" class="w-24 h-24 rounded-full border-8 flex items-center justify-center">
        <span class="text-2xl font-bold"></span>
      </div>
    </div>
  </div>

  <!-- Game Info Card -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
    <!-- Game Details -->
    <div class="bg-white rounded-2xl shadow-lg p-6">
      <div id="game-info" class="space-y-4">
        <!-- Will be populated by JS -->
      </div>
    </div>

    <!-- Advice Section -->
    <div class="bg-white rounded-2xl shadow-lg p-6">
      <h3 class="text-lg font-semibold text-gray-800 mb-4">Give Advice</h3>
      <div class="space-y-4">
        <!-- Personality Selector -->
        <div class="mb-4">
          <label for="personality-select" class="block text-sm font-medium text-gray-700 mb-2">Choose Personality</label>
          <select
            id="personality-select"
            class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 shadow-sm"
          >
            <option value="helpful">Helpful</option>
            <option value="funny">Funny</option>
            <option value="strict">Strict</option>
          </select>
        </div>
        <input
          id="guess-input"
          type="text"
          placeholder="Enter your advice..."
          class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition-all duration-200 shadow-sm"
          required
        />
        <button
          id="submit-guess-btn"
          class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-xl transition-all duration-200 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
          Submit Advice
        </button>
      </div>
    </div>
  </div>

  <!-- Previous Guesses -->
  <div class="bg-white rounded-2xl shadow-lg p-6">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">Previous Turn Guesses</h3>
    <div class="bg-gray-50 rounded-xl p-4">
      <ul id="previous-guess-list" class="space-y-2"></ul>
    </div>
  </div>

  <script>
    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 previousGuessList = document.getElementById('previous-guess-list');
    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 scoreIndicatorEl = document.getElementById('score-indicator');
    
    let countdownInterval;
    const playerName = 'Player1'; // You can change this or make it dynamic
    document.getElementById('player-name').textContent = playerName;

    function startCountdown(endTimestamp) {
      if (countdownInterval) {
        clearInterval(countdownInterval);
      }

      function updateTimer() {
        const now = new Date().getTime();
        const timeLeft = endTimestamp - now;

        if (timeLeft <= 0) {
          clearInterval(countdownInterval);
          timerEl.innerHTML = '<i class="fas fa-hourglass-end mr-2"></i>Time\'s up!';
          timerEl.classList.remove('text-indigo-600', 'bg-indigo-50');
          timerEl.classList.add('text-red-600', 'bg-red-50');
          fetchGameState();
          return;
        }

        const seconds = Math.floor(timeLeft / 1000);
        timerEl.innerHTML = `<i class="fas fa-hourglass-half mr-2"></i>${seconds}s`;
      }

      updateTimer();
      countdownInterval = setInterval(updateTimer, 1000);
    }

    async function submitGuess(guessText) {
      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/play/submit_guess/', {
          method: 'POST',
          body: formData
        });
        
        const data = await response.json();
        
        if (data.error) {
          statusEl.textContent = data.message || "Error submitting guess.";
          statusEl.classList.remove('bg-blue-50', 'border-blue-500', 'text-blue-700');
          statusEl.classList.add('bg-red-50', 'border-red-500', 'text-red-700');
        } else {
          feedbackSection.classList.remove('hidden');
          guessedWordEl.textContent = data.guessed_word;
          guessScoreEl.textContent = `${data.score}%`;
          feedbackTextEl.textContent = data.feedback;
          
          scoreIndicatorEl.className = 'w-24 h-24 rounded-full border-8 flex items-center justify-center';
          if (data.score >= 90) {
            scoreIndicatorEl.classList.add('border-green-500', 'text-green-500');
          } else if (data.score >= 70) {
            scoreIndicatorEl.classList.add('border-yellow-500', 'text-yellow-500');
          } else if (data.score >= 50) {
            scoreIndicatorEl.classList.add('border-orange-500', 'text-orange-500');
          } else {
            scoreIndicatorEl.classList.add('border-red-500', 'text-red-500');
          }
          scoreIndicatorEl.querySelector('span').textContent = `${Math.round(data.score)}%`;

          guessInput.value = '';
          fetchGameState();
        }
      } catch (err) {
        console.error(err);
        statusEl.textContent = "Error submitting guess.";
        statusEl.classList.remove('bg-blue-50', 'border-blue-500', 'text-blue-700');
        statusEl.classList.add('bg-red-50', 'border-red-500', 'text-red-700');
      } 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.remove('bg-blue-50', 'border-blue-500', 'text-blue-700');
          statusEl.classList.add('bg-red-50', 'border-red-500', 'text-red-700');
        } else {
          statusEl.classList.remove('bg-red-50', 'border-red-500', 'text-red-700');
          statusEl.classList.add('bg-blue-50', 'border-blue-500', 'text-blue-700');
          updateGameState(data);
        }
      })
      .catch(err => {
        console.error(err);
        statusEl.textContent = "Error fetching game state.";
      });
    }

    function updateGameState(data) {
      gameInfoEl.innerHTML = '';
      previousGuessList.innerHTML = '';
      statusEl.textContent = data.message || '';

      if (data.session_id) {
        const infoHtml = `
          <div class="space-y-4">
            <div class="flex items-center space-x-2">
              <span class="text-gray-500">Session:</span>
              <span class="font-medium text-gray-800">${data.session_id || ''}</span>
            </div>
            <div class="flex items-center space-x-2">
              <span class="text-gray-500">Turn:</span>
              <span class="font-medium text-gray-800">${data.turn_number || ''}</span>
            </div>
            <div class="flex items-center space-x-2">
              <span class="text-gray-500">Word:</span>
              <span class="font-medium text-gray-800">${data.word || ''}</span>
            </div>
            <div class="border-t border-gray-100 pt-4">
              <h4 class="font-semibold text-gray-800 mb-2">Hints:</h4>
              <ul class="space-y-2">
                <li class="flex items-center space-x-2">
                  <i class="fas fa-lightbulb text-yellow-400"></i>
                  <span>${data.hint0 || ''}</span>
                </li>
                <li class="flex items-center space-x-2">
                  <i class="fas fa-lightbulb text-yellow-400"></i>
                  <span>${data.hint1 || ''}</span>
                </li>
                <li class="flex items-center space-x-2">
                  <i class="fas fa-lightbulb text-yellow-400"></i>
                  <span>${data.hint2 || ''}</span>
                </li>
                <li class="flex items-center space-x-2">
                  <i class="fas fa-lightbulb text-yellow-400"></i>
                  <span>${data.hint3 || ''}</span>
                </li>
              </ul>
            </div>
          </div>
        `;
        gameInfoEl.innerHTML = infoHtml;

        if (data.end_timestamp) {
          startCountdown(data.end_timestamp);
        }
      }

      if (Array.isArray(data.previous_turn_guesses) && data.previous_turn_guesses.length > 0) {
        data.previous_turn_guesses.forEach(g => {
          const li = document.createElement('li');
          li.className = 'flex items-center space-x-3 text-gray-700';
          li.innerHTML = `
            <i class="fas fa-user-circle text-gray-400"></i>
            <span class="font-medium text-indigo-600">${g.player_name}</span>
            <span class="text-gray-400">:</span>
            <span>${g.guess_text}</span>
          `;
          previousGuessList.appendChild(li);
        });
      } else {
        previousGuessList.innerHTML = '<p class="text-gray-500 italic">No guesses from previous turn</p>';
      }
    }

    // Event Listeners
    submitGuessBtn.addEventListener('click', () => {
      const guessText = guessInput.value.trim();
      submitGuess(guessText);
    });

    guessInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') {
        const guessText = guessInput.value.trim();
        submitGuess(guessText);
      }
    });

    // Initial fetch
    window.addEventListener('load', fetchGameState);
  </script>
</div>
</body>
</html>