fix(client_web): list points jans

.gitignore

@@ -11,4 +11,7 @@ devenv.local.nix
 
 # generated by samply rust profiler
 profile.json
+
 bot/models
+client_web/dist
+var

Cargo.toml

@@ -1,4 +1,4 @@
 [workspace]
 resolver = "2"
 
-members = ["client_cli", "bot", "store", "spiel_bot"]
+members = ["client_cli", "bot", "store", "spiel_bot", "client_web"]

README.md

@@ -24,7 +24,7 @@ Training of AI bots is the work in progress.
 
 - game rules and game state are implemented in the _store/_ folder.
 - the command-line application is implemented in _client_cli/_; it allows you to play against a bot, or to have two bots play against each other
-- the bots algorithms and the training of their models are implemented in the _bot/_ folder
+- the bots algorithms and the training of their models are implemented in the _bot/_ and _spiel_bot_ folders.
 
 ### _store_ package
 

bot/Cargo.toml

@@ -13,7 +13,7 @@ path = "src/burnrl/main.rs"
 pretty_assertions = "1.4.0"
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-trictrac-store = { path = "../store" }
+trictrac-store = { path = "../store", features = ["python"] }
 rand = "0.9"
 env_logger = "0.10"
 burn = { version = "0.20", features = ["ndarray", "autodiff"] }

client_cli/Cargo.toml

@@ -13,7 +13,7 @@ bincode = "1.3.3"
 pico-args = "0.5.0"
 pretty_assertions = "1.4.0"
 renet = "0.0.13"
-trictrac-store = { path = "../store" }
+trictrac-store = { path = "../store", features = ["python"] }
 trictrac-bot   = { path = "../bot" }
 spiel_bot      = { path = "../spiel_bot" }
 itertools = "0.13.0"

client_web/Cargo.toml

@@ -0,0 +1,19 @@
+[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"
+# getrandom 0.3 requires an explicit WASM backend; "wasm_js" uses window.crypto.getRandomValues.
+# Must be a direct dependency (not just transitive) for the feature to take effect.
+getrandom = { version = "0.3", features = ["wasm_js"] }

client_web/Trunk.toml

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

client_web/assets/style.css

@@ -0,0 +1,252 @@
+/* ── Reset & base ──────────────────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: sans-serif;
+    background: #c8b084;
+    display: flex;
+    justify-content: center;
+    padding: 1.5rem;
+    min-height: 100vh;
+}
+
+/* ── Login / Connecting screens ────────────────────────────────────── */
+.login-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-width: 320px;
+    margin-top: 4rem;
+}
+
+.login-container h1 { font-size: 2rem; text-align: center; margin-bottom: 0.5rem; }
+
+input[type="text"] {
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+}
+
+.error-msg { color: #c00; font-size: 0.9rem; }
+
+.connecting { font-size: 1.2rem; margin-top: 4rem; text-align: center; }
+
+/* ── Buttons ────────────────────────────────────────────────────────── */
+.btn {
+    padding: 0.5rem 1.25rem;
+    font-size: 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: opacity 0.15s;
+}
+.btn:disabled { opacity: 0.4; cursor: default; }
+.btn-primary   { background: #3a6b3a; color: #fff; }
+.btn-secondary { background: #5a4a2a; color: #fff; }
+.btn:not(:disabled):hover { opacity: 0.85; }
+
+/* ── Game container ─────────────────────────────────────────────────── */
+.game-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 900px;
+}
+
+.top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+
+.quit-link {
+    font-size: 0.85rem;
+    color: #5a4a2a;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+/* ── Score panel ────────────────────────────────────────────────────── */
+.score-panel {
+    display: flex;
+    gap: 2rem;
+    background: #f5edd8;
+    border-radius: 6px;
+    padding: 0.5rem 1.5rem;
+    font-size: 0.95rem;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
+}
+.score-row { display: flex; gap: 1rem; align-items: center; }
+.score-name { font-weight: bold; min-width: 80px; }
+
+/* ── Status bar ─────────────────────────────────────────────────────── */
+.status-bar {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    font-size: 1.05rem;
+    font-weight: 500;
+}
+
+/* ── Dice bars ──────────────────────────────────────────────────────── */
+.dice-bar {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+/* ── Die face (SVG) ─────────────────────────────────────────────────── */
+.die-face rect {
+    fill: #fffff0;
+    stroke: #2a1a00;
+    stroke-width: 2;
+}
+.die-face circle {
+    fill: #1a0a00;
+}
+.die-face.die-used rect {
+    fill: #d8d4c8;
+    stroke: #8a7a60;
+}
+.die-face.die-used circle {
+    fill: #8a7a60;
+}
+
+/* ── Jan panel ──────────────────────────────────────────────────────── */
+.jan-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    background: #f5edd8;
+    border-radius: 6px;
+    padding: 0.4rem 1rem;
+    font-size: 0.9rem;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
+    min-width: 260px;
+}
+
+.jan-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+.jan-expandable { cursor: pointer; }
+.jan-expandable:hover { background: rgba(0,0,0,0.06); }
+
+.jan-positive { color: #1a5c1a; }
+.jan-negative { color: #8b1a1a; }
+
+.jan-label { flex: 1; }
+.jan-tag {
+    font-size: 0.75rem;
+    padding: 0.1em 0.4em;
+    border-radius: 3px;
+    background: rgba(0,0,0,0.08);
+    color: #555;
+    white-space: nowrap;
+}
+.jan-pts { font-weight: bold; text-align: right; min-width: 3rem; }
+
+.jan-moves { padding: 1px 4px 4px 1rem; display: flex; flex-direction: column; gap: 2px; }
+.jan-moves.hidden { display: none; }
+.jan-move-line { font-family: monospace; font-size: 0.8rem; color: #444; }
+
+/* ── Board ──────────────────────────────────────────────────────────── */
+.board {
+    background: #2e6b2e;
+    border: 4px solid #1a3d1a;
+    border-radius: 8px;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    user-select: none;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+.board-row {
+    display: flex;
+    gap: 4px;
+}
+
+.board-quarter {
+    display: flex;
+    gap: 2px;
+}
+
+.board-bar {
+    width: 20px;
+    background: #1a3d1a;
+    border-radius: 3px;
+}
+
+.board-center-bar {
+    height: 12px;
+    background: #1a3d1a;
+    border-radius: 3px;
+}
+
+/* ── Fields ─────────────────────────────────────────────────────────── */
+.field {
+    width: 60px;
+    height: 110px;
+    background: #d4a843;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 4px 2px;
+    position: relative;
+    transition: background 0.1s;
+}
+
+/* Alternating field colours */
+.board-quarter .field:nth-child(odd)  { background: #c49030; }
+.board-quarter .field:nth-child(even) { background: #d4a843; }
+
+.top-row .field { justify-content: flex-start; }
+
+.field.clickable { cursor: pointer; }
+.field.clickable:hover { background: #e8c060 !important; }
+.field.selected  { background: #88bb44 !important; outline: 2px solid #446622; }
+.field.dest      { background: #aad060 !important; }
+
+.field-num {
+    font-size: 0.65rem;
+    color: rgba(0,0,0,0.45);
+    position: absolute;
+    bottom: 2px;
+}
+
+.top-row .field-num { bottom: auto; top: 2px; }
+
+/* ── Checkers ───────────────────────────────────────────────────────── */
+.checkers {
+    width: 46px;
+    height: 46px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1rem;
+    font-weight: bold;
+    border: 2px solid rgba(0,0,0,0.3);
+    box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), 0 2px 4px rgba(0,0,0,0.3);
+}
+
+.checkers.white {
+    background: radial-gradient(circle at 35% 35%, #ffffff, #cccccc);
+    color: #333;
+}
+
+.checkers.black {
+    background: radial-gradient(circle at 35% 35%, #555555, #111111);
+    color: #eee;
+}

client_web/index.html

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

client_web/src/app.rs

@@ -0,0 +1,253 @@
+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,
+    pub room_id: String,
+}
+
+/// 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,
+                                room_id: room_id_for_storage.clone(),
+                            }));
+                        }
+                        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(),
+        }}
+    }
+}

client_web/src/components/board.rs

@@ -0,0 +1,128 @@
+use leptos::prelude::*;
+
+use crate::trictrac::types::{SerTurnStage, ViewState};
+
+/// Field numbers in visual display order (left-to-right for each quarter), white's perspective.
+const TOP_LEFT_W:  [u8; 6] = [13, 14, 15, 16, 17, 18];
+const TOP_RIGHT_W: [u8; 6] = [19, 20, 21, 22, 23, 24];
+const BOT_LEFT_W:  [u8; 6] = [12, 11, 10,  9,  8,  7];
+const BOT_RIGHT_W: [u8; 6] = [ 6,  5,  4,  3,  2,  1];
+
+/// 180° rotation of white's layout: black's pieces (field 24) appear at the bottom.
+const TOP_LEFT_B:  [u8; 6] = [ 1,  2,  3,  4,  5,  6];
+const TOP_RIGHT_B: [u8; 6] = [ 7,  8,  9, 10, 11, 12];
+const BOT_LEFT_B:  [u8; 6] = [24, 23, 22, 21, 20, 19];
+const BOT_RIGHT_B: [u8; 6] = [18, 17, 16, 15, 14, 13];
+
+/// Returns the displayed board value for `field_num` after applying `staged_moves`.
+/// Field numbers are always in white's coordinate system (1–24).
+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)
+        && matches!(view_state.turn_stage, SerTurnStage::Move | SerTurnStage::HoldOrGoChoice);
+    let is_white = player_id == 0;
+
+    let fields_from = |nums: &[u8]| -> Vec<AnyView> {
+        nums.iter().map(|&field_num| {
+            view! {
+                <div
+                    class=move || {
+                        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();
+                        if can_stage && (sel.is_some() || is_mine) {
+                            cls.push_str(" clickable");
+                        }
+                        if sel == Some(field_num) { cls.push_str(" selected"); }
+                        if can_stage && sel.is_some() && sel != Some(field_num) {
+                            cls.push_str(" dest");
+                        }
+                        cls
+                    }
+                    on:click=move |_| {
+                        if !is_move_stage { return; }
+                        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);
+                            }
+                            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>
+                    {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()
+        })
+        .collect()
+    };
+
+    let (tl, tr, bl, br) = if is_white {
+        (&TOP_LEFT_W, &TOP_RIGHT_W, &BOT_LEFT_W, &BOT_RIGHT_W)
+    } else {
+        (&TOP_LEFT_B, &TOP_RIGHT_B, &BOT_LEFT_B, &BOT_RIGHT_B)
+    };
+
+    view! {
+        <div class="board">
+            <div class="board-row top-row">
+                <div class="board-quarter">{fields_from(tl)}</div>
+                <div class="board-bar"></div>
+                <div class="board-quarter">{fields_from(tr)}</div>
+            </div>
+            <div class="board-center-bar"></div>
+            <div class="board-row bot-row">
+                <div class="board-quarter">{fields_from(bl)}</div>
+                <div class="board-bar"></div>
+                <div class="board-quarter">{fields_from(br)}</div>
+            </div>
+        </div>
+    }
+}

client_web/src/components/connecting_screen.rs

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

client_web/src/components/die.rs

@@ -0,0 +1,32 @@
+use leptos::prelude::*;
+
+/// (cx, cy) positions for dots on a 48×48 die face.
+fn dot_positions(value: u8) -> &'static [(&'static str, &'static str)] {
+    match value {
+        1 => &[("24", "24")],
+        2 => &[("35", "13"), ("13", "35")],
+        3 => &[("35", "13"), ("24", "24"), ("13", "35")],
+        4 => &[("13", "13"), ("35", "13"), ("13", "35"), ("35", "35")],
+        5 => &[("13", "13"), ("35", "13"), ("24", "24"), ("13", "35"), ("35", "35")],
+        6 => &[("13", "13"), ("35", "13"), ("13", "24"), ("35", "24"), ("13", "35"), ("35", "35")],
+        _ => &[],
+    }
+}
+
+/// A single die face rendered as SVG.
+/// `value` 1–6 shows dots; 0 shows an empty face (not-yet-rolled).
+/// `used` dims the die.
+#[component]
+pub fn Die(value: u8, used: bool) -> impl IntoView {
+    let cls = if used { "die-face die-used" } else { "die-face" };
+    let dots: Vec<AnyView> = dot_positions(value)
+        .iter()
+        .map(|&(cx, cy)| view! { <circle cx=cx cy=cy r="4.5" /> }.into_any())
+        .collect();
+    view! {
+        <svg class=cls width="48" height="48" viewBox="0 0 48 48">
+            <rect x="1.5" y="1.5" width="45" height="45" rx="7" ry="7" />
+            {dots}
+        </svg>
+    }
+}

client_web/src/components/game_screen.rs

@@ -0,0 +1,257 @@
+use futures::channel::mpsc::UnboundedSender;
+use leptos::prelude::*;
+use trictrac_store::{CheckerMove, Jan};
+
+use crate::app::{GameUiState, NetCommand};
+use crate::trictrac::types::{JanEntry, PlayerAction, SerStage, SerTurnStage};
+
+use super::board::Board;
+use super::die::Die;
+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 = if from < to {
+            to.saturating_sub(from)
+        } else {
+            from.saturating_sub(to)
+        };
+        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          => "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",
+    }
+}
+
+fn format_move_pair(m1: CheckerMove, m2: CheckerMove) -> String {
+    let fmt = |m: CheckerMove| -> String {
+        let (f, t) = (m.get_from(), m.get_to());
+        if f == 0 && t == 0 { "—".to_string() }
+        else if t == 0      { format!("{f}↑") }  // exit
+        else                { format!("{f}→{t}") }
+    };
+    format!("{} + {}", fmt(m1), fmt(m2))
+}
+
+fn jan_row(idx: usize, entry: JanEntry, expanded: RwSignal<Option<usize>>) -> impl IntoView {
+    let row_class = if entry.total >= 0 { "jan-row jan-positive" } else { "jan-row jan-negative" };
+    let label = jan_label(&entry.jan);
+    let double_tag = if entry.is_double { "double" } else { "simple" };
+    let ways_tag = format!("×{}", entry.ways);
+    let pts_str = if entry.total >= 0 { format!("+{}", entry.total) } else { format!("{}", entry.total) };
+
+    let can_expand = entry.ways > 1;
+    let moves = entry.moves.clone();
+
+    view! {
+        <div>
+            <div
+                class=row_class
+                class:jan-expandable=can_expand
+                on:click=move |_| {
+                    if can_expand {
+                        expanded.update(|s| {
+                            *s = if *s == Some(idx) { None } else { Some(idx) };
+                        });
+                    }
+                }
+            >
+                <span class="jan-label">{label}</span>
+                <span class="jan-tag">{double_tag}</span>
+                <span class="jan-tag">{ways_tag}</span>
+                <span class="jan-pts">{pts_str}</span>
+            </div>
+            {can_expand.then(|| {
+                let move_lines: Vec<_> = moves.iter()
+                    .map(|&(m1, m2)| {
+                        let text = format_move_pair(m1, m2);
+                        view! { <div class="jan-move-line">{text}</div> }
+                    })
+                    .collect();
+                view! {
+                    <div class="jan-moves" class:hidden=move || expanded.get() != Some(idx)>
+                        {move_lines}
+                    </div>
+                }
+            })}
+        </div>
+    }
+}
+
+#[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());
+
+    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)           => "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);
+
+    // ── Button senders ─────────────────────────────────────────────────────────
+    let cmd_tx_roll = cmd_tx.clone();
+    let cmd_tx_go   = 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">
+            // ── Top bar ──────────────────────────────────────────────────────
+            <div class="top-bar">
+                <span>Room: {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 />
+
+            // ── Status ───────────────────────────────────────────────────────
+            <div class="status-bar">
+                <span>{move || {
+                    if is_move_stage {
+                        let n = staged_moves.get().len();
+                        format!("Select move {} of 2", n + 1)
+                    } else {
+                        status.clone()
+                    }
+                }}</span>
+            </div>
+
+            // ── 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>
+            })}
+
+            // ── Jan panel ────────────────────────────────────────────────────
+            {(!vs.dice_jans.is_empty()).then(|| {
+                let expanded: RwSignal<Option<usize>> = RwSignal::new(None);
+                let rows: Vec<_> = vs.dice_jans.iter().enumerate().map(|(i, entry)| {
+                    jan_row(i, entry.clone(), expanded)
+                }).collect();
+                view! { <div class="jan-panel">{rows}</div> }
+            })}
+
+            // ── Board ────────────────────────────────────────────────────────
+            <Board
+                view_state=vs
+                player_id=player_id
+                selected_origin=selected_origin
+                staged_moves=staged_moves
+            />
+
+            // ── 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)
+                        } else {
+                            (false, false)
+                        };
+                        view! {
+                            <Die value=dice.0 used=d0 />
+                            <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>
+                    })}
+                    // 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>
+                    })}
+                    // Empty move 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>
+            })}
+        </div>
+    }
+}

client_web/src/components/login_screen.rs

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

client_web/src/components/mod.rs

@@ -0,0 +1,12 @@
+mod board;
+mod connecting_screen;
+mod die;
+mod game_screen;
+mod login_screen;
+mod score_panel;
+
+pub use die::Die;
+
+pub use connecting_screen::ConnectingScreen;
+pub use game_screen::GameScreen;
+pub use login_screen::LoginScreen;

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

client_web/src/main.rs

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

client_web/src/trictrac/backend.rs

@@ -0,0 +1,320 @@
+use backbone_lib::traits::{BackEndArchitecture, BackendCommand};
+use trictrac_store::{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],
+}
+
+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],
+        }
+    }
+
+    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.sync_view_state();
+            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(m1, m2) => {
+                if self.game.turn_stage != TurnStage::Move
+                    && self.game.turn_stage != TurnStage::HoldOrGoChoice
+                {
+                    return;
+                }
+                let event = GameEvent::Move {
+                    player_id: store_id,
+                    moves: (m1, m2),
+                };
+                if self.game.validate(&event) {
+                    let _ = self.game.consume(&event);
+                    self.drive_automatic_stages();
+                }
+            }
+            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)
+    }
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use backbone_lib::traits::BackEndArchitecture;
+
+    fn make_backend() -> TrictracBackend {
+        TrictracBackend::new(0)
+    }
+
+    /// Helper: drain and return only Delta commands, extracting their ViewStates.
+    fn drain_deltas(b: &mut TrictracBackend) -> Vec<ViewState> {
+        b.drain_commands()
+            .into_iter()
+            .filter_map(|cmd| match cmd {
+                BackendCommand::Delta(d) => Some(d.state),
+                BackendCommand::ResetViewState => Some(b.view_state.clone()),
+                _ => None,
+            })
+            .collect()
+    }
+
+    #[test]
+    fn both_players_arrive_starts_game() {
+        let mut b = make_backend();
+        b.player_arrival(0); // host
+        b.drain_commands();
+        b.player_arrival(1); // guest
+        let cmds = b.drain_commands();
+
+        // ResetViewState should have been issued after BeginGame.
+        let has_reset = cmds
+            .iter()
+            .any(|c| matches!(c, BackendCommand::ResetViewState));
+        assert!(
+            has_reset,
+            "expected ResetViewState after both players arrive"
+        );
+
+        // Game should now be InGame.
+        use crate::trictrac::types::SerStage;
+        assert_eq!(b.get_view_state().stage, SerStage::InGame);
+    }
+
+    #[test]
+    fn unknown_player_kicked() {
+        let mut b = make_backend();
+        b.player_arrival(99);
+        let cmds = b.drain_commands();
+        assert!(cmds
+            .iter()
+            .any(|c| matches!(c, BackendCommand::KickPlayer { player: 99 })));
+    }
+
+    #[test]
+    fn roll_advances_to_move_or_hold() {
+        let mut b = make_backend();
+        b.player_arrival(0);
+        b.player_arrival(1);
+        b.drain_commands();
+
+        // Host rolls (player_id 0, whose store id == HOST_PLAYER_ID == active after BeginGame).
+        b.inform_rpc(0, PlayerAction::Roll);
+        let states = drain_deltas(&mut b);
+        assert!(!states.is_empty(), "expected a state broadcast after roll");
+
+        use crate::trictrac::types::SerTurnStage;
+        let last = states.last().unwrap();
+        assert!(
+            matches!(
+                last.turn_stage,
+                SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
+            ),
+            "expected Move or HoldOrGoChoice after roll, got {:?}",
+            last.turn_stage
+        );
+        assert_eq!(last.dice, b.get_view_state().dice);
+        assert!(last.dice.0 >= 1 && last.dice.0 <= 6);
+        assert!(last.dice.1 >= 1 && last.dice.1 <= 6);
+    }
+
+    #[test]
+    fn wrong_player_roll_ignored() {
+        let mut b = make_backend();
+        b.player_arrival(0);
+        b.player_arrival(1);
+        b.drain_commands();
+
+        // Guest tries to roll when it's the host's turn.
+        b.inform_rpc(1, PlayerAction::Roll);
+        let cmds = b.drain_commands();
+        assert!(
+            cmds.is_empty(),
+            "guest roll should be ignored when it's host's turn"
+        );
+    }
+
+    #[test]
+    fn departure_sets_reconnect_timer() {
+        let mut b = make_backend();
+        b.player_arrival(0);
+        b.drain_commands();
+        b.player_departure(0);
+        let cmds = b.drain_commands();
+        assert!(
+            cmds.iter()
+                .any(|c| matches!(c, BackendCommand::SetTimer { timer_id: 0, .. })),
+            "expected reconnect timer after host departure"
+        );
+    }
+
+    #[test]
+    fn timer_triggers_terminate_room() {
+        let mut b = make_backend();
+        b.timer_triggered(0);
+        let cmds = b.drain_commands();
+        assert!(cmds
+            .iter()
+            .any(|c| matches!(c, BackendCommand::TerminateRoom)));
+    }
+}

client_web/src/trictrac/mod.rs

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

client_web/src/trictrac/types.rs

@@ -0,0 +1,198 @@
+use serde::{Deserialize, Serialize};
+use trictrac_store::{CheckerMove, GameState, Jan, 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,
+    /// Both checker moves for this turn. Use `EMPTY_MOVE` (from=0, to=0) when a die
+    /// has no valid move.
+    Move(CheckerMove, CheckerMove),
+    /// 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),
+    /// Jans (scoring events) triggered by the last dice roll.
+    pub dice_jans: Vec<JanEntry>,
+}
+
+/// One scoring event from a dice roll.
+#[derive(Clone, PartialEq, Serialize, Deserialize, Debug)]
+pub struct JanEntry {
+    pub jan: Jan,
+    /// True when the dice are doubles (both same value) — changes the point value.
+    /// Special case for HelplessMan: true when *both* dice are unplayable.
+    pub is_double: bool,
+    /// Number of distinct move pairs that produce this jan.
+    pub ways: usize,
+    /// Points per way (negative = scored against the active player).
+    pub points_per: i8,
+    /// Total = points_per × ways.
+    pub total: i8,
+    /// The move pairs that produce this jan (for move display).
+    pub moves: Vec<(CheckerMove, CheckerMove)>,
+}
+
+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),
+            dice_jans: Vec::new(),
+        }
+    }
+
+    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 })
+        };
+
+        // is_double for scoring: dice show the same value (both dice identical).
+        // Exception: HelplessMan uses a special rule (see below).
+        let dice_are_double = gs.dice.values.0 == gs.dice.values.1;
+
+        // Build JanEntry list from the PossibleJans map.
+        let empty_move = CheckerMove::new(0, 0).unwrap_or_default();
+        let mut dice_jans: Vec<JanEntry> = gs.dice_jans
+            .iter()
+            .map(|(jan, moves)| {
+                // HelplessMan: is_double = true only when *both* dice are unplayable
+                // (the moves list contains a single (empty, empty) sentinel).
+                let is_double = if *jan == Jan::HelplessMan {
+                    moves.first().map(|&(m1, m2)| m1 == empty_move && m2 == empty_move)
+                        .unwrap_or(false)
+                } else {
+                    dice_are_double
+                };
+                let points_per = jan.get_points(is_double);
+                let ways = moves.len();
+                let total = points_per.saturating_mul(ways as i8);
+                JanEntry {
+                    jan: jan.clone(),
+                    is_double,
+                    ways,
+                    points_per,
+                    total,
+                    moves: moves.clone(),
+                }
+            })
+            .collect();
+        // Sort: highest total first, most-negative last.
+        dice_jans.sort_by_key(|e| std::cmp::Reverse(e.total));
+
+        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),
+            dice_jans,
+        }
+    }
+}
+
+// ── 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(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum SerStage {
+    PreGame,
+    InGame,
+    Ended,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+pub enum SerTurnStage {
+    RollDice,
+    RollWaiting,
+    MarkPoints,
+    HoldOrGoChoice,
+    Move,
+    MarkAdvPoints,
+}

devenv.nix

@@ -5,6 +5,9 @@ let
 in
 {
   packages = [
+    # for Leptos
+    pkgs.trunk
+    # pkgs.wasm-bindgen-cli_0_2_114
 
     # pour burn-rs
     pkgs.SDL2_gfx

doc/backlog.md

@@ -31,21 +31,6 @@ ulimit -s unlimited # Pour revenir à la normale
 
 Cheatsheet : arbre des situations et priorité des règles
 
-### Epic : jeu simple
-
-- déplacements autorisés par les règles (pourront être validés physiquement si jeu avec écoles)
-- calcul des points automatique (pas d'écoles)
-
-Server
-
--
-
-Client
-
-- client tui (ratatui)
-- client desktop (bevy)
-- client web
-
 ### Epic : jeu avec écoles
 
 - déplacement de fiches points : validation physique

justfile

@@ -8,6 +8,19 @@ shell:
 	devenv shell
 runcli:
 	RUST_LOG=info cargo run --bin=client_cli
+
+[working-directory: 'client_web/']
+dev-leptos:
+  trunk serve
+
+[working-directory: 'client_web']
+build-leptos:
+  trunk build --release
+  cp dist/index.html /home/henri/travaux/programmes/forks/multiplayer/deploy/trictrac.html
+  cp dist/*.wasm /home/henri/travaux/programmes/forks/multiplayer/deploy/
+  cp dist/*.js /home/henri/travaux/programmes/forks/multiplayer/deploy/
+  cp dist/*.css /home/henri/travaux/programmes/forks/multiplayer/deploy/
+
 runclibots:
 	cargo run --bin=client_cli -- --bot random,dqnburn:./bot/models/burnrl_dqn_40.mpk
 	#cargo run --bin=client_cli -- --bot dqn:./bot/models/dqn_model_final.json,dummy

spiel_bot/Cargo.toml

@@ -4,7 +4,7 @@ version = "0.1.0"
 edition = "2021"
 
 [dependencies]
-trictrac-store = { path = "../store" }
+trictrac-store = { path = "../store", features = ["python"] }
 trictrac-bot   = { path = "../bot" }
 anyhow         = "1"
 rand           = "0.9"

store/Cargo.toml

@@ -12,15 +12,21 @@ name = "trictrac_store"
 # "staticlib" → used by the C++ OpenSpiel game (cxxengine)
 crate-type = ["cdylib", "rlib", "staticlib"]
 
+[features]
+# Enable Python bindings (required for maturin / AI training). Not available on wasm32.
+python = ["pyo3"]
+# Enable C++ bridge for OpenSpiel integration. Not available on wasm32.
+cpp = ["dep:cxx"]
+
 [dependencies]
 anyhow = "1.0"
 base64 = "0.21.7"
-cxx = "1.0"
+cxx = { version = "1.0", optional = true }
 # provides macros for creating log messages to be used by a logger (for example env_logger)
 log = "0.4.20"
 merge = "0.1.0"
 # generate python lib (with maturin) to be used in AI training
-pyo3 = { version = "0.23", features = ["extension-module", "abi3-py38"] }
+pyo3 = { version = "0.23", features = ["extension-module", "abi3-py38"], optional = true }
 rand = "0.9"
 serde = { version = "1.0", features = ["derive"] }
 transpose = "0.2.2"

store/build.rs

@@ -1,7 +1,9 @@
 fn main() {
-    cxx_build::bridge("src/cxxengine.rs")
-        .std("c++17")
-        .compile("trictrac-cxx");
+    if std::env::var("CARGO_FEATURE_CPP").is_ok() {
+        cxx_build::bridge("src/cxxengine.rs")
+            .std("c++17")
+            .compile("trictrac-cxx");
 
-    println!("cargo:rerun-if-changed=src/cxxengine.rs");
+        println!("cargo:rerun-if-changed=src/cxxengine.rs");
+    }
 }

store/src/lib.rs

@@ -3,7 +3,7 @@ mod game_rules_moves;
 pub use game_rules_moves::MoveRules;
 mod game_rules_points;
 pub use game::{EndGameReason, GameEvent, GameState, Stage, TurnStage};
-pub use game_rules_points::PointsRules;
+pub use game_rules_points::{Jan, PointsRules};
 
 mod player;
 pub use player::{Color, Player, PlayerId};
@@ -20,7 +20,9 @@ pub use dice::{Dice, DiceRoller};
 pub mod training_common;
 
 // python interface "trictrac_engine" (for AI training..)
+#[cfg(feature = "python")]
 mod pyengine;
 
 // C++ interface via cxx.rs (for OpenSpiel C++ integration)
+#[cfg(feature = "cpp")]
 pub mod cxxengine;

store/src/player.rs

@@ -1,3 +1,4 @@
+#[cfg(feature = "python")]
 use pyo3::prelude::*;
 use serde::{Deserialize, Serialize};
 use std::fmt;
@@ -5,7 +6,7 @@ use std::fmt;
 // This just makes it easier to dissern between a player id and any ol' u64
 pub type PlayerId = u64;
 
-#[pyclass(eq, eq_int)]
+#[cfg_attr(feature = "python", pyclass(eq, eq_int))]
 #[derive(Copy, Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 pub enum Color {
     White,