Actually read the remote url input

board-frontend/src/app.rs

@@ -136,12 +136,21 @@ pub fn app() -> Html {
     let player_name = use_state(|| None);
     let room_name = use_state(|| None);
 
+    let remote_ref = use_node_ref();
     let player_name_ref = use_node_ref();
     let room_name_ref = use_node_ref();
     let on_create_click = {
+        let remote = remote.clone();
+        let remote_ref = remote_ref.clone();
         let player_name = player_name.clone();
         let player_name_ref = player_name_ref.clone();
         Callback::from(move |_| {
+            remote.set(
+                remote_ref
+                    .cast::<HtmlInputElement>()
+                    .expect("remote_ref is not attached to a input element")
+                    .value(),
+            );
             player_name.set(Some(
                 player_name_ref
                     .cast::<HtmlInputElement>()
@@ -151,11 +160,19 @@ pub fn app() -> Html {
         })
     };
     let on_join_click = {
+        let remote = remote.clone();
+        let remote_ref = remote_ref.clone();
         let player_name = player_name.clone();
         let player_name_ref = player_name_ref.clone();
         let room_name = room_name.clone();
         let room_name_ref = room_name_ref.clone();
         Callback::from(move |_| {
+            remote.set(
+                remote_ref
+                    .cast::<HtmlInputElement>()
+                    .expect("remote_ref is not attached to a input element")
+                    .value(),
+            );
             player_name.set(Some(
                 player_name_ref
                     .cast::<HtmlInputElement>()
@@ -190,7 +207,7 @@ pub fn app() -> Html {
         <main>
             <div>
                 <label>{"Server: "}</label>
-                <input type="text" required={true} value={"ws://localhost:8081"} />
+                <input type="text" required={true} value={"ws://localhost:8081"} ref={remote_ref} />
             </div>
             <div>
                 <label>{"Player name: "}</label>