fix: update tab header/footer in real time, use player display name in tab

Author: zardoy

src/react/PlayerListOverlay.tsx

@@ -2,7 +2,7 @@ import MessageFormattedString from './MessageFormattedString'
 import './PlayerListOverlay.css'
 
 
-type PlayersLists = Array<Array<Pick<import('mineflayer').Player, 'uuid' | 'username' | 'ping'>>>
+type PlayersLists = Array<Array<Pick<import('mineflayer').Player, 'uuid' | 'displayName' | 'username' | 'ping'>>>
 
 type PlayerListOverlayProps = {
   playersLists: PlayersLists,
@@ -25,7 +25,7 @@ export default ({ playersLists, clientId, tablistHeader, tablistFooter, serverIP
         <div key={index} className="player-list">
           {list.map(player => (
             <div key={player.uuid ?? player.username} className={`playerlist-entry${clientId === player.uuid ? ' active-player' : ''}`} id={`plist-player-${player.uuid}`}>
-              <MessageFormattedString message={player.username} />
+              <MessageFormattedString message={player.displayName ?? player.username} />
               <div className="playerlist-ping">
                 <p className="playerlist-ping-value">{player.ping}</p>
                 <p className="playerlist-ping-label">ms</p>

src/react/PlayerListOverlayProvider.tsx

@@ -14,6 +14,7 @@ export default () => {
   const [clientId, setClientId] = useState(bot._client.uuid)
   const [players, setPlayers] = useState<Players>({})
   const [isOpen, setIsOpen] = useState(false)
+  const [counter, setCounter] = useState(0)
 
   const handleKeyDown = (e) => {
     if (!isGameActive(true)) return
@@ -60,9 +61,13 @@ export default () => {
     document.addEventListener('keydown', handleKeyDown)
     document.addEventListener('keyup', handleKeyUp)
 
+    const playerlistHeader = () => setCounter(prev => prev + 1)
+    bot._client.on('playerlist_header', playerlistHeader)
+
     return () => {
       document.removeEventListener('keydown', handleKeyDown)
       document.removeEventListener('keyup', handleKeyUp)
+      bot?._client.removeListener('playerlist_header', playerlistHeader)
     }
   }, [serverIp])