Button Sound Fix [AARD-2054]

fission/src/ui/UIProvider.tsx

@@ -1,5 +1,5 @@
 import CloseIcon from "@mui/icons-material/Close"
-import { IconButton } from "@mui/material"
+import { IconButton } from "./components/StyledComponents"
 import type { SnackbarKey, SnackbarMessage, VariantType } from "notistack"
 import { useSnackbar } from "notistack"
 import type React from "react"

fission/src/ui/components/AnalyticsConsent.tsx

@@ -1,4 +1,5 @@
-import { Box, Button } from "@mui/material"
+import { Box } from "@mui/material"
+import { Button } from "./StyledComponents"
 import { AiOutlineClose } from "react-icons/ai"
 import Label from "./Label"
 

fission/src/ui/components/ContextMenu.tsx

@@ -1,4 +1,5 @@
-import { Button, Divider, Stack } from "@mui/material"
+import { Divider, Stack } from "@mui/material"
+import { Button } from "./StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import { type ContextData, ContextSupplierEvent } from "./ContextMenuData"

fission/src/ui/components/MainHUD.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, IconButton, Stack } from "@mui/material"
+import { Box, Stack } from "@mui/material"
+import { Button, IconButton } from "./StyledComponents"
 import { motion } from "framer-motion"
 import type React from "react"
 import { useEffect, useState } from "react"
@@ -7,7 +8,6 @@ import APS, { APS_USER_INFO_UPDATE_EVENT } from "@/aps/APS"
 import logo from "@/assets/autodesk_logo.png"
 import { globalAddToast } from "@/components/GlobalUIControls.ts"
 import MatchMode, { MatchStateChangeEvent } from "@/systems/match_mode/MatchMode"
-import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import { deobf } from "@/util/Utility"
 import { useThemeContext } from "../helpers/ThemeProviderHelpers"
 import { useUIContext } from "../helpers/UIProviderHelpers"
@@ -36,7 +36,6 @@ const MainHUDButton: React.FC<ButtonProps> = ({ value, icon, onClick, larger })
     return (
         <Button
             onClick={onClick}
-            {...SoundPlayer.buttonSoundEffects()}
             className={`relative flex flex-row
                 cursor-pointer
                 w-full m-auto px-2 py-1 border-none rounded-md ${larger ? "justify-center" : ""}

fission/src/ui/components/Modal.tsx

@@ -1,4 +1,5 @@
-import { Button, Card, CardActions, CardContent, CardHeader, Modal as MUIModal } from "@mui/material"
+import { Card, CardActions, CardContent, CardHeader, Modal as MUIModal } from "@mui/material"
+import { Button } from "./StyledComponents"
 import React, { type ReactElement } from "react"
 import type { Modal as ModalType, Panel as PanelType } from "../helpers/UIProviderHelpers"
 import { CloseType, useUIContext } from "../helpers/UIProviderHelpers"

fission/src/ui/components/Panel.tsx

@@ -1,4 +1,5 @@
-import { Button, Card, CardActions, CardContent, CardHeader } from "@mui/material"
+import { Card, CardActions, CardContent, CardHeader } from "@mui/material"
+import { Button } from "./StyledComponents"
 import React, { type ReactElement } from "react"
 import Draggable from "react-draggable"
 import {

fission/src/ui/components/SelectButton.tsx

@@ -1,5 +1,6 @@
 import type Jolt from "@azaleacolburn/jolt-physics"
-import { Button, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button } from "./StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import World from "@/systems/World"

fission/src/ui/components/SelectMenu.tsx

@@ -1,4 +1,5 @@
-import { Button, Divider, IconButton, Stack } from "@mui/material"
+import { Divider, Stack } from "@mui/material"
+import { Button, IconButton } from "./StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import Label from "./Label"

fission/src/ui/components/StyledComponents.tsx

@@ -1,5 +1,18 @@
 import InfoIcon from "@mui/icons-material/Info"
-import { Box, Button, type ButtonProps, IconButton, type IconButtonProps, Stack, Tooltip } from "@mui/material"
+import {
+    Box,
+    Button as MuiButton,
+    type ButtonProps,
+    IconButton as MuiIconButton,
+    type IconButtonProps,
+    Stack,
+    Tooltip,
+    ToggleButton as MuiToggleButton,
+    type ToggleButtonProps,
+    ToggleButtonGroup as MuiToggleButtonGroup,
+    type ToggleButtonGroupProps,
+} from "@mui/material"
+import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 import { AiFillWarning, AiOutlineDoubleRight, AiOutlineInfoCircle } from "react-icons/ai"
 import { BiRefresh } from "react-icons/bi"
 import { BsCodeSquare } from "react-icons/bs"
@@ -83,6 +96,38 @@ export const Spacer = (heightPx?: number, widthPx?: number) => {
     return <Box minHeight={`${heightPx}px`} minWidth={`${widthPx}px`} />
 }
 
+export const Button: React.FC<ButtonProps> = ({ children, onClick, onMouseDown, onMouseUp, ...props }) => {
+    return (
+        <MuiButton onClick={onClick} {...SoundPlayer.buttonSoundEffects()} {...props}>
+            {children}
+        </MuiButton>
+    )
+}
+
+export const IconButton: React.FC<IconButtonProps> = ({ children, onClick, onMouseDown, onMouseUp, ...props }) => {
+    return (
+        <MuiIconButton onClick={onClick} {...SoundPlayer.buttonSoundEffects()} {...props}>
+            {children}
+        </MuiIconButton>
+    )
+}
+
+export const ToggleButton: React.FC<ToggleButtonProps> = ({ children, onClick, onMouseDown, onMouseUp, ...props }) => {
+    return (
+        <MuiToggleButton onClick={onClick} {...SoundPlayer.buttonSoundEffects()} {...props}>
+            {children}
+        </MuiToggleButton>
+    )
+}
+
+export const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = ({ children, onMouseDown, onMouseUp, ...props }) => {
+    return (
+        <MuiToggleButtonGroup {...SoundPlayer.buttonSoundEffects()} {...props}>
+            {children}
+        </MuiToggleButtonGroup>
+    )
+}
+
 export const PositiveButton: React.FC<ButtonProps> = ({ children, onClick, ...props }) => {
     return (
         <Button onClick={onClick} {...props} color="success">
@@ -166,7 +211,7 @@ export const RefreshButton = (onClick: () => void, props: IconButtonProps = {})
 export const CustomTooltip = (text: string) => {
     return (
         <Tooltip title={text}>
-            <IconButton
+            <MuiIconButton
                 size="small"
                 disableRipple
                 sx={{
@@ -195,7 +240,7 @@ export const CustomTooltip = (text: string) => {
                 }}
             >
                 <InfoIcon fontSize="small" />
-            </IconButton>
+            </MuiIconButton>
         </Tooltip>
     )
 }
@@ -208,3 +253,6 @@ export const LabelWithTooltip = (labelText: string, tooltipText: string) => {
         </Stack>
     )
 }
+
+// Export the raw MUI components for cases where sound effects are not wanted
+export { MuiButton, MuiIconButton, MuiToggleButton, MuiToggleButtonGroup }

fission/src/ui/components/TransformGizmoControl.tsx

@@ -1,10 +1,10 @@
-import { Button, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { Button, ToggleButton, ToggleButtonGroup } from "./StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import * as THREE from "three"
 import InputSystem from "@/systems/input/InputSystem"
 import GizmoSceneObject, { type GizmoMode } from "@/systems/scene/GizmoSceneObject"
-import { SoundPlayer } from "@/systems/sound/SoundPlayer"
+
 import World from "@/systems/World"
 import type TransformGizmoControlProps from "./TransformGizmoControlProps"
 
@@ -108,7 +108,6 @@ const TransformGizmoControl: React.FC<TransformGizmoControlProps> = ({
                     setMode(v)
                     gizmo?.setMode(v)
                 }}
-                {...SoundPlayer.buttonSoundEffects()}
                 sx={{
                     ...(sx ?? {}),
                     alignSelf: "center",

fission/src/ui/components/simulation/FlowControls.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material"
+import { Button } from "../StyledComponents"
 import { Panel as FlowPanel, useReactFlow } from "@xyflow/react"
 import { FaPlus } from "react-icons/fa6"
 import { MdFitScreen, MdZoomInMap, MdZoomOutMap } from "react-icons/md"

fission/src/ui/modals/MainMenuModal.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useLayoutEffect } from "react"
 import { globalAddToast } from "@/components/GlobalUIControls.ts"

fission/src/ui/modals/MatchResultsModal.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack, styled, Typography } from "@mui/material"
+import { Stack, styled, Typography } from "@mui/material"
+import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect } from "react"
 import MatchMode from "@/systems/match_mode/MatchMode"

fission/src/ui/modals/configuring/RoboRIOModal.tsx

@@ -1,4 +1,5 @@
-import { Button, FormControlLabel } from "@mui/material"
+import { FormControlLabel } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect } from "react"
 import type { ModalImplProps } from "@/ui/components/Modal"

fission/src/ui/modals/configuring/SettingsModal.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Stack, Tab, Tabs, TextField } from "@mui/material"
+import { Box, Stack, Tab, Tabs, TextField } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useReducer, useState } from "react"
 import { GiPerspectiveDiceSixFacesOne } from "react-icons/gi"
@@ -526,6 +527,7 @@ const SettingsModal: React.FC<ModalImplProps<void, SettingsModalCustomProps | un
                 textColor="inherit"
                 indicatorColor="primary"
                 centered
+                {...SoundPlayer.buttonSoundEffects()}
             >
                 {tabs.map(tab => (
                     <Tab key={tab.key} value={tab.key} label={tab.label} />

fission/src/ui/modals/mirabuf/ImportLocalMirabufModal.tsx

@@ -1,9 +1,10 @@
-import { Button, Stack, styled, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { Stack, styled } from "@mui/material"
+import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import { type ChangeEvent, useEffect, useState } from "react"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"
 import { createMirabuf } from "@/mirabuf/MirabufSceneObject"
 import { PAUSE_REF_ASSEMBLY_SPAWNING } from "@/systems/physics/PhysicsTypes"
-import { SoundPlayer } from "@/systems/sound/SoundPlayer"
+
 import World from "@/systems/World"
 import Label from "@/ui/components/Label"
 import type { ModalImplProps } from "@/ui/components/Modal"
@@ -83,7 +84,6 @@ const ImportLocalMirabufModal: React.FC<ModalImplProps<void, void>> = ({ modal }
                 value={miraType}
                 exclusive
                 onChange={(_, v) => v != null && setSelectedType(v)}
-                {...SoundPlayer.buttonSoundEffects()}
                 sx={{
                     alignSelf: "center",
                 }}

fission/src/ui/panels/DebugPanel.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Stack } from "@mui/material"
+import { Box, Stack } from "@mui/material"
+import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect } from "react"
 import APS from "@/aps/APS"

fission/src/ui/panels/DeveloperToolPanel.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import MirabufCachingService, { MiraType } from "@/mirabuf/MirabufLoader"

fission/src/ui/panels/RobotSwitchPanel.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button } from "../components/StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import Checkbox from "@/components/Checkbox.tsx"

fission/src/ui/panels/configuring/CameraSelectionPanel.tsx

@@ -1,4 +1,4 @@
-import { ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useState } from "react"
 import buttonPressSound from "@/assets/sound-files/ButtonPress.mp3"

fission/src/ui/panels/configuring/MatchModeConfigPanel.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Divider } from "@mui/material"
+import { Box, Divider } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import { Stack } from "@mui/system"
 import type React from "react"
 import { type ChangeEvent, useEffect, useMemo, useRef, useState } from "react"

fission/src/ui/panels/configuring/assembly-config/ConfigurePanel.tsx

@@ -1,4 +1,4 @@
-import { Button, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect, useMemo, useRef, useState } from "react"
 import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"

fission/src/ui/panels/configuring/assembly-config/interfaces/AllianceSelectionInterface.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Stack } from "@mui/material"
+import { Box, Stack } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import { useState } from "react"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import type { Alliance, Station } from "@/systems/preferences/PreferenceTypes"

fission/src/ui/panels/configuring/assembly-config/interfaces/BrainSelectionInterface.tsx

@@ -1,10 +1,9 @@
-import { ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import { useState } from "react"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import type { BrainType } from "@/systems/simulation/Brain"
 import SynthesisBrain from "@/systems/simulation/synthesis_brain/SynthesisBrain"
 import WPILibBrain from "@/systems/simulation/wpilib_brain/WPILibBrain"
-import { SoundPlayer } from "@/systems/sound/SoundPlayer"
 
 type BrainSelectionInterfaceProps = {
     selectedAssembly: MirabufSceneObject
@@ -32,7 +31,6 @@ export default function BrainSelectionInterface({ selectedAssembly }: BrainSelec
                 }
                 setRobotBrainType(brainType)
             }}
-            {...SoundPlayer.buttonSoundEffects()}
             sx={{
                 alignSelf: "center",
             }}

fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureGamepiecePickupInterface.tsx

@@ -1,5 +1,6 @@
 import type Jolt from "@azaleacolburn/jolt-physics"
-import { Button, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import * as THREE from "three"
 import SelectButton from "@/components/SelectButton"

fission/src/ui/panels/configuring/assembly-config/interfaces/ConfigureShotTrajectoryInterface.tsx

@@ -1,5 +1,6 @@
 import type Jolt from "@azaleacolburn/jolt-physics"
-import { Button, Stack, ToggleButton, ToggleButtonGroup } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button, ToggleButton, ToggleButtonGroup } from "@/ui/components/StyledComponents"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import * as THREE from "three"
 import SelectButton from "@/components/SelectButton"

fission/src/ui/panels/configuring/assembly-config/interfaces/SequentialBehaviorsInterface.tsx

@@ -1,4 +1,5 @@
-import { Button, Stack } from "@mui/material"
+import { Stack } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useReducer, useState } from "react"
 import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"

fission/src/ui/panels/configuring/assembly-config/interfaces/SimulationInterface.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import { useState } from "react"
 import type MirabufSceneObject from "@/mirabuf/MirabufSceneObject"
 import { setSpotlightAssembly } from "@/mirabuf/MirabufSceneObject"

fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/ConfigureSchemeInterface.tsx

@@ -1,4 +1,5 @@
-import { Button, Divider, IconButton, Stack } from "@mui/material"
+import { Divider, Stack } from "@mui/material"
+import { Button, IconButton } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useReducer, useRef, useState } from "react"
 import Checkbox from "@/components/Checkbox.tsx"

fission/src/ui/panels/configuring/assembly-config/interfaces/inputs/EditInputInterface.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Divider, MenuItem, Select, Stack } from "@mui/material"
+import { Box, Divider, MenuItem, Select, Stack } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useEffect, useState } from "react"
 import InputSystem from "@/systems/input/InputSystem"

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ConfigureScoringZonesInterface.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Divider, Stack } from "@mui/material"
+import { Box, Divider, Stack } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useState } from "react"
 import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"

fission/src/ui/panels/configuring/assembly-config/interfaces/scoring/ScoringZoneConfigInterface.tsx

@@ -1,5 +1,6 @@
 import type Jolt from "@azaleacolburn/jolt-physics"
-import { Button, TextField } from "@mui/material"
+import { TextField } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import * as THREE from "three"
 import { ConfigurationSavedEvent } from "@/events/ConfigurationSavedEvent"

fission/src/ui/panels/configuring/initial-config/InitialConfigPanel.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Stack } from "@mui/material"
+import { Box, Stack } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { MiraType } from "@/mirabuf/MirabufLoader"

fission/src/ui/panels/configuring/initial-config/InputSchemeSelection.tsx

@@ -1,4 +1,5 @@
-import { Box, Button, Divider, FormControl, InputLabel, MenuItem, Select, Stack, Tooltip } from "@mui/material"
+import { Box, Divider, FormControl, InputLabel, MenuItem, Select, Stack, Tooltip } from "@mui/material"
+import { Button } from "@/ui/components/StyledComponents"
 import { type ReactElement, useCallback, useEffect, useReducer, useState } from "react"
 import InputSchemeManager from "@/systems/input/InputSchemeManager"
 import InputSystem from "@/systems/input/InputSystem"