61 lines
1.6 KiB
JavaScript
61 lines
1.6 KiB
JavaScript
import React, { useState } from "react";
|
|
import { useSocket } from "../../../hooks/useSocket";
|
|
import SettingsModal from "./SettingsModal";
|
|
import "./GameHeader.css";
|
|
|
|
const GameHeader = ({ onReturn }) => {
|
|
const { disconnectFromServer } = useSocket();
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
|
|
const handleHomeClick = () => {
|
|
localStorage.removeItem("activeServer");
|
|
disconnectFromServer();
|
|
if (onReturn) {
|
|
onReturn();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<header className="game-header">
|
|
<div className="header-left">
|
|
<h1 className="logo">GSO</h1>
|
|
<div className="player-info">
|
|
<span className="player-name">Commander</span>
|
|
<span className="player-level">Lv. 1</span>
|
|
</div>
|
|
</div>
|
|
<div className="header-center">
|
|
<div className="resources">
|
|
<div className="resource">
|
|
<i className="fas fa-bolt"></i>
|
|
<span>100/100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="header-right">
|
|
<button
|
|
className="header-icon-btn"
|
|
onClick={() => setIsSettingsOpen(true)}
|
|
>
|
|
<i className="fas fa-cog"></i>
|
|
</button>
|
|
|
|
<button
|
|
className="header-icon-btn exit-btn"
|
|
onClick={handleHomeClick}
|
|
>
|
|
<i className="fas fa-home"></i>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
{isSettingsOpen && (
|
|
<SettingsModal onClose={() => setIsSettingsOpen(false)} />
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GameHeader;
|