Spaces:

MikeDoes
/

test

Running

App Files Files Community

MikeDoes commited on 26 days ago

Commit

07b11dd

verified ·

1 Parent(s): c973283

Upload standalone.html

Browse files

Files changed (1) hide show

standalone.html +306 -0

standalone.html ADDED Viewed

	@@ -0,0 +1,306 @@

+<!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>