thebluefish/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>BEVY</title>
    <link data-trunk rel="copy-dir" href="assets" />
    <style>
        body, html {
            height: 100%;
        }

        body {
            background-color: lightgray;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        canvas {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
</html>

## main.rs
use std::time::Duration;
use bevy::diagnostic::{Diagnostic, DiagnosticsStore, FrameTimeDiagnosticsPlugin};
use bevy::prelude::*;
use bevy::winit::{UpdateMode, WinitSettings};

fn main() {
    App::new()
        .insert_resource(WinitSettings {
            focused_mode: UpdateMode::Reactive {
                wait: Duration::from_secs(2),
            },
            unfocused_mode: UpdateMode::Reactive {
                wait: Duration::from_secs(2),
            },
        })
        .add_plugins(DefaultPlugins)
        .add_plugins(FrameTimeDiagnosticsPlugin)
        .add_systems(Startup, setup)
        .add_systems(Update, update_debug_fps)
        .run();
}

#[derive(Component)]
pub struct DebugFps;

fn setup(mut commands: Commands) {
    commands.spawn(Camera2dBundle::default());

    commands.spawn((
        TextBundle::from_sections([
            TextSection::new(
                "FPS ",
                TextStyle {
                    font_size: 24.0,
                    color: Color::WHITE,
                    ..Default::default()
                },
            ),
            TextSection::new(
                "",
                TextStyle {
                    font_size: 24.0,
                    color: Color::WHITE,
                    ..Default::default()
                },
            ),
        ])
        .with_style(Style {
            position_type: PositionType::Absolute,
            bottom: Val::Px(10.0),
            left: Val::Px(10.0),
            ..Default::default()
        }),
        DebugFps,
    ));
}

fn update_debug_fps(
    diagnostics: Res<DiagnosticsStore>,
    mut query: Query<&mut Text, With<DebugFps>>,
) {
    for mut text in &mut query {
        let fps = diagnostics
            .get(&FrameTimeDiagnosticsPlugin::FPS)
            .and_then(Diagnostic::smoothed);
        if let Some(fps) = fps {
            text.sections[1].value = format!("{fps:.2}");
        }
    }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>BEVY</title>
	<link data-trunk rel="copy-dir" href="assets" />
	<style>
	body, html {
	height: 100%;
	}

	body {
	background-color: lightgray;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	}
	canvas {
	width: 100%;
	height: 100%;
	}
	</style>
	</head>
	</html>
	use std::time::Duration;
	use bevy::diagnostic::{Diagnostic, DiagnosticsStore, FrameTimeDiagnosticsPlugin};
	use bevy::prelude::*;
	use bevy::winit::{UpdateMode, WinitSettings};

	fn main() {
	App::new()
	.insert_resource(WinitSettings {
	focused_mode: UpdateMode::Reactive {
	wait: Duration::from_secs(2),
	},
	unfocused_mode: UpdateMode::Reactive {
	wait: Duration::from_secs(2),
	},
	})
	.add_plugins(DefaultPlugins)
	.add_plugins(FrameTimeDiagnosticsPlugin)
	.add_systems(Startup, setup)
	.add_systems(Update, update_debug_fps)
	.run();
	}

	#[derive(Component)]
	pub struct DebugFps;

	fn setup(mut commands: Commands) {
	commands.spawn(Camera2dBundle::default());

	commands.spawn((
	TextBundle::from_sections([
	TextSection::new(
	"FPS ",
	TextStyle {
	font_size: 24.0,
	color: Color::WHITE,
	..Default::default()
	},
	),
	TextSection::new(
	"",
	TextStyle {
	font_size: 24.0,
	color: Color::WHITE,
	..Default::default()
	},
	),
	])
	.with_style(Style {
	position_type: PositionType::Absolute,
	bottom: Val::Px(10.0),
	left: Val::Px(10.0),
	..Default::default()
	}),
	DebugFps,
	));
	}

	fn update_debug_fps(
	diagnostics: Res<DiagnosticsStore>,
	mut query: Query<&mut Text, With<DebugFps>>,
	) {
	for mut text in &mut query {
	let fps = diagnostics
	.get(&FrameTimeDiagnosticsPlugin::FPS)
	.and_then(Diagnostic::smoothed);
	if let Some(fps) = fps {
	text.sections[1].value = format!("{fps:.2}");
	}
	}
	}