improved about footer and field change boxes

werewolves-server/src/lobby.rs

@@ -285,14 +285,12 @@ impl Lobby {
                     },
                 message: ClientMessage::Goodbye,
             }) => {
-                log::error!("we are in there");
                 if let Some(remove_idx) = self
                     .players_in_lobby
                     .iter()
                     .enumerate()
                     .find_map(|(idx, p)| (p.0.player_id == player_id).then_some(idx))
                 {
-                    log::error!("removing player {player_id} at idx {remove_idx}");
                     self.players_in_lobby.swap_remove(remove_idx);
                     self.send_lobby_info_to_host().await?;
                     self.send_lobby_info_to_clients().await;

werewolves/index.scss

@@ -94,10 +94,11 @@ body {
 app {
 	max-width: 100vw;
 	width: 100vw;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
 	top: 0;
 	left: 0;
-	display: block;
-	position: absolute;
 }
 
 .big-screen {
@@ -957,18 +958,45 @@ input {
 }
 
 .info-update {
+	border: 1px solid rgba(255, 255, 255, 0.5);
+	padding: 30px 0px 30px 0px;
 	font-size: 2rem;
 	align-content: stretch;
 	margin: 0;
-	position: absolute;
+	position: fixed;
-	left: 0;
+	left: 5vw;
 	z-index: 3;
 	background-color: #000;
-	min-width: 2cm;
+	width: 90vw;
 
-	& * {
+	display: flex;
+	flex-direction: column;
+	flex-wrap: nowrap;
+	align-items: center;
+	gap: 10px;
+
+	&>input {
+		border: 1px solid rgba(255, 255, 255, 0.25);
+		background-color: black;
+
+		color: white;
+		padding: 0;
+		font-size: 1.5em;
+
+		&:focus {
+			background-color: white;
+			color: black;
+			outline: 1px solid rgba(255, 255, 255, 0.25);
+		}
+	}
+
+	&>button {
+		font-size: 1.1em;
+	}
+
+	&>* {
 		margin: 0;
-		width: 100%;
+		width: 80% !important;
 		text-align: center;
 	}
 }
@@ -2307,7 +2335,7 @@ li.choice {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: nowrap;
-	overflow: hidden;
+	margin-top: auto;
 	max-height: 1cm;
 	justify-content: center;
 	background-color: #000;

werewolves/src/components/client/footer.rs

@@ -48,10 +48,10 @@ pub fn ClientFooter() -> Html {
     };
 
     html! {
-        <nav class="footer">
+        <footer class="footer">
             <button class="default-button solid" onclick={about_click}>{"about"}</button>
             {about_dialog}
-        </nav>
+        </footer>
     }
 }
 

werewolves/src/components/client/nav.rs

@@ -102,6 +102,7 @@ pub fn ClientNav(
                 on_submit={on_submit}
                 state={number_open.clone()}
                 on_open={close_others}
+                label={String::from("number")}
             >
                 <div class="number">{current_num}</div>
             </ClickableNumberEdit>
@@ -137,10 +138,11 @@ pub fn ClientNav(
             <ClickableTextEdit
                 value={name.clone()}
                 submit_ident={identity.clone()}
-                field_name="pronouns"
+                field_name="name"
                 on_submit={on_submit}
                 state={name_open.clone()}
                 on_open={close_others}
+                label={String::from("name")}
             >
                 <div class="name">{identity.1.name.as_str()}</div>
             </ClickableTextEdit>
@@ -180,6 +182,7 @@ pub fn ClientNav(
                 on_submit={on_submit}
                 state={pronouns_open}
                 on_open={close_others}
+                label={String::from("pronouns")}
             >
                 {pronouns}
             </ClickableTextEdit>
@@ -228,6 +231,8 @@ struct ClickableTextEditProps {
     pub max_length: usize,
     #[prop_or_default]
     pub on_open: Option<Callback<()>>,
+    #[prop_or_default]
+    pub label: String,
 }
 
 #[function_component]
@@ -241,6 +246,7 @@ fn ClickableTextEdit(
         state,
         max_length,
         on_open,
+        label,
     }: &ClickableTextEditProps,
 ) -> Html {
     let on_input = crate::components::input_element_string_oninput(value.setter(), *max_length);
@@ -260,9 +266,13 @@ fn ClickableTextEdit(
             }
         }
     };
+    let label = label.is_empty().not().then_some(html! {
+        <label>{label}</label>
+    });
     let options = html! {
-        <div class="row-list info-update">
+        <div class="info-update">
-            <input type="text" oninput={on_input} name={*field_name}/>
+            {label}
+            <input type="text" oninput={on_input} name={*field_name} autofocus=true/>
             <Button on_click={submit}>{"ok"}</Button>
         </div>
     };

werewolves/src/components/field.rs

@@ -12,6 +12,7 @@
 //
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
+use core::ops::Not;
 use yew::prelude::*;
 
 use crate::components::Button;
@@ -92,6 +93,8 @@ pub struct ClickableNumberEditProps {
     pub state: UseStateHandle<bool>,
     #[prop_or_default]
     pub on_open: Option<Callback<()>>,
+    #[prop_or_default]
+    pub label: String,
 }
 
 #[function_component]
@@ -103,14 +106,19 @@ pub fn ClickableNumberEdit(
         on_submit,
         state,
         on_open,
+        label,
     }: &ClickableNumberEditProps,
 ) -> Html {
     let on_input = crate::components::input_element_string_oninput(value.setter(), 20);
     let on_submit = on_submit.clone();
+    let label = label.is_empty().not().then_some(html! {
+        <label>{label}</label>
+    });
 
     let options = html! {
-        <div class="row-list info-update">
+        <div class="info-update">
-            <input type="text" oninput={on_input} name={*field_name}/>
+            {label}
+            <input type="text" oninput={on_input} name={*field_name} autofocus=true/>
             <Button on_click={on_submit.clone()}>{"ok"}</Button>
         </div>
     };