Move framerate counter to UI layer

hello-world/src/main.rs

@@ -4,23 +4,24 @@ use bevy::prelude::*;
 
 mod orbit_cam;
 mod test_scene;
+mod ui;
 
 use orbit_cam::{OrbitCam, OrbitCamPlugin};
 use test_scene::TestScenePlugin;
+use ui::UiLayerPlugin;
 
 fn main() {
     #[cfg(target_arch = "wasm32")]
     console_error_panic_hook::set_once();
 
     App::new()
-        .add_plugins((DefaultPlugins, OrbitCamPlugin, TestScenePlugin))
-        .add_systems(
-            Update,
-            (
-                draw_world_axes.after(orbit_cam::pan_orbit_camera),
-                report_framerate,
-            ),
-        )
+        .add_plugins((
+            DefaultPlugins,
+            OrbitCamPlugin,
+            TestScenePlugin,
+            UiLayerPlugin,
+        ))
+        .add_systems(Update, draw_world_axes.after(orbit_cam::pan_orbit_camera))
         .run();
 }
 
@@ -36,8 +37,3 @@ fn draw_world_axes(mut gizmos: Gizmos, q: Query<&OrbitCam>) {
     draw_axis(Vec3::Y, Color::GREEN);
     draw_axis(Vec3::Z, Color::BLUE);
 }
-
-fn report_framerate(time: Res<Time>) {
-    let ms = time.delta().as_micros() as f32 / 1000.0;
-    info!("{:.2} fps", 1000.0 / ms);
-}

hello-world/src/ui.rs

@@ -0,0 +1,50 @@
+use bevy::prelude::*;
+
+pub struct UiLayerPlugin;
+
+impl Plugin for UiLayerPlugin {
+    fn build(&self, app: &mut App) {
+        app.add_systems(Startup, layout).add_systems(Update, update);
+    }
+}
+
+#[derive(Component)]
+pub struct FramerateCounter;
+
+fn layout(mut cmd: Commands) {
+    cmd.spawn(NodeBundle {
+        style: Style {
+            width: Val::Percent(100.),
+            height: Val::Percent(100.),
+            padding: UiRect::all(Val::Px(16.)),
+            ..default()
+        },
+        ..default()
+    })
+    .with_children(|parent| {
+        parent.spawn((
+            FramerateCounter,
+            TextBundle::from_section(
+                "0 fps",
+                TextStyle {
+                    color: Color::GREEN,
+                    font_size: 14.,
+                    ..default()
+                },
+            )
+            .with_text_alignment(TextAlignment::Right)
+            .with_style(Style {
+                // TODO: This doesn't seem to have any effect
+                width: Val::Percent(100.),
+                ..default()
+            }),
+        ));
+    });
+}
+
+fn update(time: Res<Time>, mut counter: Query<&mut Text, With<FramerateCounter>>) {
+    let ms = time.delta().as_micros() as f32 / 1000.;
+    let fps = 1000. / ms;
+
+    counter.single_mut().sections[0].value = format!("{fps:.2} fps");
+}