feat(client_web): i18n

client_web/Cargo.toml

@@ -3,7 +3,12 @@ name = "client_web"
 version = "0.1.0"
 edition = "2021"
 
+[package.metadata.leptos-i18n]
+default = "en"
+locales = ["en", "fr"]
+
 [dependencies]
+leptos_i18n = { version = "0.5", features = ["csr", "interpolate_display"] }
 trictrac-store  = { path = "../store" }
 backbone-lib    = { path = "../../forks/multiplayer/backbone-lib" }
 leptos          = { version = "0.7", features = ["csr"] }

client_web/assets/style.css

@@ -56,6 +56,35 @@ input[type="text"] {
     max-width: 900px;
 }
 
+/* ── Language switcher ──────────────────────────────────────────────── */
+.lang-switcher {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.lang-switcher button {
+    font-size: 0.75rem;
+    padding: 0.15rem 0.4rem;
+    border: 1px solid rgba(0,0,0,0.3);
+    border-radius: 3px;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    opacity: 0.6;
+}
+
+.lang-switcher button.lang-active {
+    opacity: 1;
+    font-weight: bold;
+    background: rgba(0,0,0,0.12);
+}
+
+.login-container .lang-switcher {
+    justify-content: flex-end;
+    margin-bottom: 1rem;
+}
+
+/* ── Top bar ─────────────────────────────────────────────────────────── */
 .top-bar {
     display: flex;
     justify-content: space-between;

client_web/locales/en.json

@@ -0,0 +1,37 @@
+{
+  "room_name_placeholder": "Room name",
+  "create_room": "Create Room",
+  "join_room": "Join Room",
+  "connecting": "Connecting…",
+  "game_over": "Game over",
+  "waiting_for_opponent": "Waiting for opponent…",
+  "your_turn_roll": "Your turn — roll the dice",
+  "hold_or_go": "Hold or Go?",
+  "select_move": "Select move {{ n }} of 2",
+  "your_turn": "Your turn",
+  "opponent_turn": "Opponent's turn",
+  "room_label": "Room: {{ id }}",
+  "quit": "Quit",
+  "roll_dice": "Roll dice",
+  "go": "Go",
+  "empty_move": "Empty move",
+  "you_suffix": " (you)",
+  "points_label": "Points",
+  "holes_label": "Holes",
+  "bredouille_title": "Can bredouille",
+  "jan_double": "double",
+  "jan_simple": "simple",
+  "jan_filled_quarter": "Quarter filled",
+  "jan_true_hit_small": "True hit (small jan)",
+  "jan_true_hit_big": "True hit (big jan)",
+  "jan_true_hit_corner": "True hit (opp. corner)",
+  "jan_first_exit": "First to exit",
+  "jan_six_tables": "Six tables",
+  "jan_two_tables": "Two tables",
+  "jan_mezeas": "Mezeas",
+  "jan_false_hit_small": "False hit (small jan)",
+  "jan_false_hit_big": "False hit (big jan)",
+  "jan_contre_two": "Contre two tables",
+  "jan_contre_mezeas": "Contre mezeas",
+  "jan_helpless_man": "Helpless man"
+}

client_web/locales/fr.json

@@ -0,0 +1,37 @@
+{
+  "room_name_placeholder": "Nom de la salle",
+  "create_room": "Créer une salle",
+  "join_room": "Rejoindre",
+  "connecting": "Connexion en cours…",
+  "game_over": "Partie terminée",
+  "waiting_for_opponent": "En attente de l'adversaire…",
+  "your_turn_roll": "Votre tour — lancez les dés",
+  "hold_or_go": "Tenir ou aller ?",
+  "select_move": "Sélectionner le coup {{ n }} sur 2",
+  "your_turn": "Votre tour",
+  "opponent_turn": "Tour de l'adversaire",
+  "room_label": "Salle : {{ id }}",
+  "quit": "Quitter",
+  "roll_dice": "Lancer les dés",
+  "go": "Aller",
+  "empty_move": "Coup vide",
+  "you_suffix": " (vous)",
+  "points_label": "Points",
+  "holes_label": "Trous",
+  "bredouille_title": "Peut faire bredouille",
+  "jan_double": "double",
+  "jan_simple": "simple",
+  "jan_filled_quarter": "Remplissage",
+  "jan_true_hit_small": "Battage à vrai (petit jan)",
+  "jan_true_hit_big": "Battage à vrai (grand jan)",
+  "jan_true_hit_corner": "Battage coin adverse",
+  "jan_first_exit": "Premier sorti",
+  "jan_six_tables": "Six tables",
+  "jan_two_tables": "Deux tables",
+  "jan_mezeas": "Mezeas",
+  "jan_false_hit_small": "Battage à faux (petit jan)",
+  "jan_false_hit_big": "Battage à faux (grand jan)",
+  "jan_contre_two": "Contre deux tables",
+  "jan_contre_mezeas": "Contre mezeas",
+  "jan_helpless_man": "Dame impuissante"
+}

client_web/src/app.rs

@@ -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>
     }
 }

client_web/src/components/connecting_screen.rs

@@ -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> }
 }

client_web/src/components/game_screen.rs

@@ -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>
             })}

client_web/src/components/login_screen.rs

@@ -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>
     }

client_web/src/components/score_panel.rs

@@ -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>

client_web/src/main.rs

@@ -1,3 +1,5 @@
+leptos_i18n::load_locales!();
+
 mod app;
 mod components;
 mod trictrac;