Merge pull request #5 from bananu7/ui-improvements

UI improvements
bananu7 · Oct 4, 2022 · c8a3c53 · c8a3c53
2 parents 9cf4cf4 + 8615cdb
commit c8a3c53
Show file tree

Hide file tree

Showing 15 changed files with 645 additions and 180 deletions.
diff --git a/packages/client/src/App.css b/packages/client/src/App.css
@@ -29,29 +29,54 @@
 
 .card {
   padding: 2em;
+  padding-left: 12em;
+  padding-right: 12em;
   background-color: #555;
 }
 
+.card p {
+  font-size: 1.2em;
+}
 
 .read-the-docs {
   color: #888;
 }
 
 .CommandPalette {
+  z-index: 2;
   position: absolute;
   right: 0;
   bottom: 0;
   width: 350px;
   height: 200px;
-  z-index: 2;
-  padding: 10px;
 
   display: grid;
   grid-template-columns: 25% 25% 25% 25%;
   grid-column-gap: 5px;
 
+  padding: 10px;
   gap: 5px;
   background-color: #555;
+  color: white;
+
+  border-radius: 10px 0 0 0;
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
+}
+
+.CommandPaletteHint {
+  position: absolute;
+  top: -80px;
+  left: 0px;
+  width: 320px;
+  height: 50px;
+  border: 1px solid transparent;
+  border-radius: 20px;
+  padding: 10px;
+  backdrop-filter: blur(10px);
+  background-color: rgba(150, 150, 150, 0.3);
+  color: white;
+
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
 }
 
 .CommandPalette > button {
@@ -61,7 +86,32 @@
 }
 
 .CommandPalette > button.active {
-  background-color: #33cc33;
+  background-color: #339933;
+}
+
+.CommandPalette > button .tooltip {
+  opacity: 0;
+  width: 96%;
+  box-sizing: border-box;
+  background-color: #1a1a1a;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 10px;
+
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
+  transition: 0.2s opacity;
+
+  /* Position the tooltip */
+  position: absolute;
+  z-index: 1;
+  left: 50%;
+  bottom: 110%;
+  margin-left: -48%;
+}
+
+.CommandPalette > button:hover .tooltip {
+  opacity: 1;
 }
 
 .chat {
@@ -72,35 +122,48 @@
 }
 
 .MainMenu {
+  z-index: 2;
   width: 300px;
   position: absolute;
   top: 5%;
   right: 10px;
-  z-index: 2;
+
   background-color: #555;
+  color: white;
+
   display: flex;
   flex-direction: column;
   gap: 10px;
   padding: 10px;
+
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
 }
 
 .MainMenuButton {
   position: absolute;
   top: 10px;
   right: 10px;
   z-index: 10;
+
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
 }
 
 .BottomUnitView {
+  z-index: 2;
   position: absolute;
   bottom: 0;
   left: 320px;
   width: 400px;
   height: 200px;
+
   background-color: #555;
-  z-index: 2;
+  color: white;
+
   padding: 8px;
   overflow: hidden;
+
+  border-radius: 10px 10px 0 0;
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
 }
 
 .BottomUnitView .MultiUnitView {
@@ -113,6 +176,12 @@
   padding: 5px;
   border-radius: 3px;
   border: 1px solid black;
+  transition: 0.2s border-color;
+  cursor: pointer;
+}
+
+.BottomUnitView .UnitIcon:hover {
+  border-color: lime;
 }
 
 .ResourceView {
@@ -123,12 +192,17 @@
   width: 150px;
   height: 40px;
   padding: 10px;
+
   background-color: #555;
+  color: white;
+
+  box-shadow: 0px 0px 37px 0px rgba(0,0,0,0.5);
 }
 
 @media (prefers-color-scheme: light) {
   .card, .CommandPalette, .MainMenu, .BottomUnitView, .ResourceView {
     background-color: #eee;
+    color: black;
   }
 }
 
diff --git a/packages/client/src/App.tsx b/packages/client/src/App.tsx
@@ -6,6 +6,8 @@ import { Minimap } from './Minimap';
 import { CommandPalette, SelectedAction } from './components/CommandPalette';
 import { BottomUnitView } from './components/BottomUnitView';
 import { ResourceView } from './components/ResourceView';
+import { PrecountCounter } from './components/PrecountCounter'
+import { Chat } from './components/Chat';
 
 import { View3D } from './gfx/View3D';
 import { Board3D } from './gfx/Board3D';
@@ -31,6 +33,8 @@ function App() {
   const [serverState, setServerState] = useState<Game | null>(null);
 
   const [lastUpdatePacket, setLastUpdatePacket] = useState<UpdatePacket | null>(null);
+
+  const [messages, setMessages] = useState<string[]>([]);
 
   const updateMatchState = useCallback(() => {
     multiplayer.getMatchState()
@@ -123,32 +127,67 @@ function App() {
         </div>
       }
 
-      {/*<div className="chat">
-          <ul>
-            {lines}
-          </ul>
-          <button onClick={ () => multiplayer.sendChatMessage("lol") }>Chat</button>
-      </div>*/}
+      {
+        <Chat
+          sendMessage={(msg) => multiplayer.sendChatMessage("lol")}
+          messages={messages}
+        />
+      }
 
       { !serverState &&
         <div className="card">
+          <h1>Welcome to (for the lack of a better name) BartekRTS</h1>
+          <p>To play, either join an existing match, or create a new one. You will
+          need two people to play; the game won't start until two people join. You can
+          only join matches in the "lobby" state, you can't join matches that have already started
+          </p>
+          <p>The game is designed to be able to be refreshed at any time. If you experience any
+          weird behavior or crashes, refreshing the page should help and will reconnect you
+          back to your game.</p>
+          <p><strong>GLHF!</strong></p>
+          <br />
           <MatchList joinMatch={(matchId) => multiplayer.joinMatch(matchId)} />
           <button onClick={() => multiplayer.createMatch()}>Create</button>
         </div>
       }
 
-      { serverState && lastUpdatePacket &&
+      { lastUpdatePacket && 
+        lastUpdatePacket.state.id === 'Precount' &&
+        <PrecountCounter count={lastUpdatePacket.state.count} />
+      }
+
+      { lastUpdatePacket && 
+        lastUpdatePacket.state.id === 'Lobby' &&
+        <div className="card">
+          <span>Waiting for the other player to join</span>
+        </div>
+      }
+
+      { lastUpdatePacket && 
+        lastUpdatePacket.state.id === 'Paused' &&
+        <div className="card">
+          <span>Game paused</span>
+        </div>
+      }
+
+      { serverState &&
+        lastUpdatePacket && 
+        (lastUpdatePacket.state.id === 'Precount' || lastUpdatePacket.state.id === 'Play' || lastUpdatePacket.state.id === 'Paused')
+        &&
         <>
           <button className="MainMenuButton" onClick={() => setShowMainMenu((smm) => !smm) }>Menu</button>
           <CommandPalette
+            resources={lastUpdatePacket.player.resources}
             selectedUnits={selectedUnits}
             units={lastUpdatePacket.units}
             multiplayer={multiplayer}
             selectedAction={selectedAction}
             setSelectedAction={setSelectedAction}
+            notify={(msg) => setMessages(m => [...m, msg]) }
           />
           <BottomUnitView
             selectedUnits={selectedUnits}
+            setSelectedUnits={setSelectedUnits}
             units={lastUpdatePacket.units}
           />
           <ResourceView resources={lastUpdatePacket.player.resources} />
@@ -158,6 +197,7 @@ function App() {
               playerIndex={multiplayer.getPlayerIndex() || 0} // TODO really need a match class to fix this undefined
               unitStates={lastUpdatePacket ? lastUpdatePacket.units : []}
               selectedUnits={selectedUnits}
+              selectedAction={selectedAction}
               select={boardSelectUnits}
               mapClick={mapClick}
               unitRightClick={unitRightClick}

diff --git a/packages/client/src/Minimap.tsx b/packages/client/src/Minimap.tsx
@@ -10,12 +10,14 @@ export function Minimap(props: Props) {
     const style : CSSProperties = {
         position: 'absolute',
         left: 0,
-        bottom: 5,
-        border: '5px solid black',
+        bottom: 0,
         width: '300px',
         height: '300px',
-        backgroundColor: '#11cc11',
+        backgroundColor: '#11aa11',
         boxSizing: 'border-box',
+        overflow: 'hidden',
+        boxShadow: '0px 0px 37px 0px rgba(0,0,0,0.5)',
+        borderRadius: '0 10px 0 0',
     };
 
     const unitStyle = {