UI: справка — раздел «Рейтинг» свёрнут под кнопку
Вся информация об очках раскрывается кнопкой-карточкой (шеврон вниз/вверх, стиль карточек списка партий) — задел под будущие разделы справки. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user