From 49a92e5a2a57895cc30d8238000ab3f0c3cca24b Mon Sep 17 00:00:00 2001
From: bananu7 <bananu7@o2.pl>
Date: Sat, 8 Oct 2022 19:51:36 +0200
Subject: [PATCH] Show main menu button also in lobby. Closes #18

---
 packages/client/src/App.tsx        | 45 ++++++++++++++++++++----------
 packages/client/src/Multiplayer.ts |  2 ++
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
index be69287..2908dd1 100644
--- a/packages/client/src/App.tsx
+++ b/packages/client/src/App.tsx
@@ -41,6 +41,12 @@ function App() {
     .then(s => setServerState(s));
   }, []);
 
+  const leaveMatch = async () => {
+    await multiplayer.leaveMatch();
+    setLastUpdatePacket(null);
+    setServerState(null);
+  };
+
   useEffect(() => {
     multiplayer.setup({
       onUpdatePacket: (p:UpdatePacket) => {
@@ -184,13 +190,21 @@ function App() {
     }
   }, [selectedAction, selectedUnits]);
 
-  const style = selectedAction ? { cursor: "pointer"} : { };
+  const appDivStyle = selectedAction ? { cursor: "pointer"} : { };
+
+  const showGame =
+    serverState &&
+    lastUpdatePacket &&
+    ( lastUpdatePacket.state.id === 'Precount'||
+      lastUpdatePacket.state.id === 'Play' ||
+      lastUpdatePacket.state.id === 'Paused'
+    );
 
   return (
-    <div className="App" onKeyDown={keydown} tabIndex={0} style={style}>
+    <div className="App" onKeyDown={keydown} tabIndex={0} style={appDivStyle}>
       {
         <Chat
-          sendMessage={(msg) => multiplayer.sendChatMessage("lol")}
+          sendMessage={(msg) => multiplayer.sendChatMessage(msg)}
           messages={messages}
         />
       }
@@ -236,24 +250,29 @@ function App() {
         </div>
       }
 
-      { serverState &&
-        lastUpdatePacket && 
-        (lastUpdatePacket.state.id === 'Precount' || lastUpdatePacket.state.id === 'Play' || lastUpdatePacket.state.id === 'Paused')
-        &&
+      {
+        serverState &&
         <>
-          <button className="MainMenuButton" onClick={() => setShowMainMenu((smm) => !smm) }>Menu</button>
+         <button className="MainMenuButton" onClick={() => setShowMainMenu((smm) => !smm) }>Menu</button>
           { showMainMenu &&
             <div className="MainMenu">
               <h3>Main menu</h3>
               <h4>You are player #{multiplayer.getPlayerIndex()}</h4>
               { !serverState && <button>Play</button> }
-              { serverState && <button onClick={() => { multiplayer.leaveMatch(); setServerState(null); }}>Leave game</button> }
+              { serverState && <button onClick={async () => {
+                await leaveMatch();
+                setShowMainMenu(false);
+              }}>Leave game</button> }
               { serverState && <button onClick={() => { console.log(serverState) }}>Dump state</button> }
               { lastUpdatePacket && <button onClick={() => { console.log(lastUpdatePacket) }}>Dump update packet</button> }
               { serverState && <button onClick={() => { updateMatchState() }}>Update state</button> }
             </div>
           }
-            
+        </>
+      }
+
+      { showGame &&
+        <>
           <CommandPalette
             resources={lastUpdatePacket.player.resources}
             selectedUnits={selectedUnits}
@@ -289,11 +308,7 @@ function App() {
         lastUpdatePacket.state.id === "GameEnded" &&
         <div className="card">
           <h2>Game Over</h2>
-          <button onClick={async () => {
-            await multiplayer.leaveMatch();
-            setLastUpdatePacket(null);
-            setServerState(null);
-          }}>Return to main menu</button>
+          <button onClick={leaveMatch}>Return to main menu</button>
         </div>
       }
     </div>
diff --git a/packages/client/src/Multiplayer.ts b/packages/client/src/Multiplayer.ts
index fa5b8c9..2242b2e 100644
--- a/packages/client/src/Multiplayer.ts
+++ b/packages/client/src/Multiplayer.ts
@@ -155,6 +155,8 @@ export class Multiplayer {
 
         this.channel.emit('spectate', data);
     }
+
+    // TODO - no way to stop spectating
     
     async leaveMatch() {
         if (!this.matchId)