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

feat: merge web-user-portal & web-game

Browse source
This commit is contained in:
Henri Bourcereau 2026-04-25 16:49:25 +02:00
parent 9cc605409e
commit 557f0249f8
34 changed files with 5562 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

166
clients/web/src/portal/account.rs Normal file
View file

@ -0,0 +1,166 @@
use leptos::prelude::*;
use leptos_router::hooks::use_navigate;
use crate::api;
use crate::i18n::*;
#[component]
pub fn AccountPage() -> impl IntoView {
let i18n = use_i18n();
let auth_username =
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
let navigate = use_navigate();
Effect::new(move |_| {
if let Some(u) = auth_username.get() {
navigate(&format!("/profile/{u}"), Default::default());
}
});
let tab = RwSignal::new("login");
view! {
<div class="portal-main" style="display:flex;justify-content:center;padding-top:3rem">
<div class="portal-card" style="max-width:420px;width:100%">
<h1 style="font-family:var(--font-display);font-size:1.6rem;margin-bottom:1.5rem;text-align:center">
{t!(i18n, account_title)}
</h1>
<div class="portal-tabs">
<button
class=move || if tab.get() == "login" { "portal-tab-btn active" } else { "portal-tab-btn" }
on:click=move |_| tab.set("login")
>{t!(i18n, sign_in)}</button>
<button
class=move || if tab.get() == "register" { "portal-tab-btn active" } else { "portal-tab-btn" }
on:click=move |_| tab.set("register")
>{t!(i18n, create_account)}</button>
</div>
{move || if tab.get() == "login" {
view! { <LoginForm /> }.into_any()
} else {
view! { <RegisterForm /> }.into_any()
}}
</div>
</div>
}
}
#[component]
fn LoginForm() -> impl IntoView {
let i18n = use_i18n();
let auth_username =
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
let navigate = use_navigate();
let username = RwSignal::new(String::new());
let password = RwSignal::new(String::new());
let error = RwSignal::new(String::new());
let pending = RwSignal::new(false);
let submit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
if pending.get() { return; }
pending.set(true);
error.set(String::new());
let u = username.get();
let p = password.get();
let navigate = navigate.clone();
wasm_bindgen_futures::spawn_local(async move {
match api::post_login(&u, &p).await {
Ok(me) => {
let dest = format!("/profile/{}", me.username);
auth_username.set(Some(me.username));
navigate(&dest, Default::default());
}
Err(e) => {
error.set(e);
pending.set(false);
}
}
});
};
view! {
<form on:submit=submit>
<label class="portal-label">{t!(i18n, label_username)}</label>
<input class="portal-input" type="text" required
prop:value=move || username.get()
on:input=move |ev| username.set(event_target_value(&ev)) />
<label class="portal-label">{t!(i18n, label_password)}</label>
<input class="portal-input" type="password" required
prop:value=move || password.get()
on:input=move |ev| password.set(event_target_value(&ev)) />
<button class="portal-submit-btn" type="submit"
disabled=move || pending.get()
>{t!(i18n, sign_in)}</button>
{move || if !error.get().is_empty() {
view! { <p class="portal-error">{ error.get() }</p> }.into_any()
} else {
view! { <span /> }.into_any()
}}
</form>
}
}
#[component]
fn RegisterForm() -> impl IntoView {
let i18n = use_i18n();
let auth_username =
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
let navigate = use_navigate();
let username = RwSignal::new(String::new());
let email = RwSignal::new(String::new());
let password = RwSignal::new(String::new());
let error = RwSignal::new(String::new());
let pending = RwSignal::new(false);
let submit = move |ev: leptos::ev::SubmitEvent| {
ev.prevent_default();
if pending.get() { return; }
pending.set(true);
error.set(String::new());
let u = username.get();
let e = email.get();
let p = password.get();
let navigate = navigate.clone();
wasm_bindgen_futures::spawn_local(async move {
match api::post_register(&u, &e, &p).await {
Ok(me) => {
let dest = format!("/profile/{}", me.username);
auth_username.set(Some(me.username));
navigate(&dest, Default::default());
}
Err(err) => {
error.set(err);
pending.set(false);
}
}
});
};
view! {
<form on:submit=submit>
<label class="portal-label">{t!(i18n, label_username)}</label>
<input class="portal-input" type="text" required
prop:value=move || username.get()
on:input=move |ev| username.set(event_target_value(&ev)) />
<label class="portal-label">{t!(i18n, label_email)}</label>
<input class="portal-input" type="email" required
prop:value=move || email.get()
on:input=move |ev| email.set(event_target_value(&ev)) />
<label class="portal-label">{t!(i18n, label_password)}</label>
<input class="portal-input" type="password" required
prop:value=move || password.get()
on:input=move |ev| password.set(event_target_value(&ev)) />
<button class="portal-submit-btn" type="submit"
disabled=move || pending.get()
>{t!(i18n, create_account)}</button>
{move || if !error.get().is_empty() {
view! { <p class="portal-error">{ error.get() }</p> }.into_any()
} else {
view! { <span /> }.into_any()
}}
</form>
}
}

109
clients/web/src/portal/game_detail.rs Normal file
View file

@ -0,0 +1,109 @@
use leptos::prelude::*;
use leptos_router::{components::A, hooks::use_params_map};
use crate::api::{self, GameDetail, Participant};
use crate::i18n::*;
#[component]
pub fn GameDetailPage() -> impl IntoView {
let i18n = use_i18n();
let params = use_params_map();
let id_str = move || params.read().get("id").unwrap_or_default();
let detail = LocalResource::new(move || {
let s = id_str();
async move {
let id: i64 = s.parse().map_err(|_| "invalid game id".to_string())?;
api::get_game_detail(id).await
}
});
view! {
<div class="portal-main">
{move || match detail.get().map(|sw| sw.take()) {
None => view! { <p class="portal-loading">{t!(i18n, loading)}</p> }.into_any(),
Some(Err(e)) => view! { <p class="portal-error">{ e }</p> }.into_any(),
Some(Ok(g)) => view! { <GameDetailView game=g /> }.into_any(),
}}
</div>
}
}
#[component]
fn GameDetailView(game: GameDetail) -> impl IntoView {
let i18n = use_i18n();
let started = api::format_ts(game.started_at);
let ended = game.ended_at.map(api::format_ts)
.unwrap_or_else(|| t_string!(i18n, game_ongoing).to_string());
view! {
<div class="portal-card">
<h1>{t!(i18n, room_detail_title)} " " { game.room_code.clone() }</h1>
<p class="portal-meta">
{t!(i18n, started_label)} ": " { started.clone() }
" · "
{t!(i18n, ended_label)} ": " { ended }
</p>
<h2>{t!(i18n, players_header)}</h2>
<table>
<thead>
<tr>
<th>{t!(i18n, col_player)}</th>
<th>{t!(i18n, label_username)}</th>
<th>{t!(i18n, col_outcome)}</th>
</tr>
</thead>
<tbody>
{game.participants.iter().map(|p| {
view! { <ParticipantRow participant=p.clone() /> }
}).collect_view()}
</tbody>
</table>
{game.result.as_ref().map(|r| view! {
<div style="margin-top:1.5rem">
<h2>{t!(i18n, score_header)}</h2>
<p style="font-family:var(--font-display);font-size:1.1rem;color:var(--ui-ink)">
{ r.clone() }
</p>
</div>
})}
</div>
}
}
#[component]
fn ParticipantRow(participant: Participant) -> impl IntoView {
let i18n = use_i18n();
let outcome_class = match participant.outcome.as_deref() {
Some("win") => "outcome-win",
Some("loss") => "outcome-loss",
Some("draw") => "outcome-draw",
_ => "",
};
let outcome_text = move || match participant.outcome.as_deref() {
Some("win") => t_string!(i18n, outcome_win),
Some("loss") => t_string!(i18n, outcome_loss),
Some("draw") => t_string!(i18n, outcome_draw),
_ => "—",
};
let name = participant.username.clone();
view! {
<tr>
<td>{t!(i18n, col_player)} " " { participant.player_id }</td>
<td>
{match name {
Some(u) => view! {
<A href=format!("/profile/{u}")>{ u }</A>
}.into_any(),
None => view! {
<span style="color:#aa9070">{t!(i18n, anonymous_player)}</span>
}.into_any(),
}}
</td>
<td class=outcome_class>{ outcome_text }</td>
</tr>
}
}

88
clients/web/src/portal/lobby.rs Normal file
View file

@ -0,0 +1,88 @@
use futures::channel::mpsc::UnboundedSender;
use leptos::prelude::*;
use crate::app::{NetCommand, Screen};
use crate::i18n::*;
#[component]
pub fn LobbyPage() -> impl IntoView {
let i18n = use_i18n();
let (room_name, set_room_name) = signal(String::new());
let screen = use_context::<RwSignal<Screen>>().expect("Screen context not found");
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
.expect("UnboundedSender<NetCommand> not found in context");
let cmd_tx_create = cmd_tx.clone();
let cmd_tx_join = cmd_tx.clone();
let cmd_tx_bot = cmd_tx;
// Extract connection error from screen state.
let error = move || match screen.get() {
Screen::Login { error } => error,
_ => None,
};
view! {
<div class="portal-main" style="display:flex;justify-content:center;align-items:flex-start;padding-top:5vh">
<div class="login-card">
<div class="login-card-header">
<div class="login-board-stripe"></div>
</div>
<div class="login-card-body">
<h1 class="login-title">"Trictrac"</h1>
<p class="login-subtitle">
<em>"Une interprétation numérique"</em>
</p>
<div class="login-ornament">"✦"</div>
{move || error().map(|err| view! { <p class="error-msg">{err}</p> })}
<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))
/>
<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>
</div>
}
}

4
clients/web/src/portal/mod.rs Normal file
View file

@ -0,0 +1,4 @@
pub mod account;
pub mod game_detail;
pub mod lobby;
pub mod profile;

153
clients/web/src/portal/profile.rs Normal file
View file

@ -0,0 +1,153 @@
use leptos::prelude::*;
use leptos_router::{components::A, hooks::use_params_map};
use crate::api::{self, GameSummary, UserProfile};
use crate::i18n::*;
#[component]
pub fn ProfilePage() -> impl IntoView {
let params = use_params_map();
let username = move || params.read().get("username").unwrap_or_default();
let profile = LocalResource::new(move || {
let u = username();
async move { api::get_user_profile(&u).await }
});
let i18n = use_i18n();
view! {
<div class="portal-main">
{move || match profile.get().map(|sw| sw.take()) {
None => view! { <p class="portal-loading">{t!(i18n, loading)}</p> }.into_any(),
Some(Err(e)) => view! { <p class="portal-error">{ e }</p> }.into_any(),
Some(Ok(p)) => view! { <ProfileContent profile=p username=username() /> }.into_any(),
}}
</div>
}
}
#[component]
fn ProfileContent(profile: UserProfile, username: String) -> impl IntoView {
let i18n = use_i18n();
let page = RwSignal::new(0i64);
let games = LocalResource::new(move || {
let u = username.clone();
let p = page.get();
async move { api::get_user_games(&u, p).await }
});
let joined = api::format_ts(profile.created_at);
view! {
<div class="portal-card">
<h1>{ profile.username.clone() }</h1>
<p class="portal-meta">{t!(i18n, member_since)} " " { joined }</p>
<div class="stats-grid">
<div class="stat-box">
<div class="value">{ profile.total_games }</div>
<div class="label">{t!(i18n, stat_games)}</div>
</div>
<div class="stat-box">
<div class="value outcome-win">{ profile.wins }</div>
<div class="label">{t!(i18n, stat_wins)}</div>
</div>
<div class="stat-box">
<div class="value outcome-loss">{ profile.losses }</div>
<div class="label">{t!(i18n, stat_losses)}</div>
</div>
<div class="stat-box">
<div class="value outcome-draw">{ profile.draws }</div>
<div class="label">{t!(i18n, stat_draws)}</div>
</div>
</div>
</div>
<div class="portal-card">
<h2>{t!(i18n, game_history_title)}</h2>
{move || match games.get().map(|sw| sw.take()) {
None => view! { <p class="portal-loading">{t!(i18n, loading)}</p> }.into_any(),
Some(Err(e)) => view! { <p class="portal-error">{ e }</p> }.into_any(),
Some(Ok(r)) => {
if r.games.is_empty() {
view! { <p class="portal-empty">{t!(i18n, no_games)}</p> }.into_any()
} else {
view! { <GamesTable games=r.games page=page /> }.into_any()
}
}
}}
</div>
}
}
#[component]
fn GamesTable(games: Vec<GameSummary>, page: RwSignal<i64>) -> impl IntoView {
let i18n = use_i18n();
let rows = games.clone();
let has_next = games.len() == 20;
view! {
<table>
<thead>
<tr>
<th>{t!(i18n, col_room)}</th>
<th>{t!(i18n, col_started)}</th>
<th>{t!(i18n, col_ended)}</th>
<th>{t!(i18n, col_outcome)}</th>
<th>{t!(i18n, col_detail)}</th>
</tr>
</thead>
<tbody>
{rows.into_iter().map(|g| {
let started = api::format_ts(g.started_at);
let ended = g.ended_at.map(api::format_ts).unwrap_or_else(|| "—".into());
let outcome_class = match g.outcome.as_deref() {
Some("win") => "outcome-win",
Some("loss") => "outcome-loss",
Some("draw") => "outcome-draw",
_ => "",
};
let outcome_text = move || match g.outcome.as_deref() {
Some("win") => t_string!(i18n, outcome_win),
Some("loss") => t_string!(i18n, outcome_loss),
Some("draw") => t_string!(i18n, outcome_draw),
_ => "—",
};
view! {
<tr>
<td>{ g.room_code.clone() }</td>
<td>{ started }</td>
<td>{ ended }</td>
<td class=outcome_class>{ outcome_text }</td>
<td>
<A href=format!("/games/{}", g.id)>{t!(i18n, view_link)}</A>
</td>
</tr>
}
}).collect_view()}
</tbody>
</table>
<div style="display:flex;gap:0.75rem;margin-top:1.25rem;align-items:center">
{move || if page.get() > 0 {
view! {
<button class="portal-page-btn"
on:click=move |_| page.update(|p| *p -= 1)
>{t!(i18n, prev_page)}</button>
}.into_any()
} else {
view! { <span /> }.into_any()
}}
<span class="portal-meta" style="margin:0">{t!(i18n, page_label)} " " { move || page.get() + 1 }</span>
{if has_next {
view! {
<button class="portal-page-btn"
on:click=move |_| page.update(|p| *p += 1)
>{t!(i18n, next_page)}</button>
}.into_any()
} else {
view! { <span /> }.into_any()
}}
</div>
}
}