Formatting fixes

Added comments explaining pressed conditional.

Fixed formmating on callbacks

crates/runner-host/crates/web-client/src/app.rs

@@ -31,22 +31,17 @@ pub fn app() -> Html {
 
     let on_board_ready = Callback::from({
         let runner_connection = runner_connection.clone();
-        move |()| {
-            runner_connection.send_board_ready();
-        }
+        move |()| runner_connection.send_board_ready()
     });
 
     let send_event_callback = Callback::from({
         let runner_connection = runner_connection.clone();
-        move |event: Event| {
-            runner_connection.send_event(event);
-        }
+        move |event: Event| runner_connection.send_event(event)
     });
 
     use_effect_with(runner_connection.command_state.clone(), move |command_state| {
         if let Some(command) = &**command_state {
             info!("Command: {command:?}");
-
             match command {
                 Command::Connected => info!("Connected to runner"),
                 Command::Disconnected => warn!("Disconnected from runner"),

crates/runner-host/crates/web-client/src/board_components/button.rs

@@ -26,25 +26,25 @@ pub struct Props {
 #[function_component]
 pub fn Button(Props { id, on_event }: &Props) -> Html {
     let pressed = use_state(|| false);
-    let press = {
-        Callback::from({
-            let pressed = pressed.clone();
-            let on_event = on_event.clone();
-            let id = *id;
-            move |_| {
-                info!("Pressed button id: {id}");
-                pressed.set(true);
-                on_event.emit(Event::Button { component_id: id, state: ButtonState::Pressed });
-            }
-        })
-    };
+    let press = Callback::from({
+        let pressed = pressed.clone();
+        let on_event = on_event.clone();
+        let id = *id;
+        move |_| {
+            info!("Pressed button id: {id}");
+            pressed.set(true);
+            on_event.emit(Event::Button { component_id: id, state: ButtonState::Pressed });
+        }
+    });
 
     let unpress = Callback::from({
         let pressed = pressed.clone();
         let on_event = on_event.clone();
         let id = *id;
         move |_| {
             info!("Unpressed button id: {id}");
+            // Necessary because it may also be triggered when the mouse
+            // stops hovering over the button.
             if *pressed {
                 pressed.set(false);
                 on_event.emit(Event::Button { component_id: id, state: ButtonState::Released });
@@ -57,6 +57,7 @@ pub fn Button(Props { id, on_event }: &Props) -> Html {
             id={id.to_string()}
             onmousedown={press}
             onmouseup={unpress.clone()}
+            // Fixes a bug when holding and dragging the mouse over the button.
             onmouseleave={unpress.clone()}
             class={"button"}
         >

crates/runner-host/crates/web-client/src/console.rs

@@ -20,6 +20,7 @@ use yew::prelude::*;
 use yew_hooks::prelude::*;
 
 #[derive(Properties, PartialEq)]
+
 pub struct Props {
     #[prop_or_default]
     pub id: usize,
@@ -47,21 +48,18 @@ pub fn console(Props { id, command_state, on_new_console_msg }: &Props) -> Html
         }
     });
 
-    {
-        let command_state = command_state.clone();
-        use_effect_with(command_state, {
-            let history = history.clone();
-            move |command_state| {
-                if let Some(command) = &**command_state {
-                    info!("Command: {command:?}");
-                    if let Command::Log { message } = command {
-                        history.push(format!("[recv]: {message}"));
-                    }
+    use_effect_with(command_state.clone(), {
+        let history = history.clone();
+        move |command_state| {
+            if let Some(command) = &**command_state {
+                info!("Command: {command:?}");
+                if let Command::Log { message } = command {
+                    history.push(format!("[recv]: {message}"));
                 }
-                || ()
             }
-        });
-    }
+            || ()
+        }
+    });
 
     html! {
         <div id={id.to_string()} class={"console"}>