const deck = [];

for (const suit of suits) {

for (const rank of ranks) {

deck.push({ suit, rank, value: ranks.indexOf(rank) + 2 });

}

}

return shuffleDeck(deck);

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

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

[deck[i], deck[j]] = [deck[j], deck[i]];

}

return deck;

const appName = 'Higher or Lower';

const { addToast } = useContext(ToastContext);

const { unlockAchievement } = useAchievements();

const [deck, setDeck] = useState([]);

const [currentCard, setCurrentCard] = useState(null);

const [nextCard, setNextCard] = useState(null);

const [score, setScore] = useState(0);

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

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

const [isProcessing, setIsProcessing] = useState(false);

const startGame = useCallback(() => {

const newDeck = getDeck();

const firstCard = newDeck.pop();

setDeck(newDeck);

setCurrentCard(firstCard);

setNextCard(null);

setScore(0);

setGameOver(false);

setGameStarted(true);

addToast({ message: 'DECK_INITIALIZED: Sequence ready.', type: 'info' });

}, [addToast]);

useEffect(() => {

if (!gameStarted) {

startGame();

}

}, [gameStarted, startGame]);

const handleGuess = async (guess) => {

if (gameOver || !currentCard || isProcessing) return;

setIsProcessing(true);

const drawnNextCard = deck.pop();

setDeck([...deck]);

setNextCard(drawnNextCard);

// Short delay for visual tension

await new Promise((resolve) => setTimeout(resolve, 600));

const isHigher = drawnNextCard.value > currentCard.value;

const isLower = drawnNextCard.value < currentCard.value;

const isSame = drawnNextCard.value === currentCard.value;

let correct = false;

if (guess === 'higher' && isHigher) correct = true;

else if (guess === 'lower' && isLower) correct = true;

else if (isSame) {

addToast({

message: 'PROBABILITY_STALEMATE: Value parity detected.',

type: 'warning',

});

setCurrentCard(drawnNextCard);

setNextCard(null);

setIsProcessing(false);

return;

}

if (correct) {

setScore((s) => s + 1);

setCurrentCard(drawnNextCard);

setNextCard(null);

addToast({ message: 'PREDICTION_VERIFIED', type: 'success' });

} else {

setGameOver(true);

if (score > 20) unlockAchievement('legendary_gambler');

if (score > 14) unlockAchievement('high_roller');

if (score > 7) unlockAchievement('card_shark');

addToast({

message: 'PREDICTION_FAILED: Sequence terminated.',

type: 'error',

});

}

setIsProcessing(false);

};

const renderCard = (card, isNext = false) => {

if (!card)

return (

<div className="w-32 h-48 md:w-40 md:h-56 border-2 border-dashed border-white/10 rounded-sm flex items-center justify-center bg-white/[0.02]">

<span className="font-mono text-4xl font-black text-white/5 uppercase">

Null

</span>

</div>

);

const isRed = card.suit === '♥' || card.suit === '♦';

return (

<motion.div

initial={isNext ? { y: 20, opacity: 0 } : { scale: 0.95, opacity: 0 }}

animate={{ y: 0, scale: 1, opacity: 1 }}

className={`w-32 h-48 md:w-40 md:h-56 bg-white border-4 border-black rounded-sm relative flex flex-col justify-between p-4 shadow-[8px_8px_0px_rgba(16,185,129,0.2)] ${isRed ? 'text-rose-600' : 'text-black'}`}

>

<div className="flex flex-col items-start leading-none">

<span className="text-2xl font-black font-mono">{card.rank}</span>

<span className="text-xl">{card.suit}</span>

</div>

<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-6xl md:text-7xl">

{card.suit}

</div>

<div className="flex flex-col items-end leading-none rotate-180">

<span className="text-2xl font-black font-mono">{card.rank}</span>

<span className="text-xl">{card.suit}</span>

</div>

</motion.div>

);

};

return (

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

<Seo

title="Higher or Lower | Fezcodex"

description="Guess if the next card is higher or lower in this high-contrast tactical environment."

keywords={[

'Fezcodex',

'card game',

'higher or lower',

'game',

'brutalist',

]}

/>

<div className="mx-auto max-w-7xl px-6 py-24 md:px-12">

{/* Header Section */}

<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>Applications</span>

</Link>

<BreadcrumbTitle title={appName} slug="card" variant="brutalist" />

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

<div>

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

Probability forecasting protocol. Predict the next{' '}

<span className="text-emerald-400 font-bold">

numerical value

</span>{' '}

within the shuffled sequence.

</p>

</div>

<div className="flex gap-12 font-mono">

<div className="flex flex-col">

<span className="text-[10px] text-gray-600 uppercase tracking-widest">

Score_Chain

</span>

<span className="text-3xl font-black text-emerald-500">

{score.toString().padStart(2, '0')}

</span>

</div>

<div className="flex flex-col">

<span className="text-[10px] text-gray-600 uppercase tracking-widest">

Deck_Remaining

</span>

<span className="text-3xl font-black text-white">

{deck.length.toString().padStart(2, '0')}

</span>

</div>

</div>

</div>

</header>

<div className="grid grid-cols-1 lg:grid-cols-12 gap-12">

{/* Controls Column */}

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

<div className="relative border border-white/10 bg-white/[0.02] backdrop-blur-sm p-8 rounded-sm overflow-hidden group">

<div className="absolute inset-0 opacity-5 pointer-events-none">

<GenerativeArt seed={appName} className="w-full h-full" />

</div>

<div className="absolute top-0 left-0 w-1 h-0 group-hover:h-full bg-emerald-500 transition-all duration-500" />

<h3 className="font-mono text-[10px] font-bold text-emerald-500 uppercase tracking-widest mb-12 flex items-center gap-2">

<TargetIcon weight="fill" />

Decision_Matrix

</h3>

<div className="space-y-6 relative z-10">

{!gameOver ? (

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

<button

onClick={() => handleGuess('higher')}

disabled={isProcessing}

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

>

<ArrowUpIcon weight="bold" size={20} />

Predict_Higher

</button>

<button

onClick={() => handleGuess('lower')}

disabled={isProcessing}

className="w-full py-6 border-2 border-white text-white font-black uppercase tracking-[0.3em] hover:bg-white hover:text-black disabled:opacity-50 transition-all text-sm flex items-center justify-center gap-3"

>

<ArrowDownIcon weight="bold" size={20} />

Predict_Lower

</button>

</div>

) : (

<button

onClick={startGame}

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

>

<ArrowsClockwiseIcon weight="bold" size={20} />

Reboot_Sequence

</button>

)}

</div>

</div>

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

<div className="flex items-center gap-3 mb-4 text-emerald-500">

<ChartBarIcon size={20} weight="bold" />

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

Tactical_Metrics

</h4>

</div>

<ul className="space-y-3 text-xs font-mono text-gray-500 uppercase tracking-wider">

<li className="flex gap-3">

<span className="text-emerald-500">01</span> ACE ranks as 14

(Highest).

</li>

<li className="flex gap-3">

<span className="text-emerald-500">02</span> Matching values

result in a DRAW (Safety).

</li>

<li className="flex gap-3">

<span className="text-emerald-500">03</span> Goal: Maximize

chain length without failure.

</li>

</ul>

</div>

</div>

{/* Matrix Column */}

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

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

<EyeIcon weight="fill" className="text-emerald-500" />

Observation_Deck

</h3>

<div className="flex-grow border border-white/10 bg-white/[0.01] rounded-sm p-8 flex items-center justify-center relative overflow-hidden min-h-[400px]">

<div className="flex flex-col md:flex-row items-center gap-12 relative z-10">

<div className="flex flex-col items-center gap-4">

<span className="font-mono text-[10px] text-gray-600 uppercase tracking-[0.3em]">

Current_Base

</span>

{renderCard(currentCard)}

</div>

<div className="flex flex-col items-center gap-2">

<div

className={`text-4xl font-black font-mono transition-colors ${isProcessing ? 'text-emerald-500 animate-pulse' : 'text-white/10'}`}

>

VS

</div>

<div className="h-24 w-px bg-gradient-to-b from-transparent via-white/10 to-transparent" />

</div>

<div className="flex flex-col items-center gap-4">

<span className="font-mono text-[10px] text-gray-600 uppercase tracking-[0.3em]">

Prediction_Target

</span>

<AnimatePresence mode="wait">

{nextCard ? (

renderCard(nextCard, true)

) : (

<motion.div

key="placeholder"

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

exit={{ opacity: 0 }}

>

{renderCard(null, true)}

</motion.div>

)}

</AnimatePresence>

</div>

</div>

{gameOver && (

<motion.div

initial={{ opacity: 0 }}

animate={{ opacity: 1 }}

className="absolute inset-0 bg-black/80 backdrop-blur-sm z-20 flex items-center justify-center p-8"

>

<div className="text-center space-y-6">

<TrophyIcon

size={64}

weight="fill"

className="mx-auto text-rose-500"

/>

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

<h2 className="text-4xl font-black font-mono uppercase tracking-tighter text-rose-500">

System_Failure

</h2>

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

Final_Yield: {score}

</p>

</div>

<button

onClick={startGame}

className="px-8 py-4 bg-white text-black font-black uppercase tracking-[0.3em] hover:bg-emerald-400 transition-all text-xs"

>

Initialize_New_Session

</button>

</div>

</motion.div>

)}

<div className="absolute bottom-8 left-8 right-8 flex justify-between items-center opacity-20 font-mono text-[8px] uppercase tracking-[0.5em] text-gray-500">

<span className="flex items-center gap-2">

<CardsThreeIcon /> LOCAL_SESSION_ACTIVE

</span>

<span>HL_v4.0.2</span>

</div>

</div>

</div>

</div>

</div>

</div>

);