feat: enable bossbar by default & support for custom title texts (#259)

src/optionsStorage.ts

@@ -95,7 +95,7 @@ const defaultOptions = {
   wysiwygSignEditor: 'auto' as 'auto' | 'always' | 'never',
   showMinimap: 'never' as 'always' | 'singleplayer' | 'never',
   minimapOptimizations: true,
-  displayBossBars: false, // boss bar overlay was removed for some reason, enable safely
+  displayBossBars: true,
   disabledUiParts: [] as string[],
   neighborChunkUpdates: true,
   highlightBlockColor: 'auto' as 'auto' | 'blue' | 'classic',

src/react/BossBarOverlay.css

@@ -1,11 +1,17 @@
 .bossBars {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 3px;
   position: absolute;
-  top: 9px;
+  width: 100%;
+  top: 1px;
   left: 50%;
   transform: translate(-50%);
+  pointer-events: none;
+}
+
+.bossBars.mobile {
+  top: 18px;
 }
 
 .bossbar-container {
@@ -14,8 +20,12 @@
   align-items: center;
 }
 .bossbar-title {
-  font-size: 7px;
+  font-size: 10px;
+  text-align: center;
   color: #fff;
+  margin-bottom: -1px;
+  white-space: nowrap;
+  overflow: hidden;
 }
 .bossbar {
   background-image: var(--bars-gui-atlas);

src/react/BossBarOverlay.tsx

@@ -5,29 +5,25 @@ import './BossBarOverlay.css'
 
 const colors = ['pink', 'blue', 'red', 'green', 'yellow', 'purple', 'white']
 const divs = [0, 6, 10, 12, 20]
-const translations = {
-  'entity.minecraft.ender_dragon': 'Ender Dragon',
-  'entity.minecraft.wither': 'Wither'
-}
 
 export type BossBarType = BossBarTypeRaw & {
   // todo why not use public properties?
-  title: { text: string, translate: string },
-  _title: { text: string, translate: string },
+  title: string | Record<string, any> | null,
+  _title: string | Record<string, any> | null,
   _color: string,
   _dividers: number,
   _health: number
 }
 
 export default ({ bar }: { bar: BossBarType }) => {
-  const [title, setTitle] = useState('')
+  const [title, setTitle] = useState({})
   const [bossBarStyles, setBossBarStyles] = useState<{ [key: string]: string | number }>({})
   const [fillStyles, setFillStyles] = useState<{ [key: string]: string | number }>({})
   const [div1Styles, setDiv1Styles] = useState<{ [key: string]: string | number }>({})
   const [div2Styles, setDiv2Styles] = useState<{ [key: string]: string | number }>({})
 
   useEffect(() => {
-    setTitle(bar._title.text ? bar.title.text : translations[bar.title.translate] || 'Unknown Entity')
+    setTitle(bar._title ?? bar.title)
     setBossBarStyles(prevStyles => ({
       ...prevStyles,
       backgroundPositionY: `-${colors.indexOf(bar._color) * 10}px`

src/react/BossBarOverlayProvider.tsx

@@ -1,27 +1,40 @@
 import { useState, useEffect } from 'react'
 import BossBar, { BossBarType } from './BossBarOverlay'
 import './BossBarOverlay.css'
+import { useSnapshot } from 'valtio'
+import { miscUiState } from '../globalState'
 
 
 export default () => {
+  const { currentTouch } = useSnapshot(miscUiState)
   const [bossBars, setBossBars] = useState(new Map<string, BossBarType>())
+  const addBossBar = (bossBar: BossBarType) => {
+    setBossBars(prevBossBars => new Map(prevBossBars.set(bossBar.entityUUID, bossBar)))
+  }
+
+  const removeBossBar = (bossBar: BossBarType) => {
+    setBossBars(prevBossBars => {
+      const newBossBars = new Map(prevBossBars)
+      newBossBars.delete(bossBar.entityUUID)
+      return newBossBars
+    })
+  }
 
   useEffect(() => {
     bot.on('bossBarCreated', (bossBar) => {
-      setBossBars(prevBossBars => new Map(prevBossBars.set(bossBar.entityUUID, bossBar as any)))
+      addBossBar(bossBar as BossBarType)
     })
     bot.on('bossBarUpdated', (bossBar) => {
-      setBossBars(prevBossBars => new Map(prevBossBars.set(bossBar.entityUUID, bossBar as BossBarType)))
+      removeBossBar(bossBar as BossBarType)
+      setTimeout(() => addBossBar(bossBar as BossBarType), 1)
     })
     bot.on('bossBarDeleted', (bossBar) => {
-      const newBossBars = new Map(bossBars)
-      newBossBars.delete(bossBar.entityUUID)
-      setBossBars(newBossBars)
+      removeBossBar(bossBar as BossBarType)
     })
   }, [])
 
   return (
-    <div className="bossBars" id="bossBars">
+    <div className={`bossBars ${currentTouch ? 'mobile' : ''}`} id="bossBars">
       {[...bossBars.values()].map(bar => (
         <BossBar key={bar.entityUUID} bar={bar} />
       ))}