script.js

// script.js

// פונ על מחרוזות slice,toggle, foreach,include
// ארועים נוספים click, keydown' input

// פונקציות חץ
//שימוש: פונ קצרות, עם מעט פקודות
// רושמים אותם בראש התכנית כדי שיהיה קיצור בשימוש בהמשך

// return the element with a specific id    $=1
const $ = (id) => document.getElementById(id);
//return a list with all the elements in the class\label \id: -- selector---(the parameter)
//$$=returmn list
const $$ = (selector) => document.querySelectorAll(selector);


// משתנים גלובליים
//אוביקט גלובאלי
// שימוש: כשרוצים לגשת מכל מקום בפרויקאט  לערכיעם מסוימים
let gameState = {
  selectedCategory: '',
  playerName: '',
  currentQuestionIndex: 0,
  score: 0,
  timeLeft: 60,
  timer: null,
  questions: [],//empty question array'.יכנס לתוכו השאלות שנשאל את המשתמש במשחק
  answers: [],  //כדי להציג למשתמש את ידיעותיו לשאלות במשחק- נשמור תשובות שלו
  isActive: false,    //האם קיים משחק פעיל
  questionStartTime: null, // חדש - לזמן התחלה של כל שאלה
  gameStartTime: null // חדש - לזמן התחלת המשחק כולו
};




//מערכים ואוביקטים
//מערך שמכיל קטכוריה, 
// עבור כל נושא יש מערך עם שאלות, 
// עבור כל שאלה 4 אפשרויות תשובה
// בסוף האיבר -של השאלה מסומן לנו בC אינדקס תשובה נכונה במערך


  const questionsDB = {
    'טבע': [
        { q: 'איזה חיה היא הגדולה ביותר בעולם?', a: ['פיל', 'לוויתן כחול', 'קרנף', 'ג\'ירפה'], c: 1 },
        { q: 'כמה לבבות יש לתמנון?', a: ['1', '2', '3', '4'], c: 2 },
        { q: 'איזה עץ חי הכי הרבה זמן?', a: ['אלון', 'ארז', 'סקוויה', 'זית'], c: 2 },
        { q: 'איזה כוכב לכת הוא הקרוב ביותר לשמש?', a: ['ונוס', 'מאדים', 'כוכב חמה', 'כדור הארץ'], c: 2 },
        { q: 'איזה בעל חיים יכול לשנות את צבעו?', a: ['חזירון', 'זיקית', 'לטאה', 'נחש'], c: 1 },
        { q: 'איזו ציפור לא יכולה לעוף?', a: ['נשר', 'יען', 'תוכי', 'דרור'], c: 1 },
        { q: 'כמה רגליים יש לעכביש?', a: ['6', '8', '10', '12'], c: 1 },
        { q: 'איזה יונק הוא הקטן ביותר?', a: ['עכבר', 'עטלף דבש', 'נדנדה', 'סנאי'], c: 1 },

        // 5 שאלות קשות נוספות
        { q: 'מהו האורגניזם הימי הגדול ביותר?', a: ['לוויתן כחול', 'אלמוג ענק', 'מדוזה ענקית', 'כריש לווייתני'], c: 0 },
        { q: 'איזה צמח הוא הצמח המהיר ביותר בצמיחתו?', a: ['במבוק', 'אפונה', 'קקטוס', 'חיטה'], c: 0 },
        { q: 'באיזה טמפרטורה מתרחשת הפוטוסינתזה בצורה הטובה ביותר?', a: ['5°C', '25°C', '40°C', '60°C'], c: 1 },
        { q: 'כמה נפח מים יש בגוף האדם הממוצע?', a: ['30%', '50%', '60%', '75%'], c: 2 },
        { q: 'מהו החומר הקשה ביותר בטבע?', a: ['פלטינה', 'כסף', 'יהלום', 'גרפיט'], c: 2 }
    ],
    'אנגלית': [
        { q: 'What is the past tense of "go"?', a: ['goed', 'went', 'gone', 'going'], c: 1 },
        { q: 'Which word means "beautiful"?', a: ['ugly', 'pretty', 'bad', 'dirty'], c: 1 },
        { q: 'What is the plural of "child"?', a: ['childs', 'childes', 'children', 'child'], c: 2 },
        { q: 'Which is a color?', a: ['happy', 'blue', 'fast', 'big'], c: 1 },
        { q: 'What does "cat" mean?', a: ['כלב', 'חתול', 'ציפור', 'דג'], c: 1 },
        { q: 'How do you say "thank you"?', a: ['please', 'sorry', 'thanks', 'hello'], c: 2 },
        { q: 'What is the opposite of "hot"?', a: ['warm', 'cold', 'cool', 'nice'], c: 1 },
        { q: 'Which is correct?', a: ['I are happy', 'I am happy', 'I is happy', 'I be happy'], c: 1 },

        // 5 שאלות קשות נוספות
        { q: 'Choose the correct sentence:', a: ['He don\'t like it', 'He doesn\'t likes it', 'He doesn\'t like it', 'He don\'t likes it'], c: 2 },
        { q: 'What is a synonym of "quick"?', a: ['slow', 'fast', 'weak', 'small'], c: 1 },
        { q: 'Fill in the blank: She ___ to school every day.', a: ['go', 'goes', 'going', 'gone'], c: 1 },
        { q: 'What is the meaning of "benevolent"?', a: ['evil', 'kind', 'neutral', 'angry'], c: 1 },
        { q: 'Which is the correct plural form?', a: ['mices', 'mice', 'miceses', 'miceses'], c: 1 }
    ],
    'מתמטיקה': [
        { q: 'כמה זה 7 × 8?', a: ['54', '56', '58', '60'], c: 1 },
        { q: 'מהו שורש של 144?', a: ['11', '12', '13', '14'], c: 1 },
        { q: 'כמה זוויות יש במשולש?', a: ['2', '3', '4', '5'], c: 1 },
        { q: 'כמה זה 15% מ-200?', a: ['25', '30', '35', '40'], c: 1 },
        { q: 'כמה זה 9²?', a: ['18', '81', '72', '90'], c: 1 },
        { q: 'כמה זה 100 ÷ 4?', a: ['20', '25', '30', '35'], c: 1 },
        { q: 'מה זה המספר הראשוני הקטן ביותר?', a: ['1', '2', '3', '4'], c: 1 },
        { q: 'כמה זה 6 + 7 × 2?', a: ['20', '26', '19', '13'], c: 0 },

        // 5 שאלות קשות נוספות
        { q: 'מהו ערך הפאי בקירוב?', a: ['3.14', '2.17', '3.41', '3.15'], c: 0 },
        { q: 'כמה זוויות ישרות יש במקבילית?', a: ['0', '1', '2', '4'], c: 2 },
        { q: 'מהו סכום זוויות המשולש?', a: ['90 מעלות', '180 מעלות', '270 מעלות', '360 מעלות'], c: 1 },
        { q: 'מהו מספר הפאי של עיגול עם רדיוס 2?', a: ['12.56', '6.28', '3.14', '4.12'], c: 1 },
        { q: 'מה זה משתנה בלתי תלוי?', a: ['משתנה שמושפע ממשתנה אחר', 'משתנה שאינו מושפע ממשתנה אחר', 'משתנה קבוע', 'משתנה רנדומלי'], c: 1 }
    ],
    'יהדות': [
        { q: 'כמה ימים יש בחנוכה?', a: ['7', '8', '9', '10'], c: 1 },
        { q: 'באיזה חודש חל ראש השנה?', a: ['אלול', 'תשרי', 'כסלו', 'ניסן'], c: 1 },
        { q: 'כמה ספרי תורה יש?', a: ['3', '4', '5', '6'], c: 2 },
        { q: 'מי כתב את התורה?', a: ['משה רבנו', 'אברהם אבינו', 'דוד המלך', 'שלמה המלך'], c: 0 },
        { q: 'כמה מצוות יש?', a: ['365', '248', '613', '720'], c: 2 },
        { q: 'איזה יום הוא יום המנוחה?', a: ['ראשון', 'שני', 'שישי', 'שבת'], c: 3 },
        { q: 'כמה אבות יש?', a: ['2', '3', '4', '5'], c: 1 },
        { q: 'באיזה חודש חל פורים?', a: ['אדר', 'ניסן', 'אייר', 'סיון'], c: 0 },

        // 5 שאלות קשות נוספות
        { q: 'באיזו עיר נמצא קבר דוד המלך?', a: ['ירושלים', 'צפת', 'בית לחם', 'בית אל'], c: 0 },
        { q: 'מי היו האבות של עם ישראל?', a: ['אברהם, יצחק ויעקב', 'משה, אהרון ויהושע', 'דוד, שלמה ויהושע', 'אדום, ישמעאל ועשו'], c: 0 },
        { q: 'איזה ספר  קודש הוא לא חומש', a: ['יהושע', 'שמות', 'ויקרא', 'דברים'], c: 0 },
        { q: 'מהי מצוות עשה של שבת?', a: ['דליקת נרות', 'אכילת מצה', 'קריאת מגילה', 'סעודת ליל שבת'], c: 0 }
    ],
    'היסטוריה': [
        { q: 'מתי הוקמה מדינת ישראל?', a: ['1947', '1948', '1949', '1950'], c: 1 },
        { q: 'מי היה הנשיא הראשון של ארה"ב?', a: ['ג\'פרסון', 'וושינגטון', 'לינקולן', 'אדמס'], c: 1 },
        { q: 'באיזו שנה נפלה חומת ברלין?', a: ['1987', '1988', '1989', '1990'], c: 2 },
        { q: 'מי בנה את הפירמידות?', a: ['בבלים', 'פרסים', 'מצרים', 'יוונים'], c: 2 },
        { q: 'מתי התחילה מלחמת העולם השנייה?', a: ['1938', '1939', '1940', '1941'], c: 1 },
        { q: 'מי היה ראש הממשלה הראשון של ישראל?', a: ['הרצל', 'בן גוריון', 'וייצמן', 'שרת'], c: 1 },
        { q: 'בן כמה ראש משלת ישראל', a: ['68', '69', '70', '71'], c: 2 },
        { q: 'מי גילה את אמריקה?', a: ['מגלן', 'קולומבוס', 'ואסקו דה גמה', 'קוק'], c: 1 },

        // 5 שאלות קשות נוספות
        { q: 'מי היה ראש הממשלה בזמן מלחמת ששת הימים?', a: ['יצחק רבין', 'לוי אשכול', 'דוד בן גוריון', 'גולדה מאיר'], c: 1 },
        { q: 'באיזו שנה הוכרז האו"ם?', a: ['1943', '1945', '1947', '1950'], c: 1 },
        { q: 'מי היה המלך של ממלכת יהודה בזמן בית ראשון?', a: ['שלמה המלך', 'אחאב', 'חזקיהו', 'יהושפט'], c: 0 },
        { q: 'באיזו מלחמה נלחם נתן אלתרמן?', a: ['מלחמת העולם הראשונה', 'מלחמת העצמאות', 'מלחמת ששת הימים', 'מלחמת יום הכיפורים'], c: 2 },
        { q: 'מה היה שמו של הקיסר הרומי האחרוון?', a: ['אוגוסטוס', 'קלאודיוס', 'טיבריוס', 'קיסר'], c: 0 }
    ],
    'גיאוגרפיה': [
        { q: 'מהי בירת צרפת?', a: ['מרסיי', 'ליאון', 'פריז', 'ניס'], c: 2 },
        { q: 'איזה נהר הוא הארוך ביותר בעולם?', a: ['אמזונס', 'נילוס', 'יאנגצה', 'מיסיסיפי'], c: 1 },
        { q: 'באיזו יבשת נמצאת מצרים?', a: ['אסיה', 'אפריקה', 'אירופה', 'אמריקה'], c: 1 },
        { q: 'מהו ההר הגבוה ביותר בעולם?', a: ['K2', 'אוורסט', 'קילימנג\'רו', 'מקינלי'], c: 1 },
        { q: 'כמה יבשות יש בעולם?', a: ['5', '6', '7', '8'], c: 2 },
        { q: 'מהי בירת יפן?', a: ['קיוטו', 'טוקיו', 'אוסקה', 'יוקוהמה'], c: 1 },
        { q: 'איזה ים הוא המלוח ביותר?', a: ['הים המלח', 'הים התיכון', 'הים הכחול', 'הים האדום'], c: 0 },
        { q: 'באיזו מדינה נמצא הגיזר הישן ביותר?', a: ['איסלנד', 'נורבגיה', 'רוסיה', 'קנדה'], c: 0 },

        // 5 שאלות קשות נוספות
        { q: 'מהו אורך נהר הנילוס?', a: ['6,650 ק"מ', '4,200 ק"מ', '7,100 ק"מ', '5,400 ק"מ'], c: 0 },
        { q: 'מהי המדינה הגדולה ביותר בעולם בשטח?', a: ['סין', 'קנדה', 'רוסיה', 'ארה"ב'], c: 2 },
        { q: 'מהו ההר הגבוה ביותר באפריקה?', a: ['קילימנג\'רו', 'אוורסט', 'ק2', 'מטרהאן'], c: 0 },
        { q: 'באיזו יבשת נמצאת מדינת ברזיל?', a: ['אסיה', 'אפריקה', 'אמריקה הדרומית', 'אירופה'], c: 2 },
        { q: 'איזו עיר היא בירת אוסטרליה?', a: ['סידני', 'מלבורן', 'קנברה', 'פרת'], c: 2 }
    ]
};




// פונקציה לאתחול עמוד הבית
const initHome = () => {
  //כשהדף נטען- הפונ המקוצרת $ מחפסת האם בדף יש אלמנט עם ID של FEEDbACK..-
  //אם כן היא תופסת אותו ושמה את האלמנט בתוך המשתמ=נה
  const feedbackBtn = $('feedbackBtn');

  // אם הכפתור קיים בדף, מוסיפים לו מאזין אירוע של לחיצה
  if (feedbackBtn) {
    feedbackBtn.addEventListener('click', () => {
      // כשמקליקים על כפתור המשוב, ננווט לעמוד feedback.html
      window.location.href = 'feedback.html';
    });
  }

  // מציגים את התוצאה הטובה ביותר שהשחקן השיג (מקבלים מהפונקציה getBestScore)
  // ומוסיפים את המילה 'נקודות' אחרי המספר
  $('bestScore').textContent = getBestScore() + ' נקודות';

  // לוקחים את כל הכרטיסיות של הקטגוריות (האלמנטים עם המחלקה 'category-card')
  const categoryCards = $$('.category-card');

  // עבור כל כרטיסייה מוסיפים מאזין אירוע של לחיצה
  categoryCards.forEach(card => {
    // כשמקליקים על כרטיס, קוראים לפונקציה selectCategory עם הכרטיס הנבחר
    card.addEventListener('click', () => selectCategory(card));
  });


  // מאזין לאירוע הקלדה בתיבת החיפוש של הקטגוריות (ID: categorySearch)
  // בכל פעם שהמשתמש מקליד, מפעילים את פונקציית סינון הקטגוריות לפי הטקסט שהוקלד
  $('categorySearch').addEventListener('input', (e) => {
 
    filterCategories(e.target.value);
  });

  // מאזין גם לאירוע לחיצה על מקש במקלדת בתיבת החיפוש
  // אם נלחץ מקש Enter, מונע את פעולת ברירת המחדל (כגון שליחה של טופס)
  // כל לחיצה על מקש בזמן שהשדה בפןקוס- שלא תפריע
  // יעבור לשלב הבא רק לאחר בחירת הקטגוריה
  $('categorySearch').addEventListener('keydown', (e) => {
    if (e.key === 'Enter') e.preventDefault();
  });

  // מאזין ללחיצה על כפתור "התחל משחק"
  $('startGameBtn').addEventListener('click', () => {
    // אם נבחרה קטגוריה במשחק (gameState.selectedCategory לא ריק)
    if (gameState.selectedCategory) {
      // שומרים את הקטגוריה שנבחרה בלוקאל סטורג' כדי שנוכל לגשת אליה בעמוד הבא
      localStorage.setItem("category", gameState.selectedCategory);

      // מעבירים את המשתמש לעמוד שבו מזינים שם לשחקן
      window.location.href = "name.html";
    }
  });

  // מאזין לאירוע גלילה בדף
  window.addEventListener('scroll', () => {
    // אם נבחרה קטגוריה ויש גלילה של יותר מ-100 פיקסלים למטה
    if (gameState.selectedCategory && window.scrollY > 100) {
      // הופכים את כפתור "התחל משחק" למצב קבוע (fixed) בתחתית המסך, כדי שיהיה גלוי תמיד
      $('startGameBtn').style.position = 'fixed';
      $('startGameBtn').style.bottom = '20px';
    } 
    // אחרת, אם יש קטגוריה נבחרת אך הגלילה פחות מ-100 פיקסלים
    else if (gameState.selectedCategory) {
      // מחזירים את הכפתור למצב רגיל (static) במקום בדף
      $('startGameBtn').style.position = 'static';
    }
  });
};

// פונקציה לבחירת קטגוריה מתוך רשימת הכרטיסים (cards)
const selectCategory = (card) => {
  // מסיר את המחלקה 'selected' מכל הכרטיסים כדי שלא תהיה יותר מקטגוריה מסומנת
  $$('.category-card').forEach(c => c.classList.remove('selected'));
  
  // מוסיף את המחלקה 'selected' לכרטיס שנבחר (הכרטיס שלחצו עליו)
  card.classList.add('selected');
  
  // שומר במשתנה גלובלי את שם הקטגוריה שנבחרה (נמצא ב-data attribute של הכרטיס)
  gameState.selectedCategory = card.dataset.category;
  
  // מציג את כפתור ההתחלה (מוסתר קודם לכן), כדי לאפשר להתחיל את המשחק עם הקטגוריה שנבחרה
  $('startGameBtn').style.display = 'inline-block';
  // הצגת כפתור התחלה
      const startBtn = document.getElementById('startGameBtn');
      startBtn.classList.remove('hidden');
      startBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
      
      // אנימציה של הכפתור
      setTimeout(() => {
        startBtn.style.animation = 'fadeInUp 0.5s ease-out';
      }, 100);
};

// פונקציה לסינון הכרטיסים לפי מחרוזת חיפוש שהמשתמש הזין
const filterCategories = (searchTerm) => {
  // עבור כל כרטיס קטגוריה
  $$('.category-card').forEach(card => {
    // קורא את שם הקטגוריה מתוך data-category של הכרטיס
    const name = card.dataset.category;
    

    card.classList.toggle('hidden', !name.includes(searchTerm));
    // TOGGLE תוריד או תוסיף מחלקה בשם HIDDEN לפי התנאי שאספק
    // התנאי- בודק אם המחרוזת שאספק נמצאת בתוך name
    // אם לא נמצאת- תוסיך טת HIDDEN
    // אם נמצאת- תוריד את HIDDEN-
    //  ר שהחיפוש יעובד זה כדי לעזו 
  });
};


// פונקציות דף שם
const initNameScreen = () => {
  const selectedCategory = localStorage.getItem("category");

  // במקרה של רענון או גישה ישירה - חזור לעמוד הראשי
  if (!selectedCategory || performance.navigation.type === performance.navigation.TYPE_RELOAD) {
    window.location.href = "index.html";
    return;
  }

  $("selectedCategoryDisplay").textContent = selectedCategory;
  gameState.selectedCategory = selectedCategory;

  $('startActualGameBtn').addEventListener('click', () => {
    //trim remove unnesssecary spaces
    const name = $('playerName').value.trim();
    if (name.length < 2) {
      $('errorMessage').style.display = 'block';
      return;
    }
    $('errorMessage').style.display = 'none';

    // 🔴 הוסף כאן:
  gameState.playerName = name;
  localStorage.setItem("playerName", name); // ⬅️ זו השורה שצריך

  window.location.href = "question.html";
   
  });

  $('backToHomeBtn').addEventListener('click', () => {
    window.location.href = "index.html";
  });
};


// פונקציה לאתחול המשחק כאשר מתחילים משחק חדש
const initGame = () => {
  // בוחרת אקראית מתוך מאגר השאלות (questionsDB) עבור הקטגוריה שנבחרה ע"י המשתמש
  // ומגבילה ל-5 שאלות בלבד (slice(0,5))
  //מתוך המערך הענק שנ=מכיל את כל השאלות בוחרים את הקטוריה הרצויה (לפי המשתמש)
  // הפונSHUFFLE לוקחת את כל השאלות שקשורות לקטוריה ומערבבתצ את הסדר שלהן, כדי שלכל משתמש יהיה בסדר שונה
  // לאחר הערבוב לוקחים 8 שאלות מתוך הקטגוריה
  //שמים בתוך מערך השאלות הנוכחי את השאלות שנבחרו לאחר הערבוב
  
      
  gameState.questions = shuffleArray(questionsDB[gameState.selectedCategory]).slice(0, 8);

  // אתחול המדד של השאלה הנוכחית להתחיל מהשאלה הראשונה (אינדקס 0)
  gameState.currentQuestionIndex = 0;

  // אתחול הניקוד לאפס בתחילת המשחק
  gameState.score = 0;

  // מערך לאחסון התשובות שנבחרו במהלך המשחק, ריק בהתחלה
  gameState.answers = [];

  // טוען את שם השחקן שנשמר בלוקאל סטורג' (אם קיים), אחרת מחרוזת ריקה
  gameState.playerName = localStorage.getItem("playerName") || '';

  // מציג את שם השחקן בחלק של ממשק המשתמש (element עם id 'playerNameDisplay')
  $('playerNameDisplay').textContent = gameState.playerName;

  // מציג את הניקוד הנוכחי (שכרגע אפס) ב-UI (element עם id 'currentScore')
  $('currentScore').textContent = gameState.score;

  // מציג את מספר השאלה הנוכחית, שמתחיל מ-1 לצורך תצוגה למשתמש
  $('questionNumber').textContent = 1;

  // מציג את שם הקטגוריה שנבחרה בממשק (element עם id 'categoryNameDisplay')
  $('categoryNameDisplay').textContent = gameState.selectedCategory;

  // שומר את זמן התחלת המשחק (במילישניות מאז 1.1.1970), לשימוש במדידת זמן המשחק
  gameState.gameStartTime = Date.now();
// אנימציות כניסה
      const elements = document.querySelectorAll('.fade-in');
      elements.forEach((el, index) => {
        el.style.animationDelay = (index * 0.2) + 's';
      });
  // טוען את השאלה הראשונה להצגה למשתמש
  loadQuestion();
};

const timerElement = $('timer');

const loadQuestion = () => {
  const timerElement = $('timer');  // כאן, בתוך הפונקציה

  const q = gameState.questions[gameState.currentQuestionIndex];
  $('questionText').textContent = q.q;
  const buttons = $$('.answer-btn');
  buttons.forEach((btn, i) => {
    btn.textContent = q.a[i];
    btn.onclick = () => selectAnswer(i, btn);  // חשוב להעביר את הכפתור!
    btn.style.pointerEvents = 'auto';          // לאפשר לחיצה
    btn.classList.remove('correct', 'wrong');  // לנקות סימונים קודמים
  });

  clearInterval(gameState.timer);
  gameState.timeLeft = 30;
  timerElement.textContent = gameState.timeLeft;
  timerElement.classList.remove('warning');    // להסיר אזהרה אם הייתה
  gameState.questionStartTime = Date.now();

  gameState.timer = setInterval(() => {
    gameState.timeLeft--;
    timerElement.textContent = gameState.timeLeft;

    if (gameState.timeLeft <= 10) {
      timerElement.classList.add('warning');
    } else {
      timerElement.classList.remove('warning');
    }

    if (gameState.timeLeft <= 0) {
      clearInterval(gameState.timer);
      selectAnswer(-1);
    }
  }, 1000);
};


// // פונ שמגיעים אליה כשלוחצים על תשובה שבוחרים
// // פונ חץ שמקבלת אינדקס תשובה שנבחרה, או -1 אם לא הספיק לענות
// מקבלת גם כפתור שנבחר
const selectAnswer = (index, buttonElement = null) => {
  clearInterval(gameState.timer);

  const current = gameState.questions[gameState.currentQuestionIndex];
  const isCorrect = index === current.c;
  const buttons = document.querySelectorAll('.answer-btn');

  // נטרול לחיצות נוספות
  buttons.forEach(btn => {
    btn.style.pointerEvents = 'none';
  });

  // ✅ עיצוב + סאונד + ניקוד
  if (isCorrect && index !== -1) {
    if (buttonElement) buttonElement.classList.add('correct');
    // playCorrectSound();
    gameState.score += 10;
    $('currentScore').textContent = gameState.score;
    showScorePopup(10);
    createCelebrationParticles();
  } else {
    if (buttonElement) buttonElement.classList.add('wrong');
    // playWrongSound();
    buttons[current.c].classList.add('correct');
  }

  // ✅ חישוב זמן תשובה
  const endTime = Date.now();
  const durationMs = endTime - (gameState.questionStartTime || endTime);
  const durationSec = Math.max(1, Math.round(durationMs / 1000));
  console.log(`Question ${gameState.currentQuestionIndex + 1}: took ${durationSec} seconds`);

  // ✅ שמירת פרטי השאלה
  gameState.answers.push({
    question: current.q,
    answers: current.a,
    correct: current.c,
    chosen: index,
    timeTaken: durationSec
  });

  gameState.currentQuestionIndex++;

  // ✅ המשך למשחק או סיום
  setTimeout(() => {
    if (gameState.currentQuestionIndex < gameState.questions.length) {
      $('questionNumber').textContent = gameState.currentQuestionIndex + 1;
      loadQuestion();
    } else {
      clearInterval(gameState.timer);
      endGame();
    }
  }, 2000);
};



// פונקציה שמסיימת את המשחק ומטפלת בתוצאות ובשיאים
const endGame = () => {
  const endTime = Date.now(); 
  // תופסת את זמן הסיום במילישניות 

  const totalDuration = Math.round((endTime - (gameState.gameStartTime || endTime)) / 1000);
  // מחשבת את משך כל המשחק בשניות, מעגלת למספר שלם.
  // אם gameStartTime לא קיים, מחזירה 0 כי endTime - endTime = 0

  // בדיקת שיא זמן המשחק (הזמן הכי קצר)
  // הדפדפן שומר לעצמו משתנים, 
  // שולפים את המשתנה בשם BESTTIME מהדפדפן ושמים אותו במשתנה פנימי מששלנו
  // אם הדפדפן לא מגכיר אותו- מחזיר NULL
  const bestTime = localStorage.getItem('bestTime');
  let isNewRecord = false; 
  // משתנה בוליאני שיראה אם נשבר שיא

  if (!bestTime || totalDuration < bestTime) {
    // אם אין שיא קודם, או שהשיא הקיים גדול מהזמן שלנו - נשבר שיא חדש

    // כמובן שבמשחק הכוונה- שיהיו פחות שניות
    // מעדכנת את הדפדפן שיכניס לתוך המשתנה שלו את הזמן החדש
    localStorage.setItem('bestTime', totalDuration);

    isNewRecord = true; 
  }

  // הודעה למשתמש
  let message = `כל הכבוד, ${gameState.playerName}!\nלקח לך ${totalDuration} שניות לסיים את המשחק.`;
  if (isNewRecord) {
    message += `\nזהו שיא חדש! מזל טוב 🎉`;
  } else {
    message += `\nנסה שוב לשפר את הזמן שלך!`;
  }

  alert(message);
  // מקפיץ הודעה
  // מציג למשתמש הודעה עם התוצאה והאם נשבר שיא

  // שמירת נתוני המשחק דרך הדפדפן

  // יוצרים אוביקט שמכיל את כל פרטי המשחק
  // שמירת נתוני המשחק בהיסטוריה
  const session = {
    playerName: gameState.playerName,
    score: gameState.score,
    answers: gameState.answers,
    category: gameState.selectedCategory,
    timestamp: new Date().toISOString(), // תאריך ושעת סיום בפורמט ISO
    totalDuration: totalDuration
  };
   // מושך את ההיסטוריה הקודמת, או יוצר מערך חדש אם אין
  const history = JSON.parse(localStorage.getItem('gameHistory') || '[]');
  // JSON.parse ממיר מפורמט מחרוזת של הדפדפן לאוביקט רגיל

  history.unshift(session);
  // מוסיף את המשחק הנוכחי לתחילת ההיסטוריה

  localStorage.setItem('gameHistory', JSON.stringify(history));
  // שומר חזרה את ההיסטוריה המעודכנת
  // מעדכן בדפדפן שלתוך משתנה היסטוריה שם את ה""history" ששלפנו ,כמובן לאחר הוספת המשחק הנוכחי
  //  JSON.stringify  ממיר מאוביקט למחרוזת- בשביל הדפדפן

  // שמירת נתונים נוספים של המשחק האחרון לשימוש אפשרי בעתיד
  localStorage.setItem('lastScore', gameState.score);
  localStorage.setItem('lastAnswers', JSON.stringify(gameState.answers)); //המרה למחרוזת  
  localStorage.setItem('lastCategory', gameState.selectedCategory);

  // מעבר לעמוד התוצאות
  window.location.href = 'results.html';
};


  //בסיום המשחק הצגת התשובות שהמשתמ ענה
const renderReview = () => {
  const reviewDiv = $('questionsReview'); 
  // מוצא את האלמנט בדף שבו נציג את הסקירה (div עם id="questionsReview")

  reviewDiv.innerHTML = ''; 
  // מנקה כל תוכן קודם (כדי לא לצבור פעמיים)

    // עובר על כל התשובות שהמשתמש נתן (מערך בתוך gameState)
  gameState.answers.forEach((item, i) => { 

    const isCorrect = item.chosen === item.correct; 
    // האם המשתמש ענה נכון? (השוואת האינדקסים)

    const icon = isCorrect ? '✔️' : '❌'; 
    // בוחר אייקון מתאים

    const color = isCorrect ? 'green' : 'red'; 
    // בוחר צבע מתאים לפי נכונות התשובה

    const timeStr = item.timeTaken ? `⏱️ זמן: ${item.timeTaken} שניות` : ''; 
    // אם נמדד זמן, מציג אותו

    const div = document.createElement('div'); 
    // יוצר div חדש לסקירה של שאלה אחת
// strong- תגית בHTML שמדגישה את תוכן הטקסט בתצוגה
// span- מאפשרת להוסיף אלמנטים באמצע שורה
    div.innerHTML = `
      <div><strong>שאלה ${i + 1}:</strong> 
      ${item.question} <span style="color:${color}">${icon}</span></div>
      <div>תשובתך: <span style="color:${color}">${item.answers[item.chosen] || 'לא נבחר'}</span></div>
      ${!isCorrect ? `<div>תשובה נכונה: <span style="color:green">${item.answers[item.correct]}</span></div>` : ''}
      <div>${timeStr}</div>
      <hr>`; 
    // מוסיף את כל תוכן השאלה: השאלה עצמה, תשובת המשתמש, תשובה נכונה (אם טעה), זמן, קו מפריד

    reviewDiv.appendChild(div); 
    // מוסיף את הDIV החדש שיצרנו
  });
};


const initResultsScreen = () => {
  $('playAgainBtn').addEventListener('click', () => {
    window.location.href = 'index.html';
  });

  $('changeGameBtn').addEventListener('click', () => {
    window.location.href = 'index.html';
  });
// שולף מהדפדפן את הערכים שבמשתנים הנ"ל אם לא מוצא אותם- שם NULL
  const score = localStorage.getItem('lastScore');
  const answers = JSON.parse(localStorage.getItem('lastAnswers') || '[]');
  const category = localStorage.getItem('lastCategory');



                        
  $('finalScore').textContent = score;
  // קשור לצורת העיצוב והתצוגנ של האוביקט על המסך
  $('newRecordMessage').style.display = saveScore(category, score) ? 'block' : 'none';
  // הפונ FILTER עוברת על המערך התשובות ומסננת רק את התשובות הנכונות שהמשתמש ענה
  // אחכ סופר את מערך התשובות הנכונות לאחר הסינון- ושם את האורך על האוביקט
  $('correctAnswersCount').textContent = answers.filter(a => a.chosen === a.correct).length;
  $('totalAnswersCount').textContent = answers.length;

  // חישוב זמן ממוצע - גרסה מתוקנת
  // בסיום משחק
  // עובר על המערך התשובות, 
  // map-יוצר מערך חדש שיכיל את כל זמני העניה על השאלות
  // יוצר משתנה מעבר על המערך בשם answers ו
  // יכניס למערך החדש את הזמן שלקח לענוצף  , ואם הוא ריק ישים 0
  const questionTimes = answers.map(answer => answer.timeTaken || 0);
  const avgTime = questionTimes.length > 0 ? 
  // REDUCE- מעבר על כל המערך זמני עניה, מקבלת 2 משתנים
  // SUM- מאותחל כ0 ,TIME- הערך הנוכחי מהמערך
    Math.round(questionTimes.reduce((sum, time) => sum + time, 0) / questionTimes.length) : 0;

  // הצגת הזמן הממוצע - תמיד נציג, גם אם 0
  const avgDisplay = $('averageTimeDisplay');
  if (avgDisplay) {
    // some-פןנ חץ,  שבודקת האם ל]חות איבר אחד מהמערך מקיים את התנאי,
    // ובמקרהה הזה- האם לאיבר יש שדה בשם...
    if (answers.length > 0 && answers.some(a => a.hasOwnProperty('timeTaken'))) {
      // יש נתוני זמן (גם אם הם 0)
      avgDisplay.textContent = `זמן ממוצע לשאלה: ${avgTime} שניות`;
    } else {
      // אין נתוני זמן בכלל
      avgDisplay.textContent = 'זמן ממוצע לשאלה: לא זמין';
    }
  }

  gameState.answers = answers;
  // הצגת התשובות שהמשתמ ענה
  renderReview();
};

// הצגת הסטורית המשחקים למשתמש
const initHistoryScreen = () => {
  const container = $('historyList');
  // JSON.parse ממיר מחרוזת לאוביקט של JS
  const history = JSON.parse(localStorage.getItem('gameHistory') || '[]');
  const currentPlayer = localStorage.getItem('playerName') || '';

  $('historyPlayerName').textContent = `היסטוריית משחקים של: ${currentPlayer}`;

  if (!container) return;

  container.innerHTML = '';

  if (!currentPlayer) {
    container.innerHTML = 'לא נמצא שחקן נוכחי. יש להתחיל משחק כדי לצפות בהיסטוריה.';
    return;
  }

  const filteredHistory = history.filter(session => session.playerName === currentPlayer);
  // אפשרות 1: מיון לפי תאריך (החדש ביותר קודם)
filteredHistory.sort((a, b) => {
  // new Date    ממיר מאוביקט זמן של מחששב- לזמן של תאריך  ושעה קריאד 
  return new Date(b.timestamp) - new Date(a.timestamp);
});

  if (filteredHistory.length === 0) {
    container.innerHTML = 'אין משחקים קודמים עבור שחקן זה.';
    return;
  }

  filteredHistory.forEach((session, index) => {
    const div = document.createElement('div');
    const date = new Date(session.timestamp);
    const formattedDate = date.toLocaleDateString('he-IL', {
      day: 'numeric', month: 'long', year: 'numeric'
    });
    const formattedTime = date.toLocaleTimeString('he-IL', {
      hour: '2-digit', minute: '2-digit'
    });

    const durationStr = session.totalDuration ? `⏱️ משך: ${session.totalDuration} שניות` : '';

    div.className = 'history-entry';
    div.innerHTML = `
      <span><strong>שעה:</strong> ${formattedTime}</span> |
      <span><strong>תאריך:</strong> ${formattedDate}</span> |
      <span><strong>קטגוריה:</strong> ${session.category}</span> |
      <span><strong>ניקוד:</strong> ${session.score}</span> |
      <span>${durationStr}</span>
      <button data-index="${index}">הצג שאלות</button>`;

    container.appendChild(div);
  });
// querySelectorAll-תופס בדף את כל תתי האלמנטים ששיכים לאלמנט button הנמחר
// 
  container.querySelectorAll('button').forEach((btn, idx) => {
    btn.addEventListener('click', () => {
      const session = filteredHistory[idx];
      const reviewDiv = $('questionsReview');
      reviewDiv.innerHTML = '';
      session.answers.forEach((item, i) => {
        const isCorrect = item.chosen === item.correct;
        const icon = isCorrect ? '✔️' : '❌';
        const color = isCorrect ? 'green' : 'red';
        const chosenAnswer = item.answers[item.chosen] || 'לא נבחר';
        const correctAnswer = item.answers[item.correct];
        const timeStr = item.timeTaken ? `⏱️ זמן: ${item.timeTaken} שניות` : '';

        const div = document.createElement('div');
        div.innerHTML = `
          <div><strong>שאלה ${i + 1}:</strong> ${item.question}</div>
          <div style="color:${color}">${icon} תשובתך: ${chosenAnswer}</div>
          ${!isCorrect ? `<div style="color:green">✔️ תשובה נכונה: ${correctAnswer}</div>` : ''}
          <div>${timeStr}</div>
          <hr>`;
        reviewDiv.appendChild(div);
      });
    });
  });
};

// פונקציות עזר נוספות
const showScreen = (screen) => {
  // תופס א ת כל האלמנטים תחת המחלקה .ID\ screen
  // עבור כל אוביקט כזה מסיר את במחלקה ACTIVE
  // כדי שמסכים אלו לא יוצגו
  // כמובן שיש הרבה אלמנטים כאלא ולכן מכניסים אותם לתוך רשימה ועליה עוברים ומעדכנים את הפעיל
  $$('.screen').forEach(s => s.classList.remove('active'));
  // מחפסים על המסך אוביקט שיש לו את המילה SCREENוכן את המילה- שם המסך שקיבלנו
  // אותו נעדכן שיעבוד
  $(screen + 'Screen').classList.add('active');
  // CLASSLIST- זהו מתודה שקשורה לDOM, היא מכירה את כל המחלקות שבדף הHTMK הנוכחי
  // ועליה עובדים
};

// פונקציה שמקבלת מערך ומחזירה אותו בערבוב אקראי (שפול) מבלי לשנות את המערך המקורי
const shuffleArray = (array) => {
  // יוצרת עותק של המערך המקורי כדי לא לשנות אותו ישירות
  const arr = [...array];
  // עוברת בלולאה מהאיבר האחרון למקום השני
  for (let i = arr.length - 1; i > 0; i--) {
    // בוחרת אינדקס אקראי בין 0 ל-i כולל
    const j = Math.floor(Math.random() * (i + 1));
    // מחליפה בין האיבר הנוכחי לאיבר שבאינדקס האקראי שנבחר
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  // מחזירה את המערך המעורבב החדש
  return arr;
};

const saveScore = (category, score) => {
  // שולפת מהד]דפן מהמשתנה..לתוך SCORES ממירה ממחרוזת לJS
  const scores = JSON.parse(localStorage.getItem('triviaScores') || '{}');
  // אם ערך הציון לא קיים או נמוך מהקודם- נעדכן ציון גבוה
  if (!scores[category] || scores[category] < score) {
    scores[category] = score;
    // נחזיר לדפדפן את האוביקט המעודכן
    // המרה למחרוזת
    localStorage.setItem('triviaScores', JSON.stringify(scores));
    return true;
  }
  return false;
};

const getBestScore = () => {
  // נשלוף מהדפדפן תוך המרה לJS
  // לתוך SCORES ייכנסו כל הציונים
  const scores = JSON.parse(localStorage.getItem('triviaScores') || '{}');
  return Math.max(0, ...Object.values(scores));
};

// חלק חשוב מאד!
// לאחר שהדפדפן סיים לטעון את כל דךף הJS מפעיל קוד זה מעצמו
// הפונ מזהה באיזה דף אנחנו עכשיו וקוראת לפונ המתאימות
window.addEventListener('DOMContentLoaded', () => {
  // שומר ניתוב של הדף, מוסיף המרה לאותיות קטנות כדי שאחכ לא יווצרו שגיאות בהמרות
  const path = window.location.pathname.toLowerCase();

  if (path.endsWith("index.html") || path === "/" || path === "/index.html") {
    initHome();
  } else if (path.endsWith("name.html")) {
    initNameScreen();
  } else if (path.endsWith("question.html")) {
    const name = localStorage.getItem("playerName");
    const cat = localStorage.getItem("category");
    if (!name || !cat) {
      window.location.href = "index.html";
    } else {
      gameState.playerName = name;
      gameState.selectedCategory = cat;
      initGame();
    }
  } else if (path.endsWith("results.html")) {
    initResultsScreen();
  } else if (path.endsWith("history.html")) {
    initHistoryScreen();
  }
});