UI: справка — раздел «Рейтинг» свёрнут под кнопку

Вся информация об очках раскрывается кнопкой-карточкой (шеврон вниз/вверх,
стиль карточек списка партий) — задел под будущие разделы справки.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-18 03:33:51 +03:00
co-authored by Claude Fable 5
parent 93d81010f7
commit 48a46ad57d
+22 -2
View File
@@ -1,8 +1,12 @@
import { ChevronDown, ChevronUp } from "lucide-react";
import { useState } from "react";
/** /**
* Справка. Пока — только как считаются очки игроков (рейтинг). В дальнейшем сюда * Справка — разделы, раскрывающиеся по кнопке. Пока раздел один: «Рейтинг»
* добавятся правила, подсказки и прочее. Текст соответствует backend/app/services/scoring.py. * (как считаются очки игроков). Текст соответствует backend/app/services/scoring.py.
*/ */
export function HelpPage() { export function HelpPage() {
const [showRating, setShowRating] = useState(false);
return ( return (
<div> <div>
{/* Название страницы уже в верхней панели — в теле только пояснение. */} {/* Название страницы уже в верхней панели — в теле только пояснение. */}
@@ -13,6 +17,20 @@ export function HelpPage() {
</p> </p>
</div> </div>
{/* Кнопка-карточка раздела — как карточки списка партий. */}
<button
className="card"
style={{ textAlign: "left", width: "100%" }}
onClick={() => setShowRating((v) => !v)}
>
<div className="row-between">
<h3 style={{ margin: 0 }}>Рейтинг</h3>
{showRating ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
</div>
</button>
{showRating && (
<>
<div className="card"> <div className="card">
<h3>Очки игроков (рейтинг)</h3> <h3>Очки игроков (рейтинг)</h3>
<p className="small"> <p className="small">
@@ -79,6 +97,8 @@ export function HelpPage() {
</li> </li>
</ul> </ul>
</div> </div>
</>
)}
</div> </div>
); );
} }