66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import LoginSection from "./sections/LoginSection";
|
|
import ServerSection from "./sections/ServerSection";
|
|
import OptionsSection from "./sections/OptionsSection";
|
|
import "./MainMenu.css";
|
|
import { useAuth } from "../../hooks/useAuth";
|
|
|
|
const MainMenu = ({ onStartGame }) => {
|
|
const [menuView, setMenuView] = useState("LOGIN");
|
|
const [selectedServer, setSelectedServer] = useState(null);
|
|
const { user, logout } = useAuth();
|
|
|
|
useEffect(() => {
|
|
if (user) {
|
|
setMenuView("SERVERS");
|
|
} else {
|
|
setMenuView("LOGIN");
|
|
setSelectedServer(null);
|
|
}
|
|
}, [user]);
|
|
|
|
return (
|
|
<div id="mainMenu" className="main-menu">
|
|
<div className="menu-container">
|
|
<div className="menu-header">
|
|
<h1 className="menu-title">GALAXY STRIKE ONLINE</h1>
|
|
<p className="menu-subtitle">Space Idle MMORPG</p>
|
|
</div>
|
|
|
|
<div className="menu-content">
|
|
{menuView === "LOGIN" && (
|
|
<LoginSection onLogin={() => setMenuView("SERVERS")} />
|
|
)}
|
|
|
|
{menuView === "SERVERS" && (
|
|
<ServerSection
|
|
onBack={() => {
|
|
logout();
|
|
setMenuView("LOGIN");
|
|
}}
|
|
onSelect={(server) => {
|
|
setSelectedServer(server);
|
|
setMenuView("OPTIONS");
|
|
}}
|
|
onContinue={() => onStartGame()}
|
|
/>
|
|
)}
|
|
|
|
{menuView === "OPTIONS" && (
|
|
<OptionsSection
|
|
server={selectedServer}
|
|
onContinue={onStartGame}
|
|
onBack={() => {
|
|
setSelectedServer(null);
|
|
setMenuView("SERVERS");
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MainMenu;
|