import React, { useState, useEffect, useMemo, useRef } from ‘react’;
import {
Heart, ShieldAlert, CheckCircle2, RefreshCw, Trophy, Skull,
Users, Network, Generic, Search, UserCog, Accessibility,
Play, CircleDollarSign, Recycle, Smartphone, Briefcase,
Leaf, Code, DatabaseZap, Lock, Eye, BookOpen, Clock,
Map as MapIcon, ChevronRight, MapPinned, Volume2, VolumeX,
Compass
} from ‘lucide-react’;
// STABLE ASSETS DEFINED OUTSIDE TO PREVENT INFINITE RE-RENDER LOOPS
const ASSETS = {
MAIN_MAP: “Main map.jpg”,
HERO: “The hero.jpg”,
LEVEL1: “Level 1.jpg”,
LEVEL2: “Level 2.jpg”,
LEVEL3: “Level 3.jpg”,
// NEW ILLUSTRATION ASSETS
BEGINNING: “Beggining.jpg”,
VICTORY: “Victory.jpg”,
GAMEOVER: “game over try again.jpg”,
BAD_ANSWER: “bad answer try again.jpg”,
CORRECT_ANSWER: “correct answer.jpg”,
LEVEL_ACHIEVED: “level achieved.jpg”,
// AUDIO ASSETS
MUSIC_URL: “https://cdn.pixabay.com/audio/2022/03/10/audio_c8c8a730a2.mp3”, // Epic Cinematic
SUCCESS_SFX: “https://cdn.pixabay.com/audio/2021/08/04/audio_bb6476e3d2.mp3”, // Success Ping
WRONG_SFX: “https://cdn.pixabay.com/audio/2022/03/15/audio_2913e2f07b.mp3” // Error Buzzer
};
const LEVEL_METADATA = [
{
levelId: 1,
name: “LEVEL 1: UX Mountain Range”,
intro: “Welcome to the soaring peaks of User Experience. Here, the layout is as steep as the slopes, and clarity is your only lifeline. Master the interface to find the path forward.”,
bg: ASSETS.LEVEL1,
},
{
levelId: 2,
name: “LEVEL 2: The Swamp of Techniques & Ethics”,
intro: “You have descended into the murky wetlands where technology meets morality. Every step in this swamp requires a balance of technical skill and ethical integrity. Watch your footing.”,
bg: ASSETS.LEVEL2,
},
{
levelId: 3,
name: “LEVEL 3: The Desert of Constraints & Risks”,
intro: “The final stretch. A vast expanse where resources are scarce and digital viruses howl like sandstorms. Guard your data and your sanity to reach the Valley of Wisdom.”,
bg: ASSETS.LEVEL3,
}
];
const PUZZLES = [
// LEVEL 1: UX MOUNTAIN RANGE (0-5)
{ answer: ‘Collaborative’, levelId: 1, icon:
, challenge: ‘A word describing group-focused platforms.’, definition: “It’s a word used to describe platforms that encourage user-generated content (UGC). Comments, forums, chats, and chatbots interactions that foster group work are…” },
{ answer: ‘Hypertext’, levelId: 1, icon:
, challenge: ‘Name this linking system for ancient digital scrolls.’, definition: ‘A software system that allows extensive linking between sections of text and associated material.’ },
{ answer: ‘User-friendly’, levelId: 1, icon:
, challenge: ‘A path that is simple and clear for everyone.’, definition: ‘Characterized by effective UI design leading to excellent UX. Simple, clear design ensuring intuitive usage for everyone.’ },
{ answer: ‘Navigability’, levelId: 1, icon:
, challenge: ‘The ease of finding information in a vast library.’, definition: ‘Involves handling substantial volumes of data while ensuring it is easily found via search engines, glossaries, site maps, and indexes.’ },
{ answer: ‘Customized’, levelId: 1, icon:
, challenge: ‘Shaping the journey to each individual.’, definition: “Made or changed according to the user’s needs:” },
{ answer: ‘Accessibility’, levelId: 1, icon:
, challenge: ‘Design that empowers every user regardless of ability.’, definition: ‘Designing for all users regardless of their abilities/disabilities, implementing tools like speech synthesis, subtitles, and simple language.’ },
// LEVEL 2: THE SWAMP (6-12)
{ answer: ‘multimedia’, levelId: 2, icon:
, challenge: ‘A mix of sights and sounds to navigate the depths.’, definition: ‘utilizing a variety of resource formats simultaneously, mixing text, image, sound, and video to enhance learning.’ },
{ answer: ‘affordable’, levelId: 2, icon:
, challenge: ‘Solutions that preserve the dwarf\’s gold coins.’, definition: ‘A financial constraint: focusing on solutions that are free, cost-effective, or cheap to implement.’ },
{ answer: ‘Sustainable’, levelId: 2, icon:
, challenge: ‘Magic platforms built to last and upgrade easily.’, definition: ‘A long-term requirement: ensuring solutions are easy to maintain and upgrade over time.’ },
{ answer: ‘Responsive’, levelId: 2, icon:
, challenge: ‘Platforms that adapt to smaller magic mirrors.’, definition: ‘A modern accessibility constraint: ensuring the learning platform is adaptive, and specifically optimized for mobile devices.’ },
{ answer: ‘Portable’, levelId: 2, icon:
, challenge: ‘Carrying knowledge wherever the path leads.’, definition: ‘A connectivity requirement: creating a solution that is portable and useful for both online and offline learning situations.’ },
{ answer: ‘Eco-friendly’, levelId: 2, icon:
, challenge: ‘A commitment to the environment.’, definition: “Committing to ‘green’ design principles.” },
{ answer: ‘open-source’, levelId: 2, icon:
, challenge: ‘Secrets written in public scrolls.’, definition: ‘Public domain software platforms’ },
// LEVEL 3: THE DESERT (13-18)
{ answer: ‘infobesity’, levelId: 3, icon:
, challenge: ‘A storm of too many scrolls at once.’, definition: ‘The overwhelming feeling of being flooded by too much information at once.’ },
{ answer: ‘hacking’, levelId: 3, icon:
, challenge: ‘Shadowy figures breaking into the system.’, definition: ‘The gaining of unauthorized access to data in a system or computer.’ },
{ answer: ‘privacy’, levelId: 3, icon:
, challenge: ‘Hiding the true names of the travelers.’, definition: ‘A fundamental ethical constraint: the protection of individual user data and personal identity.’ },
{ answer: ‘moderation’, levelId: 3, icon:
, challenge: ‘Filtering winds to keep the air pure.’, definition: ‘Involve reviewing and filtering massive amounts of user interaction data to prevent issues.’ },
{ answer: ‘computer literacy’, levelId: 3, icon:
, challenge: ‘Skill needed to use desert tools.’, definition: ‘The knowledge and ability to use computers and related technology efficiently.’ },
{ answer: ‘FOMO’, levelId: 3, icon:
, challenge: ‘A mirage of missed opportunities.’, definition: “A psychological risk to users: the ‘Fear Of Missing Out’ on content, interactions, or certifications.” }
];
const App = () => {
// Game State
const [gameState, setGameState] = useState(‘START’); // START, UNLOCK, PUZZLE, GAMEOVER, VICTORY
const [currentLevelIndex, setCurrentLevelIndex] = useState(0);
const [lives, setLives] = useState(3);
const [showFeedback, setShowFeedback] = useState(null);
const [isTransitioning, setIsTransitioning] = useState(false);
const [slotValues, setSlotValues] = useState([]);
const [isMuted, setIsMuted] = useState(false);
const inputRefs = useRef([]);
const audioRef = useRef(null);
const sfxRef = useRef(null);
const currentPuzzle = PUZZLES[currentLevelIndex];
const currentLevelMetadata = useMemo(() =>
LEVEL_METADATA.find(l => l.levelId === currentPuzzle.levelId), [currentPuzzle]);
// AUDIO INITIALIZATION
useEffect(() => {
audioRef.current = new Audio(ASSETS.MUSIC_URL);
audioRef.current.loop = true;
audioRef.current.volume = 0.4;
sfxRef.current = new Audio();
return () => {
audioRef.current?.pause();
audioRef.current = null;
};
}, []);
useEffect(() => {
if (audioRef.current) {
audioRef.current.muted = isMuted;
}
}, [isMuted]);
const playSFX = (url) => {
if (isMuted) return;
sfxRef.current.src = url;
sfxRef.current.play().catch(() => {});
};
// INITIALIZE INTERACTIVE SLOTS
useEffect(() => {
if (gameState !== ‘PUZZLE’) return;
const answerChars = currentPuzzle.answer.split(”);
const initialSlots = answerChars.map((char, index) => {
const isSeparator = [‘ ‘, ‘-‘, ‘/’, ‘.’, ‘(‘, ‘)’].includes(char);
const isHint = !isSeparator && index % 4 === 0;
return {
char: isSeparator || isHint ? char : ”,
isEditable: !isSeparator && !isHint,
target: char
};
});
setSlotValues(initialSlots);
const timer = setTimeout(() => {
const firstEditable = initialSlots.findIndex(s => s.isEditable);
if (inputRefs.current[firstEditable]) inputRefs.current[firstEditable].focus();
}, 150);
return () => clearTimeout(timer);
}, [currentLevelIndex, gameState, currentPuzzle.answer]);
const handleSlotChange = (index, value) => {
const char = value.slice(-1);
const newSlots = […slotValues];
newSlots[index].char = char;
setSlotValues(newSlots);
if (char !== ” && index < slotValues.length - 1) {
let next = index + 1;
while (next < slotValues.length && !slotValues[next].isEditable) next++;
if (inputRefs.current[next]) inputRefs.current[next].focus();
}
};
const handleKeyDown = (index, e) => {
if (e.key === ‘Backspace’ && slotValues[index].char === ” && index > 0) {
let prev = index – 1;
while (prev >= 0 && !slotValues[prev].isEditable) prev–;
if (inputRefs.current[prev]) inputRefs.current[prev].focus();
}
if (e.key === ‘Enter’) submitAttempt();
};
const submitAttempt = () => {
const userGuess = slotValues.map(s => s.char).join(”);
if (userGuess.toLowerCase() === currentPuzzle.answer.toLowerCase()) {
playSFX(ASSETS.SUCCESS_SFX);
setShowFeedback(‘correct’);
} else {
playSFX(ASSETS.WRONG_SFX);
const newLives = lives – 1;
setLives(newLives);
if (newLives <= 0) {
setGameState('GAMEOVER');
} else {
setShowFeedback('wrong');
}
}
};
const handleContinue = () => {
const nextIdx = currentLevelIndex + 1;
const isLevelChange = nextIdx < PUZZLES.length && PUZZLES[nextIdx].levelId !== currentPuzzle.levelId;
setIsTransitioning(true);
setTimeout(() => {
setShowFeedback(null);
if (nextIdx < PUZZLES.length) {
setCurrentLevelIndex(nextIdx);
if (isLevelChange) {
setGameState('UNLOCK');
} else {
setGameState('PUZZLE');
}
setIsTransitioning(false);
} else {
setGameState('VICTORY');
setIsTransitioning(false);
}
}, 400);
};
const beginQuest = () => {
audioRef.current?.play().catch(() => {});
setGameState(‘UNLOCK’);
};
const restartGame = () => {
setLives(3);
setCurrentLevelIndex(0);
setGameState(‘START’);
setShowFeedback(null);
};
// UI Components
const HealthBar = () => (
{[…Array(3)].map((_, i) => (
))}
);
const BackgroundOverlay = ({ src }) => (
);
if (gameState === ‘START’) {
return (
The Quest for EdTech Enlightenment
Escape the Luddite forest… find the Valley of Wisdom.
);
}
if (gameState === ‘UNLOCK’) {
return (
Level Unlocked
{currentLevelMetadata.name}
“{currentLevelMetadata.intro}”
);
}
if (gameState === ‘GAMEOVER’) {
return (
GAME OVER
Ignorance has claimed the Brave Dwarf.
);
}
if (gameState === ‘VICTORY’) {
return (
The Valley of Wisdom
Congratulations! You have conquered the technical mists and ethical swamps.
Victory is yours!
);
}
return (
{/* Left Panel: Location & Dwarf */}
Current Location
{currentPuzzle.level}
Gate {currentLevelIndex + 1} of {PUZZLES.length}
{currentPuzzle.icon}
Terminal Key
Type your answer directly into the scroll slots.
{/* Right Panel: The Challenge */}
“{currentPuzzle.challenge}”
{currentPuzzle.icon}
Ancient Scroll Fragment
{currentPuzzle.definition}
{/* INTERACTIVE CHARACTER SLOTS */}
Terminology Decryption
{slotValues.map((slot, i) => (
{slot.isEditable ? (
(inputRefs.current[i] = el)}
type=”text”
maxLength={1}
value={slot.char}
onChange={(e) => handleSlotChange(i, e.target.value)}
onKeyDown={(e) => handleKeyDown(i, e)}
className={`w-11 h-14 flex items-center justify-center rounded-xl border-2 text-2xl font-black text-center transition-all duration-300
${slot.char === ”
? ‘bg-black/50 border-white/10 text-white/10’
: ‘bg-amber-600/30 border-amber-500/60 text-amber-400 shadow-[0_0_20px_rgba(245,158,11,0.2)] focus:border-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-500/20’}`}
/>
) : (
{slot.char}
)}
))}
{/* Feedback Overlays */}
{showFeedback === ‘correct’ && (
SUCCESS
The gate mechanism hums and slides open. You are one step closer to enlightenment.
)}
{showFeedback === ‘wrong’ && (
FAULT DETECTED
“That vocabulary is not recognized. The Luddite mists close in…”
)}
);
};
export default App;
