2026-03-25 16:44:37 +01:00
|
|
|
use futures::channel::mpsc::UnboundedSender;
|
2026-03-25 16:18:17 +01:00
|
|
|
use leptos::prelude::*;
|
2026-03-28 17:17:01 +01:00
|
|
|
use trictrac_store::CheckerMove;
|
2026-03-25 16:18:17 +01:00
|
|
|
|
2026-03-25 16:44:37 +01:00
|
|
|
use crate::app::{GameUiState, NetCommand};
|
2026-03-29 17:15:22 +02:00
|
|
|
use crate::i18n::*;
|
2026-03-27 16:29:53 +01:00
|
|
|
use crate::trictrac::types::{JanEntry, PlayerAction, SerStage, SerTurnStage};
|
2026-03-25 16:44:37 +01:00
|
|
|
|
|
|
|
|
use super::board::Board;
|
2026-03-27 11:43:21 +01:00
|
|
|
use super::die::Die;
|
2026-03-28 17:17:01 +01:00
|
|
|
use super::score_panel::PlayerScorePanel;
|
2026-03-25 16:18:17 +01:00
|
|
|
|
2026-03-26 21:13:24 +01:00
|
|
|
#[allow(dead_code)]
|
|
|
|
|
/// Returns (d0_used, d1_used) by matching each staged move's distance to a 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 {
|
2026-03-27 11:43:21 +01:00
|
|
|
let dist = if from < to {
|
|
|
|
|
to.saturating_sub(from)
|
|
|
|
|
} else {
|
|
|
|
|
from.saturating_sub(to)
|
|
|
|
|
};
|
2026-03-26 21:13:24 +01:00
|
|
|
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)
|
|
|
|
|
}
|
|
|
|
|
|
2026-03-28 17:17:01 +01:00
|
|
|
/// Split `dice_jans` into (viewer_jans, opponent_jans).
|
|
|
|
|
fn split_jans(
|
|
|
|
|
dice_jans: &[JanEntry],
|
|
|
|
|
viewer_is_active: bool,
|
|
|
|
|
) -> (Vec<JanEntry>, Vec<JanEntry>) {
|
|
|
|
|
let mut mine = Vec::new();
|
|
|
|
|
let mut theirs = Vec::new();
|
|
|
|
|
for e in dice_jans {
|
|
|
|
|
if viewer_is_active {
|
|
|
|
|
if e.total >= 0 {
|
|
|
|
|
mine.push(e.clone());
|
|
|
|
|
} else {
|
|
|
|
|
theirs.push(JanEntry { total: -e.total, points_per: -e.points_per, ..e.clone() });
|
|
|
|
|
}
|
2026-03-29 17:15:22 +02:00
|
|
|
} else if e.total >= 0 {
|
|
|
|
|
theirs.push(e.clone());
|
2026-03-28 16:37:05 +01:00
|
|
|
} else {
|
2026-03-29 17:15:22 +02:00
|
|
|
mine.push(JanEntry { total: -e.total, points_per: -e.points_per, ..e.clone() });
|
2026-03-28 17:17:01 +01:00
|
|
|
}
|
2026-03-27 16:29:53 +01:00
|
|
|
}
|
2026-03-28 17:17:01 +01:00
|
|
|
(mine, theirs)
|
2026-03-27 16:29:53 +01:00
|
|
|
}
|
|
|
|
|
|
2026-03-25 16:18:17 +01:00
|
|
|
#[component]
|
|
|
|
|
pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
2026-03-29 17:15:22 +02:00
|
|
|
let i18n = use_i18n();
|
|
|
|
|
|
2026-03-25 16:44:37 +01:00
|
|
|
let vs = state.view_state.clone();
|
|
|
|
|
let player_id = state.player_id;
|
|
|
|
|
let is_my_turn = vs.active_mp_player == Some(player_id);
|
2026-03-26 21:13:24 +01:00
|
|
|
let is_move_stage = is_my_turn
|
2026-03-28 16:37:05 +01:00
|
|
|
&& matches!(
|
|
|
|
|
vs.turn_stage,
|
|
|
|
|
SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
|
|
|
|
|
);
|
2026-03-25 16:44:37 +01:00
|
|
|
|
2026-03-26 21:13:24 +01:00
|
|
|
// ── Staged move state ──────────────────────────────────────────────────────
|
|
|
|
|
let selected_origin: RwSignal<Option<u8>> = RwSignal::new(None);
|
|
|
|
|
let staged_moves: RwSignal<Vec<(u8, u8)>> = RwSignal::new(Vec::new());
|
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
let dice = vs.dice;
|
2026-03-27 11:43:21 +01:00
|
|
|
let show_dice = dice != (0, 0);
|
2026-03-25 16:44:37 +01:00
|
|
|
|
2026-03-27 11:43:21 +01:00
|
|
|
// ── Button senders ─────────────────────────────────────────────────────────
|
|
|
|
|
let cmd_tx_roll = cmd_tx.clone();
|
2026-03-28 16:37:05 +01:00
|
|
|
let cmd_tx_go = cmd_tx.clone();
|
2026-03-26 21:13:24 +01:00
|
|
|
let cmd_tx_quit = cmd_tx.clone();
|
2026-03-28 16:37:05 +01:00
|
|
|
let show_roll = is_my_turn && vs.turn_stage == SerTurnStage::RollDice;
|
|
|
|
|
let show_hold_go = is_my_turn && vs.turn_stage == SerTurnStage::HoldOrGoChoice;
|
2026-03-25 16:44:37 +01:00
|
|
|
|
2026-03-28 17:17:01 +01:00
|
|
|
// ── Jan split: viewer_jans / opponent_jans ─────────────────────────────────
|
|
|
|
|
let (my_jans, opp_jans) = split_jans(&vs.dice_jans, is_my_turn);
|
|
|
|
|
|
2026-03-29 17:15:22 +02:00
|
|
|
// ── Scores ─────────────────────────────────────────────────────────────────
|
2026-03-28 17:17:01 +01:00
|
|
|
let my_score = vs.scores[player_id as usize].clone();
|
|
|
|
|
let opp_score = vs.scores[1 - player_id as usize].clone();
|
|
|
|
|
|
2026-03-29 17:15:22 +02:00
|
|
|
// ── Capture for closures ───────────────────────────────────────────────────
|
|
|
|
|
let stage = vs.stage.clone();
|
|
|
|
|
let turn_stage = vs.turn_stage.clone();
|
|
|
|
|
let room_id = state.room_id.clone();
|
|
|
|
|
|
2026-03-25 16:18:17 +01:00
|
|
|
view! {
|
|
|
|
|
<div class="game-container">
|
2026-03-27 11:43:21 +01:00
|
|
|
// ── Top bar ──────────────────────────────────────────────────────
|
2026-03-26 21:13:24 +01:00
|
|
|
<div class="top-bar">
|
2026-03-29 17:15:22 +02:00
|
|
|
<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>
|
2026-03-26 21:13:24 +01:00
|
|
|
<a class="quit-link" href="#" on:click=move |e| {
|
|
|
|
|
e.prevent_default();
|
|
|
|
|
cmd_tx_quit.unbounded_send(NetCommand::Disconnect).ok();
|
2026-03-29 17:15:22 +02:00
|
|
|
}>{t!(i18n, quit)}</a>
|
2026-03-26 21:13:24 +01:00
|
|
|
</div>
|
2026-03-27 11:43:21 +01:00
|
|
|
|
2026-03-28 17:17:01 +01:00
|
|
|
// ── Opponent score (above board) ─────────────────────────────────
|
|
|
|
|
<PlayerScorePanel score=opp_score jans=opp_jans is_you=false />
|
2026-03-27 11:43:21 +01:00
|
|
|
|
|
|
|
|
// ── Status ───────────────────────────────────────────────────────
|
2026-03-25 16:44:37 +01:00
|
|
|
<div class="status-bar">
|
2026-03-26 21:13:24 +01:00
|
|
|
<span>{move || {
|
2026-03-29 17:15:22 +02:00
|
|
|
let n = staged_moves.get().len();
|
2026-03-26 21:13:24 +01:00
|
|
|
if is_move_stage {
|
2026-03-29 17:15:22 +02:00
|
|
|
t_string!(i18n, select_move, n = n + 1)
|
2026-03-26 21:13:24 +01:00
|
|
|
} else {
|
2026-03-29 17:15:22 +02:00
|
|
|
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),
|
|
|
|
|
})
|
2026-03-26 21:13:24 +01:00
|
|
|
}
|
|
|
|
|
}}</span>
|
2026-03-25 16:44:37 +01:00
|
|
|
</div>
|
2026-03-27 11:43:21 +01:00
|
|
|
|
|
|
|
|
// ── Opponent dice (top) ──────────────────────────────────────────
|
|
|
|
|
{(!is_my_turn && show_dice).then(|| view! {
|
|
|
|
|
<div class="dice-bar dice-bar-opponent">
|
|
|
|
|
<Die value=dice.0 used=true />
|
|
|
|
|
<Die value=dice.1 used=true />
|
|
|
|
|
</div>
|
|
|
|
|
})}
|
|
|
|
|
|
|
|
|
|
// ── Board ────────────────────────────────────────────────────────
|
2026-03-26 21:13:24 +01:00
|
|
|
<Board
|
|
|
|
|
view_state=vs
|
|
|
|
|
player_id=player_id
|
|
|
|
|
selected_origin=selected_origin
|
|
|
|
|
staged_moves=staged_moves
|
|
|
|
|
/>
|
2026-03-27 11:43:21 +01:00
|
|
|
|
|
|
|
|
// ── Player action bar (bottom) ───────────────────────────────────
|
|
|
|
|
{is_my_turn.then(|| view! {
|
|
|
|
|
<div class="dice-bar dice-bar-player">
|
|
|
|
|
{move || {
|
|
|
|
|
let (d0, d1) = if is_move_stage {
|
|
|
|
|
matched_dice_used(&staged_moves.get(), dice)
|
|
|
|
|
} else {
|
|
|
|
|
(false, false)
|
|
|
|
|
};
|
|
|
|
|
view! {
|
|
|
|
|
<Die value=dice.0 used=d0 />
|
|
|
|
|
<Die value=dice.1 used=d1 />
|
|
|
|
|
}
|
|
|
|
|
}}
|
|
|
|
|
{show_roll.then(|| view! {
|
|
|
|
|
<button class="btn btn-primary" on:click=move |_| {
|
|
|
|
|
cmd_tx_roll.unbounded_send(NetCommand::Action(PlayerAction::Roll)).ok();
|
2026-03-29 17:15:22 +02:00
|
|
|
}>{t!(i18n, roll_dice)}</button>
|
2026-03-27 11:43:21 +01:00
|
|
|
})}
|
|
|
|
|
{show_hold_go.then(|| view! {
|
|
|
|
|
<button class="btn btn-primary" on:click=move |_| {
|
|
|
|
|
cmd_tx_go.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
|
2026-03-29 17:15:22 +02:00
|
|
|
}>{t!(i18n, go)}</button>
|
2026-03-27 11:43:21 +01:00
|
|
|
})}
|
|
|
|
|
{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)));
|
|
|
|
|
}
|
2026-03-29 17:15:22 +02:00
|
|
|
>{t!(i18n, empty_move)}</button>
|
2026-03-27 11:43:21 +01:00
|
|
|
})}
|
|
|
|
|
</div>
|
|
|
|
|
})}
|
2026-03-28 17:17:01 +01:00
|
|
|
|
|
|
|
|
// ── Player score (below board) ────────────────────────────────────
|
|
|
|
|
<PlayerScorePanel score=my_score jans=my_jans is_you=true />
|
2026-03-25 16:18:17 +01:00
|
|
|
</div>
|
|
|
|
|
}
|
|
|
|
|
}
|