henri/trictrac
1
1
Fork 0
Code Issues 10 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat(client_web): update UI/UX

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-09 15:33:47 +02:00
parent 1a24e7c960
commit cdadb26f14
9 changed files with 1127 additions and 431 deletions
Download patch file Download diff file Expand all files Collapse all files

116
client_web/src/components/login_screen.rs
View file

@ -17,61 +17,81 @@ pub fn LoginScreen(error: Option<String>) -> impl IntoView {
let cmd_tx_bot = cmd_tx;
view! {
<div class="login-container">
<div class="lang-switcher">
<button
class:lang-active=move || i18n.get_locale() == Locale::en
on:click=move |_| i18n.set_locale(Locale::en)
>"EN"</button>
<button
class:lang-active=move || i18n.get_locale() == Locale::fr
on:click=move |_| i18n.set_locale(Locale::fr)
>"FR"</button>
<div class="login-card">
// ── Decorative board header ─────────────────────────────────────
<div class="login-card-header">
<div class="login-board-stripe"></div>
</div>
<h1>"Trictrac"</h1>
// ── Card body ──────────────────────────────────────────────────
<div class="login-card-body">
<div class="login-lang-switcher">
<div class="lang-switcher">
<button
class:lang-active=move || i18n.get_locale() == Locale::en
on:click=move |_| i18n.set_locale(Locale::en)
>"EN"</button>
<button
class:lang-active=move || i18n.get_locale() == Locale::fr
on:click=move |_| i18n.set_locale(Locale::fr)
>"FR"</button>
</div>
</div>
{error.map(|err| view! { <p class="error-msg">{err}</p> })}
<h1 class="login-title">"Trictrac"</h1>
<p class="login-subtitle">
<em>"Jeu de trictrac"</em>
" — "
<em>"XVIII" <sup>"e"</sup> " siècle"</em>
</p>
<input
type="text"
placeholder=move || t_string!(i18n, room_name_placeholder)
prop:value=move || room_name.get()
on:input=move |ev| set_room_name.set(event_target_value(&ev))
/>
<div class="login-ornament">"✦"</div>
<button
class="btn btn-primary"
disabled=move || room_name.get().is_empty()
on:click=move |_| {
cmd_tx_create
.unbounded_send(NetCommand::CreateRoom { room: room_name.get() })
.ok();
}
>
{t!(i18n, create_room)}
</button>
{error.map(|err| view! { <p class="error-msg">{err}</p> })}
<button
class="btn btn-secondary"
disabled=move || room_name.get().is_empty()
on:click=move |_| {
cmd_tx_join
.unbounded_send(NetCommand::JoinRoom { room: room_name.get() })
.ok();
}
>
{t!(i18n, join_room)}
</button>
<input
class="login-input"
type="text"
placeholder=move || t_string!(i18n, room_name_placeholder)
prop:value=move || room_name.get()
on:input=move |ev| set_room_name.set(event_target_value(&ev))
/>
<button
class="btn btn-bot"
on:click=move |_| {
cmd_tx_bot.unbounded_send(NetCommand::PlayVsBot).ok();
}
>
{t!(i18n, play_vs_bot)}
</button>
<div class="login-actions">
<button
class="login-btn login-btn-primary"
disabled=move || room_name.get().is_empty()
on:click=move |_| {
cmd_tx_create
.unbounded_send(NetCommand::CreateRoom { room: room_name.get() })
.ok();
}
>
{t!(i18n, create_room)}
</button>
<button
class="login-btn login-btn-secondary"
disabled=move || room_name.get().is_empty()
on:click=move |_| {
cmd_tx_join
.unbounded_send(NetCommand::JoinRoom { room: room_name.get() })
.ok();
}
>
{t!(i18n, join_room)}
</button>
<button
class="login-btn login-btn-bot"
on:click=move |_| {
cmd_tx_bot.unbounded_send(NetCommand::PlayVsBot).ok();
}
>
{t!(i18n, play_vs_bot)}
</button>
</div>
</div>
</div>
}
}