Disable 404-ed gimmick buttons instead of removing

- Store disabled gimmicks in WarMap state - Send their IDs to ButtonGrid props - Use danger buttons for disabled items in ButtonGrid
atlasacademy · Sep 4, 2023 · 50fcb45 · 50fcb45
1 parent d232e5a
commit 50fcb45
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/db/src/Component/ButtonGrid.tsx b/packages/db/src/Component/ButtonGrid.tsx
@@ -11,6 +11,8 @@ interface IProps {
     }[];
     /** All buttons enabled by default */
     defaultEnabled: boolean;
+    /** Buttons prevented from being interacted with */
+    disabledItems?: number[];
     /** Title for the grid */
     title: string;
     /** Inline style overrides for the container of the buttons */
@@ -143,7 +145,14 @@ class ButtonGrid extends React.Component<IProps, IState> {
                             <Button
                                 key={item.uniqueId}
                                 className="toggle-button"
-                                variant={this.state.buttonStates[item.uniqueId] ? "success" : "secondary"}
+                                variant={
+                                    this.props.disabledItems?.includes(item.uniqueId)
+                                        ? "danger"
+                                        : this.state.buttonStates[item.uniqueId]
+                                        ? "success"
+                                        : "secondary"
+                                }
+                                disabled={this.props.disabledItems?.includes(item.uniqueId)}
                                 style={this.props.buttonStyleOverride ?? {}}
                                 onClick={this.handleClick.bind(this)}
                             >

diff --git a/packages/db/src/Page/WarMap/WarMap.tsx b/packages/db/src/Page/WarMap/WarMap.tsx
@@ -23,6 +23,7 @@ interface IState {
     FQSpotsOnly: boolean;
     isMapLoaded: boolean;
     mapGimmicks: War.MapGimmick[];
+    disabledMapGimmickIds: number[];
     OGMapGimmicks: War.MapGimmick[];
     showRoads: boolean;
     showSpots: boolean;
@@ -157,6 +158,7 @@ class WarMap extends React.Component<IProps, IState> {
         this.state = {
             isMapLoaded: true,
             mapGimmicks: this.defaultToggleEnabled ? mapGimmicks : [],
+            disabledMapGimmickIds: [],
             OGMapGimmicks,
             FQSpotsOnly: true,
             showRoads: !donotSpotroad.includes(this.props.warId) && !!this.props.spotRoads.length,
@@ -248,9 +250,7 @@ class WarMap extends React.Component<IProps, IState> {
                                       alt=""
                                       onError={() =>
                                           this.setState({
-                                              OGMapGimmicks: this.state.OGMapGimmicks.filter(
-                                                  (filterGimmick) => filterGimmick.id !== gimmick.id
-                                              ),
+                                              disabledMapGimmickIds: [...this.state.disabledMapGimmickIds, gimmick.id],
                                           })
                                       }
                                       src={gimmick.image}
@@ -277,6 +277,7 @@ class WarMap extends React.Component<IProps, IState> {
                 ]}
                 title={"Gimmicks to display"}
                 defaultEnabled={this.defaultToggleEnabled}
+                disabledItems={this.state.disabledMapGimmickIds}
                 onClick={(enabledGimmicks) => {
                     let showRoads =
                         enabledGimmicks.some((gimmick) => gimmick === -Infinity) &&