Add frame rate counter to JS version.

Source/ui_js/CMakeLists.txt

@@ -16,6 +16,14 @@ if(NOT TARGET PlayCore)
 endif()
 list(APPEND PROJECT_LIBS PlayCore)
 
+if(NOT TARGET ui_shared)
+	add_subdirectory(
+		${CMAKE_CURRENT_SOURCE_DIR}/../ui_shared
+		${CMAKE_CURRENT_BINARY_DIR}/ui_shared
+	)
+endif()
+list(APPEND PROJECT_LIBS ui_shared)
+
 if(NOT TARGET gsh_opengl)
 	add_subdirectory(
 		${CMAKE_CURRENT_SOURCE_DIR}/../gs/GSH_OpenGL

Source/ui_js/Main.cpp

@@ -6,8 +6,10 @@
 #include "../../tools/PsfPlayer/Source/ui_js/SH_OpenALProxy.h"
 #include "input/PH_GenericInput.h"
 #include "InputProviderEmscripten.h"
+#include "ui_shared/StatsManager.h"
 
 CPs2VmJs* g_virtualMachine = nullptr;
+CGSHandler::NewFrameEvent::Connection g_gsNewFrameConnection;
 EMSCRIPTEN_WEBGL_CONTEXT_HANDLE g_context = 0;
 std::shared_ptr<CInputProviderEmscripten> g_inputProvider;
 CSH_OpenAL* g_soundHandler = nullptr;
@@ -106,6 +108,8 @@ extern "C" void initVm()
 		g_virtualMachine->CreateSoundHandler(CSH_OpenALProxy::GetFactoryFunction(g_soundHandler));
 	}
 
+	g_gsNewFrameConnection = g_virtualMachine->GetGSHandler()->OnNewFrame.Connect(std::bind(&CStatsManager::OnGsNewFrame, &CStatsManager::GetInstance(), std::placeholders::_1));
+
 	EMSCRIPTEN_RESULT result = EMSCRIPTEN_RESULT_SUCCESS;
 
 	result = emscripten_set_keydown_callback("#outputCanvas", nullptr, false, &keyboardCallback);
@@ -125,10 +129,22 @@ void bootDiscImage(std::string path)
 	g_virtualMachine->BootDiscImage(path);
 }
 
+int getFrames()
+{
+	return CStatsManager::GetInstance().GetFrames();
+}
+
+void clearStats()
+{
+	CStatsManager::GetInstance().ClearStats();
+}
+
 EMSCRIPTEN_BINDINGS(Play)
 {
 	using namespace emscripten;
 
 	function("bootElf", &bootElf);
 	function("bootDiscImage", &bootDiscImage);
+	function("getFrames", &getFrames);
+	function("clearStats", &clearStats);
 }

js/play_browser/src/App.css

@@ -45,6 +45,10 @@ span.version {
   font-size: smaller;
 }
 
+span.stats {
+  float: right;
+}
+
 .global-row {
   display: flex;
 }

js/play_browser/src/App.tsx

@@ -1,8 +1,25 @@
 import './App.css';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useState, useEffect } from 'react';
 import { PlayModule } from './PlayModule';
 import { useAppDispatch, useAppSelector, bootFile } from "./Actions";
 
+function Stats() {
+  const [stats, setStats] = useState({ fps: 0 });
+  useEffect(() => {
+    const timer = setInterval(() => {
+      const frames = PlayModule.getFrames();
+      PlayModule.clearStats();
+      setStats({ fps: frames }); 
+    }, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, [stats]);
+  return (
+    <span className="stats">{stats.fps} f/s</span>
+  )
+}
+
 function App() {
   const state = useAppSelector((state) => state.play);
   const dispatch = useAppDispatch();
@@ -21,6 +38,7 @@ function App() {
     return (
       <div>
         <input type="file" onChange={handleChange}/>
+        <Stats />
         <span className="version">
           {`Version: ${process.env.REACT_APP_VERSION}`}
         </span>