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

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

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

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>
   );
 }