koota debug overlay setup

app.ts

import { Canvas } from '@react-three/fiber';
import { useActions, useQuery, useTraitEffect, useWorld } from 'koota/react';
import { useLayoutEffect, useRef, useState } from 'react';
import { SceneInfo, Transforms } from '../ecs/base-traits';
import { worldActions } from '../ecs';
import { SceneContainer } from './scene-container';
import { GameUiContainer } from './game-ui/game-ui-container';

export default function App() {
  const world = useWorld();
  const entities = useQuery(Transforms);

  const drawCallsRef = useRef<HTMLElement>(null!);
  const renderTimeRef = useRef<HTMLElement>(null!);
  const frameTimeRef = useRef<HTMLElement>(null!);
  const numDroppedFramesRef = useRef<HTMLElement>(null!);

  useTraitEffect(world, SceneInfo, (info) => {
    if (info && !(info.frameNumber % 5)) {
      drawCallsRef.current.innerHTML = `${info.drawCalls ?? 0}`;
      frameTimeRef.current.innerHTML = `${(info.frameTime ?? 0).toFixed(2)}`;
      renderTimeRef.current.innerHTML = `${(info.renderTime ?? 0).toFixed(2)}`;
      numDroppedFramesRef.current.innerHTML = `${info.numberDroppedFrames ?? 0} – ${((info.percentDroppedFrames ?? 0) * 100).toFixed(3)}%`;
    }
  });

  return (
    <div className={'text-white'} id={'app'}>
      <Canvas dpr={[1, 1.5]}>
        <SceneContainer />
      </Canvas>


      <div className={`opacity-0 interaction-none absolute bottom-5 right-10 bg-black p-2 border rounded-md text-xs`}>
        
        <div>Scene Entities:{entities.length}</div>
        <div>
          Draw Calls: <span ref={drawCallsRef}>0</span>
        </div>
        <div>
          Render Time: <span ref={renderTimeRef}>0</span>ms
        </div>
        <div>
          Frame Time: <span ref={frameTimeRef}>0</span>ms
        </div>
        <div>
          Dropped Frames: <span ref={numDroppedFramesRef}>0</span>
        </div>
      </div>

    </div>
  );
}