feat(client_web): i18n
This commit is contained in:
parent
d3a20eb6b6
commit
4ecb222e55
11 changed files with 877 additions and 99 deletions
|
|
@ -9,6 +9,7 @@ use backbone_lib::session::{ConnectError, GameSession, RoomConfig, RoomRole, Ses
|
|||
use backbone_lib::traits::ViewStateUpdate;
|
||||
|
||||
use crate::components::{ConnectingScreen, GameScreen, LoginScreen};
|
||||
use crate::i18n::I18nContextProvider;
|
||||
use crate::trictrac::backend::TrictracBackend;
|
||||
use crate::trictrac::types::{GameDelta, PlayerAction, ViewState};
|
||||
|
||||
|
|
@ -244,10 +245,12 @@ pub fn App() -> impl IntoView {
|
|||
});
|
||||
|
||||
view! {
|
||||
{move || match screen.get() {
|
||||
Screen::Login { error } => view! { <LoginScreen error=error /> }.into_any(),
|
||||
Screen::Connecting => view! { <ConnectingScreen /> }.into_any(),
|
||||
Screen::Playing(state) => view! { <GameScreen state=state /> }.into_any(),
|
||||
}}
|
||||
<I18nContextProvider>
|
||||
{move || match screen.get() {
|
||||
Screen::Login { error } => view! { <LoginScreen error=error /> }.into_any(),
|
||||
Screen::Connecting => view! { <ConnectingScreen /> }.into_any(),
|
||||
Screen::Playing(state) => view! { <GameScreen state=state /> }.into_any(),
|
||||
}}
|
||||
</I18nContextProvider>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
use leptos::prelude::*;
|
||||
|
||||
use crate::i18n::*;
|
||||
|
||||
#[component]
|
||||
pub fn ConnectingScreen() -> impl IntoView {
|
||||
view! { <p class="connecting">"Connecting…"</p> }
|
||||
let i18n = use_i18n();
|
||||
view! { <p class="connecting">{t!(i18n, connecting)}</p> }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ use leptos::prelude::*;
|
|||
use trictrac_store::CheckerMove;
|
||||
|
||||
use crate::app::{GameUiState, NetCommand};
|
||||
use crate::i18n::*;
|
||||
use crate::trictrac::types::{JanEntry, PlayerAction, SerStage, SerTurnStage};
|
||||
|
||||
use super::board::Board;
|
||||
|
|
@ -11,7 +12,6 @@ use super::score_panel::PlayerScorePanel;
|
|||
|
||||
#[allow(dead_code)]
|
||||
/// Returns (d0_used, d1_used) by matching each staged move's distance to a die.
|
||||
/// Falls back to position order for exit moves (distance doesn't match any die).
|
||||
fn matched_dice_used(staged: &[(u8, u8)], dice: (u8, u8)) -> (bool, bool) {
|
||||
let mut d0 = false;
|
||||
let mut d1 = false;
|
||||
|
|
@ -35,8 +35,6 @@ fn matched_dice_used(staged: &[(u8, u8)], dice: (u8, u8)) -> (bool, bool) {
|
|||
}
|
||||
|
||||
/// Split `dice_jans` into (viewer_jans, opponent_jans).
|
||||
/// Entries where the active player scores (total >= 0) go to the active player.
|
||||
/// Entries where the active player loses (total < 0) go to the opponent, with signs flipped.
|
||||
fn split_jans(
|
||||
dice_jans: &[JanEntry],
|
||||
viewer_is_active: bool,
|
||||
|
|
@ -50,12 +48,10 @@ fn split_jans(
|
|||
} else {
|
||||
theirs.push(JanEntry { total: -e.total, points_per: -e.points_per, ..e.clone() });
|
||||
}
|
||||
} else if e.total >= 0 {
|
||||
theirs.push(e.clone());
|
||||
} else {
|
||||
if e.total >= 0 {
|
||||
theirs.push(e.clone());
|
||||
} else {
|
||||
mine.push(JanEntry { total: -e.total, points_per: -e.points_per, ..e.clone() });
|
||||
}
|
||||
mine.push(JanEntry { total: -e.total, points_per: -e.points_per, ..e.clone() });
|
||||
}
|
||||
}
|
||||
(mine, theirs)
|
||||
|
|
@ -63,6 +59,8 @@ fn split_jans(
|
|||
|
||||
#[component]
|
||||
pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
||||
let i18n = use_i18n();
|
||||
|
||||
let vs = state.view_state.clone();
|
||||
let player_id = state.player_id;
|
||||
let is_my_turn = vs.active_mp_player == Some(player_id);
|
||||
|
|
@ -96,19 +94,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
}
|
||||
});
|
||||
|
||||
// ── Status text ────────────────────────────────────────────────────────────
|
||||
let status = match &vs.stage {
|
||||
SerStage::Ended => "Game over".to_string(),
|
||||
SerStage::PreGame => "Waiting for opponent…".to_string(),
|
||||
SerStage::InGame => match (is_my_turn, &vs.turn_stage) {
|
||||
(true, SerTurnStage::RollDice) => "Your turn — roll the dice".to_string(),
|
||||
(true, SerTurnStage::HoldOrGoChoice) => "Hold or Go?".to_string(),
|
||||
(true, SerTurnStage::Move) => "Select move 1 of 2".to_string(),
|
||||
(true, _) => "Your turn".to_string(),
|
||||
(false, _) => "Opponent's turn".to_string(),
|
||||
},
|
||||
};
|
||||
|
||||
let dice = vs.dice;
|
||||
let show_dice = dice != (0, 0);
|
||||
|
||||
|
|
@ -122,19 +107,34 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
// ── Jan split: viewer_jans / opponent_jans ─────────────────────────────────
|
||||
let (my_jans, opp_jans) = split_jans(&vs.dice_jans, is_my_turn);
|
||||
|
||||
// ── Scores: index = mp_player_id ──────────────────────────────────────────
|
||||
// ── Scores ─────────────────────────────────────────────────────────────────
|
||||
let my_score = vs.scores[player_id as usize].clone();
|
||||
let opp_score = vs.scores[1 - player_id as usize].clone();
|
||||
|
||||
// ── Capture for closures ───────────────────────────────────────────────────
|
||||
let stage = vs.stage.clone();
|
||||
let turn_stage = vs.turn_stage.clone();
|
||||
let room_id = state.room_id.clone();
|
||||
|
||||
view! {
|
||||
<div class="game-container">
|
||||
// ── Top bar ──────────────────────────────────────────────────────
|
||||
<div class="top-bar">
|
||||
<span>Room: {state.room_id}</span>
|
||||
<span>{move || t_string!(i18n, room_label, id = room_id.as_str())}</span>
|
||||
<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>
|
||||
<a class="quit-link" href="#" on:click=move |e| {
|
||||
e.prevent_default();
|
||||
cmd_tx_quit.unbounded_send(NetCommand::Disconnect).ok();
|
||||
}>Quit</a>
|
||||
}>{t!(i18n, quit)}</a>
|
||||
</div>
|
||||
|
||||
// ── Opponent score (above board) ─────────────────────────────────
|
||||
|
|
@ -143,11 +143,18 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
// ── Status ───────────────────────────────────────────────────────
|
||||
<div class="status-bar">
|
||||
<span>{move || {
|
||||
let n = staged_moves.get().len();
|
||||
if is_move_stage {
|
||||
let n = staged_moves.get().len();
|
||||
format!("Select move {} of 2", n + 1)
|
||||
t_string!(i18n, select_move, n = n + 1)
|
||||
} else {
|
||||
status.clone()
|
||||
String::from(match (&stage, is_my_turn, &turn_stage) {
|
||||
(SerStage::Ended, _, _) => t_string!(i18n, game_over),
|
||||
(SerStage::PreGame, _, _) => t_string!(i18n, waiting_for_opponent),
|
||||
(SerStage::InGame, true, SerTurnStage::RollDice) => t_string!(i18n, your_turn_roll),
|
||||
(SerStage::InGame, true, SerTurnStage::HoldOrGoChoice) => t_string!(i18n, hold_or_go),
|
||||
(SerStage::InGame, true, _) => t_string!(i18n, your_turn),
|
||||
(SerStage::InGame, false, _) => t_string!(i18n, opponent_turn),
|
||||
})
|
||||
}
|
||||
}}</span>
|
||||
</div>
|
||||
|
|
@ -171,7 +178,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
// ── Player action bar (bottom) ───────────────────────────────────
|
||||
{is_my_turn.then(|| view! {
|
||||
<div class="dice-bar dice-bar-player">
|
||||
// Dice (reactive greying as moves are staged)
|
||||
{move || {
|
||||
let (d0, d1) = if is_move_stage {
|
||||
matched_dice_used(&staged_moves.get(), dice)
|
||||
|
|
@ -183,19 +189,16 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
<Die value=dice.1 used=d1 />
|
||||
}
|
||||
}}
|
||||
// Roll button (shown next to the dice during RollDice stage)
|
||||
{show_roll.then(|| view! {
|
||||
<button class="btn btn-primary" on:click=move |_| {
|
||||
cmd_tx_roll.unbounded_send(NetCommand::Action(PlayerAction::Roll)).ok();
|
||||
}>"Roll dice"</button>
|
||||
}>{t!(i18n, roll_dice)}</button>
|
||||
})}
|
||||
// Go button (HoldOrGoChoice)
|
||||
{show_hold_go.then(|| view! {
|
||||
<button class="btn btn-primary" on:click=move |_| {
|
||||
cmd_tx_go.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
|
||||
}>"Go"</button>
|
||||
}>{t!(i18n, go)}</button>
|
||||
})}
|
||||
// Empty move button
|
||||
{is_move_stage.then(|| view! {
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
|
|
@ -204,7 +207,7 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
selected_origin.set(None);
|
||||
staged_moves.update(|v| v.push((0, 0)));
|
||||
}
|
||||
>"Empty move"</button>
|
||||
>{t!(i18n, empty_move)}</button>
|
||||
})}
|
||||
</div>
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -2,9 +2,11 @@ use futures::channel::mpsc::UnboundedSender;
|
|||
use leptos::prelude::*;
|
||||
|
||||
use crate::app::NetCommand;
|
||||
use crate::i18n::*;
|
||||
|
||||
#[component]
|
||||
pub fn LoginScreen(error: Option<String>) -> impl IntoView {
|
||||
let i18n = use_i18n();
|
||||
let (room_name, set_room_name) = signal(String::new());
|
||||
|
||||
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
|
||||
|
|
@ -15,13 +17,24 @@ pub fn LoginScreen(error: Option<String>) -> impl IntoView {
|
|||
|
||||
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>
|
||||
|
||||
<h1>"Trictrac"</h1>
|
||||
|
||||
{error.map(|err| view! { <p class="error-msg">{err}</p> })}
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Room name"
|
||||
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))
|
||||
/>
|
||||
|
|
@ -35,7 +48,7 @@ pub fn LoginScreen(error: Option<String>) -> impl IntoView {
|
|||
.ok();
|
||||
}
|
||||
>
|
||||
"Create Room"
|
||||
{t!(i18n, create_room)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
|
|
@ -47,7 +60,7 @@ pub fn LoginScreen(error: Option<String>) -> impl IntoView {
|
|||
.ok();
|
||||
}
|
||||
>
|
||||
"Join Room"
|
||||
{t!(i18n, join_room)}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,25 @@
|
|||
use leptos::prelude::*;
|
||||
use trictrac_store::{CheckerMove, Jan};
|
||||
|
||||
use crate::i18n::*;
|
||||
use crate::trictrac::types::{JanEntry, PlayerScore};
|
||||
|
||||
fn jan_label(jan: &Jan) -> &'static str {
|
||||
fn jan_label(jan: &Jan) -> String {
|
||||
let i18n = use_i18n();
|
||||
match jan {
|
||||
Jan::FilledQuarter => "Remplissage",
|
||||
Jan::TrueHitSmallJan => "Battage à vrai (petit jan)",
|
||||
Jan::TrueHitBigJan => "Battage à vrai (grand jan)",
|
||||
Jan::TrueHitOpponentCorner => "Battage coin adverse",
|
||||
Jan::FirstPlayerToExit => "Premier sorti",
|
||||
Jan::SixTables => "Six tables",
|
||||
Jan::TwoTables => "Deux tables",
|
||||
Jan::Mezeas => "Mezeas",
|
||||
Jan::FalseHitSmallJan => "Battage à faux (petit jan)",
|
||||
Jan::FalseHitBigJan => "Battage à faux (grand jan)",
|
||||
Jan::ContreTwoTables => "Contre deux tables",
|
||||
Jan::ContreMezeas => "Contre mezeas",
|
||||
Jan::HelplessMan => "Dame impuissante",
|
||||
Jan::FilledQuarter => t_string!(i18n, jan_filled_quarter).to_owned(),
|
||||
Jan::TrueHitSmallJan => t_string!(i18n, jan_true_hit_small).to_owned(),
|
||||
Jan::TrueHitBigJan => t_string!(i18n, jan_true_hit_big).to_owned(),
|
||||
Jan::TrueHitOpponentCorner => t_string!(i18n, jan_true_hit_corner).to_owned(),
|
||||
Jan::FirstPlayerToExit => t_string!(i18n, jan_first_exit).to_owned(),
|
||||
Jan::SixTables => t_string!(i18n, jan_six_tables).to_owned(),
|
||||
Jan::TwoTables => t_string!(i18n, jan_two_tables).to_owned(),
|
||||
Jan::Mezeas => t_string!(i18n, jan_mezeas).to_owned(),
|
||||
Jan::FalseHitSmallJan => t_string!(i18n, jan_false_hit_small).to_owned(),
|
||||
Jan::FalseHitBigJan => t_string!(i18n, jan_false_hit_big).to_owned(),
|
||||
Jan::ContreTwoTables => t_string!(i18n, jan_contre_two).to_owned(),
|
||||
Jan::ContreMezeas => t_string!(i18n, jan_contre_mezeas).to_owned(),
|
||||
Jan::HelplessMan => t_string!(i18n, jan_helpless_man).to_owned(),
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -36,13 +38,18 @@ fn format_move_pair(m1: CheckerMove, m2: CheckerMove) -> String {
|
|||
}
|
||||
|
||||
fn jan_row(idx: usize, entry: JanEntry, expanded: RwSignal<Option<usize>>) -> impl IntoView {
|
||||
let i18n = use_i18n();
|
||||
let row_class = if entry.total >= 0 {
|
||||
"jan-row jan-expandable jan-positive"
|
||||
} else {
|
||||
"jan-row jan-expandable jan-negative"
|
||||
};
|
||||
let label = jan_label(&entry.jan);
|
||||
let double_tag = if entry.is_double { "double" } else { "simple" };
|
||||
let double_tag = if entry.is_double {
|
||||
t_string!(i18n, jan_double).to_owned()
|
||||
} else {
|
||||
t_string!(i18n, jan_simple).to_owned()
|
||||
};
|
||||
let ways_tag = format!("×{}", entry.ways);
|
||||
let pts_str = if entry.total >= 0 {
|
||||
format!("+{}", entry.total)
|
||||
|
|
@ -84,12 +91,10 @@ fn jan_row(idx: usize, entry: JanEntry, expanded: RwSignal<Option<usize>>) -> im
|
|||
}
|
||||
}
|
||||
|
||||
/// One player's score panel: name, progress bars (points & holes), bredouille indicator,
|
||||
/// and the list of jans scored by this player in the last roll.
|
||||
/// `jans` should already be filtered and sign-corrected for this player's perspective.
|
||||
#[component]
|
||||
pub fn PlayerScorePanel(score: PlayerScore, jans: Vec<JanEntry>, is_you: bool) -> impl IntoView {
|
||||
let label = if is_you { " (vous)" } else { "" };
|
||||
let i18n = use_i18n();
|
||||
|
||||
let points_pct = format!("{}%", (score.points as u32 * 100 / 12).min(100));
|
||||
let holes_pct = format!("{}%", (score.holes as u32 * 100 / 12).min(100));
|
||||
let points_val = format!("{}/12", score.points);
|
||||
|
|
@ -106,21 +111,24 @@ pub fn PlayerScorePanel(score: PlayerScore, jans: Vec<JanEntry>, is_you: bool) -
|
|||
view! {
|
||||
<div class="player-score-panel">
|
||||
<div class="player-score-header">
|
||||
<span class="player-name">{score.name}{label}</span>
|
||||
<span class="player-name">
|
||||
{score.name}
|
||||
{is_you.then(|| t!(i18n, you_suffix))}
|
||||
</span>
|
||||
</div>
|
||||
<div class="score-bars">
|
||||
<div class="score-bar-row">
|
||||
<span class="score-bar-label">"Points"</span>
|
||||
<span class="score-bar-label">{t!(i18n, points_label)}</span>
|
||||
<div class="score-bar">
|
||||
<div class="score-bar-fill score-bar-points" style=format!("width:{points_pct}")></div>
|
||||
</div>
|
||||
<span class="score-bar-value">{points_val}</span>
|
||||
{can_bredouille.then(|| view! {
|
||||
<span class="bredouille-badge" title="Peut faire bredouille">"B"</span>
|
||||
<span class="bredouille-badge" title=move || t_string!(i18n, bredouille_title).to_owned()>"B"</span>
|
||||
})}
|
||||
</div>
|
||||
<div class="score-bar-row">
|
||||
<span class="score-bar-label">"Trous"</span>
|
||||
<span class="score-bar-label">{t!(i18n, holes_label)}</span>
|
||||
<div class="score-bar">
|
||||
<div class="score-bar-fill score-bar-holes" style=format!("width:{holes_pct}")></div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
leptos_i18n::load_locales!();
|
||||
|
||||
mod app;
|
||||
mod components;
|
||||
mod trictrac;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue