local high score persistence in Trivia

venisha-kalola · venisha-kalola · commit 0dfe644ff0a9 · 2025-10-23T15:22:31.000+05:30
diff --git a/src/components/CountryTrendChart.jsx b/src/components/CountryTrendChart.jsx
@@ -0,0 +1,5 @@
+import ChartPlaceholder from './ChartPlaceholder.jsx';
+
+export default function CountryTrendChart({ slug }) {
+  return <ChartPlaceholder label={`Country Trend for ${slug || 'N/A'} (legacy)`} />;
+}
diff --git a/src/components/HeroSection.jsx b/src/components/HeroSection.jsx
@@ -0,0 +1,19 @@
+export default function HeroSection({ image, title, subtitle }) {
+  return (
+    <div className="relative overflow-hidden rounded-xl mb-6 bg-gradient-to-r from-indigo-50 to-blue-50">
+      <div className="max-w-7xl mx-auto px-4 py-10 flex items-center gap-6">
+        {image ? (
+          <img
+            src={image}
+            alt=""
+            className="w-24 h-24 object-cover rounded-lg shadow-md hidden sm:block"
+          />
+        ) : null}
+        <div>
+          <h1 className="text-3xl md:text-4xl font-extrabold text-gray-800">{title}</h1>
+          {subtitle && <p className="text-gray-600 mt-2">{subtitle}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/Trivia.jsx b/src/pages/Trivia.jsx
@@ -9,7 +9,7 @@
  * Medium:
  *  - [ ] Timer per question + bonus points for speed
  *  - [ ] Show progress bar (questions answered / total)
- *  - [ ] Local high score persistence
+ *  - [x] Local high score persistence
  *  - [ ] Review mode (see all answers after completion)
  * Advanced:
  *  - [ ] Question set builder (choose amount, difficulty, category)
@@ -21,69 +21,312 @@ import { useEffect, useState } from 'react';
 import Loading from '../components/Loading.jsx';
 import ErrorMessage from '../components/ErrorMessage.jsx';
 import Card from '../components/Card.jsx';
+import HeroSection from '../components/HeroSection';
+import Quiz from '../Images/Quiz.jpg';
 
 export default function Trivia() {
   const [questions, setQuestions] = useState([]);
   const [category, setCategory] = useState('18'); // Science: Computers
+  const [difficulty, setDifficulty] = useState('easy'); // Default to easy
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [score, setScore] = useState(0);
+  const [showReview, setShowReview] = useState(false);
+  const [highScore, setHighScore] = useState(0);
+  const [hasSavedForSet, setHasSavedForSet] = useState(false);
 
-  useEffect(() => { fetchQuestions(); }, [category]);
+  useEffect(() => {
+    fetchQuestions();
+  }, [category, difficulty]);
+
+  // Load high score once on mount
+  useEffect(() => {
+    try {
+      const stored = typeof window !== 'undefined' ? localStorage.getItem('triviaHighScore') : null;
+      if (stored !== null) setHighScore(parseInt(stored, 10) || 0);
+    } catch (_) {
+      // ignore storage errors
+    }
+  }, []);
 
   async function fetchQuestions() {
     try {
-      setLoading(true); setError(null); setScore(0);
-      const res = await fetch(`https://opentdb.com/api.php?amount=5&category=${category}&type=multiple`);
+      setLoading(true);
+      setError(null);
+      setScore(0);
+      setShowReview(false);
+  setHasSavedForSet(false);
+
+      const res = await fetch(
+        `https://opentdb.com/api.php?amount=5&category=${category}&difficulty=${difficulty}&type=multiple`
+      );
       if (!res.ok) throw new Error('Failed to fetch');
       const json = await res.json();
-      const qs = json.results.map(q => ({
+
+      const qs = json.results.map((q) => ({
         ...q,
         answers: shuffle([q.correct_answer, ...q.incorrect_answers]),
-        picked: null
+        picked: null,
       }));
       setQuestions(qs);
-    } catch (e) { setError(e); } finally { setLoading(false); }
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
   }
 
-  function shuffle(arr) { return arr.sort(() => Math.random() - 0.5); }
+  function shuffle(arr) {
+    return arr.sort(() => Math.random() - 0.5);
+  }
 
   function pick(qIndex, answer) {
-    setQuestions(qs => qs.map((q,i) => i===qIndex ? { ...q, picked: answer } : q));
-    if (questions[qIndex].correct_answer === answer) setScore(s => s+1);
+    setQuestions((qs) =>
+      qs.map((q, i) => (i === qIndex ? { ...q, picked: answer } : q))
+    );
+    if (questions[qIndex].correct_answer === answer) {
+      setScore((s) => s + 1);
+    }
+  }
+
+  function decodeHtml(html) {
+    const txt = document.createElement('textarea');
+    txt.innerHTML = html;
+    return txt.value;
+  }
+
+  const answeredCount = questions.filter((q) => q.picked !== null).length;
+  const totalQuestions = questions.length;
+  const progressPercent =
+    totalQuestions > 0 ? (answeredCount / totalQuestions) * 100 : 0;
+
+  const allAnswered = answeredCount === totalQuestions && totalQuestions > 0;
+
+  // Persist high score at end of game (once per question set)
+  useEffect(() => {
+    if (!allAnswered || hasSavedForSet) return;
+    if (score > highScore) {
+      try {
+        if (typeof window !== 'undefined') localStorage.setItem('triviaHighScore', String(score));
+      } catch (_) {
+        // ignore storage errors
+      }
+      setHighScore(score);
+    }
+    setHasSavedForSet(true);
+  }, [allAnswered, score, highScore, hasSavedForSet]);
+
+  function resetHighScore() {
+    try {
+      if (typeof window !== 'undefined') localStorage.removeItem('triviaHighScore');
+    } catch (_) {
+      // ignore storage errors
+    }
+    setHighScore(0);
   }
 
   return (
-    <div>
-      <h2>Trivia Quiz</h2>
-      <label>Category: 
-        <select value={category} onChange={e => setCategory(e.target.value)}>
-          <option value="18">Science: Computers</option>
-          <option value="21">Sports</option>
-          <option value="23">History</option>
-        </select>
-      </label>
+    <>
+        <HeroSection
+  image={Quiz}
+ title={
+    <>
+      Think Fast, <span style={{ color: 'grey' }}>Learn Faster</span>
+    </>
+  }
+  subtitle="A trivia playground for curious minds, quick thinkers, and casual know-it-alls"
+/>
+    <div style={{ padding: '20px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
+        <h2 style={{ margin: 0 }}>Trivia Quiz</h2>
+        <span style={{ 
+          backgroundColor: difficulty === 'easy' ? '#4caf50' : difficulty === 'medium' ? '#ff9800' : '#f44336',
+          color: 'white',
+          padding: '4px 8px',
+          borderRadius: '4px',
+          fontSize: '0.9em'
+        }}>
+          {difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
+        </span>
+      </div>
+
+      {/* Category Selector */}
+      <div style={{ display: 'flex', gap: '20px', marginBottom: '20px' }}>
+        <label>
+          Category:{' '}
+          <select
+            value={category}
+            onChange={(e) => setCategory(e.target.value)}
+            disabled={showReview}
+          >
+            <option value="18">Science: Computers</option>
+            <option value="21">Sports</option>
+            <option value="23">History</option>
+          </select>
+        </label>
+        {/* Difficulty Selector */}
+        <label>
+          Difficulty:{' '}
+          <select
+            value={difficulty}
+            onChange={(e) => setDifficulty(e.target.value)}
+            disabled={showReview}
+          >
+            <option value="easy">Easy</option>
+            <option value="medium">Medium</option>
+            <option value="hard">Hard</option>
+          </select>
+        </label>
+      </div>
+
+      {/* Loading / Error */}
       {loading && <Loading />}
       <ErrorMessage error={error} />
-      <p>Score: {score}</p>
+
+      {/* Progress Bar */}
+      {totalQuestions > 0 && (
+        <div style={{ margin: '15px 0' }}>
+          <p>
+            Progress: {answeredCount} / {totalQuestions} answered
+          </p>
+          <div
+            style={{
+              height: '10px',
+              width: '100%',
+              background: '#ddd',
+              borderRadius: '8px',
+              overflow: 'hidden',
+            }}
+          >
+            <div
+              style={{
+                width: `${progressPercent}%`,
+                height: '100%',
+                background: '#4caf50',
+                transition: 'width 0.3s ease',
+              }}
+            ></div>
+          </div>
+        </div>
+      )}
+
+      {/* Score + Review Button */}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          marginBottom: '15px',
+        }}
+      >
+        <p style={{ margin: 0, fontWeight: 'bold' }}>Score: {score} | Best: {highScore}</p>
+        <button
+          onClick={resetHighScore}
+          style={{
+            background: '#6c757d',
+            color: '#fff',
+            padding: '6px 10px',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: 'pointer',
+          }}
+        >
+          Reset High Score
+        </button>
+        <button
+          onClick={() => setShowReview(true)}
+          disabled={!allAnswered || showReview}
+          style={{
+            background: allAnswered ? '#007bff' : '#ccc',
+            color: '#fff',
+            padding: '6px 12px',
+            border: 'none',
+            borderRadius: '6px',
+            cursor: allAnswered && !showReview ? 'pointer' : 'not-allowed',
+          }}
+        >
+          Review Answers
+        </button>
+      </div>
+
+      {/* Quiz Cards */}
       {questions.map((q, idx) => (
-        <Card key={idx} title={`Q${idx+1}: ${decodeHtml(q.question)}`}>
+        <Card key={idx} title={`Q${idx + 1}: ${decodeHtml(q.question)}`}>
           <ul>
-            {q.answers.map(a => (
-              <li key={a}>
-                <button disabled={q.picked} className={a===q.correct_answer ? (q.picked && a===q.picked ? 'correct' : '') : (q.picked===a ? 'wrong':'')} onClick={() => pick(idx, a)}>{decodeHtml(a)}</button>
-              </li>
-            ))}
+            {q.answers.map((a) => {
+              const isPicked = q.picked === a;
+              const isCorrect = a === q.correct_answer;
+              let btnClass = '';
+
+              if (showReview) {
+                btnClass = isCorrect
+                  ? 'correct'
+                  : isPicked
+                  ? 'wrong'
+                  : 'neutral';
+              } else if (isPicked) {
+                btnClass = isCorrect ? 'correct' : 'wrong';
+              }
+
+              return (
+                <li key={a}>
+                  <button
+                    disabled={!!q.picked || showReview}
+                    onClick={() => pick(idx, a)}
+                    style={{
+                      margin: '5px',
+                      padding: '8px 12px',
+                      borderRadius: '6px',
+                      cursor: q.picked || showReview ? 'default' : 'pointer',
+                      border:
+                        btnClass === 'correct'
+                          ? '2px solid green'
+                          : btnClass === 'wrong'
+                          ? '2px solid red'
+                          : '1px solid #ccc',
+                      background:
+                        btnClass === 'correct'
+                          ? '#c8e6c9'
+                          : btnClass === 'wrong'
+                          ? '#ffcdd2'
+                          : '#fff',
+                      color: 'black', // Always black text
+                      fontWeight: '500',
+                    }}
+                  >
+                    {decodeHtml(a)}
+                  </button>
+                </li>
+              );
+            })}
           </ul>
         </Card>
       ))}
-      {/* TODO: Add scoreboard persistence */}
+
+      {/* Review Section */}
+      {showReview && (
+        <div style={{ marginTop: '20px', textAlign: 'center' }}>
+          <h3>🎯 Quiz Complete!</h3>
+          <p>
+            Final Score: {score} / {totalQuestions}
+          </p>
+          <p>Best Score: {highScore}</p>
+          <button
+            onClick={fetchQuestions}
+            style={{
+              background: '#007bff',
+              color: '#fff',
+              padding: '10px 16px',
+              border: 'none',
+              borderRadius: '8px',
+              cursor: 'pointer',
+            }}
+          >
+            Play Again
+          </button>
+        </div>
+      )}
     </div>
+    </>
   );
-}
-
-function decodeHtml(html) {
-  const txt = document.createElement('textarea');
-  txt.innerHTML = html;
-  return txt.value;
-}
+}
diff --git a/vite.config.js.timestamp-1761116311330-9bd7f4dd0b574.mjs b/vite.config.js.timestamp-1761116311330-9bd7f4dd0b574.mjs
@@ -0,0 +1,10 @@
+// vite.config.js
+import { defineConfig } from "file:///Users/venishakalola/Desktop/hacktoberfest/react-verse/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/venishakalola/Desktop/hacktoberfest/react-verse/node_modules/@vitejs/plugin-react/dist/index.js";
+var vite_config_default = defineConfig({
+  plugins: [react()]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvdmVuaXNoYWthbG9sYS9EZXNrdG9wL2hhY2t0b2JlcmZlc3QvcmVhY3QtdmVyc2VcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy92ZW5pc2hha2Fsb2xhL0Rlc2t0b3AvaGFja3RvYmVyZmVzdC9yZWFjdC12ZXJzZS92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvdmVuaXNoYWthbG9sYS9EZXNrdG9wL2hhY2t0b2JlcmZlc3QvcmVhY3QtdmVyc2Uvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdCc7XG5cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtyZWFjdCgpXSxcbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFvVixTQUFTLG9CQUFvQjtBQUNqWCxPQUFPLFdBQVc7QUFFbEIsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUyxDQUFDLE1BQU0sQ0FBQztBQUNuQixDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo=
