henri/trictrac
1
1
Fork 0
Code Issues 13 Pull requests Projects 1 Releases Packages Wiki Activity Actions

feat: add client_web (leptos impl. for 'multiplayer' project)

Browse source
This commit is contained in:
Henri Bourcereau 2026-03-25 16:18:17 +01:00
parent 0b06c62fd9
commit 6c94f00746
15 changed files with 1661 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

16
client_web/Cargo.toml Normal file
View file

@ -0,0 +1,16 @@
[package]
name = "client_web"
version = "0.1.0"
edition = "2021"
[dependencies]
trictrac-store = { path = "../store" }
backbone-lib = { path = "../../forks/multiplayer/backbone-lib" }
leptos = { version = "0.7", features = ["csr"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1"
futures = "0.3"
gloo-storage = "0.3"
[target.'cfg(target_arch = "wasm32")'.dependencies]
wasm-bindgen-futures = "0.4"

2
client_web/Trunk.toml Normal file
View file

@ -0,0 +1,2 @@
[serve]
port = 9092

9
client_web/assets/style.css Normal file
View file

@ -0,0 +1,9 @@
/* Trictrac web client — placeholder styles */
body {
font-family: sans-serif;
display: flex;
justify-content: center;
background: #f4f0e8;
margin: 0;
padding: 1rem;
}

11
client_web/index.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Trictrac</title>
<link data-trunk rel="rust" />
<link data-trunk rel="css" href="assets/style.css" />
</head>
<body></body>
</html>

247
client_web/src/app.rs Normal file
View file

@ -0,0 +1,247 @@
use futures::channel::mpsc;
use futures::{FutureExt, StreamExt};
use gloo_storage::{LocalStorage, Storage};
use leptos::prelude::*;
use leptos::task::spawn_local;
use serde::{Deserialize, Serialize};
use backbone_lib::session::{ConnectError, GameSession, RoomConfig, RoomRole, SessionEvent};
use backbone_lib::traits::ViewStateUpdate;
use crate::components::{ConnectingScreen, GameScreen, LoginScreen};
use crate::trictrac::backend::TrictracBackend;
use crate::trictrac::types::{GameDelta, PlayerAction, ViewState};
const RELAY_URL: &str = "ws://127.0.0.1:8080/ws";
const GAME_ID: &str = "trictrac";
const STORAGE_KEY: &str = "trictrac_session";
/// The state the UI needs to render the game screen.
#[derive(Clone, PartialEq)]
pub struct GameUiState {
pub view_state: ViewState,
/// 0 = host, 1 = guest
pub player_id: u16,
}
/// Which screen is currently shown.
#[derive(Clone, PartialEq)]
pub enum Screen {
Login { error: Option<String> },
Connecting,
Playing(GameUiState),
}
/// Commands sent from UI event handlers into the network task.
pub enum NetCommand {
CreateRoom { room: String },
JoinRoom { room: String },
Reconnect {
relay_url: String,
game_id: String,
room_id: String,
token: u64,
host_state: Option<Vec<u8>>,
},
Action(PlayerAction),
Disconnect,
}
/// Stored in localStorage to reconnect after a page refresh.
#[derive(Serialize, Deserialize)]
struct StoredSession {
relay_url: String,
game_id: String,
room_id: String,
token: u64,
#[serde(default)]
is_host: bool,
#[serde(default)]
view_state: Option<ViewState>,
}
fn save_session(session: &StoredSession) {
LocalStorage::set(STORAGE_KEY, session).ok();
}
fn load_session() -> Option<StoredSession> {
LocalStorage::get::<StoredSession>(STORAGE_KEY).ok()
}
fn clear_session() {
LocalStorage::delete(STORAGE_KEY);
}
#[component]
pub fn App() -> impl IntoView {
let stored = load_session();
let initial_screen = if stored.is_some() {
Screen::Connecting
} else {
Screen::Login { error: None }
};
let screen = RwSignal::new(initial_screen);
let (cmd_tx, mut cmd_rx) = mpsc::unbounded::<NetCommand>();
provide_context(cmd_tx.clone());
if let Some(s) = stored {
let host_state = s
.view_state
.as_ref()
.and_then(|vs| serde_json::to_vec(vs).ok());
cmd_tx
.unbounded_send(NetCommand::Reconnect {
relay_url: s.relay_url,
game_id: s.game_id,
room_id: s.room_id,
token: s.token,
host_state,
})
.ok();
}
spawn_local(async move {
loop {
// Wait for a connect/reconnect command.
let (config, is_reconnect) = loop {
match cmd_rx.next().await {
Some(NetCommand::CreateRoom { room }) => {
break (
RoomConfig {
relay_url: RELAY_URL.to_string(),
game_id: GAME_ID.to_string(),
room_id: room,
rule_variation: 0,
role: RoomRole::Create,
reconnect_token: None,
host_state: None,
},
false,
);
}
Some(NetCommand::JoinRoom { room }) => {
break (
RoomConfig {
relay_url: RELAY_URL.to_string(),
game_id: GAME_ID.to_string(),
room_id: room,
rule_variation: 0,
role: RoomRole::Join,
reconnect_token: None,
host_state: None,
},
false,
);
}
Some(NetCommand::Reconnect {
relay_url,
game_id,
room_id,
token,
host_state,
}) => {
break (
RoomConfig {
relay_url,
game_id,
room_id,
rule_variation: 0,
role: RoomRole::Join,
reconnect_token: Some(token),
host_state,
},
true,
);
}
_ => {} // Ignore game commands while disconnected.
}
};
screen.set(Screen::Connecting);
let room_id_for_storage = config.room_id.clone();
let mut session: GameSession<PlayerAction, GameDelta, ViewState> =
match GameSession::connect::<TrictracBackend>(config).await {
Ok(s) => s,
Err(ConnectError::WebSocket(e) | ConnectError::Handshake(e)) => {
if is_reconnect {
clear_session();
}
screen.set(Screen::Login { error: Some(e) });
continue;
}
};
if !session.is_host {
save_session(&StoredSession {
relay_url: RELAY_URL.to_string(),
game_id: GAME_ID.to_string(),
room_id: room_id_for_storage.clone(),
token: session.reconnect_token,
is_host: false,
view_state: None,
});
}
let is_host = session.is_host;
let player_id = session.player_id;
let reconnect_token = session.reconnect_token;
let mut vs = ViewState::default_with_names("Host", "Guest");
loop {
futures::select! {
cmd = cmd_rx.next().fuse() => match cmd {
Some(NetCommand::Action(action)) => {
session.send_action(action);
}
_ => {
clear_session();
session.disconnect();
screen.set(Screen::Login { error: None });
break;
}
},
event = session.next_event().fuse() => match event {
Some(SessionEvent::Update(u)) => {
match u {
ViewStateUpdate::Full(state) => vs = state,
ViewStateUpdate::Incremental(delta) => vs.apply_delta(&delta),
}
if is_host {
save_session(&StoredSession {
relay_url: RELAY_URL.to_string(),
game_id: GAME_ID.to_string(),
room_id: room_id_for_storage.clone(),
token: reconnect_token,
is_host: true,
view_state: Some(vs.clone()),
});
}
screen.set(Screen::Playing(GameUiState {
view_state: vs.clone(),
player_id,
}));
}
Some(SessionEvent::Disconnected(reason)) => {
screen.set(Screen::Login { error: reason });
break;
}
None => {
screen.set(Screen::Login { error: None });
break;
}
}
}
}
}
});
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(),
}}
}
}

6
client_web/src/components/connecting_screen.rs Normal file
View file

@ -0,0 +1,6 @@
use leptos::prelude::*;
#[component]
pub fn ConnectingScreen() -> impl IntoView {
view! { <p class="connecting">"Connecting…"</p> }
}

25
client_web/src/components/game_screen.rs Normal file
View file

@ -0,0 +1,25 @@
use leptos::prelude::*;
use crate::app::GameUiState;
use crate::trictrac::types::SerStage;
#[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 => "…",
},
};
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>
</div>
}
}

54
client_web/src/components/login_screen.rs Normal file
View file

@ -0,0 +1,54 @@
use futures::channel::mpsc::UnboundedSender;
use leptos::prelude::*;
use crate::app::NetCommand;
#[component]
pub fn LoginScreen(error: Option<String>) -> impl IntoView {
let (room_name, set_room_name) = signal(String::new());
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
.expect("UnboundedSender<NetCommand> not found in context");
let cmd_tx_create = cmd_tx.clone();
let cmd_tx_join = cmd_tx;
view! {
<div class="login-container">
<h1>"Trictrac"</h1>
{error.map(|err| view! { <p class="error-msg">{err}</p> })}
<input
type="text"
placeholder="Room name"
prop:value=move || room_name.get()
on:input=move |ev| set_room_name.set(event_target_value(&ev))
/>
<button
class="btn btn-primary"
disabled=move || room_name.get().is_empty()
on:click=move |_| {
cmd_tx_create
.unbounded_send(NetCommand::CreateRoom { room: room_name.get() })
.ok();
}
>
"Create Room"
</button>
<button
class="btn btn-secondary"
disabled=move || room_name.get().is_empty()
on:click=move |_| {
cmd_tx_join
.unbounded_send(NetCommand::JoinRoom { room: room_name.get() })
.ok();
}
>
"Join Room"
</button>
</div>
}
}

7
client_web/src/components/mod.rs Normal file
View file

@ -0,0 +1,7 @@
mod connecting_screen;
mod game_screen;
mod login_screen;
pub use connecting_screen::ConnectingScreen;
pub use game_screen::GameScreen;
pub use login_screen::LoginScreen;

10
client_web/src/main.rs Normal file
View file

@ -0,0 +1,10 @@
mod app;
mod components;
mod trictrac;
use app::App;
use leptos::prelude::*;
fn main() {
mount_to_body(|| view! { <App /> })
}

197
client_web/src/trictrac/backend.rs Normal file
View file

@ -0,0 +1,197 @@
use backbone_lib::traits::{BackEndArchitecture, BackendCommand};
use trictrac_store::{CheckerMove, DiceRoller, GameEvent, GameState, TurnStage};
use crate::trictrac::types::{GameDelta, PlayerAction, ViewState};
// Store PlayerId (u64) values used for the two players.
const HOST_PLAYER_ID: u64 = 1;
const GUEST_PLAYER_ID: u64 = 2;
pub struct TrictracBackend {
game: GameState,
dice_roller: DiceRoller,
commands: Vec<BackendCommand<GameDelta>>,
view_state: ViewState,
/// Arrival flags: have host (index 0) and guest (index 1) joined?
arrived: [bool; 2],
/// First move of the current pair, waiting for the second.
pending_first_move: Option<CheckerMove>,
}
impl TrictracBackend {
fn sync_view_state(&mut self) {
self.view_state =
ViewState::from_game_state(&self.game, HOST_PLAYER_ID, GUEST_PLAYER_ID);
}
fn broadcast_state(&mut self) {
self.sync_view_state();
let delta = GameDelta { state: self.view_state.clone() };
self.commands.push(BackendCommand::Delta(delta));
}
/// Roll dice using the store's DiceRoller and fire Roll + RollResult events.
fn do_roll(&mut self) {
let dice = self.dice_roller.roll();
let player_id = self.game.active_player_id;
let _ = self.game.consume(&GameEvent::Roll { player_id });
let _ = self.game.consume(&GameEvent::RollResult { player_id, dice });
// Drive automatic stages that require no player input.
self.drive_automatic_stages();
}
/// Advance through stages that can be resolved without player input
/// (MarkPoints, MarkAdvPoints).
fn drive_automatic_stages(&mut self) {
loop {
let player_id = self.game.active_player_id;
match self.game.turn_stage {
TurnStage::MarkPoints | TurnStage::MarkAdvPoints => {
let _ = self.game.consume(&GameEvent::Mark {
player_id,
points: self.game.dice_points.0.max(self.game.dice_points.1),
});
}
_ => break,
}
}
}
}
impl BackEndArchitecture<PlayerAction, GameDelta, ViewState> for TrictracBackend {
fn new(_rule_variation: u16) -> Self {
let mut game = GameState::new(false);
game.init_player("Host");
game.init_player("Guest");
let view_state =
ViewState::from_game_state(&game, HOST_PLAYER_ID, GUEST_PLAYER_ID);
TrictracBackend {
game,
dice_roller: DiceRoller::default(),
commands: Vec::new(),
view_state,
arrived: [false; 2],
pending_first_move: None,
}
}
fn from_bytes(_rule_variation: u16, bytes: &[u8]) -> Option<Self> {
let view_state: ViewState = serde_json::from_slice(bytes).ok()?;
// Reconstruct a fresh game; full state restore is not yet implemented.
let mut backend = Self::new(_rule_variation);
backend.view_state = view_state;
Some(backend)
}
fn player_arrival(&mut self, mp_player: u16) {
if mp_player > 1 {
self.commands.push(BackendCommand::KickPlayer { player: mp_player });
return;
}
self.arrived[mp_player as usize] = true;
// Cancel any reconnect timer for this player.
self.commands.push(BackendCommand::CancelTimer { timer_id: mp_player });
// Start the game once both players have arrived.
if self.arrived[0] && self.arrived[1] && self.game.stage == trictrac_store::Stage::PreGame
{
let _ = self.game.consume(&GameEvent::BeginGame { goes_first: HOST_PLAYER_ID });
self.commands.push(BackendCommand::ResetViewState);
} else {
self.broadcast_state();
}
}
fn player_departure(&mut self, mp_player: u16) {
if mp_player > 1 {
return;
}
self.arrived[mp_player as usize] = false;
// Give 60 seconds to reconnect before terminating the room.
self.commands.push(BackendCommand::SetTimer {
timer_id: mp_player,
duration: 60.0,
});
}
fn inform_rpc(&mut self, mp_player: u16, action: PlayerAction) {
if self.game.stage == trictrac_store::Stage::Ended {
return;
}
let store_id = if mp_player == 0 { HOST_PLAYER_ID } else { GUEST_PLAYER_ID };
// Only the active player may act (except during Chance-like waiting stages).
if self.game.active_player_id != store_id {
return;
}
match action {
PlayerAction::Roll => {
if self.game.turn_stage == TurnStage::RollDice {
self.do_roll();
}
}
PlayerAction::Move { from, to } => {
if self.game.turn_stage != TurnStage::Move {
return;
}
let Ok(cmove) = CheckerMove::new(from as usize, to as usize) else {
return;
};
if let Some(first) = self.pending_first_move.take() {
let event = GameEvent::Move {
player_id: store_id,
moves: (first, cmove),
};
if self.game.validate(&event) {
let _ = self.game.consume(&event);
self.drive_automatic_stages();
}
// Whether valid or not, clear pending so the player can retry.
} else {
self.pending_first_move = Some(cmove);
// No state broadcast yet — wait for the second move.
return;
}
}
PlayerAction::Go => {
if self.game.turn_stage == TurnStage::HoldOrGoChoice {
let _ = self.game.consume(&GameEvent::Go { player_id: store_id });
}
}
PlayerAction::Mark => {
if matches!(
self.game.turn_stage,
TurnStage::MarkPoints | TurnStage::MarkAdvPoints
) {
self.drive_automatic_stages();
}
}
}
self.broadcast_state();
}
fn timer_triggered(&mut self, timer_id: u16) {
match timer_id {
0 | 1 => {
// Reconnect grace period expired for host (0) or guest (1).
self.commands.push(BackendCommand::TerminateRoom);
}
_ => {}
}
}
fn get_view_state(&self) -> &ViewState {
&self.view_state
}
fn drain_commands(&mut self) -> Vec<BackendCommand<GameDelta>> {
std::mem::take(&mut self.commands)
}
}

2
client_web/src/trictrac/mod.rs Normal file
View file

@ -0,0 +1,2 @@
pub mod backend;
pub mod types;

143
client_web/src/trictrac/types.rs Normal file
View file

@ -0,0 +1,143 @@
use serde::{Deserialize, Serialize};
use trictrac_store::{GameState, Stage, TurnStage};
// ── Actions sent by a player to the host backend ─────────────────────────────
#[derive(Clone, Serialize, Deserialize)]
pub enum PlayerAction {
/// Active player requests a dice roll.
Roll,
/// Move one checker from `from` to `to` (field numbers 1–24, 0 = exit).
Move { from: u8, to: u8 },
/// Choose to "go" (advance) during HoldOrGoChoice.
Go,
/// Acknowledge point marking (hold / advance points).
Mark,
}
// ── Incremental state update broadcast to all clients ────────────────────────
/// Carries a full state snapshot; `apply_delta` replaces the local state.
/// Simple and correct; can be refined to true diffs later.
#[derive(Clone, Serialize, Deserialize)]
pub struct GameDelta {
pub state: ViewState,
}
// ── Full game snapshot ────────────────────────────────────────────────────────
#[derive(Clone, PartialEq, Serialize, Deserialize)]
pub struct ViewState {
/// Board positions: index i = field i+1. Positive = white, negative = black.
pub board: [i8; 24],
pub stage: SerStage,
pub turn_stage: SerTurnStage,
/// Which multiplayer player_id (0 = host, 1 = guest) is the active player.
pub active_mp_player: Option<u16>,
/// Scores indexed by multiplayer player_id (0 = host, 1 = guest).
pub scores: [PlayerScore; 2],
/// Last rolled dice values.
pub dice: (u8, u8),
}
impl ViewState {
pub fn default_with_names(host_name: &str, guest_name: &str) -> Self {
ViewState {
board: [0i8; 24],
stage: SerStage::PreGame,
turn_stage: SerTurnStage::RollDice,
active_mp_player: None,
scores: [
PlayerScore { name: host_name.to_string(), points: 0, holes: 0 },
PlayerScore { name: guest_name.to_string(), points: 0, holes: 0 },
],
dice: (0, 0),
}
}
pub fn apply_delta(&mut self, delta: &GameDelta) {
*self = delta.state.clone();
}
/// Convert a store `GameState` to a `ViewState`.
/// `host_store_id` and `guest_store_id` are the trictrac `PlayerId`s assigned
/// to the host (mp player 0) and guest (mp player 1) respectively.
pub fn from_game_state(
gs: &GameState,
host_store_id: u64,
guest_store_id: u64,
) -> Self {
let board_vec = gs.board.to_vec();
let board: [i8; 24] = board_vec.try_into().expect("board is always 24 fields");
let stage = match gs.stage {
Stage::PreGame => SerStage::PreGame,
Stage::InGame => SerStage::InGame,
Stage::Ended => SerStage::Ended,
};
let turn_stage = match gs.turn_stage {
TurnStage::RollDice => SerTurnStage::RollDice,
TurnStage::RollWaiting => SerTurnStage::RollWaiting,
TurnStage::MarkPoints => SerTurnStage::MarkPoints,
TurnStage::HoldOrGoChoice => SerTurnStage::HoldOrGoChoice,
TurnStage::Move => SerTurnStage::Move,
TurnStage::MarkAdvPoints => SerTurnStage::MarkAdvPoints,
};
let active_mp_player = if gs.active_player_id == host_store_id {
Some(0)
} else if gs.active_player_id == guest_store_id {
Some(1)
} else {
None
};
let score_for = |store_id: u64| -> PlayerScore {
gs.players
.get(&store_id)
.map(|p| PlayerScore {
name: p.name.clone(),
points: p.points,
holes: p.holes,
})
.unwrap_or_else(|| PlayerScore { name: String::new(), points: 0, holes: 0 })
};
ViewState {
board,
stage,
turn_stage,
active_mp_player,
scores: [score_for(host_store_id), score_for(guest_store_id)],
dice: (gs.dice.values.0, gs.dice.values.1),
}
}
}
// ── Score snapshot ────────────────────────────────────────────────────────────
#[derive(Clone, PartialEq, Serialize, Deserialize)]
pub struct PlayerScore {
pub name: String,
pub points: u8,
pub holes: u8,
}
// ── Serialisable mirrors of store enums ──────────────────────────────────────
#[derive(Clone, PartialEq, Serialize, Deserialize)]
pub enum SerStage {
PreGame,
InGame,
Ended,
}
#[derive(Clone, PartialEq, Serialize, Deserialize)]
pub enum SerTurnStage {
RollDice,
RollWaiting,
MarkPoints,
HoldOrGoChoice,
Move,
MarkAdvPoints,
}