add a way to disable some parts of bars ui via config and select them via devtool elem select

Author: zardoy

src/react/ArmorBar.css

@@ -8,7 +8,6 @@
   --offset: calc(-1 * 25px);
   --bg-x: calc(-1 * 16px);
   --bg-y: calc(-1 * 9px);
-  pointer-events: none;
   image-rendering: pixelated;
 }
 

src/react/BreathBar.css

@@ -9,7 +9,6 @@
   --offset: calc(-1 * 16px);
   --bg-x: calc(-1 * 16px);
   --bg-y: calc(-1 * 18px);
-  pointer-events: none;
   image-rendering: pixelated;
 }
 

src/react/FoodBar.css

@@ -11,7 +11,6 @@
   --offset: calc(-1 * (52px + (9px * (4 * var(--kind) + var(--lightened) * 2))));
   --bg-x: calc(-1 * (16px + 9px * var(--lightened)));
   --bg-y: calc(-1 * 27px);
-  pointer-events: none;
   image-rendering: pixelated;
 }
 

src/react/HealthBar.css

@@ -11,7 +11,6 @@
   --offset: calc(-1 * (52px + (9px * (4 * var(--kind) + var(--lightened) * 2)) ));
   --bg-x: calc(-1 * (16px + 9px * var(--lightened)));
   --bg-y: calc(-1 * var(--hardcore) * 45px);
-  pointer-events: none;
   image-rendering: pixelated;
 }
 

src/react/HudBarsProvider.tsx

@@ -1,5 +1,7 @@
 import { useRef, useState, useMemo } from 'react'
 import { GameMode } from 'mineflayer'
+import { useSnapshot } from 'valtio'
+import { options } from '../optionsStorage'
 import { armor } from './armorValues'
 import HealthBar from './HealthBar'
 import FoodBar from './FoodBar'
@@ -8,6 +10,8 @@ import BreathBar from './BreathBar'
 import './HealthBar.css'
 
 export default () => {
+  const { disabledUiParts } = useSnapshot(options)
+
   const [damaged, setDamaged] = useState(false)
   const [healthValue, setHealthValue] = useState(bot.health)
   const [food, setFood] = useState(bot.food)
@@ -91,7 +95,7 @@ export default () => {
   }, [])
 
   return <div className='hud-bars-container'>
-    <HealthBar
+    {!disabledUiParts.includes('health-bar') && <HealthBar
       gameMode={gameMode}
       isHardcore={isHardcore}
       damaged={damaged}
@@ -102,12 +106,12 @@ export default () => {
         setEffectToAdd(null)
         setEffectToRemove(null)
       }}
-    />
-    <ArmorBar
+    />}
+    {!disabledUiParts.includes('armor-bar') && <ArmorBar
       armorValue={armorValue}
       style={gameMode !== 'survival' && gameMode !== 'adventure' ? { display: 'none' } : { display: 'flex' }}
-    />
-    <FoodBar
+    />}
+    {!disabledUiParts.includes('food-bar') && <FoodBar
       gameMode={gameMode}
       food={food}
       effectToAdd={effectToAdd}
@@ -116,9 +120,9 @@ export default () => {
         setEffectToAdd(null)
         setEffectToRemove(null)
       }}
-    />
-    <BreathBar
+    />}
+    {!disabledUiParts.includes('breath-bar') && <BreathBar
       oxygen={gameMode !== 'survival' && gameMode !== 'adventure' ? 0 : oxygen}
-    />
+    />}
   </div>
 }