make every button that requires an account pop up a login prompt

frontend/src/App.jsx

@@ -3,22 +3,26 @@ import CodeInput from './components/CodeInput'
 import ProfileBar from './components/ProfileBar'
 import SearchScreen from './components/SearchScreen'
 import GameScreen from './components/GameScreen'
-import { useAuth } from './auth'
+import { useAuth, useAuthModal } from './auth'
 
 export default function App() {
   const { token } = useAuth()
+  const { openAuthModal } = useAuthModal()
   const [screen, setScreen] = useState('menu') // 'menu' | 'search' | 'game'
   const [gameSession, setGameSession] = useState(null)
 
   const handleRandomBattle = () => {
+    if (!token) return openAuthModal()
     setScreen('search')
   }
 
   const handleInvite = () => {
+    if (!token) return openAuthModal()
     // TODO: создание приватной комнаты
   }
 
   const handleJoinByCode = (code) => {
+    if (!token) return openAuthModal()
     // TODO: присоединение к комнате по коду
     console.log('join code:', code)
   }

frontend/src/auth.jsx

@@ -1,9 +1,28 @@
 import { createContext, useContext, useEffect, useState, useCallback } from 'react'
 import { api } from './api'
+import AuthModal from './components/AuthModal'
 
 const AuthContext = createContext(null)
+const AuthModalContext = createContext(null)
 const TOKEN_KEY = 'sea_battle_token'
 
+export function AuthModalProvider({ children }) {
+  const [open, setOpen] = useState(false)
+  const openAuthModal = useCallback(() => setOpen(true), [])
+  const closeAuthModal = useCallback(() => setOpen(false), [])
+
+  return (
+    <AuthModalContext.Provider value={{ openAuthModal }}>
+      {children}
+      {open && <AuthModal onClose={closeAuthModal} />}
+    </AuthModalContext.Provider>
+  )
+}
+
+export function useAuthModal() {
+  return useContext(AuthModalContext)
+}
+
 export function AuthProvider({ children }) {
   const [user, setUser] = useState(null)
   const [token, setToken] = useState(() => localStorage.getItem(TOKEN_KEY))

frontend/src/components/ProfileBar.jsx

@@ -1,10 +1,8 @@
-import { useState } from 'react'
-import { useAuth } from '../auth'
-import AuthModal from './AuthModal'
+import { useAuth, useAuthModal } from '../auth'
 
 export default function ProfileBar() {
   const { user, loading, logout } = useAuth()
-  const [showAuth, setShowAuth] = useState(false)
+  const { openAuthModal } = useAuthModal()
 
   return (
     <>
@@ -26,12 +24,11 @@ export default function ProfileBar() {
             </button>
           </div>
         ) : (
-          <button className="btn btn-primary" onClick={() => setShowAuth(true)}>
+          <button className="btn btn-primary" onClick={openAuthModal}>
             Войти
           </button>
         )}
       </div>
-      {showAuth && <AuthModal onClose={() => setShowAuth(false)} />}
     </>
   )
 }

frontend/src/main.jsx

@@ -1,13 +1,15 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
-import { AuthProvider } from './auth'
+import { AuthProvider, AuthModalProvider } from './auth'
 import './styles.css'
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <AuthProvider>
-      <App />
+      <AuthModalProvider>
+        <App />
+      </AuthModalProvider>
     </AuthProvider>
   </React.StrictMode>
 )

frontend/src/styles.css

@@ -149,7 +149,7 @@ h1, h2, h3, h4, h5, h6 {
   gap: 10px;
 }
 
-input {
+input:not([type]), input[type="text"] {
   font-size: 32px;
   font-weight: 700;
   color: var(--text);