feat: client_web ui

client_web/src/components/board.rs

@@ -0,0 +1,93 @@
+use futures::channel::mpsc::UnboundedSender;
+use leptos::prelude::*;
+
+use crate::app::NetCommand;
+use crate::trictrac::types::{PlayerAction, SerTurnStage, ViewState};
+
+/// Field numbers in visual display order (left-to-right for each quarter).
+const TOP_LEFT:  [u8; 6] = [13, 14, 15, 16, 17, 18];
+const TOP_RIGHT: [u8; 6] = [19, 20, 21, 22, 23, 24];
+const BOT_LEFT:  [u8; 6] = [12, 11, 10,  9,  8,  7];
+const BOT_RIGHT: [u8; 6] = [ 6,  5,  4,  3,  2,  1];
+
+#[component]
+pub fn Board(view_state: ViewState, player_id: u16) -> impl IntoView {
+    let selected: RwSignal<Option<u8>> = RwSignal::new(None);
+    let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
+        .expect("UnboundedSender<NetCommand> not found in context");
+
+    let board = view_state.board;
+    let is_move_stage = view_state.active_mp_player == Some(player_id)
+        && view_state.turn_stage == SerTurnStage::Move;
+
+    // Build a Vec<AnyView> for a slice of field numbers.
+    // `fields_from` borrows `board`, `cmd_tx` and copies `selected`, `is_move_stage`, `player_id`.
+    let fields_from = |nums: &[u8]| -> Vec<AnyView> {
+        nums.iter().map(|&field_num| {
+            let value: i8 = board[(field_num - 1) as usize];
+            let count = value.unsigned_abs();
+            let checker_color = if value > 0 { "white" } else { "black" };
+            let is_my_checker = if player_id == 0 { value > 0 } else { value < 0 };
+            let cmd = cmd_tx.clone();
+
+            view! {
+                <div
+                    class=move || {
+                        let sel = selected.get();
+                        let mut cls = "field".to_string();
+                        let clickable = is_move_stage
+                            && (sel.is_some() || is_my_checker);
+                        if clickable { cls.push_str(" clickable"); }
+                        if sel == Some(field_num) { cls.push_str(" selected"); }
+                        if is_move_stage && sel.is_some() && sel != Some(field_num) {
+                            cls.push_str(" dest");
+                        }
+                        cls
+                    }
+                    on:click=move |_| {
+                        if !is_move_stage { return; }
+                        match selected.get() {
+                            Some(origin) if origin == field_num => selected.set(None),
+                            Some(origin) => {
+                                cmd.unbounded_send(NetCommand::Action(
+                                    PlayerAction::Move { from: origin, to: field_num },
+                                )).ok();
+                                selected.set(None);
+                            }
+                            None if is_my_checker => selected.set(Some(field_num)),
+                            None => {}
+                        }
+                    }
+                >
+                    <span class="field-num">{field_num}</span>
+                    {(count > 0).then(|| view! {
+                        <span class=format!("checkers {checker_color}")>{count}</span>
+                    })}
+                </div>
+            }
+            .into_any()
+        })
+        .collect()
+    };
+
+    let top_left  = fields_from(&TOP_LEFT);
+    let top_right = fields_from(&TOP_RIGHT);
+    let bot_left  = fields_from(&BOT_LEFT);
+    let bot_right = fields_from(&BOT_RIGHT);
+
+    view! {
+        <div class="board">
+            <div class="board-row top-row">
+                <div class="board-quarter">{top_left}</div>
+                <div class="board-bar"></div>
+                <div class="board-quarter">{top_right}</div>
+            </div>
+            <div class="board-center-bar"></div>
+            <div class="board-row bot-row">
+                <div class="board-quarter">{bot_left}</div>
+                <div class="board-bar"></div>
+                <div class="board-quarter">{bot_right}</div>
+            </div>
+        </div>
+    }
+}

client_web/src/components/game_screen.rs

@@ -1,25 +1,72 @@
+use futures::channel::mpsc::UnboundedSender;
 use leptos::prelude::*;
 
-use crate::app::GameUiState;
-use crate::trictrac::types::SerStage;
+use crate::app::{GameUiState, NetCommand};
+use crate::trictrac::types::{PlayerAction, SerStage, SerTurnStage};
+
+use super::board::Board;
+use super::score_panel::ScorePanel;
 
 #[component]
 pub fn GameScreen(state: GameUiState) -> impl IntoView {
-    let status = match state.view_state.stage {
-        SerStage::Ended => "Game over",
-        SerStage::PreGame => "Waiting for players…",
-        SerStage::InGame => match state.view_state.active_mp_player {
-            Some(id) if id == state.player_id => "Your turn",
-            Some(_) => "Opponent's turn",
-            None => "…",
+    let vs = state.view_state.clone();
+    let player_id = state.player_id;
+    let is_my_turn = vs.active_mp_player == Some(player_id);
+
+    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) => "Your turn — move a checker".to_string(),
+            (true, _) => "Your turn".to_string(),
+            (false, _) => "Opponent's turn".to_string(),
         },
     };
 
+    let dice_text = if vs.dice != (0, 0) {
+        format!("Dice: {} & {}", vs.dice.0, vs.dice.1)
+    } else {
+        String::new()
+    };
+
+    let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
+        .expect("UnboundedSender<NetCommand> not found in context");
+    let cmd_tx2 = cmd_tx.clone();
+
+    let show_roll = is_my_turn && vs.turn_stage == SerTurnStage::RollDice;
+    let show_hold_go = is_my_turn && vs.turn_stage == SerTurnStage::HoldOrGoChoice;
+
     view! {
         <div class="game-container">
-            <p class="status-bar">{status}</p>
-            // Board and score panel will be added in a subsequent step.
-            <p>"Board placeholder"</p>
+            <ScorePanel scores=vs.scores.clone() player_id=player_id />
+            <div class="status-bar">
+                <span>{status}</span>
+                {(!dice_text.is_empty()).then(|| view! { <span class="dice">{dice_text}</span> })}
+            </div>
+            <div class="action-bar">
+                {show_roll.then(|| view! {
+                    <button class="btn btn-primary" on:click=move |_| {
+                        cmd_tx.unbounded_send(NetCommand::Action(PlayerAction::Roll)).ok();
+                    }>"Roll dice"</button>
+                })}
+                {show_hold_go.then(|| view! {
+                    <button class="btn btn-secondary" on:click=move |_| {
+                        cmd_tx2.unbounded_send(NetCommand::Action(PlayerAction::Mark)).ok();
+                    }>"Hold"</button>
+                })}
+                {show_hold_go.then(|| {
+                    let cmd_tx3 = use_context::<UnboundedSender<NetCommand>>()
+                        .expect("UnboundedSender<NetCommand> not found in context");
+                    view! {
+                        <button class="btn btn-primary" on:click=move |_| {
+                            cmd_tx3.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
+                        }>"Go"</button>
+                    }
+                })}
+            </div>
+            <Board view_state=vs player_id=player_id />
         </div>
     }
 }

client_web/src/components/mod.rs

@@ -1,6 +1,8 @@
+mod board;
 mod connecting_screen;
 mod game_screen;
 mod login_screen;
+mod score_panel;
 
 pub use connecting_screen::ConnectingScreen;
 pub use game_screen::GameScreen;

client_web/src/components/score_panel.rs

@@ -0,0 +1,25 @@
+use leptos::prelude::*;
+
+use crate::trictrac::types::PlayerScore;
+
+#[component]
+pub fn ScorePanel(scores: [PlayerScore; 2], player_id: u16) -> impl IntoView {
+    let rows: Vec<_> = scores
+        .into_iter()
+        .enumerate()
+        .map(|(i, score)| {
+            let label = if i as u16 == player_id { " (you)" } else { "" };
+            view! {
+                <div class="score-row">
+                    <span class="score-name">{score.name}{label}</span>
+                    <span class="score-points">"Points: "{score.points}</span>
+                    <span class="score-holes">"Holes: "{score.holes}</span>
+                </div>
+            }
+        })
+        .collect();
+
+    view! {
+        <div class="score-panel">{rows}</div>
+    }
+}