Build Hokm card game: offline vs-AI + online social/gamification (mock backend)
- Pure-TS Hokm engine (deal, hakem, trump, tricks, scoring, Kot) + AI bots - Persian-luxury RTL UI (Next 16 / React 19 / Tailwind v4 / Framer Motion / Zustand) - Online platform behind OnlineService seam (mock now, .NET SignalR later): auth (phone OTP + email/Google), profiles, friends, private rooms with partner pick, ranked matchmaking, leaderboard, shop - Gamification: ranks/leagues, coins, XP/levels, daily rewards, achievements - i18n fa/en, PWA manifest, engine + gamification sims Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
@@ -0,0 +1,214 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Bot,
|
||||
Globe,
|
||||
LogIn,
|
||||
LogOut,
|
||||
ShoppingBag,
|
||||
Trophy,
|
||||
User,
|
||||
Users,
|
||||
Wifi,
|
||||
} from "lucide-react";
|
||||
import { useGameStore } from "@/lib/game-store";
|
||||
import { useSessionStore } from "@/lib/session-store";
|
||||
import { useUIStore } from "@/lib/ui-store";
|
||||
import { useI18n } from "@/lib/i18n";
|
||||
import { SUIT_SYMBOL } from "@/lib/hokm/types";
|
||||
import { TopBar } from "./online/TopBar";
|
||||
|
||||
export function HomeScreen() {
|
||||
const { t, toggle } = useI18n();
|
||||
const newMatch = useGameStore((s) => s.newMatch);
|
||||
const goGame = useUIStore((s) => s.goGame);
|
||||
const go = useUIStore((s) => s.go);
|
||||
const profile = useSessionStore((s) => s.profile);
|
||||
const isAuthed = useSessionStore((s) => s.isAuthed);
|
||||
const signOut = useSessionStore((s) => s.signOut);
|
||||
|
||||
const playVsComputer = () => {
|
||||
const you = profile?.displayName || t("seat.you");
|
||||
newMatch({ names: [you, "آرش", "کیان", "نیلوفر"], targetScore: 7 });
|
||||
goGame("home");
|
||||
};
|
||||
|
||||
const playOnline = () => (isAuthed ? go("online") : go("auth"));
|
||||
|
||||
return (
|
||||
<main className="persian-pattern relative min-h-dvh w-full overflow-y-auto">
|
||||
<FloatingSuits />
|
||||
<div className="relative z-10 mx-auto w-full max-w-md p-4 sm:p-6 flex flex-col min-h-dvh">
|
||||
<div className="pt-1">
|
||||
<TopBar />
|
||||
</div>
|
||||
|
||||
{/* logo */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 16 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="flex flex-col items-center text-center mt-6 mb-7"
|
||||
>
|
||||
<div className="size-16 rounded-2xl gold-border flex items-center justify-center bg-navy-900 mb-3 shadow-lg">
|
||||
<span className="gold-text text-4xl font-black leading-none">♠</span>
|
||||
</div>
|
||||
<h1 className="gold-text text-5xl font-black tracking-tight">
|
||||
{t("app.title")}
|
||||
</h1>
|
||||
<p className="text-cream/60 mt-1 text-sm">{t("app.subtitle")}</p>
|
||||
</motion.div>
|
||||
|
||||
{/* primary actions */}
|
||||
<div className="space-y-3">
|
||||
<PrimaryCard
|
||||
icon={<Wifi className="size-6" />}
|
||||
title={t("menu.online")}
|
||||
desc={t("menu.onlineDesc")}
|
||||
onClick={playOnline}
|
||||
primary
|
||||
/>
|
||||
<PrimaryCard
|
||||
icon={<Bot className="size-6" />}
|
||||
title={t("menu.vsComputer")}
|
||||
desc={t("menu.vsComputerDesc")}
|
||||
onClick={playVsComputer}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* tiles */}
|
||||
<div className="grid grid-cols-4 gap-2.5 mt-4">
|
||||
<Tile icon={<User className="size-5" />} label={t("menu.profile")} onClick={() => go("profile")} />
|
||||
<Tile icon={<Users className="size-5" />} label={t("menu.friends")} onClick={() => go(isAuthed ? "friends" : "auth")} />
|
||||
<Tile icon={<Trophy className="size-5" />} label={t("menu.leaderboard")} onClick={() => go("leaderboard")} />
|
||||
<Tile icon={<ShoppingBag className="size-5" />} label={t("menu.shop")} onClick={() => go("shop")} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
{/* footer */}
|
||||
<div className="flex items-center justify-between gap-2 pt-6 pb-2">
|
||||
{isAuthed ? (
|
||||
<button
|
||||
onClick={signOut}
|
||||
className="glass rounded-full px-4 py-2 text-sm flex items-center gap-2 hover:bg-navy-800/80 transition"
|
||||
>
|
||||
<LogOut className="size-4 text-rose-300" />
|
||||
{t("menu.signOut")}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => go("auth")}
|
||||
className="btn-gold rounded-full px-4 py-2 text-sm flex items-center gap-2"
|
||||
>
|
||||
<LogIn className="size-4" />
|
||||
{t("menu.signIn")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
onClick={toggle}
|
||||
className="glass rounded-full px-4 py-2 text-sm flex items-center gap-2 hover:bg-navy-800/80 transition"
|
||||
>
|
||||
<Globe className="size-4 text-gold-400" />
|
||||
{t("home.lang")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
function PrimaryCard({
|
||||
icon,
|
||||
title,
|
||||
desc,
|
||||
onClick,
|
||||
primary,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
desc: string;
|
||||
onClick: () => void;
|
||||
primary?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.98 }}
|
||||
whileHover={{ y: -2 }}
|
||||
onClick={onClick}
|
||||
className={
|
||||
"w-full rounded-2xl p-4 flex items-center gap-4 text-start transition " +
|
||||
(primary
|
||||
? "btn-gold"
|
||||
: "glass hover:bg-navy-800/80")
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={
|
||||
"size-12 rounded-xl flex items-center justify-center shrink-0 " +
|
||||
(primary ? "bg-black/15 text-[#2a1f04]" : "bg-navy-900 gold-border text-gold-400")
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
<span>
|
||||
<span className={"block text-lg font-black " + (primary ? "text-[#2a1f04]" : "text-cream")}>
|
||||
{title}
|
||||
</span>
|
||||
<span className={"block text-xs " + (primary ? "text-[#2a1f04]/70" : "text-cream/55")}>
|
||||
{desc}
|
||||
</span>
|
||||
</span>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
function Tile({
|
||||
icon,
|
||||
label,
|
||||
onClick,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={onClick}
|
||||
className="glass rounded-2xl py-3 flex flex-col items-center gap-1.5 hover:bg-navy-800/80 transition"
|
||||
>
|
||||
<span className="text-gold-400">{icon}</span>
|
||||
<span className="text-[11px] text-cream/80">{label}</span>
|
||||
</motion.button>
|
||||
);
|
||||
}
|
||||
|
||||
function FloatingSuits() {
|
||||
const suits = Object.values(SUIT_SYMBOL);
|
||||
const items = Array.from({ length: 8 }, (_, i) => ({
|
||||
s: suits[i % 4],
|
||||
left: `${(i * 13 + 6) % 95}%`,
|
||||
delay: i * 0.7,
|
||||
dur: 9 + (i % 4) * 2,
|
||||
size: 28 + (i % 3) * 18,
|
||||
}));
|
||||
return (
|
||||
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
{items.map((it, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="float-suit absolute text-gold-500/10 font-black"
|
||||
style={{
|
||||
left: it.left,
|
||||
fontSize: it.size,
|
||||
animationDuration: `${it.dur}s`,
|
||||
animationDelay: `${it.delay}s`,
|
||||
}}
|
||||
>
|
||||
{it.s}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user