feat(client_web): dice visual hints
This commit is contained in:
parent
8b108847af
commit
e10a6cc84c
7 changed files with 349 additions and 114 deletions
|
|
@ -1,8 +1,6 @@
|
|||
use futures::channel::mpsc::UnboundedSender;
|
||||
use leptos::prelude::*;
|
||||
|
||||
use crate::app::NetCommand;
|
||||
use crate::trictrac::types::{PlayerAction, SerTurnStage, ViewState};
|
||||
use crate::trictrac::types::{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];
|
||||
|
|
@ -10,59 +8,89 @@ 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");
|
||||
/// Returns the displayed board value for `field_num` after applying `staged_moves`.
|
||||
/// `is_white`: true when the local player's checkers are positive (host = white).
|
||||
fn displayed_value(
|
||||
base_board: [i8; 24],
|
||||
staged_moves: &[(u8, u8)],
|
||||
is_white: bool,
|
||||
field_num: u8,
|
||||
) -> i8 {
|
||||
let mut val = base_board[(field_num - 1) as usize];
|
||||
let delta: i8 = if is_white { 1 } else { -1 };
|
||||
for &(from, to) in staged_moves {
|
||||
if from == field_num { val -= delta; }
|
||||
if to == field_num { val += delta; }
|
||||
}
|
||||
val
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Board(
|
||||
view_state: ViewState,
|
||||
player_id: u16,
|
||||
/// Pending origin selection (first click of a move pair).
|
||||
selected_origin: RwSignal<Option<u8>>,
|
||||
/// Moves staged so far this turn (max 2). Each entry is (from, to), 0 = empty move.
|
||||
staged_moves: RwSignal<Vec<(u8, u8)>>,
|
||||
) -> impl IntoView {
|
||||
let board = view_state.board;
|
||||
let is_move_stage = view_state.active_mp_player == Some(player_id)
|
||||
&& view_state.turn_stage == SerTurnStage::Move;
|
||||
&& matches!(view_state.turn_stage, SerTurnStage::Move | SerTurnStage::HoldOrGoChoice);
|
||||
let is_white = player_id == 0;
|
||||
|
||||
// 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 moves = staged_moves.get();
|
||||
let val = displayed_value(board, &moves, is_white, field_num);
|
||||
let is_mine = if is_white { val > 0 } else { val < 0 };
|
||||
let can_stage = is_move_stage && moves.len() < 2;
|
||||
let sel = selected_origin.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 can_stage && (sel.is_some() || is_mine) {
|
||||
cls.push_str(" clickable");
|
||||
}
|
||||
if sel == Some(field_num) { cls.push_str(" selected"); }
|
||||
if is_move_stage && sel.is_some() && sel != Some(field_num) {
|
||||
if can_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);
|
||||
if staged_moves.get_untracked().len() >= 2 { return; }
|
||||
|
||||
let moves = staged_moves.get_untracked();
|
||||
let val = displayed_value(board, &moves, is_white, field_num);
|
||||
let is_mine = if is_white { val > 0 } else { val < 0 };
|
||||
|
||||
match selected_origin.get_untracked() {
|
||||
Some(origin) if origin == field_num => {
|
||||
selected_origin.set(None);
|
||||
}
|
||||
None if is_my_checker => selected.set(Some(field_num)),
|
||||
Some(origin) => {
|
||||
staged_moves.update(|v| v.push((origin, field_num)));
|
||||
selected_origin.set(None);
|
||||
}
|
||||
None if is_mine => selected_origin.set(Some(field_num)),
|
||||
None => {}
|
||||
}
|
||||
}
|
||||
>
|
||||
<span class="field-num">{field_num}</span>
|
||||
{(count > 0).then(|| view! {
|
||||
<span class=format!("checkers {checker_color}")>{count}</span>
|
||||
})}
|
||||
{move || {
|
||||
let moves = staged_moves.get();
|
||||
let val = displayed_value(board, &moves, is_white, field_num);
|
||||
let count = val.unsigned_abs();
|
||||
(count > 0).then(|| {
|
||||
let color = if val > 0 { "white" } else { "black" };
|
||||
view! { <span class=format!("checkers {color}")>{count}</span> }
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
}
|
||||
.into_any()
|
||||
|
|
@ -70,23 +98,18 @@ pub fn Board(view_state: ViewState, player_id: u16) -> impl IntoView {
|
|||
.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-quarter">{fields_from(&TOP_LEFT)}</div>
|
||||
<div class="board-bar"></div>
|
||||
<div class="board-quarter">{top_right}</div>
|
||||
<div class="board-quarter">{fields_from(&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-quarter">{fields_from(&BOT_LEFT)}</div>
|
||||
<div class="board-bar"></div>
|
||||
<div class="board-quarter">{bot_right}</div>
|
||||
<div class="board-quarter">{fields_from(&BOT_RIGHT)}</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
use futures::channel::mpsc::UnboundedSender;
|
||||
use leptos::prelude::*;
|
||||
use trictrac_store::{CheckerMove, Jan};
|
||||
|
||||
use crate::app::{GameUiState, NetCommand};
|
||||
use crate::trictrac::types::{PlayerAction, SerStage, SerTurnStage};
|
||||
|
|
@ -7,43 +8,141 @@ use crate::trictrac::types::{PlayerAction, SerStage, SerTurnStage};
|
|||
use super::board::Board;
|
||||
use super::score_panel::ScorePanel;
|
||||
|
||||
#[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;
|
||||
for &(from, to) in staged {
|
||||
let dist = to.saturating_sub(from); // 0 for empty/same-field moves
|
||||
if !d0 && dist == dice.0 {
|
||||
d0 = true;
|
||||
} else if !d1 && dist == dice.1 {
|
||||
d1 = true;
|
||||
} else if !d0 {
|
||||
d0 = true;
|
||||
} else {
|
||||
d1 = true;
|
||||
}
|
||||
}
|
||||
(d0, d1)
|
||||
}
|
||||
|
||||
fn jan_label(jan: &Jan) -> &'static str {
|
||||
match jan {
|
||||
Jan::FilledQuarter => "Rempli",
|
||||
Jan::TrueHitSmallJan => "Atteinte vraie (petit jan)",
|
||||
Jan::TrueHitBigJan => "Atteinte vraie (grand jan)",
|
||||
Jan::TrueHitOpponentCorner => "Atteinte coin adverse",
|
||||
Jan::FirstPlayerToExit => "Premier sorti",
|
||||
Jan::SixTables => "Six tables",
|
||||
Jan::TwoTables => "Deux tables",
|
||||
Jan::Mezeas => "Mezeas",
|
||||
Jan::FalseHitSmallJan => "Faux (petit jan)",
|
||||
Jan::FalseHitBigJan => "Faux (grand jan)",
|
||||
Jan::ContreTwoTables => "Contre deux tables",
|
||||
Jan::ContreMezeas => "Contre mezeas",
|
||||
Jan::HelplessMan => "Homme en route",
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
||||
let vs = state.view_state.clone();
|
||||
let player_id = state.player_id;
|
||||
let is_my_turn = vs.active_mp_player == Some(player_id);
|
||||
let is_move_stage = is_my_turn
|
||||
&& matches!(
|
||||
vs.turn_stage,
|
||||
SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
|
||||
);
|
||||
|
||||
// ── Staged move state ──────────────────────────────────────────────────────
|
||||
let selected_origin: RwSignal<Option<u8>> = RwSignal::new(None);
|
||||
let staged_moves: RwSignal<Vec<(u8, u8)>> = RwSignal::new(Vec::new());
|
||||
|
||||
// When both move slots are filled, send the action to the backend.
|
||||
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
|
||||
.expect("UnboundedSender<NetCommand> not found in context");
|
||||
let cmd_tx_effect = cmd_tx.clone();
|
||||
Effect::new(move |_| {
|
||||
let moves = staged_moves.get();
|
||||
if moves.len() == 2 {
|
||||
let to_cm = |&(from, to): &(u8, u8)| {
|
||||
CheckerMove::new(from as usize, to as usize).unwrap_or_default()
|
||||
};
|
||||
cmd_tx_effect
|
||||
.unbounded_send(NetCommand::Action(PlayerAction::Move(
|
||||
to_cm(&moves[0]),
|
||||
to_cm(&moves[1]),
|
||||
)))
|
||||
.ok();
|
||||
staged_moves.set(vec![]);
|
||||
selected_origin.set(None);
|
||||
}
|
||||
});
|
||||
|
||||
// ── 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) => "Your turn — move a checker".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_text = if vs.dice != (0, 0) {
|
||||
format!("Dice: {} & {}", vs.dice.0, vs.dice.1)
|
||||
} else {
|
||||
String::new()
|
||||
};
|
||||
let dice = vs.dice;
|
||||
|
||||
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
|
||||
.expect("UnboundedSender<NetCommand> not found in context");
|
||||
// ── Action bar buttons ─────────────────────────────────────────────────────
|
||||
let cmd_tx2 = cmd_tx.clone();
|
||||
|
||||
let cmd_tx_quit = 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">
|
||||
<div class="top-bar">
|
||||
<span>{state.room_id}</span>
|
||||
<a class="quit-link" href="#" on:click=move |e| {
|
||||
e.prevent_default();
|
||||
cmd_tx_quit.unbounded_send(NetCommand::Disconnect).ok();
|
||||
}>"Quit"</a>
|
||||
</div>
|
||||
<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> })}
|
||||
<span>{move || {
|
||||
if is_move_stage {
|
||||
let n = staged_moves.get().len();
|
||||
format!("Select move {} of 2", n + 1)
|
||||
} else {
|
||||
status.clone()
|
||||
}
|
||||
}}</span>
|
||||
{(dice != (0, 0)).then(|| view! {
|
||||
<span class="dice-label">"Dice: "</span>
|
||||
<span class={move || {
|
||||
let (d0, _) = if is_move_stage {
|
||||
matched_dice_used(&staged_moves.get(), dice)
|
||||
} else {
|
||||
(!is_my_turn || !is_move_stage, !is_my_turn || !is_move_stage)
|
||||
};
|
||||
if d0 { "dice dice-used" } else { "dice" }
|
||||
}}>{dice.0}</span>
|
||||
<span class="dice-sep">" & "</span>
|
||||
<span class={move || {
|
||||
let (_, d1) = if is_move_stage {
|
||||
matched_dice_used(&staged_moves.get(), dice)
|
||||
} else {
|
||||
(!is_my_turn || !is_move_stage, !is_my_turn || !is_move_stage)
|
||||
};
|
||||
if d1 { "dice dice-used" } else { "dice" }
|
||||
}}>{dice.1}</span>
|
||||
})}
|
||||
</div>
|
||||
<div class="action-bar">
|
||||
{show_roll.then(|| view! {
|
||||
|
|
@ -52,21 +151,45 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
}>"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>
|
||||
<button class="btn btn-primary" on:click=move |_| {
|
||||
cmd_tx2.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
|
||||
}>"Go"</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>
|
||||
}
|
||||
{is_move_stage.then(|| view! {
|
||||
<button
|
||||
class="btn btn-secondary"
|
||||
disabled=move || 2 <= staged_moves.get().len()
|
||||
on:click=move |_| {
|
||||
selected_origin.set(None);
|
||||
staged_moves.update(|v| v.push((0, 0)));
|
||||
}
|
||||
>"Empty move"</button>
|
||||
})}
|
||||
</div>
|
||||
<Board view_state=vs player_id=player_id />
|
||||
{(!vs.dice_jans.is_empty()).then(|| {
|
||||
let rows: Vec<_> = vs.dice_jans.iter().map(|(jan, pts)| {
|
||||
let label = jan_label(jan);
|
||||
let pts_str = if *pts >= 0 {
|
||||
format!("+{}", pts)
|
||||
} else {
|
||||
format!("{}", pts)
|
||||
};
|
||||
let row_class = if *pts >= 0 { "jan-row jan-positive" } else { "jan-row jan-negative" };
|
||||
view! {
|
||||
<div class=row_class>
|
||||
<span class="jan-label">{label}</span>
|
||||
<span class="jan-pts">{pts_str}</span>
|
||||
</div>
|
||||
}
|
||||
}).collect();
|
||||
view! { <div class="jan-panel">{rows}</div> }
|
||||
})}
|
||||
<Board
|
||||
view_state=vs
|
||||
player_id=player_id
|
||||
selected_origin=selected_origin
|
||||
staged_moves=staged_moves
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue