More select buttons for maps

Author: TheApplePieGod

client/src/components/button.tsx

@@ -2,6 +2,7 @@ import React, { MouseEvent, PropsWithChildren } from 'react'
 
 type Props = {
     className?: string
+    style?: React.CSSProperties
     onClick: (event: MouseEvent<HTMLButtonElement>) => void
     disabled?: boolean
 }
@@ -15,6 +16,7 @@ export const Button = (props: PropsWithChildren<Props>) => {
                 (props.disabled ? ' opacity-50 cursor-not-allowed' : '')
             }
             onClick={props.onClick}
+            style={props.style}
         >
             {props.children}
         </button>
@@ -28,6 +30,7 @@ export const SmallButton = (props: PropsWithChildren<Props>) => (
             (props.className ?? '')
         }
         onClick={props.onClick}
+        style={props.style}
     >
         {props.children}
     </button>
@@ -40,6 +43,7 @@ export const BrightButton = (props: PropsWithChildren<Props>) => (
             (props.className ?? '')
         }
         onClick={props.onClick}
+        style={props.style}
     >
         {props.children}
     </button>

client/src/components/sidebar/runner/runner.tsx

@@ -5,9 +5,7 @@ import { nativeAPI } from './native-api-wrapper'
 import { Select } from '../../forms'
 import { InputDialog } from '../../input-dialog'
 import Tooltip from '../../tooltip'
-import { SectionHeader } from '../../section-header'
 import { FixedSizeList, ListOnScrollProps } from 'react-window'
-import { OpenExternal } from '../../../icons/open-external'
 import { BasicDialog } from '../../basic-dialog'
 import { RingBuffer } from '../../../util/ring-buffer'
 import { ProfilerDialog } from './profiler'
@@ -141,11 +139,11 @@ export const RunnerPage: React.FC<RunnerPageProps> = ({ open, scaffold }) => {
                     <MapSelector
                         maps={maps}
                         availableMaps={availableMaps}
-                        onSelect={(m) => setMaps(new Set([...maps, m]))}
-                        onDeselect={(m) => setMaps(new Set([...maps].filter((x) => x !== m)))}
+                        onSelect={(m) => setMaps(new Set([...maps, ...m]))}
+                        onDeselect={(m) => setMaps(new Set([...maps].filter((x) => !m.includes(x))))}
                     />
                     <SmallButton
-                        className="mt-2"
+                        className="mt-3"
                         onClick={() => {
                             resetSettings()
                             reloadData()
@@ -330,8 +328,8 @@ const TeamSelector: React.FC<TeamSelectorProps> = ({ teamA, teamB, options, onCh
 interface MapSelectorProps {
     maps: Set<string>
     availableMaps: Set<string>
-    onSelect: (map: string) => void
-    onDeselect: (map: string) => void
+    onSelect: (map: string[]) => void
+    onDeselect: (map: string[]) => void
 }
 
 const MapSelector: React.FC<MapSelectorProps> = ({ maps, availableMaps, onSelect, onDeselect }) => {
@@ -354,7 +352,7 @@ const MapSelector: React.FC<MapSelectorProps> = ({ maps, availableMaps, onSelect
                             <div
                                 key={m}
                                 className={'cursor-pointer hover:bg-lightHighlight flex items-center justify-between'}
-                                onClick={() => (maps.has(m) ? onDeselect(m) : onSelect(m))}
+                                onClick={() => (maps.has(m) ? onDeselect([m]) : onSelect([m]))}
                             >
                                 {m}
                                 <input
@@ -368,6 +366,14 @@ const MapSelector: React.FC<MapSelectorProps> = ({ maps, availableMaps, onSelect
                     })}
                 </div>
             </Resizable>
+            <div className="flex gap-2 items-center mt-1 justify-center">
+                <SmallButton style={{ margin: 0 }} onClick={() => onSelect([...availableMaps])}>
+                    Select All
+                </SmallButton>
+                <SmallButton style={{ margin: 0 }} onClick={() => onDeselect([...availableMaps])}>
+                    Deselect All
+                </SmallButton>
+            </div>
         </div>
     )
 }