From 48a46ad57d75aa4f145147686651e61c1717f41a Mon Sep 17 00:00:00 2001
From: NotBigGhost <ivan@arseniev.info>
Date: Sat, 18 Jul 2026 03:33:51 +0300
Subject: [PATCH] =?UTF-8?q?UI:=20=D1=81=D0=BF=D1=80=D0=B0=D0=B2=D0=BA?=
 =?UTF-8?q?=D0=B0=20=E2=80=94=20=D1=80=D0=B0=D0=B7=D0=B4=D0=B5=D0=BB=20?=
 =?UTF-8?q?=C2=AB=D0=A0=D0=B5=D0=B9=D1=82=D0=B8=D0=BD=D0=B3=C2=BB=20=D1=81?=
 =?UTF-8?q?=D0=B2=D1=91=D1=80=D0=BD=D1=83=D1=82=20=D0=BF=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 frontend/src/pages/HelpPage.tsx | 146 ++++++++++++++++++--------------
 1 file changed, 83 insertions(+), 63 deletions(-)

diff --git a/frontend/src/pages/HelpPage.tsx b/frontend/src/pages/HelpPage.tsx
index d3765f5..e7fe227 100644
--- a/frontend/src/pages/HelpPage.tsx
+++ b/frontend/src/pages/HelpPage.tsx
@@ -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() {
+  const [showRating, setShowRating] = useState(false);
   return (
     <div>
       {/* Название страницы уже в верхней панели — в теле только пояснение. */}
@@ -13,72 +17,88 @@ export function HelpPage() {
         </p>
       </div>
 
-      <div className="card">
-        <h3>Очки игроков (рейтинг)</h3>
-        <p className="small">
-          Рейтинг считается только по <b>завершённым</b> партиям. Незавершённые и отменённые
-          в зачёт не идут.
-        </p>
-        <p className="small">
-          За каждую партию игрок получает «очки за место» — они нормированы по числу игроков
-          за столом, поэтому победа за большим столом ценится выше, чем за маленьким:
-        </p>
-        <div className="formula">
-          очки = (N − место − (размер_ничьей − 1) / 2) / (N − 1)
+      {/* Кнопка-карточка раздела — как карточки списка партий. */}
+      <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>
-        <p className="small" style={{ marginTop: 10 }}>
-          где <b>N</b> — число игроков в партии. Первое место даёт <b>1.0</b>, последнее — <b>0.0</b>.
-        </p>
-        <ul className="small" style={{ marginTop: 0, paddingLeft: 18 }}>
-          <li>Если несколько игроков делят место (ничья) — они делят сумму очков поровну.</li>
-          <li>Выбывшие из партии считаются как последнее место.</li>
-        </ul>
-        <p className="small">
-          Итоговый <b>рейтинг</b> игрока — сглаженное среднее: к реальным партиям
-          «дописываются» 10 виртуальных со средним результатом 0.5 (шкала от 0 до 100):
-        </p>
-        <div className="formula">
-          рейтинг = (10 × 0.5 + сумма очков) / (10 + число партий) × 100
-        </div>
-        <p className="small" style={{ marginTop: 10 }}>
-          Пока партий мало, рейтинг держится около 50 и с опытом сходится к реальному
-          среднему — стабильные результаты на длинной дистанции ценятся выше короткой
-          удачной серии.
-        </p>
-      </div>
+      </button>
 
-      <div className="card">
-        <h3>Пример (стол на 4 игроков)</h3>
-        <div className="stack" style={{ gap: 6 }}>
-          <div className="row-between small"><span>1-е место</span><b>(4−1−0)/3 = 1.00 → 100</b></div>
-          <div className="row-between small"><span>2-е место</span><b>(4−2−0)/3 = 0.67 → 67</b></div>
-          <div className="row-between small"><span>3-е место</span><b>(4−3−0)/3 = 0.33 → 33</b></div>
-          <div className="row-between small"><span>4-е место</span><b>(4−4−0)/3 = 0.00 → 0</b></div>
-          <div className="row-between small">
-            <span>Ничья за 1-е (двое)</span><b>(4−1−0.5)/3 = 0.83 каждому</b>
+      {showRating && (
+        <>
+          <div className="card">
+            <h3>Очки игроков (рейтинг)</h3>
+            <p className="small">
+              Рейтинг считается только по <b>завершённым</b> партиям. Незавершённые и отменённые
+              в зачёт не идут.
+            </p>
+            <p className="small">
+              За каждую партию игрок получает «очки за место» — они нормированы по числу игроков
+              за столом, поэтому победа за большим столом ценится выше, чем за маленьким:
+            </p>
+            <div className="formula">
+              очки = (N − место − (размер_ничьей − 1) / 2) / (N − 1)
+            </div>
+            <p className="small" style={{ marginTop: 10 }}>
+              где <b>N</b> — число игроков в партии. Первое место даёт <b>1.0</b>, последнее — <b>0.0</b>.
+            </p>
+            <ul className="small" style={{ marginTop: 0, paddingLeft: 18 }}>
+              <li>Если несколько игроков делят место (ничья) — они делят сумму очков поровну.</li>
+              <li>Выбывшие из партии считаются как последнее место.</li>
+            </ul>
+            <p className="small">
+              Итоговый <b>рейтинг</b> игрока — сглаженное среднее: к реальным партиям
+              «дописываются» 10 виртуальных со средним результатом 0.5 (шкала от 0 до 100):
+            </p>
+            <div className="formula">
+              рейтинг = (10 × 0.5 + сумма очков) / (10 + число партий) × 100
+            </div>
+            <p className="small" style={{ marginTop: 10 }}>
+              Пока партий мало, рейтинг держится около 50 и с опытом сходится к реальному
+              среднему — стабильные результаты на длинной дистанции ценятся выше короткой
+              удачной серии.
+            </p>
           </div>
-        </div>
-      </div>
 
-      <div className="card">
-        <h3>Попадание в топ</h3>
-        <p className="small">
-          Чтобы попасть в ранжированный топ, нужно сыграть минимум <b>10 партий</b>. До этого
-          игрок показывается в блоке «Новички» — предварительно, без места в рейтинге.
-        </p>
-      </div>
+          <div className="card">
+            <h3>Пример (стол на 4 игроков)</h3>
+            <div className="stack" style={{ gap: 6 }}>
+              <div className="row-between small"><span>1-е место</span><b>(4−1−0)/3 = 1.00 → 100</b></div>
+              <div className="row-between small"><span>2-е место</span><b>(4−2−0)/3 = 0.67 → 67</b></div>
+              <div className="row-between small"><span>3-е место</span><b>(4−3−0)/3 = 0.33 → 33</b></div>
+              <div className="row-between small"><span>4-е место</span><b>(4−4−0)/3 = 0.00 → 0</b></div>
+              <div className="row-between small">
+                <span>Ничья за 1-е (двое)</span><b>(4−1−0.5)/3 = 0.83 каждому</b>
+              </div>
+            </div>
+          </div>
 
-      <div className="card">
-        <h3>Другие показатели</h3>
-        <ul className="small" style={{ margin: 0, paddingLeft: 18 }}>
-          <li><b>Винрейт (WR)</b> — доля партий, в которых игрок занял 1-е место.</li>
-          <li><b>Среднее место</b> — среднее по завершённым партиям.</li>
-          <li>
-            При равенстве рейтинга топ сортируется по: винрейту, числу игр, среднему месту
-            и затем по нику.
-          </li>
-        </ul>
-      </div>
+          <div className="card">
+            <h3>Попадание в топ</h3>
+            <p className="small">
+              Чтобы попасть в ранжированный топ, нужно сыграть минимум <b>10 партий</b>. До этого
+              игрок показывается в блоке «Новички» — предварительно, без места в рейтинге.
+            </p>
+          </div>
+
+          <div className="card">
+            <h3>Другие показатели</h3>
+            <ul className="small" style={{ margin: 0, paddingLeft: 18 }}>
+              <li><b>Винрейт (WR)</b> — доля партий, в которых игрок занял 1-е место.</li>
+              <li><b>Среднее место</b> — среднее по завершённым партиям.</li>
+              <li>
+                При равенстве рейтинга топ сортируется по: винрейту, числу игр, среднему месту
+                и затем по нику.
+              </li>
+            </ul>
+          </div>
+        </>
+      )}
     </div>
   );
 }