first releases

Walpurga03 · Nov 29, 2024 · d416562 · d416562
1 parent f8cc4e5
commit d416562
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 1,105 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 import { Question } from './components/Question/Question';
 import { ExplanationPopup } from './components/ExplanationPopup/ExplanationPopup';
 import StartAnimation from './components/StartAnimation/StartAnimation';
@@ -15,10 +15,42 @@ function App() {
   const [showStartAnimation, setShowStartAnimation] = useState(true);
   const [showEndAnimation, setShowEndAnimation] = useState(false);
   const [showQuote, setShowQuote] = useState(false);
+  const [correctAnswers, setCorrectAnswers] = useState(0);
+
+  // Memoize current question and quote to prevent unnecessary re-renders
+  const currentQuestion = useMemo(() => myths[currentQuestionIndex], [currentQuestionIndex]);
+  const currentQuote = useMemo(() => quotes[currentQuoteIndex % quotes.length], [currentQuoteIndex]);
+
+  // Preload next question and prepare data
+  useEffect(() => {
+    if (currentQuestionIndex < myths.length - 1) {
+      // Preload next question data
+      const preloadNextQuestion = () => {
+        const nextIndex = currentQuestionIndex + 1;
+        if (nextIndex < myths.length) {
+          // Create a hidden element to preload text
+          const preloadDiv = document.createElement('div');
+          preloadDiv.style.display = 'none';
+          preloadDiv.textContent = myths[nextIndex].text + myths[nextIndex].explanation;
+          document.body.appendChild(preloadDiv);
+
+          // Remove after a short delay
+          setTimeout(() => {
+            document.body.removeChild(preloadDiv);
+          }, 100);
+        }
+      };
+
+      preloadNextQuestion();
+    }
+  }, [currentQuestionIndex]);
 
   const handleAnswer = (answer: boolean) => {
-    const isCorrect = answer === myths[currentQuestionIndex].isMyth;
+    const isCorrect = answer === currentQuestion.isMyth;
     setIsAnswerCorrect(isCorrect);
+    if (isCorrect) {
+      setCorrectAnswers(prev => prev + 1);
+    }
     setShowExplanation(true);
   };
 
@@ -30,7 +62,6 @@ function App() {
   const handleNextQuestion = () => {
     setShowQuote(false);
 
-    // Nächste Frage
     if (currentQuestionIndex < myths.length - 1) {
       setCurrentQuestionIndex(currentQuestionIndex + 1);
       setCurrentQuoteIndex(currentQuoteIndex + 1);
@@ -46,23 +77,28 @@ function App() {
   }
 
   if (showEndAnimation) {
-    return <EndAnimation onComplete={() => {
-      setShowEndAnimation(false);
-      setCurrentQuestionIndex(0);
-      setCurrentQuoteIndex(0);
-    }} />;
+    return <EndAnimation 
+      onComplete={() => {
+        setShowEndAnimation(false);
+        setCurrentQuestionIndex(0);
+        setCurrentQuoteIndex(0);
+        setCorrectAnswers(0);
+      }}
+      correctAnswers={correctAnswers}
+      totalQuestions={myths.length}
+    />;
   }
 
-  const currentQuestion = myths[currentQuestionIndex];
-  const currentQuote = quotes[currentQuoteIndex % quotes.length];
-
   return (
     <div className="app">
       <div className={`app__content ${showQuote ? 'blur-background' : ''}`}>
-        <Question
-          questionText={currentQuestion.text}
-          onAnswer={handleAnswer}
-        />
+        {!showStartAnimation && !showEndAnimation && (
+          <Question
+            key={currentQuestionIndex}
+            questionText={currentQuestion.text}
+            onAnswer={handleAnswer}
+          />
+        )}
         {showExplanation && (
           <ExplanationPopup
             explanation={currentQuestion.explanation}

diff --git a/src/components/EndAnimation/EndAnimation.scss b/src/components/EndAnimation/EndAnimation.scss
@@ -614,6 +614,119 @@
     }
   }
 
+  .content {
+    position: relative;
+    z-index: 2;
+    text-align: center;
+    padding: 2rem;
+
+    @media (max-width: 480px) {
+      padding: 1rem;
+    }
+
+    .bitcoin-logo {
+      font-size: 4rem;
+      color: #f7931a;
+      margin-bottom: 2rem;
+
+      @media (max-width: 480px) {
+        font-size: 3rem;
+        margin-bottom: 1rem;
+      }
+    }
+
+    .glowing-title {
+      margin-bottom: 2rem;
+
+      @media (max-width: 480px) {
+        margin-bottom: 1rem;
+      }
+
+      h2.glowing {
+        font-size: 2.5rem;
+
+        @media (max-width: 480px) {
+          font-size: 1.8rem;
+        }
+      }
+    }
+
+    .message {
+      margin: 2rem 0;
+
+      @media (max-width: 480px) {
+        margin: 1rem 0;
+
+        p {
+          font-size: 1rem;
+          line-height: 1.4;
+        }
+      }
+    }
+
+    .score {
+      text-align: center;
+      margin: 20px 0;
+      padding: 20px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 10px;
+      backdrop-filter: blur(5px);
+
+      @media (max-width: 480px) {
+        margin: 15px 0;
+        padding: 15px;
+      }
+
+      p {
+        margin: 5px 0;
+        font-size: 1.2em;
+
+        @media (max-width: 480px) {
+          font-size: 1em;
+        }
+      }
+
+      .percentage {
+        font-size: 2em;
+        font-weight: bold;
+        color: #f7931a;
+
+        @media (max-width: 480px) {
+          font-size: 1.6em;
+        }
+      }
+    }
+
+    .resources {
+      margin: 2rem 0;
+
+      @media (max-width: 480px) {
+        margin: 1.5rem 0;
+      }
+
+      .resources-grid {
+        grid-template-columns: 1fr;
+        gap: 1rem;
+
+        @media (max-width: 480px) {
+          padding: 0 0.5rem;
+        }
+      }
+    }
+
+    button {
+      margin-top: 1.5rem;
+      padding: 0.8rem 2rem;
+      font-size: 1.1rem;
+
+      @media (max-width: 480px) {
+        margin-top: 1rem;
+        padding: 0.6rem 1.5rem;
+        font-size: 1rem;
+      }
+    }
+  }
+
   .resources-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

diff --git a/src/components/EndAnimation/EndAnimation.tsx b/src/components/EndAnimation/EndAnimation.tsx
@@ -4,9 +4,11 @@ import { sources } from '../../data/sources';
 
 interface EndAnimationProps {
   onComplete: () => void;
+  correctAnswers: number;
+  totalQuestions: number;
 }
 
-const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
+const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete, correctAnswers, totalQuestions }) => {
   const particlesRef = useRef<HTMLCanvasElement>(null);
   const bitcoinLogoRef = useRef<HTMLDivElement>(null);
 
@@ -118,11 +120,8 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
     <div className="end-animation">
       <canvas ref={particlesRef} className="particles-canvas" />
 
-      <div className="bitcoin-logo" ref={bitcoinLogoRef}>
-        <img src="/bitcoin-logo.svg" alt="Bitcoin Logo" />
-      </div>
-
-      <div className="end-animation__content visible">
+      <div className="content">
+        <div ref={bitcoinLogoRef} className="bitcoin-logo">₿</div>
         <div className="glowing-title">
           <h2 className="glowing">Gratulation! 🎉</h2>
           <div className="glowing-orbs">
@@ -131,12 +130,17 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
             <div className="orb"></div>
           </div>
         </div>
-
+        
         <div className="message">
           <p>Du hast es geschafft! Du kennst jetzt die häufigsten Bitcoin-Mythen und ihre Widerlegungen.</p>
         </div>
 
-        <div className="resources">
+        <div className="score">
+          <p>Du hast {correctAnswers} von {totalQuestions} Fragen richtig beantwortet!</p>
+          <p className="percentage">({Math.round((correctAnswers / totalQuestions) * 100)}%)</p>
+        </div>
+        <button onClick={onComplete}>Neu starten</button>
+        <div className="sources">
           <h3>Weiterführende Ressourcen</h3>
           <div className="resources-grid">
             {sources.map(source => (
@@ -154,7 +158,6 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
             ))}
           </div>
         </div>
-
         <div className="contribute">
           <h3>Open Source</h3>
           <p>Der Code steht jedem zur Verfügung. So kannst du ihn für deine eigenen Bitcoin-Mythen nutzen:</p>
@@ -207,10 +210,6 @@ const EndAnimation: React.FC<EndAnimationProps> = ({ onComplete }) => {
           </div>
         </div>
       </div>
-
-      <button className="back-button" onClick={onComplete}>
-        Zurück zum Start
-      </button>
     </div>
   );
 };