From b24149959b3f2305a88d99e27e06378ba2b0b90d Mon Sep 17 00:00:00 2001
From: toximu <timofei625211@gmail.com>
Date: Thu, 11 Jun 2026 22:27:05 +0300
Subject: [PATCH] add opponent and header to draft page

---
 src/pages/DraftPage.jsx      | 72 ++++++++++++++++++++++++++++++++----
 src/pages/LoginPage.jsx      |  2 +-
 src/pages/useMatchSession.js | 24 +++++++++++-
 3 files changed, 87 insertions(+), 11 deletions(-)

diff --git a/src/pages/DraftPage.jsx b/src/pages/DraftPage.jsx
index f703221..5556aa1 100644
--- a/src/pages/DraftPage.jsx
+++ b/src/pages/DraftPage.jsx
@@ -2,25 +2,81 @@ import React from 'react';
 import { useParams } from 'react-router-dom';
 import {useMatchSession} from './useMatchSession.js';
 import './DraftPage.css';
+import {useUser} from "../context/UserContext.jsx";
 
 const DraftPage = () => {
     const { matchId } = useParams();
-    const { sessionData, sendBan, isConnected } = useMatchSession(matchId);
-
+    const { sessionData, sendBan, isConnected, opponent } = useMatchSession(matchId);
+    const {user} = useUser();
     if (!isConnected) return <div className="loader">Установка соединения с сервером...</div>;
     if (!sessionData) return <div className="loader">Загрузка данных драфта...</div>;
 
-    const { optionsStates: categories, firstUserMove } = sessionData;
+    const amIFirstUser = user?.id === sessionData.firstUserId;
+    const isMyTurn = amIFirstUser ? sessionData.firstUserMove : !sessionData.firstUserMove;
+
+    const { optionsStates: categories} = sessionData;
 
     return (
         <div className="draft-container">
-            <header className="draft-header">
-                <h1 className="draft-title">Draft Session #{matchId.substring(0, 8)}</h1>
+            {/* Обновленный заголовок сессии с данными оппонента */}
+            <header className="draft-header" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '25px', gap: '20px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
+
+
+                    {/* Оппонент внутри Хедера */}
+                    {opponent ? (
+                        <div className="draft-opponent-panel" style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '12px',
+                            background: '#1e293b',
+                            padding: '8px 16px',
+                            borderRadius: '12px',
+                            border: '1px solid #334155'
+                        }}>
+                            <img
+                                /* Ссылка есть всегда */
+                                src={opponent.iconUrl}
+                                alt="Avatar"
+                                style={{ width: '36px', height: '36px', borderRadius: '50%', objectFit: 'cover', border: '2px solid #475569' }}
+                                /* ОБРАБОТЧИК ОШИБКИ: если картинки нет по ссылке, заменяем на заглушку */
+                                onError={(e) => {
+                                    // Чтобы избежать бесконечного цикла, если и заглушка упадет:
+                                    if (e.target.src !== 'https://img.icons8.com/windows/32/94a3b8/user-male-circle.png') {
+                                        e.target.src = 'https://img.icons8.com/windows/32/94a3b8/user-male-circle.png';
+                                        e.target.style.padding = '4px'; // Немного отступа для иконки
+                                        e.target.style.background = '#334155';
+                                    }
+                                }}
+                            />
+
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <span style={{ color: '#94a3b8', fontSize: '11px', lineHeight: '1.2' }}>Оппонент</span>
+                                <strong style={{ color: '#fff', fontSize: '14px', lineHeight: '1.2' }}>{opponent.nickname}</strong>
+                            </div>
+                            <div style={{ marginLeft: '6px', background: 'rgba(245, 158, 11, 0.1)', padding: '2px 8px', borderRadius: '4px', fontSize: '12px', color: '#f59e0b', fontWeight: 'bold' }}>
+                                ★ {opponent.rating ?? 1000}
+                            </div>
+                        </div>
+                    ) : (
+                        <div style={{ color: '#64748b', fontSize: '14px' }}>Загрузка оппонента...</div>
+                    )}
+                </div>
+
+                {/* Индикатор хода */}
                 <div
                     className="draft-turn-indicator"
-                    style={{ backgroundColor: firstUserMove ? '#3b82f6' : '#ef4444' }}
+                    style={{
+                        backgroundColor: isMyTurn ? '#22c55e' : '#ef4444',
+                        padding: '8px 16px',
+                        borderRadius: '20px',
+                        color: '#fff',
+                        fontWeight: 'bold',
+                        transition: 'background-color 0.3s',
+                        whiteSpace: 'nowrap'
+                    }}
                 >
-                    {firstUserMove ? "Ход Игрока 1" : "Ход Игрока 2"}
+                    {isMyTurn ? "Ходите вы" : "Ходит оппонент"}
                 </div>
             </header>
 
@@ -84,4 +140,4 @@ const DraftPage = () => {
     );
 };
 
-export default DraftPage;
+export default DraftPage;
\ No newline at end of file
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index b2825af..45f321f 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -89,7 +89,7 @@ export default function LoginPage() {
             setIsLoading(false);
         }
     };
-
+    // git pull --recurse-submodules && git submodule update --remote --recursive
     return (
         <div className="login-page-container">
             <Header user={null} onNavClick={handleResetToLogin}/>
diff --git a/src/pages/useMatchSession.js b/src/pages/useMatchSession.js
index 38579a7..46a6a58 100644
--- a/src/pages/useMatchSession.js
+++ b/src/pages/useMatchSession.js
@@ -3,6 +3,8 @@ import {useWebSocket} from '../context/WebSocketContext';
 import {useMatchStore} from "./useMatchStore.js";
 import {useNavigate} from "react-router-dom";
 import toast from "react-hot-toast";
+import {api} from "../api/axiosConfig.js";
+import {useUser} from "../context/UserContext.jsx";
 
 export const useMatchSession = (matchId) => {
     const {isConnected, publish} = useWebSocket();
@@ -11,13 +13,31 @@ export const useMatchSession = (matchId) => {
     const isRedirect = useMatchStore((state) => state.matchStarted);
     const error = useMatchStore((state) => state.error);
     const resetStore = useMatchStore((state) => state.resetStore);
-
+    const [opponent, setOpponent] = useState(null);
+    const {user} = useUser();
     const [sessionData, setSessionData] = useState(null);
     useEffect(() => {
         // eslint-disable-next-line react-hooks/set-state-in-effect
         setSessionData(draftSessionDTO?.draftSession);
     }, [draftSessionDTO]);
 
+    useEffect(() => {
+        if (!sessionData || !user?.id) return;
+
+        const amIFirstUser = user.id === sessionData.firstUserId;
+        const opponentId = amIFirstUser ? sessionData.secondUserId : sessionData.firstUserId;
+
+        if (!opponentId) return;
+
+        api.get(`user/info/${opponentId}`)
+            .then(response => {
+                setOpponent(response.data);
+            })
+            .catch(err => {
+                console.error("Ошибка загрузки данных оппонента в хуке:", err);
+            });
+    }, [sessionData, user.id]);
+
     useEffect(() => {
         if (error?.message) {
             toast.error(error?.message);
@@ -35,5 +55,5 @@ export const useMatchSession = (matchId) => {
         publish(`/app/${matchId}/ban`, {category: category, banObject: value});
     };
 
-    return {sessionData, error, sendBan, isConnected};
+    return {sessionData, opponent, error, sendBan, isConnected};
 };