Арена CodeZilla
+Арена CodZilla
Выбери задачу, напиши оптимальный код и разгроми соперника
diff --git a/src/pages/DraftPage.jsx b/src/pages/DraftPage.jsx new file mode 100644 index 0000000..3cdc3ae --- /dev/null +++ b/src/pages/DraftPage.jsx @@ -0,0 +1,141 @@ +import React from 'react'; +import { useParams } from 'react-router-dom'; +import { useMatchSession } from './useMatchSession.js'; + +const DraftPage = () => { + + const { matchId } = useParams(); + const { sessionData, sendBan, isConnected } = useMatchSession(matchId); + + if (!isConnected) returnУстановка соединения с сервером...
;
+ if (!sessionData) return Загрузка данных драфта...
;
+
+ const { remainOptions, firstUserMove } = sessionData;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const styles = {
+ container: {
+ fontFamily: 'Inter, system-ui, sans-serif',
+ backgroundColor: '#f8fafc',
+ minHeight: '100vh',
+ padding: '20px',
+ color: '#1e293b'
+ },
+ header: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: '30px',
+ borderBottom: '2px solid #e2e8f0',
+ paddingBottom: '10px'
+ },
+ turnIndicator: {
+ padding: '10px 20px',
+ borderRadius: '8px',
+ color: 'white',
+ fontWeight: 'bold',
+ transition: 'all 0.3s ease'
+ },
+ errorBanner: {
+ backgroundColor: '#fef2f2',
+ border: '1px solid #fee2e2',
+ color: '#dc2626',
+ padding: '15px',
+ borderRadius: '8px',
+ marginBottom: '20px',
+ animation: 'shake 0.5s ease'
+ },
+ grid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
+ gap: '20px'
+ },
+ categoryCard: {
+ backgroundColor: 'white',
+ borderRadius: '12px',
+ padding: '20px',
+ boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
+ border: '1px solid #e2e8f0'
+ },
+ categoryTitle: {
+ fontSize: '1.25rem',
+ marginBottom: '15px',
+ color: '#475569',
+ borderLeft: '4px solid #64748b',
+ paddingLeft: '10px'
+ },
+ optionsList: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ gap: '10px'
+ },
+ banButton: {
+ backgroundColor: '#fff',
+ border: '1px solid #e2e8f0',
+ padding: '8px 16px',
+ borderRadius: '6px',
+ cursor: 'pointer',
+ transition: 'all 0.2s',
+ fontSize: '0.9rem',
+ fontWeight: '500'
+ },
+ emptyText: {
+ color: '#94a3b8',
+ fontStyle: 'italic'
+ },
+ footer: {
+ marginTop: '40px',
+ textAlign: 'center',
+ color: '#64748b',
+ fontSize: '0.875rem'
+ }
+};
+
+export default DraftPage;
\ No newline at end of file
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index e00cf71..b2825af 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -6,12 +6,13 @@ import '../App.css';
import '../api/axiosConfig.js';
import {api} from "../api/axiosConfig.js";
import {useUser} from "../context/UserContext.jsx";
+import toast from "react-hot-toast";
export default function LoginPage() {
const [view, setView] = useState('login');
-const {login} = useUser();
+ const {login} = useUser();
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [nickname, setNickname] = useState('');
@@ -35,7 +36,7 @@ const {login} = useUser();
)
const data = await response.data;
-
+ data.email = email;
const responseIcon = await api.get(
'/user/icon-url'
)
@@ -44,11 +45,10 @@ const {login} = useUser();
data.iconUrl = dataIcon;
login(data);
- alert("Успешный вход для пользователя " + data.nickname);
navigate("/battle");
} catch (error) {
- alert ("Ошибка авторизации: " + error.response.data.message);
+ toast.error("Ошибка авторизации: " + error.response.data.message);
} finally {
setIsLoading(false);
}
@@ -99,7 +99,7 @@ const {login} = useUser();
{view === 'login' && (
<>
- Draft Session #{matchId.substring(0, 8)}
+
+ {firstUserMove ? "Ход Игрока 1" : "Ход Игрока 2"}
+
+
+ {Object.entries(remainOptions).map(([category, options]) => (
+
+
+
+ ))}
+ {category}
+
+ {options.length > 0 ? (
+ options.map((option) => (
+
+ ))
+ ) : (
+
+ Опций не осталось
+ )} +