AI generation React

2026-06-15 12:41:51 +03:00
commit 25ee7a53ea
27 changed files with 5402 additions and 0 deletions
@@ -0,0 +1,168 @@
+import React, { useState, useEffect } from 'react';
+import './ComparisonScreen.css';
+
+const ComparisonScreen = ({ 
+  question, 
+  userAnswer, 
+  otherPlayers, 
+  currentQuestionNumber, 
+  totalQuestions, 
+  onContinue 
+}) => {
+  const [showConfetti, setShowConfetti] = useState(false);
+  const [sortedPlayers, setSortedPlayers] = useState([]);
+
+  useEffect(() => {
+    // Если ответ правильный, показываем конфетти
+    if (userAnswer.isCorrect === true) {
+      setShowConfetti(true);
+      setTimeout(() => setShowConfetti(false), 3000);
+    }
+
+    // Сортируем игроков по правильности ответа и времени
+    const allPlayers = [
+      {
+        name: "Вы",
+        avatar: "👤",
+        isCorrect: userAnswer.isCorrect,
+        answerText: userAnswer.answerText,
+        timeSpent: userAnswer.timeSpent,
+        isUser: true
+      },
+      ...otherPlayers
+    ];
+
+    const sorted = allPlayers.sort((a, b) => {
+      if (a.isCorrect === b.isCorrect) {
+        return a.timeSpent - b.timeSpent;
+      }
+      return b.isCorrect ? 1 : -1;
+    });
+
+    setSortedPlayers(sorted);
+  }, [userAnswer, otherPlayers]);
+
+  const getRankEmoji = (index) => {
+    switch(index) {
+      case 0: return "🥇";
+      case 1: return "🥈";
+      case 2: return "🥉";
+      default: return `${index + 1}️⃣`;
+    }
+  };
+
+  const getScoreChange = (isCorrect, timeSpent) => {
+    if (isCorrect) {
+      if (timeSpent < 10) return "+15 ⚡";
+      if (timeSpent < 20) return "+10 ✨";
+      return "+5 📝";
+    }
+    return "0 ❌";
+  };
+
+  const getSpeedRating = (timeSpent) => {
+    if (timeSpent < 10) return "Молниеносно! 🚀";
+    if (timeSpent < 20) return "Быстро ⚡";
+    if (timeSpent < 30) return "Средне 🐌";
+    return "Медленно 🐢";
+  };
+
+  return (
+    <div className="comparison-container">
+      {showConfetti && <div className="confetti">🎉✨🎊</div>}
+      
+      <div className="comparison-card">
+        <div className="comparison-header">
+          <h2>Результаты вопроса {currentQuestionNumber}</h2>
+          <div className="question-preview">
+            <p className="question-text-preview">{question.text}</p>
+          </div>
+        </div>
+
+        <div className="your-result">
+          <div className={`result-badge ${userAnswer.isCorrect ? 'correct' : userAnswer.isCorrect === null ? 'pending' : 'incorrect'}`}>
+            {userAnswer.isCorrect === true && "✅ Правильно!"}
+            {userAnswer.isCorrect === false && "❌ Неправильно!"}
+            {userAnswer.isCorrect === null && "⏳ Ожидает оценки"}
+          </div>
+          
+          <div className="your-stats">
+            <div className="stat-item">
+              <span className="stat-label">Ваш ответ:</span>
+              <span className="stat-value">{userAnswer.answerText}</span>
+            </div>
+            <div className="stat-item">
+              <span className="stat-label">Время ответа:</span>
+              <span className="stat-value">{userAnswer.timeSpent} сек</span>
+            </div>
+            <div className="stat-item">
+              <span className="stat-label">Скорость:</span>
+              <span className="stat-value">{getSpeedRating(userAnswer.timeSpent)}</span>
+            </div>
+            <div className="stat-item">
+              <span className="stat-label">Очки:</span>
+              <span className="stat-value points">{getScoreChange(userAnswer.isCorrect, userAnswer.timeSpent)}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="comparison-section">
+          <h3>🏆 Сравнение с другими игроками</h3>
+          <div className="players-ranking">
+            {sortedPlayers.map((player, index) => (
+              <div key={index} className={`player-row ${player.isUser ? 'current-user' : ''}`}>
+                <div className="player-rank">{getRankEmoji(index)}</div>
+                <div className="player-avatar">{player.avatar}</div>
+                <div className="player-info">
+                  <div className="player-name">
+                    {player.name}
+                    {player.isUser && <span className="user-badge">(Вы)</span>}
+                  </div>
+                  <div className="player-answer">{player.answerText}</div>
+                </div>
+                <div className="player-stats">
+                  <div className={`player-correct ${player.isCorrect ? 'correct' : 'incorrect'}`}>
+                    {player.isCorrect ? "✓" : "✗"}
+                  </div>
+                  <div className="player-time">{player.timeSpent}с</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="statistics-summary">
+          <h3>📊 Статистика вопроса</h3>
+          <div className="stats-grid">
+            <div className="stat-card">
+              <div className="stat-number">
+                {Math.round((sortedPlayers.filter(p => p.isCorrect).length / sortedPlayers.length) * 100)}%
+              </div>
+              <div className="stat-description">игроков ответили правильно</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number">
+                {Math.min(...sortedPlayers.map(p => p.timeSpent))}с
+              </div>
+              <div className="stat-description">самый быстрый ответ</div>
+            </div>
+            <div className="stat-card">
+              <div className="stat-number">
+                {Math.round(sortedPlayers.reduce((sum, p) => sum + p.timeSpent, 0) / sortedPlayers.length)}с
+              </div>
+              <div className="stat-description">среднее время ответа</div>
+            </div>
+          </div>
+        </div>
+
+        <div className="navigation-buttons">
+          <button onClick={onContinue} className="continue-button">
+            {currentQuestionNumber === totalQuestions ? "Завершить викторину 🏁" : "Следующий вопрос →"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ComparisonScreen;