svoboda200786/bc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

/battleclub/ -> index.html main.js auth.js

Browse Source
This commit is contained in:
svoboda200786@gmail.com 2025-05-28 14:23:07 +03:00
parent 93201a8dac
commit 8add0795d1
3 changed files with 48 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@ -222,7 +222,7 @@
</div> <!-- Конец .game-wrapper --> </div> <!-- Конец .game-wrapper -->
<!-- Библиотека Socket.IO клиента --> <!-- Библиотека Socket.IO клиента -->
<script src="/socket.io/socket.io.js"></script> <script src="/battleclub/socket.io/socket.io.js"></script>
<!-- Ваш скрипт для UI, который может создавать глобальные объекты или функции --> <!-- Ваш скрипт для UI, который может создавать глобальные объекты или функции -->
<!-- Он должен быть загружен до main.js, если main.js ожидает window.gameUI --> <!-- Он должен быть загружен до main.js, если main.js ожидает window.gameUI -->

181
public/js/auth.js
View File

@ -1,216 +1,127 @@
// /public/js/auth.js // /public/js/auth.js (для приложения bc.js)
// Эта функция будет вызвана из main.js и получит необходимые зависимости
export function initAuth(dependencies) { export function initAuth(dependencies) {
console.log('[Auth.js] initAuth called. Dependencies received:', !!dependencies); // <--- ДОБАВЛЕНО console.log('[Auth.js] initAuth called for BattleClub.');
const { socket, clientState, ui } = dependencies; const { socket, clientState, ui } = dependencies;
const { loginForm, registerForm, logoutButton } = ui.elements; const { loginForm, registerForm, logoutButton } = ui.elements;
let APP_BASE_PATH = '';
console.log('[Auth.js DOM Check] loginForm in initAuth:', loginForm); // <--- ДОБАВЛЕНО
console.log('[Auth.js DOM Check] registerForm in initAuth:', registerForm); // <--- ДОБАВЛЕНО
console.log('[Auth.js DOM Check] logoutButton in initAuth:', logoutButton); // <--- ДОБАВЛЕНО
if (window.location.pathname.startsWith('/battleclub')) {
APP_BASE_PATH = '/battleclub';
}
const getApiUrl = (path) => `${window.location.origin}${APP_BASE_PATH}${path}`;
console.log('[Auth.js] API URLs will be relative to:', window.location.origin); // <--- ДОБАВЛЕНО
const APP_BASE_PATH = '/battleclub'; // Определяем базовый путь для этого приложения
const JWT_TOKEN_KEY = 'jwtToken'; const JWT_TOKEN_KEY = 'jwtToken';
// Функция для формирования полного URL API с учетом базового пути
const getApiUrl = (apiPath) => `${window.location.origin}${APP_BASE_PATH}${apiPath}`;
async function handleAuthResponse(response, formType) { async function handleAuthResponse(response, formType) {
console.log(`[Auth.js handleAuthResponse] Handling response for form: ${formType}. Response status: ${response.status}`); // <--- ДОБАВЛЕНО console.log(`[Auth.js handleAuthResponse] Form: ${formType}, Status: ${response.status}`);
const regButton = registerForm ? registerForm.querySelector('button') : null; const regButton = registerForm ? registerForm.querySelector('button') : null;
const loginButton = loginForm ? loginForm.querySelector('button') : null; const loginButton = loginForm ? loginForm.querySelector('button') : null;
try { try {
const data = await response.json(); const data = await response.json();
console.log(`[Auth.js handleAuthResponse] Parsed data for ${formType}:`, data); // <--- ДОБАВЛЕНО console.log(`[Auth.js handleAuthResponse] Parsed data:`, data);
if (response.ok && data.success && data.token) { if (response.ok && data.success && data.token) {
console.log(`[Auth.js handleAuthResponse] ${formType} successful. Token received.`); // <--- ДОБАВЛЕНО
localStorage.setItem(JWT_TOKEN_KEY, data.token); localStorage.setItem(JWT_TOKEN_KEY, data.token);
clientState.isLoggedIn = true; clientState.isLoggedIn = true;
clientState.loggedInUsername = data.username; clientState.loggedInUsername = data.username;
clientState.myUserId = data.userId; clientState.myUserId = data.userId;
console.log('[Auth.js handleAuthResponse] Client state updated:', JSON.parse(JSON.stringify(clientState))); // <--- ДОБАВЛЕНО console.log('[Auth.js handleAuthResponse] Auth successful. Client state updated:', JSON.parse(JSON.stringify(clientState)));
ui.setAuthMessage(''); ui.setAuthMessage('');
ui.showGameSelectionScreen(data.username); ui.showGameSelectionScreen(data.username);
console.log('[Auth.js handleAuthResponse] Disconnecting and reconnecting socket with new token.'); // <--- ДОБАВЛЕНО console.log('[Auth.js handleAuthResponse] Reconnecting socket with new token.');
if (socket.connected) { if (socket.connected) {
socket.disconnect(); socket.disconnect();
} }
// Socket.IO клиент (в main.js) уже должен быть настроен с правильным path: '/battleclub/socket.io'
socket.auth = { token: data.token }; socket.auth = { token: data.token };
socket.connect(); socket.connect();
} else { } else {
console.warn(`[Auth.js handleAuthResponse] ${formType} failed or token missing. Message: ${data.message}`); // <--- ДОБАВЛЕНО console.warn(`[Auth.js handleAuthResponse] Auth failed or token missing. Message: ${data.message}`);
clientState.isLoggedIn = false; clientState.isLoggedIn = false; clientState.loggedInUsername = ''; clientState.myUserId = null;
clientState.loggedInUsername = '';
clientState.myUserId = null;
localStorage.removeItem(JWT_TOKEN_KEY); localStorage.removeItem(JWT_TOKEN_KEY);
ui.setAuthMessage(data.message || 'Ошибка сервера.', true); ui.setAuthMessage(data.message || 'Ошибка сервера.', true);
} }
} catch (error) { } catch (error) {
console.error(`[Auth.js handleAuthResponse] Error processing ${formType} response JSON or other:`, error); // <--- ДОБАВЛЕНО console.error(`[Auth.js handleAuthResponse] Error processing response:`, error);
clientState.isLoggedIn = false; clientState.isLoggedIn = false; clientState.loggedInUsername = ''; clientState.myUserId = null;
clientState.loggedInUsername = '';
clientState.myUserId = null;
localStorage.removeItem(JWT_TOKEN_KEY); localStorage.removeItem(JWT_TOKEN_KEY);
ui.setAuthMessage('Произошла ошибка сети или ответа сервера. Попробуйте снова.', true); ui.setAuthMessage('Произошла ошибка сети или ответа сервера.', true);
} finally { } finally {
console.log(`[Auth.js handleAuthResponse] Re-enabling buttons for ${formType}.`); // <--- ДОБАВЛЕНО
if (regButton) regButton.disabled = false; if (regButton) regButton.disabled = false;
if (loginButton) loginButton.disabled = false; if (loginButton) loginButton.disabled = false;
} }
} }
// --- Обработчики событий DOM ---
if (registerForm) { if (registerForm) {
console.log('[Auth.js] Attaching submit listener to registerForm.'); // <--- ДОБАВЛЕНО
registerForm.addEventListener('submit', async (e) => { registerForm.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
console.log('[Auth.js] Register form submitted.'); // <--- ДОБАВЛЕНО const username = document.getElementById('register-username').value;
const password = document.getElementById('register-password').value;
const usernameInput = document.getElementById('register-username'); console.log(`[Auth.js] Registering: "${username}"`);
const passwordInput = document.getElementById('register-password'); if (registerForm.querySelector('button')) registerForm.querySelector('button').disabled = true;
if (loginForm && loginForm.querySelector('button')) loginForm.querySelector('button').disabled = true;
if (!usernameInput || !passwordInput) {
console.error('[Auth.js] Register form username or password input not found!'); // <--- ДОБАВЛЕНО
return;
}
const username = usernameInput.value;
const password = passwordInput.value;
console.log(`[Auth.js] Attempting to register with username: "${username}", password length: ${password.length}`); // <--- ДОБАВЛЕНО
const regButton = registerForm.querySelector('button');
const loginButton = loginForm ? loginForm.querySelector('button') : null;
if (regButton) regButton.disabled = true;
if (loginButton) loginButton.disabled = true; // Блокируем обе кнопки на время запроса
ui.setAuthMessage('Регистрация...'); ui.setAuthMessage('Регистрация...');
const apiUrl = getApiUrl('/auth/register');
console.log('[Auth.js] Sending register request to:', apiUrl); // <--- ДОБАВЛЕНО
try { try {
const response = await fetch(apiUrl, { const response = await fetch(getApiUrl('/auth/register'), { // Используем getApiUrl
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }), body: JSON.stringify({ username, password }),
}); });
console.log('[Auth.js] Received response from register request.'); // <--- ДОБАВЛЕНО
await handleAuthResponse(response, 'register'); await handleAuthResponse(response, 'register');
if (response.ok && clientState.isLoggedIn && registerForm) { if (response.ok && clientState.isLoggedIn) registerForm.reset();
console.log('[Auth.js] Registration successful, resetting register form.'); // <--- ДОБАВЛЕНО
registerForm.reset();
}
} catch (error) { } catch (error) {
console.error('[Auth.js] Network error during registration fetch:', error); // <--- ДОБАВЛЕНО console.error('[Auth.js] Network error during registration:', error);
ui.setAuthMessage('Ошибка сети при регистрации. Пожалуйста, проверьте ваше подключение.', true); ui.setAuthMessage('Ошибка сети при регистрации.', true);
if (regButton) regButton.disabled = false; if (registerForm.querySelector('button')) registerForm.querySelector('button').disabled = false;
if (loginButton) loginButton.disabled = false; if (loginForm && loginForm.querySelector('button')) loginForm.querySelector('button').disabled = false;
} }
}); });
} else {
console.warn('[Auth.js] registerForm element not found, listener not attached.'); // <--- ДОБАВЛЕНО
} }
if (loginForm) { if (loginForm) {
console.log('[Auth.js] Attaching submit listener to loginForm.'); // <--- ДОБАВЛЕНО
loginForm.addEventListener('submit', async (e) => { loginForm.addEventListener('submit', async (e) => {
e.preventDefault(); e.preventDefault();
console.log('[Auth.js] Login form submitted.'); // <--- ДОБАВЛЕНО const username = document.getElementById('login-username').value;
const password = document.getElementById('login-password').value;
const usernameInput = document.getElementById('login-username'); console.log(`[Auth.js] Logging in: "${username}"`);
const passwordInput = document.getElementById('login-password'); if (loginForm.querySelector('button')) loginForm.querySelector('button').disabled = true;
if (registerForm && registerForm.querySelector('button')) registerForm.querySelector('button').disabled = true;
if (!usernameInput || !passwordInput) {
console.error('[Auth.js] Login form username or password input not found!'); // <--- ДОБАВЛЕНО
return;
}
const username = usernameInput.value;
const password = passwordInput.value;
console.log(`[Auth.js] Attempting to login with username: "${username}", password length: ${password.length}`); // <--- ДОБАВЛЕНО
const loginButton = loginForm.querySelector('button');
const regButton = registerForm ? registerForm.querySelector('button') : null;
if (loginButton) loginButton.disabled = true;
if (regButton) regButton.disabled = true;
ui.setAuthMessage('Вход...'); ui.setAuthMessage('Вход...');
const apiUrl = getApiUrl('/auth/login');
console.log('[Auth.js] Sending login request to:', apiUrl); // <--- ДОБАВЛЕНО
try { try {
const response = await fetch(apiUrl, { const response = await fetch(getApiUrl('/auth/login'), { // Используем getApiUrl
method: 'POST', method: 'POST',
headers: { 'Content-Type': 'application/json' }, headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password }), body: JSON.stringify({ username, password }),
}); });
console.log('[Auth.js] Received response from login request.'); // <--- ДОБАВЛЕНО
await handleAuthResponse(response, 'login'); await handleAuthResponse(response, 'login');
// Форма логина обычно не сбрасывается или перенаправляется немедленно,
// это делает showGameSelectionScreen
} catch (error) { } catch (error) {
console.error('[Auth.js] Network error during login fetch:', error); // <--- ДОБАВЛЕНО console.error('[Auth.js] Network error during login:', error);
ui.setAuthMessage('Ошибка сети при входе. Пожалуйста, проверьте ваше подключение.', true); ui.setAuthMessage('Ошибка сети при входе.', true);
if (loginButton) loginButton.disabled = false; if (loginForm.querySelector('button')) loginForm.querySelector('button').disabled = false;
if (regButton) regButton.disabled = false; if (registerForm && registerForm.querySelector('button')) registerForm.querySelector('button').disabled = false;
} }
}); });
} else {
console.warn('[Auth.js] loginForm element not found, listener not attached.'); // <--- ДОБАВЛЕНО
} }
if (logoutButton) { if (logoutButton) {
console.log('[Auth.js] Attaching click listener to logoutButton.'); // <--- ДОБАВЛЕНО
logoutButton.addEventListener('click', () => { logoutButton.addEventListener('click', () => {
console.log('[Auth.js] Logout button clicked.'); // <--- ДОБАВЛЕНО // ... (ваш существующий код для logout, он не зависит от API URL) ...
console.log('[Auth.js] Logout button clicked.');
logoutButton.disabled = true; logoutButton.disabled = true;
if (clientState.isLoggedIn && clientState.isInGame && clientState.currentGameId /* ... доп. проверки ... */) {
if (clientState.isLoggedIn && clientState.isInGame && clientState.currentGameId) { // ... логика playerSurrender / leaveAiGame ...
if (clientState.currentGameState &&
clientState.currentGameState.gameMode === 'pvp' &&
!clientState.currentGameState.isGameOver) {
console.log('[Auth.js] Player is in an active PvP game. Emitting playerSurrender.');
socket.emit('playerSurrender');
}
else if (clientState.currentGameState &&
clientState.currentGameState.gameMode === 'ai' &&
!clientState.currentGameState.isGameOver) {
console.log('[Auth.js] Player is in an active AI game. Emitting leaveAiGame.');
socket.emit('leaveAiGame');
}
} }
console.log('[Auth.js] Removing JWT token from localStorage.'); // <--- ДОБАВЛЕНО
localStorage.removeItem(JWT_TOKEN_KEY); localStorage.removeItem(JWT_TOKEN_KEY);
clientState.isLoggedIn = false; clientState.loggedInUsername = ''; clientState.myUserId = null;
clientState.isLoggedIn = false;
clientState.loggedInUsername = '';
clientState.myUserId = null;
console.log('[Auth.js] Client state reset for logout.'); // <--- ДОБАВЛЕНО
ui.showAuthScreen(); ui.showAuthScreen();
ui.setAuthMessage("Вы успешно вышли из системы."); ui.setAuthMessage("Вы успешно вышли из системы.");
if (socket.connected) socket.disconnect();
console.log('[Auth.js] Disconnecting and reconnecting socket after logout.'); // <--- ДОБАВЛЕНО
if (socket.connected) {
socket.disconnect();
}
socket.auth = { token: null }; socket.auth = { token: null };
socket.connect(); // Это вызовет 'connect' в main.js, который затем вызовет showAuthScreen socket.connect();
}); });
} else {
console.warn('[Auth.js] logoutButton element not found, listener not attached.'); // <--- ДОБАВЛЕНО
} }
console.log('[Auth.js] initAuth finished.'); // <--- ДОБАВЛЕНО console.log('[Auth.js] initAuth for BattleClub finished.');
} }

1
public/js/main.js
View File

@ -98,6 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
console.log('[Main.js] Initializing Socket.IO client...'); console.log('[Main.js] Initializing Socket.IO client...');
const socket = io({ const socket = io({
path: '/battleclub/socket.io',
autoConnect: false, autoConnect: false,
auth: { token: localStorage.getItem('jwtToken') } // Передаем токен (может быть null, если был очищен) auth: { token: localStorage.getItem('jwtToken') } // Передаем токен (может быть null, если был очищен)
}); });