84 lines
3.7 KiB
TypeScript
84 lines
3.7 KiB
TypeScript
interface Props {
|
||
onClose: () => void;
|
||
}
|
||
|
||
export default function RulesModal({ onClose }: Props) {
|
||
return (
|
||
<div
|
||
className="fixed inset-0 z-50 flex items-start justify-center bg-black/70 p-4 overflow-y-auto"
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className="relative bg-slate-900 rounded-2xl w-full max-w-lg my-6 p-6 text-sm leading-relaxed"
|
||
onClick={(e) => e.stopPropagation()}
|
||
>
|
||
<button
|
||
onClick={onClose}
|
||
className="absolute top-4 right-4 text-gray-400 hover:text-white text-xl leading-none"
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
<h1 className="text-xl font-bold mb-4">Pravidlá hry Bridžik</h1>
|
||
|
||
<Section title="Karty">
|
||
<p>Hrá sa s <b>32-kartovým balíčkom</b> sedmových (slovenských/nemeckých) kariet.</p>
|
||
<p className="mt-2"><b>Farby:</b> červeň (♥), zeleň (♠), žaluď (♣), guľa (♦)</p>
|
||
<p className="mt-1 text-red-400 font-semibold">Červeň je vždy tromf (adut) — prebíja každú inú farbu.</p>
|
||
<p className="mt-2"><b>Hodnoty</b> od najnižšej: VII · VIII · IX · X · J · Q · K · A</p>
|
||
</Section>
|
||
|
||
<Section title="Štruktúra hry">
|
||
<p>4 hráči · 4 série · 8 kôl v sérii</p>
|
||
<p className="mt-1">V každom kole dostane každý hráč <b>8 − číslo_kola</b> kariet (8 až 1).</p>
|
||
<p className="mt-1">Sériu otvára hráč s rovnakým číslom ako séria. Každé ďalšie kolo posúva začínajúceho hráča o jedného.</p>
|
||
</Section>
|
||
|
||
<Section title="Priebeh kola">
|
||
<p className="font-semibold">1. Tipovanie</p>
|
||
<p className="mt-1">Každý hráč tipuje, koľko kopiek v kole získa (0 až počet kopiek).</p>
|
||
<p className="mt-1 text-yellow-300">Pravidlo bridžika: súčet tipov nesmie presne rovnať počtu kopiek v kole — posledný tipujúci nemôže zadať tip, ktorý by toto spôsobil.</p>
|
||
|
||
<p className="font-semibold mt-3">2. Hranie kariet</p>
|
||
<p className="mt-1">Prvú kopku otvára hráč s <b>najvyšším tipom</b>. Každú ďalšiu otvára víťaz predchádzajúcej kopky.</p>
|
||
|
||
<p className="font-semibold mt-3">Povinnosť priznať farbu:</p>
|
||
<ol className="mt-1 list-decimal list-inside space-y-1">
|
||
<li>Máš farbu vynesenej karty → <b>musíš ju zahrať.</b></li>
|
||
<li>Nemáš ju, ale máš červeň → <b>musíš zahrať červeň.</b></li>
|
||
<li>Nemáš ani jedno → môžeš zahrať <b>ľubovoľnú</b> kartu.</li>
|
||
</ol>
|
||
|
||
<p className="font-semibold mt-3">Víťaz kopky:</p>
|
||
<ul className="mt-1 list-disc list-inside space-y-1">
|
||
<li>Ak padla červeň → vyhráva <b>najvyššia červeň.</b></li>
|
||
<li>Ak nie → vyhráva <b>najvyššia karta vynesenej farby.</b></li>
|
||
</ul>
|
||
</Section>
|
||
|
||
<Section title="Bodovanie">
|
||
<p>Po každom kole: ak sa tip <b>presne zhoduje</b> s počtom získaných kopiek → <b>10 + tip</b> bodov, inak <b>0</b>.</p>
|
||
<p className="mt-1 text-gray-400">Príklad: tipoval 3, získal 3 → 13 bodov. Tipoval 3, získal 2 → 0 bodov.</p>
|
||
<p className="mt-2">Vyhráva hráč s najvyšším celkovým súčtom po 4 sériách.</p>
|
||
</Section>
|
||
|
||
<button
|
||
onClick={onClose}
|
||
className="mt-4 w-full py-2.5 rounded-xl bg-slate-700 hover:bg-slate-600 font-semibold"
|
||
>
|
||
Zavrieť
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function Section({ title, children }: { title: string; children: React.ReactNode }) {
|
||
return (
|
||
<div className="mb-4">
|
||
<h2 className="font-bold text-base text-green-400 mb-1">{title}</h2>
|
||
<div className="text-gray-200">{children}</div>
|
||
</div>
|
||
);
|
||
}
|