add button to toggle lobby password

bangsalvoserver · Oct 6, 2024 · cb16909 · cb16909
1 parent 80e77db
commit cb16909
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 17 deletions.
diff --git a/src/Components/Button.tsx b/src/Components/Button.tsx
@@ -24,6 +24,10 @@ export default function Button({ className, color, type, onClick, children }: Bu
     };
 
     const fullClassName = `
+        flex
+        flex-row
+        items-center
+        justify-center
         font-bold
         py-1
         px-4

diff --git a/src/Scenes/WaitingArea/Style/WaitingArea.css b/src/Scenes/WaitingArea/Style/WaitingArea.css
@@ -7,6 +7,18 @@
     margin-right: auto;
 }
 
+.lobby-options-visible {
+    transition: max-height 300ms ease-in-out, visibility 200ms step-end;
+    max-height: 4em;
+    overflow: hidden;
+}
+
+.lobby-options-collapsed {
+    transition: max-height 300ms ease-in-out, visibility 300ms step-end;
+    max-height: 0;
+    overflow: hidden;
+}
+
 .lobby-element {
     display: table-row;
 }
@@ -34,18 +46,6 @@
     text-align: center;
 }
 
-.lobby-element div#lobby-button-join {
-    width: 0;
-}
-
-#lobby-button-join button {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-}
-
 .lobby-secure-icon {
     margin-left: 0.5em;
     width: 20px;

diff --git a/src/Scenes/WaitingArea/WaitingArea.tsx b/src/Scenes/WaitingArea/WaitingArea.tsx
@@ -7,6 +7,7 @@ import { LobbyId } from "../../Model/ServerMessage";
 import { BangConnection } from "../../Model/UseBangConnection";
 import LobbyElement, { LobbyValue } from "./LobbyElement";
 import './Style/WaitingArea.css';
+import { boolConverter, useLocalStorage } from "../../Utils/UseLocalStorage";
 
 export interface WaitingAreaProps {
   lobbies: LobbyValue[];
@@ -15,6 +16,8 @@ export interface WaitingAreaProps {
 }
 
 function WaitingArea({ lobbies, connection, settings }: WaitingAreaProps) {
+  const [expandLobbyOptions, setExpandLobbyOptions] = useLocalStorage('expand_lobby_options', boolConverter);
+
   const handleCreateLobby = useCallback((event: SyntheticEvent) => {
     event.preventDefault();
     if (settings.lobbyName) {
@@ -47,28 +50,37 @@ function WaitingArea({ lobbies, connection, settings }: WaitingAreaProps) {
             rounded-md
             m-2
             p-1
-            w-48
+            w-44
             focus:outline-none
             focus:ring-2
             focus:ring-blue-500
           '
           maxLength={MAX_LOBBY_NAME_LENGTH}
-          value={settings.lobbyName} onChange={e => settings.setLobbyName(e.target.value)}></input></p>
-        <p><label htmlFor='lobby_password' className='font-bold text-xl'>{getLabel('ui', 'LABEL_LOBBY_PASSWORD')}</label>
+          value={settings.lobbyName} onChange={e => settings.setLobbyName(e.target.value)}></input>
+          <button type="button"
+            className="w-8 h-8 rounded-full focus:outline-none font-bold focus:ring-2 text-gray-400 bg-gray-600 hover:bg-gray-700 focus:ring-gray-800"
+            onClick={() => setExpandLobbyOptions(value => !value)}>
+            {expandLobbyOptions ? '+' : '-'}
+          </button>
+          </p>
+        <p className={expandLobbyOptions ? 'lobby-options-visible' : 'lobby-options-collapsed'}><label htmlFor='lobby_password' className='font-bold text-xl'>{getLabel('ui', 'LABEL_LOBBY_PASSWORD')}</label>
         <input type='text' id='lobby_password'
           className='
             border-2
             border-gray-300
             rounded-md
             m-2
             p-1
-            w-48
+            w-44
             focus:outline-none
             focus:ring-2
             focus:ring-blue-500
           '
           value={settings.lobbyPassword} onChange={e => settings.setLobbyPassword(e.target.value)}></input></p>
-        <Button color='green' type='submit'>{getLabel('ui', 'BUTTON_CREATE_LOBBY')}</Button>
+        <Button color='green' type='submit'>
+          {getLabel('ui', 'BUTTON_CREATE_LOBBY')}
+          {(settings.lobbyPassword ?? '') !== '' && <div className='lobby-secure-icon' />}
+        </Button>
       </form>
       <div className='lobby-list'>
         {lobbies.map((lobby) => (