const { unlockAchievement } = useAchievements();

const [cards, setCards] = useState([]);

const [flippedCards, setFlippedCards] = useState([]);

const [matchesFound, setMatchesFound] = useState(0);

const [moves, setMoves] = useState(0);

const [gameOver, setGameOver] = useState(false);

const [gameStarted, setGameStarted] = useState(false);

const [startTime, setStartTime] = useState(null);

const shuffleCards = useCallback((values) => {

let id = 0;

const initialCards = [...values, ...values].map((value) => ({

id: id++,

value,

isFlipped: false,

isMatched: false,

}));

for (let i = initialCards.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[initialCards[i], initialCards[j]] = [initialCards[j], initialCards[i]];

}

return initialCards;

}, []);

const initializeGame = useCallback(() => {

const shuffledCards = shuffleCards(CARD_VALUES);

setCards(shuffledCards);

setFlippedCards([]);

setMatchesFound(0);

setMoves(0);

setGameOver(false);

setGameStarted(false);

setStartTime(null);

}, [shuffleCards]);

useEffect(() => {

initializeGame();

}, [initializeGame]);

const startGame = () => {

setGameStarted(true);

setStartTime(Date.now());

};

const handleCardClick = useCallback(

(clickedCard) => {

if (

!gameStarted ||

gameOver ||

clickedCard.isFlipped ||

clickedCard.isMatched ||

flippedCards.length === 2

) {

return;

}

setCards((prevCards) =>

prevCards.map((card) =>

card.id === clickedCard.id ? { ...card, isFlipped: true } : card,

),

);

setFlippedCards((prev) => [...prev, clickedCard.id]);

},

[gameStarted, gameOver, flippedCards.length],

);

useEffect(() => {

if (flippedCards.length === 2) {

setMoves((prev) => prev + 1);

const [firstId, secondId] = flippedCards;

const firstCard = cards.find((c) => c.id === firstId);

const secondCard = cards.find((c) => c.id === secondId);

if (firstCard.value === secondCard.value) {

setTimeout(() => {

setCards((prev) =>

prev.map((card) =>

card.id === firstId || card.id === secondId

? { ...card, isMatched: true }

: card,

),

);

setMatchesFound((prev) => prev + 1);

setFlippedCards([]);

}, 600);

} else {

setTimeout(() => {

setCards((prev) =>

prev.map((card) =>

card.id === firstId || card.id === secondId

? { ...card, isFlipped: false }

: card,

),

);

setFlippedCards([]);

}, 1000);

}

}

}, [flippedCards, cards]);

useEffect(() => {

if (matchesFound === CARD_VALUES.length && gameStarted) {

setGameOver(true);

const duration = (Date.now() - startTime) / 1000;

if (duration < 45) unlockAchievement('combo_breaker');

if (moves <= 24) unlockAchievement('sharp_eye');

if (moves <= 18) unlockAchievement('eidetic_memory');

if (moves <= 14) unlockAchievement('mind_palace');

}

}, [matchesFound, moves, unlockAchievement, startTime, gameStarted]);

return (

<div className="min-h-screen bg-[#050505] text-white selection:bg-emerald-500/30 pb-32 relative font-sans">

<Seo

title="Memory Game | Fezcodex"

description="A classic memory game to test your concentration."

keywords={[

'Fezcodex',

'memory game',

'match pairs',

'brain game',

'concentration',

]}

ogImage="/images/asset/ogtitle.png"

/>

<div

className="pointer-events-none fixed inset-0 z-50 opacity-20 mix-blend-overlay"

style={{ backgroundImage: NOISE_BG }}

/>

{/* Hero Section */}

<div className="relative h-[40vh] w-full overflow-hidden border-b border-white/10">

<div className="absolute inset-0">

<GenerativeArt

seed="Memory Protocol"

className="w-full h-full opacity-40 filter brightness-50"

/>

<div className="absolute inset-0 bg-gradient-to-t from-[#050505] to-transparent" />

</div>

</div>

<div className="mx-auto max-w-7xl px-6 -mt-32 relative z-10">

<header className="mb-20">

<Link

to="/apps"

className="mb-8 inline-flex items-center gap-2 text-xs font-mono text-gray-500 hover:text-white transition-colors uppercase tracking-widest"

>

<ArrowLeftIcon weight="bold" />

<span>Archive</span>

</Link>

<div className="flex flex-col md:flex-row md:items-end justify-between gap-8">

<div className="space-y-4">

<BreadcrumbTitle

title="Memory Game"

slug="mg"

variant="brutalist"

/>

<p className="text-gray-400 font-mono text-sm max-w-md uppercase tracking-widest">

Cognitive evaluation protocol. Match identical data points

within minimal move sequences.

</p>

</div>

</div>

</header>

</div>

{/* Main Content Grid */}

<div className="mx-auto max-w-[1400px] px-6 py-16 md:px-12 lg:grid lg:grid-cols-12 lg:gap-24">

<div className="lg:col-span-8">

<div className="memory-game-area relative">

{/* Overlay for start/end */}

{!gameStarted && !gameOver && (

<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/60 backdrop-blur-sm border border-white/5 p-12 text-center">

<div className="max-w-md">

<h2 className="text-3xl font-black uppercase tracking-tighter mb-6">

Initialise Protocol

</h2>

<p className="text-gray-400 font-mono text-sm mb-12">

Click below to begin the pattern identification sequence.

</p>

<button

onClick={startGame}

className="w-full py-4 bg-white text-black font-black uppercase tracking-[0.3em] hover:bg-emerald-400 transition-all text-sm flex items-center justify-center gap-3"

>

<TargetIcon weight="bold" size={18} />

Execute_Start

</button>

</div>

</div>

)}

{gameOver && (

<div className="absolute inset-0 z-20 flex items-center justify-center bg-black/80 backdrop-blur-md border border-emerald-500/20 p-12 text-center">

<div className="max-w-md">

<div className="inline-flex p-4 rounded-full bg-emerald-500/10 text-emerald-500 mb-6">

<ArrowsClockwiseIcon

size={48}

weight="bold"

className="animate-spin-slow"

/>

</div>

<h2 className="text-4xl font-black uppercase tracking-tighter mb-2 text-emerald-400">

Success

</h2>

<p className="text-gray-400 font-mono text-xs uppercase tracking-widest mb-12">

Total_Moves: {moves} {'//'} Data_Integrity: 100%

</p>

<button

onClick={initializeGame}

className="w-full py-4 bg-emerald-500 text-black font-black uppercase tracking-[0.3em] hover:bg-white transition-all text-sm"

>

Re-Initialise

</button>

</div>

</div>

)}

<div

className={`cards-grid ${!gameStarted || gameOver ? 'opacity-20 pointer-events-none' : ''}`}

>

{cards.map((card) => (

<div

key={card.id}

className={`memory-card ${card.isFlipped || card.isMatched ? 'flipped' : ''} ${card.isMatched ? 'matched' : ''}`}

onClick={() => handleCardClick(card)}

>

<div className="memory-card-inner">

<div className="memory-card-face memory-card-back bg-white/5 border border-white/10 flex items-center justify-center group-hover:border-emerald-500 transition-colors">

<div className="w-4 h-4 border border-white/20 rotate-45" />

</div>

<div className="memory-card-face memory-card-front bg-emerald-500 text-black border border-emerald-400">

{card.value}

</div>

</div>

</div>

))}

</div>

</div>

</div>

{/* Sidebar */}

<div className="mt-16 lg:col-span-4 lg:mt-0">

<div className="sticky top-24 space-y-12">

<div>

<h3 className="mb-6 font-mono text-[10px] font-bold uppercase tracking-widest text-gray-500">

{'//'} SESSION_METRICS

</h3>

<div className="space-y-6 border-l border-white/10 pl-6">

<div className="flex flex-col gap-1">

<span className="font-mono text-[9px] uppercase tracking-widest text-gray-500 flex items-center gap-2">

<TargetIcon size={12} /> Move_Count

</span>

<span className="font-mono text-2xl uppercase text-white font-black">

{moves}

</span>

</div>

<div className="flex flex-col gap-1">

<span className="font-mono text-[9px] uppercase tracking-widest text-gray-500 flex items-center gap-2">

<ArrowsClockwiseIcon size={12} /> Sequence_Matches

</span>

<span className="font-mono text-2xl uppercase text-emerald-500 font-black">

{matchesFound}

<span className="text-gray-700 text-lg">

/{CARD_VALUES.length}

</span>

</span>

</div>

<div className="flex flex-col gap-1">

<span className="font-mono text-[9px] uppercase tracking-widest text-gray-500 flex items-center gap-2">

<TimerIcon size={12} /> Uptime

</span>

<span className="font-mono text-sm uppercase text-white font-bold">

{startTime

? Math.floor((Date.now() - startTime) / 1000)

: 0}

S

</span>

</div>

</div>

</div>

<div className="bg-white/5 border border-white/10 p-6 rounded-sm">

<h4 className="font-mono text-[10px] font-bold uppercase tracking-widest text-gray-500 mb-4">

Instructions

</h4>

<ul className="space-y-3 text-[10px] font-mono text-gray-500 uppercase tracking-wider">

<li>• Select any two modules to reveal their identifiers.</li>

<li>• If module values align, module is secured.</li>

<li>

• Align all modules to complete the identification protocol.

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

);