V1.2.1 New Easter Eggs

Author: RlxChap2

CHANGELOG.md

@@ -1,3 +1,13 @@
+1. [**V1.2.0 - `6836d6c`**](https://github.com/RlxChap2/quiz-master/commit/6836d6cb8ebe304774a3f0f3d390496aa8bfbd0e)
+1. [**V1.2.0 - `cae9647`**](https://github.com/RlxChap2/quiz-master/commit/cae9647493e0d0d983587d4639a8fa4273c36e6a)
+1. [**V1.2.0 - `4fa28ea`**](https://github.com/RlxChap2/quiz-master/commit/4fa28eab519130707f0af7b775caa7e7d002d3e5)
+1. [**New EasterEgg - `030a327`**](https://github.com/RlxChap2/quiz-master/commit/030a32762456dd0fed1cc7753fbe4c28c2dc8e76)
+1. [**Merge branch 'main' of https://github.com/RlxChap2/quiz-master - `1a694e5`**](https://github.com/RlxChap2/quiz-master/commit/1a694e552191abab5532d952c7d8875d0924c570)
+1. [**New Changes - `d9b2453`**](https://github.com/RlxChap2/quiz-master/commit/d9b24535a668c840fcd20a86dff27c3b87d0bbeb)
+1. [**Update App.tsx - `ee7e8d5`**](https://github.com/RlxChap2/quiz-master/commit/ee7e8d5f2ad05a911a5cecf4043cceae2555300c)
+1. [**Update App.tsx - `f184ecf`**](https://github.com/RlxChap2/quiz-master/commit/f184ecf372ea4ff5753dc44d8d653c5665d7aa03)
+1. [**Update .gitignore - `0b74087`**](https://github.com/RlxChap2/quiz-master/commit/0b740872963b5b0eae22ef21f1b67b5fc5a7fb33)
+1. [**V1.1.0 - `d5e6352`**](https://github.com/RlxChap2/quiz-master/commit/d5e6352af45a73f7fe226c9b6268eede2b188250)
 1. [**v1.0.3 - fixed Errors & UI - `702e827`**](https://github.com/RlxChap2/quiz-master/commit/702e8273df857682d4b9f6df3f6e843262e9df97)
 1. [**v1.0.2 - `f081b43`**](https://github.com/RlxChap2/quiz-master/commit/f081b43d70c548072d46b29c1c23b37f0db6bb8b)
 1. [**v1.0.1 - `fd7e012`**](https://github.com/RlxChap2/quiz-master/commit/fd7e012394154ab74ad1cb7126d65cd4cf46727f)

package.json

@@ -1,7 +1,7 @@
 {
     "name": "quiz-master",
     "private": true,
-    "version": "1.2.0",
+    "version": "1.2.1",
     "type": "module",
     "author": {
         "name": "RlxChap2 - Mohammed Mahmoud"
@@ -11,7 +11,7 @@
         "build": "vite build",
         "lint": "eslint .",
         "preview": "vite preview",
-        "push": "git add . && git commit -m \"V1.2.0\" && git push",
+        "push": "git add . && git commit -m \"V1.2.1 New Easter Eggs\" && git push",
         "changelog": "git log --pretty=format:\"1. [**%s - `%h`**](https://github.com/RlxChap2/quiz-master/commit/%H)\" > CHANGELOG.md"
     },
     "dependencies": {

public/easteregg2.mp4

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Navbar } from './components/Navbar';
 import { TestView } from './components/TestView';
 import { LectureSelector } from './components/LectureSelector';
@@ -15,6 +15,26 @@ function App() {
     const [activePage, setActivePage] = useState<ActivePage>('home');
     const [showEasterEgg, setShowEasterEgg] = useState(false);
 
+    const [showArrowEasterEgg, setShowArrowEasterEgg] = useState(false);
+    const [, setInputSequence] = useState<string[]>([]);
+
+    const secretCode = ['ArrowUp', 'ArrowUp', 'ArrowDown', 'ArrowDown'];
+
+    useEffect(() => {
+        const handleKeyDown = (e: KeyboardEvent) => {
+            setInputSequence((prev) => {
+                const newSequence = [...prev, e.key].slice(-secretCode.length);
+                if (JSON.stringify(newSequence) === JSON.stringify(secretCode)) {
+                    setShowArrowEasterEgg(true);
+                }
+                return newSequence;
+            });
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, []);
+
     const toggleTheme = () => {
         setIsDark(!isDark);
         document.documentElement.classList.toggle('dark');
@@ -89,7 +109,10 @@ function App() {
             <div className="min-h-screen pt-20 p-6 bg-gray-50 dark:bg-gray-900">
                 <div className="max-w-7xl mx-auto">{renderContent()}</div>
             </div>
-            <EasterEgg show={showEasterEgg} onClose={() => setShowEasterEgg(false)} />
+
+            {/* Easter Eggs */}
+            <EasterEgg show={showEasterEgg} onClose={() => setShowEasterEgg(false)} videoSrc="./easteregg.mp4" />
+            <EasterEgg show={showArrowEasterEgg} onClose={() => setShowArrowEasterEgg(false)} videoSrc="./easteregg2.mp4" />
         </>
     );
 }

src/App.tsx

@@ -3,16 +3,17 @@ import React from 'react';
 interface EasterEggProps {
     show: boolean;
     onClose: () => void;
+    videoSrc: string;
 }
 
-export const EasterEgg: React.FC<EasterEggProps> = ({ show, onClose }) => {
+export const EasterEgg: React.FC<EasterEggProps> = ({ show, onClose, videoSrc }) => {
     if (!show) return null;
 
     return (
         <div className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50" onClick={onClose}>
             <div className="relative w-full max-w-4xl bg-black rounded-xl overflow-hidden">
                 <video autoPlay controls className="w-full" onClick={(e) => e.stopPropagation()}>
-                    <source src="./easteregg.mp4" type="video/mp4" />
+                    <source src={videoSrc} type="video/mp4" />
                     Your browser does not support the video tag.
                 </video>
             </div>