feat: merge web-user-portal & web-game
This commit is contained in:
parent
9cc605409e
commit
557f0249f8
34 changed files with 5562 additions and 10 deletions
23
Cargo.lock
generated
23
Cargo.lock
generated
|
|
@ -8700,6 +8700,29 @@ dependencies = [
|
||||||
"transpose",
|
"transpose",
|
||||||
]
|
]
|
||||||
|
|
||||||
|
[[package]]
|
||||||
|
name = "trictrac-web"
|
||||||
|
version = "0.1.0"
|
||||||
|
dependencies = [
|
||||||
|
"backbone-lib",
|
||||||
|
"futures",
|
||||||
|
"getrandom 0.3.4",
|
||||||
|
"gloo-net 0.5.0",
|
||||||
|
"gloo-storage",
|
||||||
|
"gloo-timers",
|
||||||
|
"js-sys",
|
||||||
|
"leptos",
|
||||||
|
"leptos_i18n",
|
||||||
|
"leptos_router",
|
||||||
|
"rand 0.9.3",
|
||||||
|
"serde",
|
||||||
|
"serde_json",
|
||||||
|
"trictrac-store",
|
||||||
|
"wasm-bindgen",
|
||||||
|
"wasm-bindgen-futures",
|
||||||
|
"web-sys",
|
||||||
|
]
|
||||||
|
|
||||||
[[package]]
|
[[package]]
|
||||||
name = "try-lock"
|
name = "try-lock"
|
||||||
version = "0.2.5"
|
version = "0.2.5"
|
||||||
|
|
|
||||||
|
|
@ -5,6 +5,7 @@ members = [
|
||||||
"store",
|
"store",
|
||||||
"clients/cli",
|
"clients/cli",
|
||||||
"clients/backbone-lib",
|
"clients/backbone-lib",
|
||||||
|
"clients/web",
|
||||||
"clients/web-game",
|
"clients/web-game",
|
||||||
"clients/web-user-portal",
|
"clients/web-user-portal",
|
||||||
"server/protocol",
|
"server/protocol",
|
||||||
|
|
|
||||||
41
clients/web/Cargo.toml
Normal file
41
clients/web/Cargo.toml
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
[package]
|
||||||
|
name = "trictrac-web"
|
||||||
|
version = "0.1.0"
|
||||||
|
edition = "2021"
|
||||||
|
|
||||||
|
[package.metadata.leptos-i18n]
|
||||||
|
default = "en"
|
||||||
|
locales = ["en", "fr"]
|
||||||
|
|
||||||
|
[dependencies]
|
||||||
|
leptos_i18n = { version = "0.5", features = ["csr", "interpolate_display"] }
|
||||||
|
leptos_router = { version = "0.7" }
|
||||||
|
trictrac-store = { path = "../../store" }
|
||||||
|
backbone-lib = { path = "../backbone-lib" }
|
||||||
|
leptos = { version = "0.7", features = ["csr"] }
|
||||||
|
serde = { version = "1.0", features = ["derive"] }
|
||||||
|
serde_json = "1"
|
||||||
|
futures = "0.3"
|
||||||
|
rand = "0.9"
|
||||||
|
gloo-storage = "0.3"
|
||||||
|
|
||||||
|
[target.'cfg(target_arch = "wasm32")'.dependencies]
|
||||||
|
wasm-bindgen = "0.2"
|
||||||
|
wasm-bindgen-futures = "0.4"
|
||||||
|
gloo-net = { version = "0.5", features = ["http"] }
|
||||||
|
gloo-timers = { version = "0.3", features = ["futures"] }
|
||||||
|
getrandom = { version = "0.3", features = ["wasm_js"] }
|
||||||
|
js-sys = "0.3"
|
||||||
|
web-sys = { version = "0.3", features = [
|
||||||
|
"RequestCredentials",
|
||||||
|
"AudioContext",
|
||||||
|
"AudioParam",
|
||||||
|
"AudioNode",
|
||||||
|
"AudioDestinationNode",
|
||||||
|
"AudioScheduledSourceNode",
|
||||||
|
"GainNode",
|
||||||
|
"OscillatorNode",
|
||||||
|
"OscillatorType",
|
||||||
|
"BaseAudioContext",
|
||||||
|
"HtmlAudioElement",
|
||||||
|
] }
|
||||||
2
clients/web/Trunk.toml
Normal file
2
clients/web/Trunk.toml
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
[serve]
|
||||||
|
port = 9091
|
||||||
BIN
clients/web/assets/diceroll.mp3
Normal file
BIN
clients/web/assets/diceroll.mp3
Normal file
Binary file not shown.
1396
clients/web/assets/style.css
Normal file
1396
clients/web/assets/style.css
Normal file
File diff suppressed because it is too large
Load diff
12
clients/web/index.html
Normal file
12
clients/web/index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!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" />
|
||||||
|
<link data-trunk rel="copy-file" href="assets/diceroll.mp3" />
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
96
clients/web/locales/en.json
Normal file
96
clients/web/locales/en.json
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
{
|
||||||
|
"room_name_placeholder": "Room name",
|
||||||
|
"create_room": "Create Room",
|
||||||
|
"join_room": "Join Room",
|
||||||
|
"connecting": "Connecting…",
|
||||||
|
"game_over": "Game over",
|
||||||
|
"waiting_for_opponent": "Waiting for opponent…",
|
||||||
|
"your_turn_roll": "Your turn — roll the dice",
|
||||||
|
"hold_or_go": "Hold or Go?",
|
||||||
|
"select_move": "Move a checker ({{ n }} of 2)",
|
||||||
|
"your_turn": "Your turn",
|
||||||
|
"opponent_turn": "Opponent's turn",
|
||||||
|
"room_label": "Room: {{ id }}",
|
||||||
|
"quit": "Quit",
|
||||||
|
"roll_dice": "Roll dice",
|
||||||
|
"go": "Go",
|
||||||
|
"empty_move": "Empty move",
|
||||||
|
"you_suffix": " (you)",
|
||||||
|
"points_label": "Points",
|
||||||
|
"holes_label": "Holes",
|
||||||
|
"bredouille_title": "Can bredouille",
|
||||||
|
"jan_double": "double",
|
||||||
|
"jan_simple": "simple",
|
||||||
|
"jan_filled_quarter": "Quarter filled",
|
||||||
|
"jan_true_hit_small": "True hit (small jan)",
|
||||||
|
"jan_true_hit_big": "True hit (big jan)",
|
||||||
|
"jan_true_hit_corner": "True hit (opp. corner)",
|
||||||
|
"jan_first_exit": "First to exit",
|
||||||
|
"jan_six_tables": "Six tables",
|
||||||
|
"jan_two_tables": "Two tables",
|
||||||
|
"jan_mezeas": "Mezeas",
|
||||||
|
"jan_false_hit_small": "False hit (small jan)",
|
||||||
|
"jan_false_hit_big": "False hit (big jan)",
|
||||||
|
"jan_contre_two": "Contre two tables",
|
||||||
|
"jan_contre_mezeas": "Contre mezeas",
|
||||||
|
"jan_helpless_man": "Helpless man",
|
||||||
|
"play_vs_bot": "Play vs Bot",
|
||||||
|
"vs_bot_label": "vs Bot",
|
||||||
|
"you_win": "You win!",
|
||||||
|
"opp_wins": "{{ name }} wins!",
|
||||||
|
"play_again": "Play again",
|
||||||
|
"after_opponent_roll": "Opponent rolled",
|
||||||
|
"after_opponent_go": "Opponent chose to continue",
|
||||||
|
"after_opponent_move": "Opponent moved — your turn",
|
||||||
|
"after_opponent_pre_game_roll": "Opponent rolled — your turn",
|
||||||
|
"pre_game_roll_title": "Who goes first?",
|
||||||
|
"pre_game_roll_btn": "Roll",
|
||||||
|
"pre_game_roll_tie": "Tie! Roll again",
|
||||||
|
"pre_game_roll_your_die": "Your die",
|
||||||
|
"pre_game_roll_opp_die": "Opponent's die",
|
||||||
|
"continue_btn": "Continue",
|
||||||
|
"scored_pts": "+{{ n }} pts",
|
||||||
|
"hole_made": "Hole! {{ holes }}/12",
|
||||||
|
"bredouille_applied": "Bredouille!",
|
||||||
|
"hold": "Hold",
|
||||||
|
"opp_scored_pts": "Opponent +{{ n }} pts",
|
||||||
|
"opp_hole_made": "Opponent hole! {{ holes }}/12",
|
||||||
|
"hint_move": "Click a highlighted field to move a checker",
|
||||||
|
"hint_hold_or_go": "Hold to keep points — Go to reset the setting",
|
||||||
|
"hint_continue": "Click Continue when ready",
|
||||||
|
"sign_in": "Sign in",
|
||||||
|
"sign_out": "Sign out",
|
||||||
|
"create_account": "Create account",
|
||||||
|
"account_title": "Account",
|
||||||
|
"label_username": "Username",
|
||||||
|
"label_password": "Password",
|
||||||
|
"label_email": "Email",
|
||||||
|
"loading": "Loading…",
|
||||||
|
"member_since": "Member since",
|
||||||
|
"stat_games": "Games",
|
||||||
|
"stat_wins": "Wins",
|
||||||
|
"stat_losses": "Losses",
|
||||||
|
"stat_draws": "Draws",
|
||||||
|
"game_history_title": "Game History",
|
||||||
|
"no_games": "No games recorded yet.",
|
||||||
|
"col_room": "Room",
|
||||||
|
"col_started": "Started",
|
||||||
|
"col_ended": "Ended",
|
||||||
|
"col_outcome": "Outcome",
|
||||||
|
"col_detail": "Detail",
|
||||||
|
"prev_page": "← Prev",
|
||||||
|
"next_page": "Next →",
|
||||||
|
"page_label": "Page",
|
||||||
|
"view_link": "View",
|
||||||
|
"outcome_win": "win",
|
||||||
|
"outcome_loss": "loss",
|
||||||
|
"outcome_draw": "draw",
|
||||||
|
"players_header": "Players",
|
||||||
|
"col_player": "Player",
|
||||||
|
"score_header": "Score",
|
||||||
|
"game_ongoing": "ongoing",
|
||||||
|
"anonymous_player": "anonymous",
|
||||||
|
"started_label": "Started",
|
||||||
|
"ended_label": "Ended",
|
||||||
|
"room_detail_title": "Room"
|
||||||
|
}
|
||||||
96
clients/web/locales/fr.json
Normal file
96
clients/web/locales/fr.json
Normal file
|
|
@ -0,0 +1,96 @@
|
||||||
|
{
|
||||||
|
"room_name_placeholder": "Nom de la salle",
|
||||||
|
"create_room": "Créer une salle",
|
||||||
|
"join_room": "Rejoindre",
|
||||||
|
"connecting": "Connexion en cours…",
|
||||||
|
"game_over": "Partie terminée",
|
||||||
|
"waiting_for_opponent": "En attente de l'adversaire…",
|
||||||
|
"your_turn_roll": "À votre tour — lancez les dés",
|
||||||
|
"hold_or_go": "Tenir ou s'en aller ?",
|
||||||
|
"select_move": "Déplacez une dame ({{ n }} sur 2)",
|
||||||
|
"your_turn": "Votre tour",
|
||||||
|
"opponent_turn": "Tour de l'adversaire",
|
||||||
|
"room_label": "Salle : {{ id }}",
|
||||||
|
"quit": "Quitter",
|
||||||
|
"roll_dice": "Lancer les dés",
|
||||||
|
"go": "S'en aller",
|
||||||
|
"empty_move": "Mouvement impossible",
|
||||||
|
"you_suffix": " (vous)",
|
||||||
|
"points_label": "Points",
|
||||||
|
"holes_label": "Trous",
|
||||||
|
"bredouille_title": "Peut faire bredouille",
|
||||||
|
"jan_double": "double",
|
||||||
|
"jan_simple": "simple",
|
||||||
|
"jan_filled_quarter": "Remplissage",
|
||||||
|
"jan_true_hit_small": "Battage à vrai (petit jan)",
|
||||||
|
"jan_true_hit_big": "Battage à vrai (grand jan)",
|
||||||
|
"jan_true_hit_corner": "Battage coin adverse",
|
||||||
|
"jan_first_exit": "Premier sorti",
|
||||||
|
"jan_six_tables": "Jan de six tables",
|
||||||
|
"jan_two_tables": "Jan de deux tables",
|
||||||
|
"jan_mezeas": "Jan de mézéas",
|
||||||
|
"jan_false_hit_small": "Battage à faux (petit jan)",
|
||||||
|
"jan_false_hit_big": "Battage à faux (grand jan)",
|
||||||
|
"jan_contre_two": "Contre jan de deux tables",
|
||||||
|
"jan_contre_mezeas": "Contre jan de mezeas",
|
||||||
|
"jan_helpless_man": "Dame impuissante",
|
||||||
|
"play_vs_bot": "Jouer contre le bot",
|
||||||
|
"vs_bot_label": "contre le bot",
|
||||||
|
"you_win": "Vous avez gagné !",
|
||||||
|
"opp_wins": "{{ name }} gagne !",
|
||||||
|
"play_again": "Rejouer",
|
||||||
|
"after_opponent_roll": "L'adversaire a lancé les dés",
|
||||||
|
"after_opponent_go": "L'adversaire s'en va",
|
||||||
|
"after_opponent_move": "L'adversaire a joué — à vous",
|
||||||
|
"after_opponent_pre_game_roll": "L'adversaire a lancé — à vous",
|
||||||
|
"pre_game_roll_title": "Qui joue en premier ?",
|
||||||
|
"pre_game_roll_btn": "Lancer",
|
||||||
|
"pre_game_roll_tie": "Égalité ! Relancez",
|
||||||
|
"pre_game_roll_your_die": "Votre dé",
|
||||||
|
"pre_game_roll_opp_die": "Dé adverse",
|
||||||
|
"continue_btn": "Continuer",
|
||||||
|
"scored_pts": "+{{ n }} pts",
|
||||||
|
"hole_made": "Trou ! {{ holes }}/12",
|
||||||
|
"bredouille_applied": "Bredouille !",
|
||||||
|
"hold": "Tenir",
|
||||||
|
"opp_scored_pts": "Adversaire +{{ n }} pts",
|
||||||
|
"opp_hole_made": "Trou adverse ! {{ holes }}/12",
|
||||||
|
"hint_move": "Cliquez un champ surligné pour déplacer",
|
||||||
|
"hint_hold_or_go": "Tenir pour garder les points — S'en aller pour repartir",
|
||||||
|
"hint_continue": "Cliquez Continuer quand vous êtes prêt",
|
||||||
|
"sign_in": "Se connecter",
|
||||||
|
"sign_out": "Se déconnecter",
|
||||||
|
"create_account": "Créer un compte",
|
||||||
|
"account_title": "Compte",
|
||||||
|
"label_username": "Nom d'utilisateur",
|
||||||
|
"label_password": "Mot de passe",
|
||||||
|
"label_email": "Email",
|
||||||
|
"loading": "Chargement…",
|
||||||
|
"member_since": "Membre depuis",
|
||||||
|
"stat_games": "Parties",
|
||||||
|
"stat_wins": "Victoires",
|
||||||
|
"stat_losses": "Défaites",
|
||||||
|
"stat_draws": "Nuls",
|
||||||
|
"game_history_title": "Historique",
|
||||||
|
"no_games": "Aucune partie enregistrée.",
|
||||||
|
"col_room": "Salle",
|
||||||
|
"col_started": "Début",
|
||||||
|
"col_ended": "Fin",
|
||||||
|
"col_outcome": "Résultat",
|
||||||
|
"col_detail": "Détail",
|
||||||
|
"prev_page": "← Précédent",
|
||||||
|
"next_page": "Suivant →",
|
||||||
|
"page_label": "Page",
|
||||||
|
"view_link": "Voir",
|
||||||
|
"outcome_win": "victoire",
|
||||||
|
"outcome_loss": "défaite",
|
||||||
|
"outcome_draw": "nul",
|
||||||
|
"players_header": "Joueurs",
|
||||||
|
"col_player": "Joueur",
|
||||||
|
"score_header": "Score",
|
||||||
|
"game_ongoing": "en cours",
|
||||||
|
"anonymous_player": "anonyme",
|
||||||
|
"started_label": "Début",
|
||||||
|
"ended_label": "Fin",
|
||||||
|
"room_detail_title": "Salle"
|
||||||
|
}
|
||||||
191
clients/web/src/api.rs
Normal file
191
clients/web/src/api.rs
Normal file
|
|
@ -0,0 +1,191 @@
|
||||||
|
use serde::{Deserialize, Serialize};
|
||||||
|
|
||||||
|
#[cfg(debug_assertions)]
|
||||||
|
pub const HTTP_BASE: &str = "http://localhost:8080";
|
||||||
|
#[cfg(not(debug_assertions))]
|
||||||
|
pub const HTTP_BASE: &str = "";
|
||||||
|
|
||||||
|
fn url(path: &str) -> String {
|
||||||
|
format!("{HTTP_BASE}{path}")
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Response types ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
#[derive(Clone, Debug, Deserialize)]
|
||||||
|
pub struct MeResponse {
|
||||||
|
pub id: i64,
|
||||||
|
pub username: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Clone, Debug, Deserialize)]
|
||||||
|
pub struct UserProfile {
|
||||||
|
pub id: i64,
|
||||||
|
pub username: String,
|
||||||
|
pub created_at: i64,
|
||||||
|
pub total_games: i64,
|
||||||
|
pub wins: i64,
|
||||||
|
pub losses: i64,
|
||||||
|
pub draws: i64,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Clone, Debug, Deserialize)]
|
||||||
|
pub struct GameSummary {
|
||||||
|
pub id: i64,
|
||||||
|
pub game_id: String,
|
||||||
|
pub room_code: String,
|
||||||
|
pub started_at: i64,
|
||||||
|
pub ended_at: Option<i64>,
|
||||||
|
pub result: Option<String>,
|
||||||
|
pub outcome: Option<String>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Clone, Debug, Deserialize)]
|
||||||
|
pub struct GamesResponse {
|
||||||
|
pub games: Vec<GameSummary>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Clone, Debug, Deserialize)]
|
||||||
|
pub struct Participant {
|
||||||
|
pub player_id: i64,
|
||||||
|
pub outcome: Option<String>,
|
||||||
|
pub username: Option<String>,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Clone, Debug, Deserialize)]
|
||||||
|
pub struct GameDetail {
|
||||||
|
pub id: i64,
|
||||||
|
pub game_id: String,
|
||||||
|
pub room_code: String,
|
||||||
|
pub started_at: i64,
|
||||||
|
pub ended_at: Option<i64>,
|
||||||
|
pub result: Option<String>,
|
||||||
|
pub participants: Vec<Participant>,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Request bodies ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
#[derive(Serialize)]
|
||||||
|
pub struct RegisterBody<'a> {
|
||||||
|
pub username: &'a str,
|
||||||
|
pub email: &'a str,
|
||||||
|
pub password: &'a str,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Serialize)]
|
||||||
|
pub struct LoginBody<'a> {
|
||||||
|
pub username: &'a str,
|
||||||
|
pub password: &'a str,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Fetch helpers ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
pub async fn get_me() -> Result<MeResponse, String> {
|
||||||
|
let resp = gloo_net::http::Request::get(&url("/auth/me"))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 200 {
|
||||||
|
resp.json::<MeResponse>().await.map_err(|e| e.to_string())
|
||||||
|
} else {
|
||||||
|
Err(format!("status {}", resp.status()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn post_login(username: &str, password: &str) -> Result<MeResponse, String> {
|
||||||
|
let body = LoginBody { username, password };
|
||||||
|
let resp = gloo_net::http::Request::post(&url("/auth/login"))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.json(&body)
|
||||||
|
.map_err(|e| e.to_string())?
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 200 {
|
||||||
|
resp.json::<MeResponse>().await.map_err(|e| e.to_string())
|
||||||
|
} else {
|
||||||
|
let text = resp.text().await.unwrap_or_default();
|
||||||
|
Err(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn post_register(username: &str, email: &str, password: &str) -> Result<MeResponse, String> {
|
||||||
|
let body = RegisterBody { username, email, password };
|
||||||
|
let resp = gloo_net::http::Request::post(&url("/auth/register"))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.json(&body)
|
||||||
|
.map_err(|e| e.to_string())?
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 201 {
|
||||||
|
resp.json::<MeResponse>().await.map_err(|e| e.to_string())
|
||||||
|
} else {
|
||||||
|
let text = resp.text().await.unwrap_or_default();
|
||||||
|
Err(text)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn post_logout() -> Result<(), String> {
|
||||||
|
let resp = gloo_net::http::Request::post(&url("/auth/logout"))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 204 {
|
||||||
|
Ok(())
|
||||||
|
} else {
|
||||||
|
Err(format!("status {}", resp.status()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn get_user_profile(username: &str) -> Result<UserProfile, String> {
|
||||||
|
let resp = gloo_net::http::Request::get(&url(&format!("/users/{username}")))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 200 {
|
||||||
|
resp.json::<UserProfile>().await.map_err(|e| e.to_string())
|
||||||
|
} else {
|
||||||
|
Err(format!("status {}", resp.status()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn get_user_games(username: &str, page: i64) -> Result<GamesResponse, String> {
|
||||||
|
let resp = gloo_net::http::Request::get(&url(&format!(
|
||||||
|
"/users/{username}/games?page={page}&per_page=20"
|
||||||
|
)))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 200 {
|
||||||
|
resp.json::<GamesResponse>().await.map_err(|e| e.to_string())
|
||||||
|
} else {
|
||||||
|
Err(format!("status {}", resp.status()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
pub async fn get_game_detail(id: i64) -> Result<GameDetail, String> {
|
||||||
|
let resp = gloo_net::http::Request::get(&url(&format!("/games/{id}")))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.send()
|
||||||
|
.await
|
||||||
|
.map_err(|e| e.to_string())?;
|
||||||
|
if resp.status() == 200 {
|
||||||
|
resp.json::<GameDetail>().await.map_err(|e| e.to_string())
|
||||||
|
} else {
|
||||||
|
Err(format!("status {}", resp.status()))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Utilities ─────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
pub fn format_ts(ts: i64) -> String {
|
||||||
|
let ms = (ts * 1000) as f64;
|
||||||
|
let date = js_sys::Date::new(&wasm_bindgen::JsValue::from_f64(ms));
|
||||||
|
date.to_locale_string("en-GB", &wasm_bindgen::JsValue::UNDEFINED)
|
||||||
|
.as_string()
|
||||||
|
.unwrap_or_default()
|
||||||
|
}
|
||||||
459
clients/web/src/app.rs
Normal file
459
clients/web/src/app.rs
Normal file
|
|
@ -0,0 +1,459 @@
|
||||||
|
use futures::channel::mpsc;
|
||||||
|
use futures::{FutureExt, StreamExt};
|
||||||
|
use gloo_storage::{LocalStorage, Storage};
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use leptos::task::spawn_local;
|
||||||
|
use leptos_router::components::{Route, Router, Routes};
|
||||||
|
use leptos_router::path;
|
||||||
|
use serde::{Deserialize, Serialize};
|
||||||
|
|
||||||
|
use backbone_lib::session::{ConnectError, GameSession, RoomConfig, RoomRole, SessionEvent};
|
||||||
|
use backbone_lib::traits::ViewStateUpdate;
|
||||||
|
|
||||||
|
use crate::api;
|
||||||
|
use crate::game::components::{ConnectingScreen, GameScreen};
|
||||||
|
use crate::game::session::{
|
||||||
|
compute_last_moves, push_or_show, run_local_bot_game,
|
||||||
|
};
|
||||||
|
use crate::game::trictrac::backend::TrictracBackend;
|
||||||
|
use crate::game::trictrac::types::{
|
||||||
|
GameDelta, PlayerAction, ScoredEvent, SerStage, ViewState,
|
||||||
|
};
|
||||||
|
use crate::i18n::I18nContextProvider;
|
||||||
|
use crate::nav::SiteNav;
|
||||||
|
use crate::portal::{account::AccountPage, game_detail::GameDetailPage, lobby::LobbyPage, profile::ProfilePage};
|
||||||
|
use trictrac_store::CheckerMove;
|
||||||
|
|
||||||
|
use std::collections::VecDeque;
|
||||||
|
|
||||||
|
const RELAY_URL: &str = "ws://localhost: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,
|
||||||
|
pub is_bot_game: bool,
|
||||||
|
pub waiting_for_confirm: bool,
|
||||||
|
pub pause_reason: Option<PauseReason>,
|
||||||
|
pub my_scored_event: Option<ScoredEvent>,
|
||||||
|
pub opp_scored_event: Option<ScoredEvent>,
|
||||||
|
pub last_moves: Option<(CheckerMove, CheckerMove)>,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Reason the UI is paused waiting for the player to click Continue.
|
||||||
|
#[derive(Clone, Debug, PartialEq)]
|
||||||
|
pub enum PauseReason {
|
||||||
|
AfterOpponentRoll,
|
||||||
|
AfterOpponentGo,
|
||||||
|
AfterOpponentMove,
|
||||||
|
AfterOpponentPreGameRoll,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Which screen is currently shown (used to toggle game overlay).
|
||||||
|
#[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>>,
|
||||||
|
},
|
||||||
|
PlayVsBot,
|
||||||
|
Action(PlayerAction),
|
||||||
|
Disconnect,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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);
|
||||||
|
}
|
||||||
|
|
||||||
|
async fn submit_game_result(room_code: String, game_state: ViewState) {
|
||||||
|
let [score_pl1, score_pl2] = game_state.scores;
|
||||||
|
let result_str = format!("{:?} - {:?}", score_pl1.holes, score_pl2.holes);
|
||||||
|
let outcomes = if score_pl1.holes < score_pl2.holes {
|
||||||
|
[("0", "loss"), ("1", "win")]
|
||||||
|
} else if score_pl2.holes < score_pl1.holes {
|
||||||
|
[("0", "win"), ("1", "loss")]
|
||||||
|
} else {
|
||||||
|
[("0", "draw"), ("1", "draw")]
|
||||||
|
};
|
||||||
|
let body = serde_json::json!({
|
||||||
|
"room_code": room_code,
|
||||||
|
"game_id": GAME_ID,
|
||||||
|
"result": result_str,
|
||||||
|
"outcomes": std::collections::HashMap::from(outcomes),
|
||||||
|
});
|
||||||
|
let _ = gloo_net::http::Request::post(&format!("{}/games/result", api::HTTP_BASE))
|
||||||
|
.credentials(web_sys::RequestCredentials::Include)
|
||||||
|
.json(&body)
|
||||||
|
.unwrap()
|
||||||
|
.send()
|
||||||
|
.await;
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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<Screen> = RwSignal::new(initial_screen);
|
||||||
|
provide_context(screen);
|
||||||
|
|
||||||
|
// Auth: fetch once on load; shared by nav + game + portal components.
|
||||||
|
let auth_username: RwSignal<Option<String>> = RwSignal::new(None);
|
||||||
|
provide_context(auth_username);
|
||||||
|
spawn_local(async move {
|
||||||
|
if let Ok(me) = api::get_me().await {
|
||||||
|
auth_username.set(Some(me.username));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let (cmd_tx, mut cmd_rx) = mpsc::unbounded::<NetCommand>();
|
||||||
|
let pending: RwSignal<VecDeque<GameUiState>> = RwSignal::new(VecDeque::new());
|
||||||
|
provide_context(pending);
|
||||||
|
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 {
|
||||||
|
let remote_config: Option<(RoomConfig, bool)> = loop {
|
||||||
|
match cmd_rx.next().await {
|
||||||
|
Some(NetCommand::PlayVsBot) => break None,
|
||||||
|
Some(NetCommand::CreateRoom { room }) => {
|
||||||
|
break Some((
|
||||||
|
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 Some((
|
||||||
|
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 Some((
|
||||||
|
RoomConfig {
|
||||||
|
relay_url,
|
||||||
|
game_id,
|
||||||
|
room_id,
|
||||||
|
rule_variation: 0,
|
||||||
|
role: RoomRole::Join,
|
||||||
|
reconnect_token: Some(token),
|
||||||
|
host_state,
|
||||||
|
},
|
||||||
|
true,
|
||||||
|
));
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if remote_config.is_none() {
|
||||||
|
loop {
|
||||||
|
let restart = run_local_bot_game(screen, &mut cmd_rx, pending).await;
|
||||||
|
if !restart {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
pending.update(|q| q.clear());
|
||||||
|
screen.set(Screen::Login { error: None });
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
let (config, is_reconnect) = remote_config.unwrap();
|
||||||
|
|
||||||
|
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("Blancs", "Noirs");
|
||||||
|
let mut result_submitted = false;
|
||||||
|
|
||||||
|
loop {
|
||||||
|
futures::select! {
|
||||||
|
cmd = cmd_rx.next().fuse() => match cmd {
|
||||||
|
Some(NetCommand::Action(action)) => {
|
||||||
|
session.send_action(action);
|
||||||
|
}
|
||||||
|
_ => {
|
||||||
|
clear_session();
|
||||||
|
session.disconnect();
|
||||||
|
pending.update(|q| q.clear());
|
||||||
|
screen.set(Screen::Login { error: None });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
event = session.next_event().fuse() => match event {
|
||||||
|
Some(SessionEvent::Update(u)) => {
|
||||||
|
let prev_vs = vs.clone();
|
||||||
|
match u {
|
||||||
|
ViewStateUpdate::Full(state) => vs = state,
|
||||||
|
ViewStateUpdate::Incremental(delta) => vs.apply_delta(&delta),
|
||||||
|
}
|
||||||
|
|
||||||
|
if is_host && !result_submitted && vs.stage == SerStage::Ended {
|
||||||
|
result_submitted = true;
|
||||||
|
let room = room_id_for_storage.clone();
|
||||||
|
let gs = vs.clone();
|
||||||
|
spawn_local(submit_game_result(room, gs));
|
||||||
|
}
|
||||||
|
|
||||||
|
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()),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let is_own_move = prev_vs.active_mp_player == Some(player_id);
|
||||||
|
push_or_show(
|
||||||
|
&prev_vs,
|
||||||
|
GameUiState {
|
||||||
|
view_state: vs.clone(),
|
||||||
|
player_id,
|
||||||
|
room_id: room_id_for_storage.clone(),
|
||||||
|
is_bot_game: false,
|
||||||
|
waiting_for_confirm: false,
|
||||||
|
pause_reason: None,
|
||||||
|
my_scored_event: None,
|
||||||
|
opp_scored_event: None,
|
||||||
|
last_moves: compute_last_moves(&prev_vs, &vs, is_own_move),
|
||||||
|
},
|
||||||
|
pending,
|
||||||
|
screen,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
Some(SessionEvent::Disconnected(reason)) => {
|
||||||
|
pending.update(|q| q.clear());
|
||||||
|
screen.set(Screen::Login { error: reason });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
None => {
|
||||||
|
pending.update(|q| q.clear());
|
||||||
|
screen.set(Screen::Login { error: None });
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<I18nContextProvider>
|
||||||
|
<Router>
|
||||||
|
// Nav: hidden while game overlay is active
|
||||||
|
<SiteNav />
|
||||||
|
|
||||||
|
// Portal pages — always mounted for router stability
|
||||||
|
<main>
|
||||||
|
<Routes fallback=|| view! { <p class="portal-empty" style="padding:3rem;text-align:center">"Page not found."</p> }>
|
||||||
|
<Route path=path!("/") view=LobbyPage />
|
||||||
|
<Route path=path!("/account") view=AccountPage />
|
||||||
|
<Route path=path!("/profile/:username") view=ProfilePage />
|
||||||
|
<Route path=path!("/games/:id") view=GameDetailPage />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
// Game overlay: fixed, covers portal during play
|
||||||
|
{move || {
|
||||||
|
let q = pending.get();
|
||||||
|
let front = q.front().cloned();
|
||||||
|
if let Some(state) = front {
|
||||||
|
return view! {
|
||||||
|
<div class="game-overlay"><GameScreen state /></div>
|
||||||
|
}.into_any();
|
||||||
|
}
|
||||||
|
match screen.get() {
|
||||||
|
Screen::Playing(state) => view! {
|
||||||
|
<div class="game-overlay"><GameScreen state /></div>
|
||||||
|
}.into_any(),
|
||||||
|
Screen::Connecting => view! {
|
||||||
|
<div class="game-overlay"><ConnectingScreen /></div>
|
||||||
|
}.into_any(),
|
||||||
|
_ => view! { }.into_any(),
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
</Router>
|
||||||
|
</I18nContextProvider>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(test)]
|
||||||
|
mod tests {
|
||||||
|
use super::*;
|
||||||
|
use crate::game::session::infer_pause_reason;
|
||||||
|
use crate::game::trictrac::types::{PlayerScore, SerStage, SerTurnStage};
|
||||||
|
|
||||||
|
fn score() -> PlayerScore {
|
||||||
|
PlayerScore {
|
||||||
|
name: String::new(),
|
||||||
|
points: 0,
|
||||||
|
holes: 0,
|
||||||
|
can_bredouille: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fn vs(dice: (u8, u8), turn_stage: SerTurnStage, active: Option<u16>) -> ViewState {
|
||||||
|
ViewState {
|
||||||
|
board: [0i8; 24],
|
||||||
|
stage: SerStage::InGame,
|
||||||
|
turn_stage,
|
||||||
|
active_mp_player: active,
|
||||||
|
scores: [score(), score()],
|
||||||
|
dice,
|
||||||
|
dice_jans: Vec::new(),
|
||||||
|
dice_moves: (CheckerMove::default(), CheckerMove::default()),
|
||||||
|
pre_game_roll: None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn dice_change_is_after_roll() {
|
||||||
|
let prev = vs((0, 0), SerTurnStage::RollDice, Some(1));
|
||||||
|
let next = vs((3, 5), SerTurnStage::Move, Some(1));
|
||||||
|
assert_eq!(
|
||||||
|
infer_pause_reason(&prev, &next, 0),
|
||||||
|
Some(PauseReason::AfterOpponentRoll)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn hold_to_move_is_after_go() {
|
||||||
|
let prev = vs((3, 5), SerTurnStage::HoldOrGoChoice, Some(1));
|
||||||
|
let next = vs((3, 5), SerTurnStage::Move, Some(1));
|
||||||
|
assert_eq!(
|
||||||
|
infer_pause_reason(&prev, &next, 0),
|
||||||
|
Some(PauseReason::AfterOpponentGo)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn turn_switch_is_after_move() {
|
||||||
|
let prev = vs((3, 5), SerTurnStage::Move, Some(1));
|
||||||
|
let next = vs((3, 5), SerTurnStage::RollDice, Some(0));
|
||||||
|
assert_eq!(
|
||||||
|
infer_pause_reason(&prev, &next, 0),
|
||||||
|
Some(PauseReason::AfterOpponentMove)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn own_action_returns_none() {
|
||||||
|
let prev = vs((0, 0), SerTurnStage::RollDice, Some(0));
|
||||||
|
let next = vs((2, 4), SerTurnStage::Move, Some(0));
|
||||||
|
assert_eq!(infer_pause_reason(&prev, &next, 0), None);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn no_active_player_returns_none() {
|
||||||
|
let mut prev = vs((0, 0), SerTurnStage::RollDice, None);
|
||||||
|
prev.stage = SerStage::PreGame;
|
||||||
|
let mut next = prev.clone();
|
||||||
|
next.active_mp_player = Some(0);
|
||||||
|
assert_eq!(infer_pause_reason(&prev, &next, 0), None);
|
||||||
|
}
|
||||||
|
}
|
||||||
594
clients/web/src/game/components/board.rs
Normal file
594
clients/web/src/game/components/board.rs
Normal file
|
|
@ -0,0 +1,594 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use trictrac_store::CheckerMove;
|
||||||
|
|
||||||
|
use super::die::Die;
|
||||||
|
use crate::game::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];
|
||||||
|
|
||||||
|
/// The rest corner is field 12 (White) or field 13 (Black) in the store's coordinate system.
|
||||||
|
/// Returns true when `field_num` is the rest corner for this perspective.
|
||||||
|
#[allow(dead_code)]
|
||||||
|
fn is_rest_corner(field_num: u8, is_white: bool) -> bool {
|
||||||
|
if is_white {
|
||||||
|
field_num == 12
|
||||||
|
} else {
|
||||||
|
field_num == 13
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Zone CSS class for a field number (field coordinates are always White's 1-24).
|
||||||
|
fn field_zone_class(field_num: u8) -> &'static str {
|
||||||
|
match field_num {
|
||||||
|
1..=6 => "zone-petit",
|
||||||
|
7..=12 => "zone-grand",
|
||||||
|
13..=18 => "zone-opponent",
|
||||||
|
19..=24 => "zone-retour",
|
||||||
|
_ => "",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Returns (d0_used, d1_used) for the bar dice display.
|
||||||
|
fn bar_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)
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 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
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Fields whose checkers may be selected as the next origin given already-staged moves.
|
||||||
|
fn valid_origins_for(seqs: &[(CheckerMove, CheckerMove)], staged: &[(u8, u8)]) -> Vec<u8> {
|
||||||
|
let mut v: Vec<u8> = match staged.len() {
|
||||||
|
0 => seqs
|
||||||
|
.iter()
|
||||||
|
.map(|(m1, _)| m1.get_from() as u8)
|
||||||
|
.filter(|&f| f != 0)
|
||||||
|
.collect(),
|
||||||
|
1 => {
|
||||||
|
let (f0, t0) = staged[0];
|
||||||
|
seqs.iter()
|
||||||
|
.filter(|(m1, _)| m1.get_from() as u8 == f0 && m1.get_to() as u8 == t0)
|
||||||
|
.map(|(_, m2)| m2.get_from() as u8)
|
||||||
|
.filter(|&f| f != 0)
|
||||||
|
.collect()
|
||||||
|
}
|
||||||
|
_ => vec![],
|
||||||
|
};
|
||||||
|
v.sort_unstable();
|
||||||
|
v.dedup();
|
||||||
|
v
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Pixel center of a board field in the SVG overlay coordinate space.
|
||||||
|
/// Geometry: field 60×180px, board padding 4px, gap 4px, bar 20px, center-bar 12px.
|
||||||
|
/// With triangular flèches, arrows target the WIDE BASE of each triangle —
|
||||||
|
/// that is where the checker stack actually sits.
|
||||||
|
fn field_center(f: usize, is_white: bool) -> Option<(f32, f32)> {
|
||||||
|
if f == 0 || f > 24 {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
let (qi, right, top): (usize, bool, bool) = if is_white {
|
||||||
|
match f {
|
||||||
|
13..=18 => (f - 13, false, true),
|
||||||
|
19..=24 => (f - 19, true, true),
|
||||||
|
7..=12 => (12 - f, false, false),
|
||||||
|
1..=6 => (6 - f, true, false),
|
||||||
|
_ => return None,
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
match f {
|
||||||
|
1..=6 => (f - 1, false, true),
|
||||||
|
7..=12 => (f - 7, true, true),
|
||||||
|
19..=24 => (24 - f, false, false),
|
||||||
|
13..=18 => (18 - f, true, false),
|
||||||
|
_ => return None,
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// Left-quarter field i center x: 4(pad) + i*62 + 30(half field) = 34 + 62i
|
||||||
|
// Right-quarter: 4 + 370(quarter) + 4(gap) + 68(bar) + 4(gap) + i*62 + 30 = 480 + 62i
|
||||||
|
let x = if right {
|
||||||
|
480.0 + qi as f32 * 62.0
|
||||||
|
} else {
|
||||||
|
34.0 + qi as f32 * 62.0
|
||||||
|
};
|
||||||
|
// Top row triangle base (wide end) ≈ y=30; bot row triangle base ≈ y=358.
|
||||||
|
// (Top base: 4pad + 4field-pad + 20half-checker ≈ 28; Bot base: 388 − 4pad − 4field-pad − 20 ≈ 360)
|
||||||
|
let y = if top { 30.0 } else { 358.0 };
|
||||||
|
Some((x, y))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// SVG `<g>` element drawing one arrow (shadow + gold) from `fp` to `tp`.
|
||||||
|
fn arrow_svg(fp: (f32, f32), tp: (f32, f32)) -> AnyView {
|
||||||
|
let (x1, y1) = fp;
|
||||||
|
let (x2, y2) = tp;
|
||||||
|
let dx = x2 - x1;
|
||||||
|
let dy = y2 - y1;
|
||||||
|
let len = (dx * dx + dy * dy).sqrt();
|
||||||
|
if len < 10.0 {
|
||||||
|
return view! { <g /> }.into_any();
|
||||||
|
}
|
||||||
|
let nx = dx / len;
|
||||||
|
let ny = dy / len;
|
||||||
|
let px = -ny;
|
||||||
|
let py = nx;
|
||||||
|
|
||||||
|
// Shrink line ends so arrows don't overlap the checker stack
|
||||||
|
let lx1 = x1 + nx * 20.0;
|
||||||
|
let ly1 = y1 + ny * 20.0;
|
||||||
|
let lx2 = x2 - nx * 15.0;
|
||||||
|
let ly2 = y2 - ny * 15.0;
|
||||||
|
|
||||||
|
// Arrowhead triangle at (x2, y2)
|
||||||
|
let ah = 15.0_f32;
|
||||||
|
let aw = 7.0_f32;
|
||||||
|
let bx = x2 - nx * ah;
|
||||||
|
let bary = y2 - ny * ah;
|
||||||
|
let pts = format!(
|
||||||
|
"{:.1},{:.1} {:.1},{:.1} {:.1},{:.1}",
|
||||||
|
x2,
|
||||||
|
y2,
|
||||||
|
bx + px * aw,
|
||||||
|
bary + py * aw,
|
||||||
|
bx - px * aw,
|
||||||
|
bary - py * aw,
|
||||||
|
);
|
||||||
|
let shadow_pts = format!(
|
||||||
|
"{:.1},{:.1} {:.1},{:.1} {:.1},{:.1}",
|
||||||
|
x2,
|
||||||
|
y2,
|
||||||
|
bx + px * (aw + 1.5),
|
||||||
|
bary + py * (aw + 1.5),
|
||||||
|
bx - px * (aw + 1.5),
|
||||||
|
bary - py * (aw + 1.5),
|
||||||
|
);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<g>
|
||||||
|
// Drop-shadow for readability on coloured fields
|
||||||
|
<line
|
||||||
|
x1=format!("{lx1:.1}") y1=format!("{ly1:.1}")
|
||||||
|
x2=format!("{lx2:.1}") y2=format!("{ly2:.1}")
|
||||||
|
style="stroke:rgba(0,0,0,0.45);stroke-width:5;stroke-linecap:round"
|
||||||
|
/>
|
||||||
|
<polygon points=shadow_pts style="fill:rgba(0,0,0,0.45)" />
|
||||||
|
// Gold arrow
|
||||||
|
<line
|
||||||
|
x1=format!("{lx1:.1}") y1=format!("{ly1:.1}")
|
||||||
|
x2=format!("{lx2:.1}") y2=format!("{ly2:.1}")
|
||||||
|
style="stroke:rgba(255,215,0,0.9);stroke-width:3;stroke-linecap:round"
|
||||||
|
/>
|
||||||
|
<polygon points=pts style="fill:rgba(255,215,0,0.9)" />
|
||||||
|
</g>
|
||||||
|
}
|
||||||
|
.into_any()
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Valid destinations for a selected origin given already-staged moves.
|
||||||
|
/// May include 0 (exit); callers handle that case.
|
||||||
|
fn valid_dests_for(
|
||||||
|
seqs: &[(CheckerMove, CheckerMove)],
|
||||||
|
staged: &[(u8, u8)],
|
||||||
|
origin: u8,
|
||||||
|
) -> Vec<u8> {
|
||||||
|
let mut v: Vec<u8> = match staged.len() {
|
||||||
|
0 => seqs
|
||||||
|
.iter()
|
||||||
|
.filter(|(m1, _)| m1.get_from() as u8 == origin)
|
||||||
|
.map(|(m1, _)| m1.get_to() as u8)
|
||||||
|
.collect(),
|
||||||
|
1 => {
|
||||||
|
let (f0, t0) = staged[0];
|
||||||
|
seqs.iter()
|
||||||
|
.filter(|(m1, m2)| {
|
||||||
|
m1.get_from() as u8 == f0
|
||||||
|
&& m1.get_to() as u8 == t0
|
||||||
|
&& m2.get_from() as u8 == origin
|
||||||
|
})
|
||||||
|
.map(|(_, m2)| m2.get_to() as u8)
|
||||||
|
.collect()
|
||||||
|
}
|
||||||
|
_ => vec![],
|
||||||
|
};
|
||||||
|
v.sort_unstable();
|
||||||
|
v.dedup();
|
||||||
|
v
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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)>>,
|
||||||
|
/// All valid two-move sequences for this turn (empty when not in move stage).
|
||||||
|
valid_sequences: Vec<(CheckerMove, CheckerMove)>,
|
||||||
|
/// Dice to display in the center bars; None means dice not yet rolled (cups shown upright).
|
||||||
|
#[prop(default = None)]
|
||||||
|
bar_dice: Option<(u8, u8)>,
|
||||||
|
/// Whether we're in the move stage (determines used/unused die appearance).
|
||||||
|
#[prop(default = false)]
|
||||||
|
bar_is_move: bool,
|
||||||
|
#[prop(default = false)] is_my_turn: bool,
|
||||||
|
/// Whether the dice are a double (golden glow).
|
||||||
|
#[prop(default = false)]
|
||||||
|
bar_is_double: bool,
|
||||||
|
/// Checker moves to animate on mount (None when board unchanged).
|
||||||
|
#[prop(default = None)]
|
||||||
|
last_moves: Option<(CheckerMove, CheckerMove)>,
|
||||||
|
/// Fields where a hit (battue) was scored this turn — show ripple animation.
|
||||||
|
#[prop(default = vec![])]
|
||||||
|
hit_fields: Vec<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 hovered_moves = use_context::<RwSignal<Vec<(CheckerMove, CheckerMove)>>>();
|
||||||
|
|
||||||
|
// Exit-eligible (§8c): all the player's checkers are in their last jan.
|
||||||
|
// White last jan = fields 19-24 (board indices 18-23, positive values).
|
||||||
|
// Black last jan = fields 1-6 (board indices 0-5, negative values).
|
||||||
|
let board_snapshot = view_state.board;
|
||||||
|
let all_in_exit: bool;
|
||||||
|
let exit_field_test: fn(u8) -> bool;
|
||||||
|
if is_white {
|
||||||
|
let in_exit: i8 = board_snapshot[18..24].iter().map(|&v| v.max(0)).sum();
|
||||||
|
let total: i8 = board_snapshot.iter().map(|&v| v.max(0)).sum();
|
||||||
|
all_in_exit = total > 0 && in_exit == total;
|
||||||
|
exit_field_test = |f| matches!(f, 19..=24);
|
||||||
|
} else {
|
||||||
|
let in_exit: i8 = board_snapshot[0..6].iter().map(|&v| (-v).max(0)).sum();
|
||||||
|
let total: i8 = board_snapshot.iter().map(|&v| (-v).max(0)).sum();
|
||||||
|
all_in_exit = total > 0 && in_exit == total;
|
||||||
|
exit_field_test = |f| matches!(f, 1..=6);
|
||||||
|
}
|
||||||
|
|
||||||
|
// `valid_sequences` is cloned per field (the Vec is small; Send-safe unlike Rc).
|
||||||
|
let fields_from = |nums: &[u8], is_top_row: bool| -> Vec<AnyView> {
|
||||||
|
nums.iter()
|
||||||
|
.map(|&field_num| {
|
||||||
|
// Each reactive closure gets its own owned clone — Vec<(CheckerMove,CheckerMove)>
|
||||||
|
// is Send, which Leptos requires for reactive attribute functions.
|
||||||
|
let seqs_c = valid_sequences.clone();
|
||||||
|
let seqs_k = valid_sequences.clone();
|
||||||
|
let corner_title = if is_rest_corner(field_num, is_white) {
|
||||||
|
Some("Coin de repos — must enter and leave with 2 checkers")
|
||||||
|
} else {
|
||||||
|
None
|
||||||
|
};
|
||||||
|
// §4a — slide delta for the arriving checker at this field.
|
||||||
|
// Computed once per field at render time; Option<(f32,f32)> is Copy.
|
||||||
|
let slide_delta: Option<(f32, f32)> = last_moves.and_then(|(m1, m2)| {
|
||||||
|
[m1, m2].iter().find_map(|m| {
|
||||||
|
if m.get_to() != field_num as usize || m.get_from() == m.get_to() {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
let (fx, fy) = field_center(m.get_from(), is_white)?;
|
||||||
|
let (tx, ty) = field_center(m.get_to(), is_white)?;
|
||||||
|
let dx = fx - tx;
|
||||||
|
let dy = fy - ty;
|
||||||
|
(dx.abs() >= 1.0 || dy.abs() >= 1.0).then_some((dx, dy))
|
||||||
|
})
|
||||||
|
});
|
||||||
|
// §6e — ripple on hit fields (battue).
|
||||||
|
let is_hit_field = hit_fields.contains(&field_num);
|
||||||
|
view! {
|
||||||
|
<div
|
||||||
|
id={format!("field-{field_num}")}
|
||||||
|
title=corner_title
|
||||||
|
class=move || {
|
||||||
|
let staged = staged_moves.get();
|
||||||
|
let val = displayed_value(board, &staged, is_white, field_num);
|
||||||
|
let is_mine = if is_white { val > 0 } else { val < 0 };
|
||||||
|
let can_stage = is_move_stage && staged.len() < 2;
|
||||||
|
let sel = selected_origin.get();
|
||||||
|
|
||||||
|
let mut cls = format!("field {}", field_zone_class(field_num));
|
||||||
|
if is_rest_corner(field_num, is_white) {
|
||||||
|
cls.push_str(" corner");
|
||||||
|
// Pulse when the corner can be reached this turn
|
||||||
|
if !seqs_c.is_empty() && seqs_c.iter().any(|(m1, m2)| {
|
||||||
|
m1.get_to() as u8 == field_num
|
||||||
|
|| m2.get_to() as u8 == field_num
|
||||||
|
}) {
|
||||||
|
cls.push_str(" corner-available");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if is_rest_corner(field_num, !is_white) {
|
||||||
|
cls.push_str(" corner");
|
||||||
|
}
|
||||||
|
if all_in_exit && exit_field_test(field_num) {
|
||||||
|
cls.push_str(" exit-eligible");
|
||||||
|
}
|
||||||
|
|
||||||
|
if seqs_c.is_empty() {
|
||||||
|
// No restriction (dice not rolled or not move stage)
|
||||||
|
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");
|
||||||
|
}
|
||||||
|
} else if can_stage {
|
||||||
|
if let Some(origin) = sel {
|
||||||
|
if origin == field_num {
|
||||||
|
cls.push_str(" selected clickable");
|
||||||
|
} else {
|
||||||
|
let dests = valid_dests_for(&seqs_c, &staged, origin);
|
||||||
|
// Only highlight non-exit destinations (field 0 = exit has no tile)
|
||||||
|
if dests.iter().any(|&d| d == field_num && d != 0) {
|
||||||
|
cls.push_str(" clickable dest");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let origins = valid_origins_for(&seqs_c, &staged);
|
||||||
|
if origins.iter().any(|&o| o == field_num) {
|
||||||
|
cls.push_str(" clickable");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// §6c: highlight fields touched by the hovered jan
|
||||||
|
if let Some(hm) = hovered_moves {
|
||||||
|
let pairs = hm.get();
|
||||||
|
let f = field_num as usize;
|
||||||
|
let highlighted = pairs.iter().any(|(m1, m2)| {
|
||||||
|
(m1.get_from() != 0 && m1.get_from() == f)
|
||||||
|
|| (m1.get_to() != 0 && m1.get_to() == f)
|
||||||
|
|| (m2.get_from() != 0 && m2.get_from() == f)
|
||||||
|
|| (m2.get_to() != 0 && m2.get_to() == f)
|
||||||
|
});
|
||||||
|
if highlighted {
|
||||||
|
cls.push_str(" jan-hovered");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
cls
|
||||||
|
}
|
||||||
|
on:click=move |_| {
|
||||||
|
if !is_move_stage { return; }
|
||||||
|
let staged = staged_moves.get_untracked();
|
||||||
|
if staged.len() >= 2 { return; }
|
||||||
|
|
||||||
|
match selected_origin.get_untracked() {
|
||||||
|
Some(origin) if origin == field_num => {
|
||||||
|
selected_origin.set(None);
|
||||||
|
}
|
||||||
|
Some(origin) => {
|
||||||
|
let valid = if seqs_k.is_empty() {
|
||||||
|
true
|
||||||
|
} else {
|
||||||
|
valid_dests_for(&seqs_k, &staged, origin)
|
||||||
|
.iter()
|
||||||
|
.any(|&d| d == field_num)
|
||||||
|
};
|
||||||
|
if valid {
|
||||||
|
staged_moves.update(|v| v.push((origin, field_num)));
|
||||||
|
selected_origin.set(None);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
None => {
|
||||||
|
if seqs_k.is_empty() {
|
||||||
|
let val = displayed_value(board, &staged, is_white, field_num);
|
||||||
|
if is_white && val > 0 || !is_white && val < 0 {
|
||||||
|
selected_origin.set(Some(field_num));
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let origins = valid_origins_for(&seqs_k, &staged);
|
||||||
|
if origins.iter().any(|&o| o == field_num) {
|
||||||
|
let dests = valid_dests_for(&seqs_k, &staged, field_num);
|
||||||
|
if !dests.is_empty() && dests.iter().all(|&d| d == 0) {
|
||||||
|
// All destinations are exits: auto-stage
|
||||||
|
staged_moves.update(|v| v.push((field_num, 0)));
|
||||||
|
} else {
|
||||||
|
selected_origin.set(Some(field_num));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<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();
|
||||||
|
// §6e — ripple on hit (battue) fields; must be inside the
|
||||||
|
// reactive closure so Leptos uses the same direct rendering
|
||||||
|
// path as .arriving (avoids node-move that resets animation).
|
||||||
|
let ripple = is_hit_field.then(|| {
|
||||||
|
let cls = if is_top_row { "hit-ripple hit-ripple-top" } else { "hit-ripple hit-ripple-bot" };
|
||||||
|
view! { <div class=cls></div> }.into_any()
|
||||||
|
});
|
||||||
|
let stack = (count > 0).then(|| {
|
||||||
|
let color = if val > 0 { "white" } else { "black" };
|
||||||
|
let display_n = (count as usize).min(4);
|
||||||
|
// outermost index: last for top rows, first for bottom rows.
|
||||||
|
let outer_idx = if is_top_row { display_n - 1 } else { 0 };
|
||||||
|
let chips: Vec<AnyView> = (0..display_n).map(|i| {
|
||||||
|
let label = if i == outer_idx && count >= 5 {
|
||||||
|
count.to_string()
|
||||||
|
} else {
|
||||||
|
String::new()
|
||||||
|
};
|
||||||
|
if i == outer_idx {
|
||||||
|
if let Some((dx, dy)) = slide_delta {
|
||||||
|
return view! {
|
||||||
|
<div
|
||||||
|
class=format!("checker {color} arriving")
|
||||||
|
style=format!("--slide-dx:{dx:.1}px;--slide-dy:{dy:.1}px")
|
||||||
|
>{label}</div>
|
||||||
|
}.into_any();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
view! {
|
||||||
|
<div class=format!("checker {color}")>{label}</div>
|
||||||
|
}.into_any()
|
||||||
|
}).collect();
|
||||||
|
view! { <div class="checker-stack">{chips}</div> }.into_any()
|
||||||
|
});
|
||||||
|
(ripple, stack)
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
.into_any()
|
||||||
|
})
|
||||||
|
.collect()
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Bar content: die in the center bar (die_idx 0 = top bar, 1 = bottom bar) ──
|
||||||
|
let bar_content = move |die_idx: u8| -> AnyView {
|
||||||
|
match bar_dice {
|
||||||
|
None => view! { <div class="bar-die-slot"></div> }.into_any(),
|
||||||
|
Some(dice_vals) => {
|
||||||
|
let die_val = if die_idx == 0 {
|
||||||
|
dice_vals.0
|
||||||
|
} else {
|
||||||
|
dice_vals.1
|
||||||
|
};
|
||||||
|
view! {
|
||||||
|
<div class="bar-die-slot">
|
||||||
|
{move || {
|
||||||
|
let staged = staged_moves.get();
|
||||||
|
let (u0, u1) = if bar_is_move {
|
||||||
|
bar_matched_dice_used(&staged, dice_vals)
|
||||||
|
} else if is_my_turn {
|
||||||
|
(true, true)
|
||||||
|
} else {
|
||||||
|
(false, false)
|
||||||
|
};
|
||||||
|
let used = if die_idx == 0 { u0 } else { u1 };
|
||||||
|
view! { <Die value=die_val used=used is_double=bar_is_double /> }
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
.into_any()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
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)
|
||||||
|
};
|
||||||
|
|
||||||
|
// Zone label pairs (top-left, top-right, bot-left, bot-right) per perspective.
|
||||||
|
let (label_tl, label_tr, label_bl, label_br) = if is_white {
|
||||||
|
("", "jan de retour", "grand jan", "petit jan")
|
||||||
|
} else {
|
||||||
|
("petit jan", "grand jan", "jan de retour", "")
|
||||||
|
};
|
||||||
|
|
||||||
|
view! {
|
||||||
|
// board-wrapper keeps zone labels outside .board so the SVG overlay
|
||||||
|
// inside .board stays correctly positioned (position:absolute top:0 left:0
|
||||||
|
// is relative to .board, not the wrapper).
|
||||||
|
<div class="board-wrapper">
|
||||||
|
<div class="zone-labels-row">
|
||||||
|
<div class="zone-label zone-label-quarter">{label_tl}</div>
|
||||||
|
<div class="zone-label zone-label-bar"></div>
|
||||||
|
<div class="zone-label zone-label-quarter">{label_tr}</div>
|
||||||
|
</div>
|
||||||
|
<div class="board">
|
||||||
|
<div class="board-row top-row">
|
||||||
|
<div class="board-quarter">{fields_from(tl, true)}</div>
|
||||||
|
<div class="board-bar">{bar_content(0)}</div>
|
||||||
|
<div class="board-quarter">{fields_from(tr, true)}</div>
|
||||||
|
</div>
|
||||||
|
<div class="board-center-bar"></div>
|
||||||
|
<div class="board-row bot-row">
|
||||||
|
<div class="board-quarter">{fields_from(bl, false)}</div>
|
||||||
|
<div class="board-bar">{bar_content(1)}</div>
|
||||||
|
<div class="board-quarter">{fields_from(br, false)}</div>
|
||||||
|
</div>
|
||||||
|
// SVG overlay: arrows for hovered jan moves
|
||||||
|
<svg
|
||||||
|
width="824" height="388"
|
||||||
|
style="position:absolute;top:0;left:0;pointer-events:none;overflow:visible"
|
||||||
|
>
|
||||||
|
{move || {
|
||||||
|
let Some(hm) = hovered_moves else { return vec![]; };
|
||||||
|
let pairs = hm.get();
|
||||||
|
if pairs.is_empty() { return vec![]; }
|
||||||
|
// Collect unique individual (from, to) moves; skip empty/exit.
|
||||||
|
let mut moves: Vec<(usize, usize)> = pairs.iter()
|
||||||
|
.flat_map(|(m1, m2)| [
|
||||||
|
(m1.get_from(), m1.get_to()),
|
||||||
|
(m2.get_from(), m2.get_to()),
|
||||||
|
])
|
||||||
|
.filter(|&(f, t)| f != 0 && t != 0)
|
||||||
|
.collect();
|
||||||
|
moves.sort_unstable();
|
||||||
|
moves.dedup();
|
||||||
|
moves.into_iter()
|
||||||
|
.filter_map(|(from, to)| {
|
||||||
|
let p1 = field_center(from, is_white)?;
|
||||||
|
let p2 = field_center(to, is_white)?;
|
||||||
|
Some(arrow_svg(p1, p2))
|
||||||
|
})
|
||||||
|
.collect()
|
||||||
|
}}
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="zone-labels-row">
|
||||||
|
<div class="zone-label zone-label-quarter">{label_bl}</div>
|
||||||
|
<div class="zone-label zone-label-bar"></div>
|
||||||
|
<div class="zone-label zone-label-quarter">{label_br}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
9
clients/web/src/game/components/connecting_screen.rs
Normal file
9
clients/web/src/game/components/connecting_screen.rs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
|
||||||
|
use crate::i18n::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn ConnectingScreen() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
view! { <p class="connecting">{t!(i18n, connecting)}</p> }
|
||||||
|
}
|
||||||
53
clients/web/src/game/components/die.rs
Normal file
53
clients/web/src/game/components/die.rs
Normal file
|
|
@ -0,0 +1,53 @@
|
||||||
|
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.
|
||||||
|
/// `is_double` applies a golden glow (both dice same value).
|
||||||
|
#[component]
|
||||||
|
pub fn Die(
|
||||||
|
value: u8,
|
||||||
|
used: bool,
|
||||||
|
#[prop(default = false)] is_double: bool,
|
||||||
|
) -> AnyView {
|
||||||
|
let mut cls = if used {
|
||||||
|
"die-face die-used".to_string()
|
||||||
|
} else {
|
||||||
|
"die-face".to_string()
|
||||||
|
};
|
||||||
|
if is_double && !used {
|
||||||
|
cls.push_str(" die-double");
|
||||||
|
}
|
||||||
|
if value == 0 {
|
||||||
|
return 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" />
|
||||||
|
<text x="24" y="32" text-anchor="middle" font-size="24" font-weight="bold"
|
||||||
|
class="die-question">{"?"}</text>
|
||||||
|
</svg>
|
||||||
|
}.into_any();
|
||||||
|
}
|
||||||
|
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>
|
||||||
|
}.into_any()
|
||||||
|
}
|
||||||
470
clients/web/src/game/components/game_screen.rs
Normal file
470
clients/web/src/game/components/game_screen.rs
Normal file
|
|
@ -0,0 +1,470 @@
|
||||||
|
use std::cell::Cell;
|
||||||
|
use std::collections::VecDeque;
|
||||||
|
|
||||||
|
use futures::channel::mpsc::UnboundedSender;
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use trictrac_store::{Board as StoreBoard, CheckerMove, Color, Dice as StoreDice, Jan, MoveRules};
|
||||||
|
|
||||||
|
use super::die::Die;
|
||||||
|
use crate::app::{GameUiState, NetCommand, PauseReason};
|
||||||
|
use crate::i18n::*;
|
||||||
|
use crate::game::trictrac::types::{PlayerAction, PreGameRollState, SerStage, SerTurnStage};
|
||||||
|
|
||||||
|
use super::board::Board;
|
||||||
|
use super::score_panel::PlayerScorePanel;
|
||||||
|
use super::scoring::ScoringPanel;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
|
||||||
|
let auth_username =
|
||||||
|
use_context::<RwSignal<Option<String>>>().unwrap_or_else(|| RwSignal::new(None));
|
||||||
|
let vs = state.view_state.clone();
|
||||||
|
let player_id = state.player_id;
|
||||||
|
let is_my_turn = vs.active_mp_player == Some(player_id);
|
||||||
|
let is_move_stage = is_my_turn
|
||||||
|
&& matches!(
|
||||||
|
vs.turn_stage,
|
||||||
|
SerTurnStage::Move | SerTurnStage::HoldOrGoChoice
|
||||||
|
);
|
||||||
|
let waiting_for_confirm = state.waiting_for_confirm;
|
||||||
|
let pause_reason = state.pause_reason.clone();
|
||||||
|
|
||||||
|
// ── Hovered jan moves (shown as arrows on the board) ──────────────────────
|
||||||
|
let hovered_jan_moves: RwSignal<Vec<(CheckerMove, CheckerMove)>> = RwSignal::new(vec![]);
|
||||||
|
provide_context(hovered_jan_moves);
|
||||||
|
|
||||||
|
// ── 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 pending =
|
||||||
|
use_context::<RwSignal<VecDeque<GameUiState>>>().expect("pending not found in context");
|
||||||
|
let cmd_tx_effect = cmd_tx.clone();
|
||||||
|
// Non-reactive counter so we can detect when staged_moves grows without
|
||||||
|
// returning a value from the Effect (which causes a Leptos reactive loop
|
||||||
|
// when the Effect also writes to the same signal it reads).
|
||||||
|
let prev_staged_len = Cell::new(0usize);
|
||||||
|
|
||||||
|
Effect::new(move |_| {
|
||||||
|
let moves = staged_moves.get();
|
||||||
|
let n = moves.len();
|
||||||
|
// Play checker sound whenever a move is added (own moves, immediate feedback).
|
||||||
|
if n > prev_staged_len.get() {
|
||||||
|
crate::game::sound::play_checker_move();
|
||||||
|
}
|
||||||
|
prev_staged_len.set(n);
|
||||||
|
if n == 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);
|
||||||
|
// Reset the counter so the next turn starts clean.
|
||||||
|
prev_staged_len.set(0);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// ── Auto-roll effect ─────────────────────────────────────────────────────
|
||||||
|
// GameScreen is fully re-mounted on every ViewState update (state is a
|
||||||
|
// plain prop, not a signal), so this effect fires exactly once per
|
||||||
|
// RollDice phase entry and will not double-send.
|
||||||
|
// Guard: suppressed while waiting_for_confirm — the AfterOpponentMove
|
||||||
|
// buffered state shows the human's RollDice turn but the auto-roll must
|
||||||
|
// wait until the buffer is drained and the live screen state is shown.
|
||||||
|
// Guard: never auto-roll during the pre-game ceremony (the ceremony overlay
|
||||||
|
// has its own Roll button for PlayerAction::PreGameRoll).
|
||||||
|
let show_roll =
|
||||||
|
is_my_turn && vs.turn_stage == SerTurnStage::RollDice && vs.stage != SerStage::PreGameRoll;
|
||||||
|
if show_roll && !waiting_for_confirm {
|
||||||
|
let cmd_tx_auto = cmd_tx.clone();
|
||||||
|
Effect::new(move |_| {
|
||||||
|
cmd_tx_auto
|
||||||
|
.unbounded_send(NetCommand::Action(PlayerAction::Roll))
|
||||||
|
.ok();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let dice = vs.dice;
|
||||||
|
let show_dice = dice != (0, 0);
|
||||||
|
|
||||||
|
// ── Button senders ─────────────────────────────────────────────────────────
|
||||||
|
let cmd_tx_go = cmd_tx.clone();
|
||||||
|
let cmd_tx_quit = cmd_tx.clone();
|
||||||
|
let cmd_tx_end_quit = cmd_tx.clone();
|
||||||
|
let cmd_tx_end_replay = cmd_tx.clone();
|
||||||
|
// Only show the fallback Go button when there is no ScoringPanel showing it.
|
||||||
|
let show_hold_go = is_my_turn
|
||||||
|
&& vs.turn_stage == SerTurnStage::HoldOrGoChoice
|
||||||
|
&& state.my_scored_event.is_none();
|
||||||
|
|
||||||
|
// ── Valid move sequences for this turn ─────────────────────────────────────
|
||||||
|
// Computed once per ViewState snapshot; used by Board (highlighting) and the
|
||||||
|
// empty-move button (visibility).
|
||||||
|
let valid_sequences: Vec<(CheckerMove, CheckerMove)> = if is_move_stage && dice != (0, 0) {
|
||||||
|
let mut store_board = StoreBoard::new();
|
||||||
|
store_board.set_positions(&Color::White, vs.board);
|
||||||
|
let store_dice = StoreDice { values: dice };
|
||||||
|
let color = if player_id == 0 {
|
||||||
|
Color::White
|
||||||
|
} else {
|
||||||
|
Color::Black
|
||||||
|
};
|
||||||
|
let rules = MoveRules::new(&color, &store_board, store_dice);
|
||||||
|
let raw = rules.get_possible_moves_sequences(true, vec![]);
|
||||||
|
if player_id == 0 {
|
||||||
|
raw
|
||||||
|
} else {
|
||||||
|
raw.into_iter()
|
||||||
|
.map(|(m1, m2)| (m1.mirror(), m2.mirror()))
|
||||||
|
.collect()
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
vec![]
|
||||||
|
};
|
||||||
|
// Clone for the empty-move button reactive closure (Board consumes the original).
|
||||||
|
let valid_seqs_empty = valid_sequences.clone();
|
||||||
|
|
||||||
|
// ── Scores ─────────────────────────────────────────────────────────────────
|
||||||
|
let my_score = vs.scores[player_id as usize].clone();
|
||||||
|
let opp_score = vs.scores[1 - player_id as usize].clone();
|
||||||
|
|
||||||
|
// ── Ceremony state (extracted before vs is moved into Board) ────────────────
|
||||||
|
let is_ceremony = vs.stage == SerStage::PreGameRoll;
|
||||||
|
let pre_game_roll_data: Option<PreGameRollState> = vs.pre_game_roll.clone();
|
||||||
|
let my_name_ceremony = my_score.name.clone();
|
||||||
|
let opp_name_ceremony = opp_score.name.clone();
|
||||||
|
let cmd_tx_ceremony = cmd_tx.clone();
|
||||||
|
|
||||||
|
// ── Scoring notifications ──────────────────────────────────────────────────
|
||||||
|
let my_scored_event = state.my_scored_event.clone();
|
||||||
|
let opp_scored_event = state.opp_scored_event.clone();
|
||||||
|
let hole_toast_info = my_scored_event
|
||||||
|
.as_ref()
|
||||||
|
.filter(|e| e.holes_gained > 0)
|
||||||
|
.map(|e| (e.holes_total, e.bredouille));
|
||||||
|
|
||||||
|
let is_double_dice = dice.0 == dice.1 && dice.0 != 0;
|
||||||
|
|
||||||
|
let last_moves = state.last_moves;
|
||||||
|
|
||||||
|
// §6e — fields where a battue (hit) was scored; ripple animation shown there.
|
||||||
|
let hit_fields: Vec<u8> = {
|
||||||
|
let is_hit_jan = |jan: &Jan| {
|
||||||
|
matches!(
|
||||||
|
jan,
|
||||||
|
Jan::TrueHitSmallJan
|
||||||
|
| Jan::TrueHitBigJan
|
||||||
|
| Jan::TrueHitOpponentCorner
|
||||||
|
| Jan::FalseHitSmallJan
|
||||||
|
| Jan::FalseHitBigJan
|
||||||
|
)
|
||||||
|
};
|
||||||
|
let mut fields: Vec<u8> = vec![];
|
||||||
|
for event_opt in [&my_scored_event, &opp_scored_event] {
|
||||||
|
if let Some(event) = event_opt {
|
||||||
|
for entry in &event.jans {
|
||||||
|
if is_hit_jan(&entry.jan) {
|
||||||
|
for (m1, m2) in &entry.moves {
|
||||||
|
for m in [m1, m2] {
|
||||||
|
let to = m.get_to() as u8;
|
||||||
|
if to != 0 && !fields.contains(&to) {
|
||||||
|
fields.push(to);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
fields
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Sound effects (fire once on mount = once per state snapshot) ──────────
|
||||||
|
// Dice roll: dice just appeared (no preceding moves in this snapshot).
|
||||||
|
if show_dice && last_moves.is_none() {
|
||||||
|
crate::game::sound::play_dice_roll();
|
||||||
|
}
|
||||||
|
// Checker move: moves were committed in the preceding action.
|
||||||
|
if last_moves.is_some() {
|
||||||
|
crate::game::sound::play_checker_move();
|
||||||
|
}
|
||||||
|
// Scoring: hole takes priority over plain points.
|
||||||
|
if let Some(ref ev) = my_scored_event {
|
||||||
|
if ev.holes_gained > 0 {
|
||||||
|
crate::game::sound::play_hole_scored();
|
||||||
|
} else {
|
||||||
|
crate::game::sound::play_points_scored();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Capture for closures ───────────────────────────────────────────────────
|
||||||
|
let stage = vs.stage.clone();
|
||||||
|
let turn_stage = vs.turn_stage.clone();
|
||||||
|
let turn_stage_for_panel = turn_stage.clone();
|
||||||
|
let turn_stage_for_sub = turn_stage.clone();
|
||||||
|
let room_id = state.room_id.clone();
|
||||||
|
let is_bot_game = state.is_bot_game;
|
||||||
|
|
||||||
|
// ── Game-over info ─────────────────────────────────────────────────────────
|
||||||
|
let stage_is_ended = stage == SerStage::Ended;
|
||||||
|
let winner_is_me = my_score.holes >= 12;
|
||||||
|
let my_name_end = my_score.name.clone();
|
||||||
|
let my_holes_end = my_score.holes;
|
||||||
|
let opp_name_end = opp_score.name.clone();
|
||||||
|
let opp_holes_end = opp_score.holes;
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="game-container">
|
||||||
|
// ── Top bar ──────────────────────────────────────────────────────
|
||||||
|
<div class="top-bar">
|
||||||
|
<span>{move || if is_bot_game {
|
||||||
|
t_string!(i18n, vs_bot_label).to_owned()
|
||||||
|
} else {
|
||||||
|
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>
|
||||||
|
|
||||||
|
{move || auth_username.get().map(|u| view! {
|
||||||
|
<span class="playing-as">"▶ " <strong>{u}</strong></span>
|
||||||
|
})}
|
||||||
|
|
||||||
|
<a class="quit-link" href="#" on:click=move |e| {
|
||||||
|
e.prevent_default();
|
||||||
|
cmd_tx_quit.unbounded_send(NetCommand::Disconnect).ok();
|
||||||
|
}>{t!(i18n, quit)}</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
// ── Opponent score (above board) ─────────────────────────────────
|
||||||
|
<PlayerScorePanel score=opp_score is_you=false />
|
||||||
|
|
||||||
|
// ── Status bar — full width, above board (§10b) ──────────────────
|
||||||
|
<div class="game-status">
|
||||||
|
{move || {
|
||||||
|
if let Some(ref reason) = pause_reason {
|
||||||
|
return String::from(match reason {
|
||||||
|
PauseReason::AfterOpponentRoll => t_string!(i18n, after_opponent_roll),
|
||||||
|
PauseReason::AfterOpponentGo => t_string!(i18n, after_opponent_go),
|
||||||
|
PauseReason::AfterOpponentMove => t_string!(i18n, after_opponent_move),
|
||||||
|
PauseReason::AfterOpponentPreGameRoll => t_string!(i18n, after_opponent_pre_game_roll),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
let n = staged_moves.get().len();
|
||||||
|
if is_move_stage {
|
||||||
|
t_string!(i18n, select_move, n = n + 1)
|
||||||
|
} else {
|
||||||
|
String::from(match (&stage, is_my_turn, &turn_stage) {
|
||||||
|
(SerStage::Ended, _, _) => t_string!(i18n, game_over),
|
||||||
|
(SerStage::PreGame, _, _) | (SerStage::PreGameRoll, _, _) => 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),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
// ── Contextual sub-prompt (§8a) ──────────────────────────────────
|
||||||
|
{move || {
|
||||||
|
let hint: String = if waiting_for_confirm {
|
||||||
|
t_string!(i18n, hint_continue).to_owned()
|
||||||
|
} else if is_move_stage {
|
||||||
|
t_string!(i18n, hint_move).to_owned()
|
||||||
|
} else if is_my_turn && turn_stage_for_sub == SerTurnStage::HoldOrGoChoice {
|
||||||
|
t_string!(i18n, hint_hold_or_go).to_owned()
|
||||||
|
} else {
|
||||||
|
String::new()
|
||||||
|
};
|
||||||
|
(!hint.is_empty()).then(|| view! { <p class="game-sub-prompt">{hint}</p> })
|
||||||
|
}}
|
||||||
|
|
||||||
|
// ── Board + side panel ───────────────────────────────────────────
|
||||||
|
<div class="board-and-panel">
|
||||||
|
<Board
|
||||||
|
view_state=vs
|
||||||
|
player_id=player_id
|
||||||
|
selected_origin=selected_origin
|
||||||
|
staged_moves=staged_moves
|
||||||
|
valid_sequences=valid_sequences
|
||||||
|
bar_dice=show_dice.then_some(dice)
|
||||||
|
bar_is_move=is_move_stage
|
||||||
|
is_my_turn=is_my_turn
|
||||||
|
bar_is_double=is_double_dice
|
||||||
|
last_moves=last_moves
|
||||||
|
hit_fields=hit_fields
|
||||||
|
/>
|
||||||
|
|
||||||
|
// ── Side panel (scoring panels only) ─────────────────────────
|
||||||
|
<div class="side-panel">
|
||||||
|
{my_scored_event.map(|event| view! {
|
||||||
|
<ScoringPanel event=event turn_stage=turn_stage_for_panel />
|
||||||
|
})}
|
||||||
|
{opp_scored_event.map(|event| view! {
|
||||||
|
<ScoringPanel event=event turn_stage=SerTurnStage::RollDice is_opponent=true />
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
// ── Action buttons below board (§10c) ────────────────────────────
|
||||||
|
<div class="board-actions">
|
||||||
|
{waiting_for_confirm.then(|| view! {
|
||||||
|
<button class="btn btn-primary" on:click=move |_| {
|
||||||
|
pending.update(|q| { q.pop_front(); });
|
||||||
|
}>{t!(i18n, continue_btn)}</button>
|
||||||
|
})}
|
||||||
|
// Fallback Go button when no scoring panel (e.g. after reconnect)
|
||||||
|
{show_hold_go.then(|| view! {
|
||||||
|
<button class="btn btn-primary" on:click=move |_| {
|
||||||
|
cmd_tx_go.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
|
||||||
|
}>{t!(i18n, go)}</button>
|
||||||
|
})}
|
||||||
|
{move || {
|
||||||
|
// Show the empty-move button only when (0,0) is a valid
|
||||||
|
// first or second move given what has already been staged.
|
||||||
|
let staged = staged_moves.get();
|
||||||
|
let show = is_move_stage && staged.len() < 2 && (
|
||||||
|
valid_seqs_empty.is_empty() || match staged.len() {
|
||||||
|
0 => valid_seqs_empty.iter().any(|(m1, _)| m1.get_from() == 0),
|
||||||
|
1 => {
|
||||||
|
let (f0, t0) = staged[0];
|
||||||
|
valid_seqs_empty.iter()
|
||||||
|
.filter(|(m1, _)| {
|
||||||
|
m1.get_from() as u8 == f0
|
||||||
|
&& m1.get_to() as u8 == t0
|
||||||
|
})
|
||||||
|
.any(|(_, m2)| m2.get_from() == 0)
|
||||||
|
}
|
||||||
|
_ => false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
show.then(|| view! {
|
||||||
|
<button
|
||||||
|
class="btn btn-secondary"
|
||||||
|
on:click=move |_| {
|
||||||
|
selected_origin.set(None);
|
||||||
|
staged_moves.update(|v| v.push((0, 0)));
|
||||||
|
}
|
||||||
|
>{t!(i18n, empty_move)}</button>
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
// ── Player score (below board) ────────────────────────────────────
|
||||||
|
<PlayerScorePanel score=my_score is_you=true />
|
||||||
|
|
||||||
|
// ── Pre-game ceremony overlay ─────────────────────────────────────
|
||||||
|
{is_ceremony.then(|| {
|
||||||
|
let pgr = pre_game_roll_data.unwrap_or(PreGameRollState {
|
||||||
|
host_die: None,
|
||||||
|
guest_die: None,
|
||||||
|
tie_count: 0,
|
||||||
|
});
|
||||||
|
let my_die = if player_id == 0 { pgr.host_die } else { pgr.guest_die };
|
||||||
|
let opp_die = if player_id == 0 { pgr.guest_die } else { pgr.host_die };
|
||||||
|
let can_roll = my_die.is_none() && !waiting_for_confirm;
|
||||||
|
let show_tie = pgr.tie_count > 0;
|
||||||
|
view! {
|
||||||
|
<div class="ceremony-overlay">
|
||||||
|
<div class="ceremony-box">
|
||||||
|
<h2>{t!(i18n, pre_game_roll_title)}</h2>
|
||||||
|
{show_tie.then(|| view! {
|
||||||
|
<p class="ceremony-tie">{t!(i18n, pre_game_roll_tie)}</p>
|
||||||
|
})}
|
||||||
|
<div class="ceremony-dice">
|
||||||
|
<div class="ceremony-die-slot">
|
||||||
|
<span class="ceremony-die-label">{my_name_ceremony}{t!(i18n, you_suffix)}</span>
|
||||||
|
<Die value=my_die.unwrap_or(0) used=false />
|
||||||
|
</div>
|
||||||
|
<div class="ceremony-die-slot">
|
||||||
|
<span class="ceremony-die-label">{opp_name_ceremony}</span>
|
||||||
|
<Die value=opp_die.unwrap_or(0) used=false />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{waiting_for_confirm.then(|| {
|
||||||
|
let pending_c = pending;
|
||||||
|
view! {
|
||||||
|
<button class="btn btn-primary" on:click=move |_| {
|
||||||
|
pending_c.update(|q| { q.pop_front(); });
|
||||||
|
}>{t!(i18n, continue_btn)}</button>
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
{can_roll.then(|| {
|
||||||
|
let cmd_tx_c = cmd_tx_ceremony.clone();
|
||||||
|
view! {
|
||||||
|
<button class="btn btn-primary" on:click=move |_| {
|
||||||
|
cmd_tx_c.unbounded_send(NetCommand::Action(PlayerAction::PreGameRoll)).ok();
|
||||||
|
}>{t!(i18n, pre_game_roll_btn)}</button>
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
|
||||||
|
// ── Game-over overlay ─────────────────────────────────────────────
|
||||||
|
{stage_is_ended.then(|| {
|
||||||
|
let opp_name_end_clone = opp_name_end.clone();
|
||||||
|
let winner_text = move || if winner_is_me {
|
||||||
|
t_string!(i18n, you_win).to_owned()
|
||||||
|
} else {
|
||||||
|
t_string!(i18n, opp_wins, name = opp_name_end_clone.as_str())
|
||||||
|
};
|
||||||
|
view! {
|
||||||
|
<div class="game-over-overlay">
|
||||||
|
<div class="game-over-box">
|
||||||
|
<h2>{t!(i18n, game_over)}</h2>
|
||||||
|
<p class="game-over-winner">{winner_text}</p>
|
||||||
|
<div class="game-over-score">
|
||||||
|
<span class="game-over-score-name">{my_name_end}</span>
|
||||||
|
<span class="game-over-score-nums">
|
||||||
|
{format!("{my_holes_end} — {opp_holes_end}")}
|
||||||
|
</span>
|
||||||
|
<span class="game-over-score-name">{opp_name_end.clone()}</span>
|
||||||
|
</div>
|
||||||
|
<div class="game-over-actions">
|
||||||
|
<button class="btn btn-secondary" on:click=move |_| {
|
||||||
|
cmd_tx_end_quit.unbounded_send(NetCommand::Disconnect).ok();
|
||||||
|
}>{t!(i18n, quit)}</button>
|
||||||
|
{is_bot_game.then(|| view! {
|
||||||
|
<button class="btn btn-primary" on:click=move |_| {
|
||||||
|
cmd_tx_end_replay.unbounded_send(NetCommand::PlayVsBot).ok();
|
||||||
|
}>{t!(i18n, play_again)}</button>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
|
||||||
|
// ── Hole toast (§6a) — board-centered overlay when a hole is won ──
|
||||||
|
{hole_toast_info.map(|(holes_total, bredouille)| view! {
|
||||||
|
<div class="hole-toast" class:hole-toast-bredouille=bredouille>
|
||||||
|
<div class="hole-toast-title">"Trou !"</div>
|
||||||
|
<div class="hole-toast-count">{format!("{holes_total} / 12")}</div>
|
||||||
|
{bredouille.then(|| view! {
|
||||||
|
<div class="hole-toast-bredouille">"× 2 bredouille"</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
9
clients/web/src/game/components/mod.rs
Normal file
9
clients/web/src/game/components/mod.rs
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
mod board;
|
||||||
|
mod connecting_screen;
|
||||||
|
mod die;
|
||||||
|
mod game_screen;
|
||||||
|
mod score_panel;
|
||||||
|
mod scoring;
|
||||||
|
|
||||||
|
pub use connecting_screen::ConnectingScreen;
|
||||||
|
pub use game_screen::GameScreen;
|
||||||
70
clients/web/src/game/components/score_panel.rs
Normal file
70
clients/web/src/game/components/score_panel.rs
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use trictrac_store::Jan;
|
||||||
|
|
||||||
|
use crate::i18n::*;
|
||||||
|
use crate::game::trictrac::types::PlayerScore;
|
||||||
|
|
||||||
|
pub fn jan_label(jan: &Jan) -> String {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
match jan {
|
||||||
|
Jan::FilledQuarter => t_string!(i18n, jan_filled_quarter).to_owned(),
|
||||||
|
Jan::TrueHitSmallJan => t_string!(i18n, jan_true_hit_small).to_owned(),
|
||||||
|
Jan::TrueHitBigJan => t_string!(i18n, jan_true_hit_big).to_owned(),
|
||||||
|
Jan::TrueHitOpponentCorner => t_string!(i18n, jan_true_hit_corner).to_owned(),
|
||||||
|
Jan::FirstPlayerToExit => t_string!(i18n, jan_first_exit).to_owned(),
|
||||||
|
Jan::SixTables => t_string!(i18n, jan_six_tables).to_owned(),
|
||||||
|
Jan::TwoTables => t_string!(i18n, jan_two_tables).to_owned(),
|
||||||
|
Jan::Mezeas => t_string!(i18n, jan_mezeas).to_owned(),
|
||||||
|
Jan::FalseHitSmallJan => t_string!(i18n, jan_false_hit_small).to_owned(),
|
||||||
|
Jan::FalseHitBigJan => t_string!(i18n, jan_false_hit_big).to_owned(),
|
||||||
|
Jan::ContreTwoTables => t_string!(i18n, jan_contre_two).to_owned(),
|
||||||
|
Jan::ContreMezeas => t_string!(i18n, jan_contre_mezeas).to_owned(),
|
||||||
|
Jan::HelplessMan => t_string!(i18n, jan_helpless_man).to_owned(),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn PlayerScorePanel(score: PlayerScore, is_you: bool) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
|
||||||
|
let points_pct = format!("{}%", (score.points as u32 * 100 / 12).min(100));
|
||||||
|
let points_val = format!("{}/12", score.points);
|
||||||
|
let holes = score.holes;
|
||||||
|
let can_bredouille = score.can_bredouille;
|
||||||
|
|
||||||
|
// 12 peg holes; filled up to `holes`
|
||||||
|
let pegs: Vec<AnyView> = (1u8..=12)
|
||||||
|
.map(|i| {
|
||||||
|
let cls = if i <= holes { "peg-hole filled" } else { "peg-hole" };
|
||||||
|
view! { <div class=cls></div> }.into_any()
|
||||||
|
})
|
||||||
|
.collect();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="player-score-panel">
|
||||||
|
<div class="player-score-header">
|
||||||
|
<span class="player-name">
|
||||||
|
{score.name}
|
||||||
|
{is_you.then(|| t!(i18n, you_suffix))}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="score-bars">
|
||||||
|
<div class="score-bar-row">
|
||||||
|
<span class="score-bar-label">{t!(i18n, points_label)}</span>
|
||||||
|
<div class="score-bar">
|
||||||
|
<div class="score-bar-fill score-bar-points" style=format!("width:{points_pct}")></div>
|
||||||
|
</div>
|
||||||
|
<span class="score-bar-value">{points_val}</span>
|
||||||
|
{can_bredouille.then(|| view! {
|
||||||
|
<span class="bredouille-badge" title=move || t_string!(i18n, bredouille_title).to_owned()>"B"</span>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div class="score-bar-row">
|
||||||
|
<span class="score-bar-label">{t!(i18n, holes_label)}</span>
|
||||||
|
<div class="peg-track">{pegs}</div>
|
||||||
|
<span class="score-bar-value">{format!("{holes}/12")}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
209
clients/web/src/game/components/scoring.rs
Normal file
209
clients/web/src/game/components/scoring.rs
Normal file
|
|
@ -0,0 +1,209 @@
|
||||||
|
use futures::channel::mpsc::UnboundedSender;
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
use gloo_timers::future::TimeoutFuture;
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use trictrac_store::CheckerMove;
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
use wasm_bindgen_futures::spawn_local;
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
use std::sync::{Arc, atomic::{AtomicBool, Ordering}};
|
||||||
|
|
||||||
|
use crate::app::NetCommand;
|
||||||
|
use crate::i18n::*;
|
||||||
|
use crate::game::trictrac::types::{JanEntry, PlayerAction, ScoredEvent, SerTurnStage};
|
||||||
|
|
||||||
|
use super::score_panel::jan_label;
|
||||||
|
|
||||||
|
/// One row in the scoring panel. Sets the hovered-moves context on enter
|
||||||
|
/// (so board shows arrows for that jan's moves), but does NOT clear on
|
||||||
|
/// leave — clearing is handled by the outer wrapper's mouseleave so that
|
||||||
|
/// arrows persist while the pointer moves between rows.
|
||||||
|
fn scoring_jan_row(entry: JanEntry) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let hovered = use_context::<RwSignal<Vec<(CheckerMove, CheckerMove)>>>();
|
||||||
|
let jan = entry.jan;
|
||||||
|
let is_double = entry.is_double;
|
||||||
|
let ways_tag = format!("×{}", entry.ways);
|
||||||
|
let pts_str = format!("+{}", entry.total);
|
||||||
|
let moves_hover = entry.moves.clone();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div
|
||||||
|
class="scoring-jan-row"
|
||||||
|
on:mouseenter=move |_| {
|
||||||
|
if let Some(h) = hovered {
|
||||||
|
h.set(moves_hover.clone());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span class="jan-label">{move || jan_label(&jan)}</span>
|
||||||
|
<span class="jan-tag">{move || if is_double {
|
||||||
|
t_string!(i18n, jan_double).to_owned()
|
||||||
|
} else {
|
||||||
|
t_string!(i18n, jan_simple).to_owned()
|
||||||
|
}}</span>
|
||||||
|
<span class="jan-tag">{ways_tag}</span>
|
||||||
|
<span class="jan-pts">{pts_str}</span>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn ScoringPanel(
|
||||||
|
event: ScoredEvent,
|
||||||
|
turn_stage: SerTurnStage,
|
||||||
|
#[prop(default = false)] is_opponent: bool,
|
||||||
|
) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let cmd_tx = use_context::<UnboundedSender<NetCommand>>()
|
||||||
|
.expect("UnboundedSender<NetCommand> not found in context");
|
||||||
|
|
||||||
|
let points_earned = event.points_earned;
|
||||||
|
let holes_gained = event.holes_gained;
|
||||||
|
let holes_total = event.holes_total;
|
||||||
|
let bredouille = event.bredouille;
|
||||||
|
let show_hold_go = !is_opponent && turn_stage == SerTurnStage::HoldOrGoChoice;
|
||||||
|
let panel_class = if is_opponent {
|
||||||
|
"scoring-panel scoring-panel-opp"
|
||||||
|
} else {
|
||||||
|
"scoring-panel"
|
||||||
|
};
|
||||||
|
|
||||||
|
// ── Lifecycle signals ──────────────────────────────────────────────────
|
||||||
|
// peeked: added after 3.4 s (slide to peek strip)
|
||||||
|
// revealed: added on first hover of the peek strip (stay open permanently)
|
||||||
|
let peeked = RwSignal::new(false);
|
||||||
|
let revealed = RwSignal::new(false);
|
||||||
|
|
||||||
|
// ── Collect all moves from all jans for automatic arrow display ────────
|
||||||
|
let all_moves: Vec<(CheckerMove, CheckerMove)> = event
|
||||||
|
.jans
|
||||||
|
.iter()
|
||||||
|
.flat_map(|e| e.moves.iter().cloned())
|
||||||
|
.collect();
|
||||||
|
let all_moves_click = all_moves.clone();
|
||||||
|
let all_moves_enter = all_moves.clone();
|
||||||
|
|
||||||
|
let hovered_ctx = use_context::<RwSignal<Vec<(CheckerMove, CheckerMove)>>>();
|
||||||
|
|
||||||
|
// On mount: show all this event's moves as board arrows immediately,
|
||||||
|
// then after 3.4 s slide to peek and clear the arrows.
|
||||||
|
//
|
||||||
|
// Two important constraints:
|
||||||
|
// 1. The initial hm.set() must be deferred (spawn_local, not sync in body)
|
||||||
|
// to avoid writing a reactive signal mid-render while Board reads it —
|
||||||
|
// that triggers Leptos's cycle guard → `unreachable` WASM panic.
|
||||||
|
// 2. The cancellation flag must be Rc<Cell<bool>>, NOT RwSignal<bool>.
|
||||||
|
// RwSignal is a NodeId into Leptos's arena; the arena slot is freed
|
||||||
|
// when ScoringPanel's owner drops (on every GameScreen remount). If the
|
||||||
|
// 3.4 s future outlives the component and calls is_alive.get_untracked()
|
||||||
|
// on a freed slot, that also panics with `unreachable`. Rc<Cell<bool>>
|
||||||
|
// is reference-counted outside the arena and stays valid for as long as
|
||||||
|
// the future holds onto it.
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
if let Some(hm) = hovered_ctx {
|
||||||
|
let is_alive = Arc::new(AtomicBool::new(true));
|
||||||
|
let is_alive_cleanup = is_alive.clone();
|
||||||
|
// on_cleanup requires Send + Sync; Arc<AtomicBool> satisfies both.
|
||||||
|
on_cleanup(move || is_alive_cleanup.store(false, Ordering::Relaxed));
|
||||||
|
|
||||||
|
spawn_local(async move {
|
||||||
|
// Show arrows (runs in the next microtask, after render settles).
|
||||||
|
hm.set(all_moves);
|
||||||
|
|
||||||
|
TimeoutFuture::new(3_400).await;
|
||||||
|
// Guard: component may have been destroyed while we were waiting.
|
||||||
|
// is_alive was set to false by on_cleanup, which runs before Leptos
|
||||||
|
// frees the signal arena slots — so peeked is still valid iff this
|
||||||
|
// returns true.
|
||||||
|
if !is_alive.load(Ordering::Relaxed) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hm.set(vec![]);
|
||||||
|
peeked.set(true);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
let jan_rows: Vec<_> = event.jans.into_iter().map(scoring_jan_row).collect();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
// ── Outer wrapper: owns the slide / peek / reveal animation ───────
|
||||||
|
// pointer-events are on by default (parent .side-panel sets none,
|
||||||
|
// and .scoring-panel-wrapper overrides back to auto in CSS).
|
||||||
|
<div
|
||||||
|
class="scoring-panel-wrapper"
|
||||||
|
class:peeked=move || peeked.get()
|
||||||
|
class:revealed=move || revealed.get()
|
||||||
|
// Click toggles revealed↔peeked when the panel is in its peeked state.
|
||||||
|
on:click=move |_| {
|
||||||
|
if peeked.get_untracked() {
|
||||||
|
revealed.update(|r| *r = !*r);
|
||||||
|
}
|
||||||
|
// Show arrows when clicking to open, clear when clicking to close.
|
||||||
|
if let Some(hm) = hovered_ctx {
|
||||||
|
if !revealed.get_untracked() {
|
||||||
|
hm.set(all_moves_click.clone());
|
||||||
|
} else {
|
||||||
|
hm.set(vec![]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
on:mouseenter=move |_| {
|
||||||
|
// Show all event moves as arrows while the cursor is inside.
|
||||||
|
if let Some(hm) = hovered_ctx {
|
||||||
|
hm.set(all_moves_enter.clone());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
on:mouseleave=move |_| {
|
||||||
|
if let Some(hm) = hovered_ctx {
|
||||||
|
hm.set(vec![]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div class=panel_class>
|
||||||
|
<div class="scoring-total">
|
||||||
|
{move || if is_opponent {
|
||||||
|
t_string!(i18n, opp_scored_pts, n = points_earned)
|
||||||
|
} else {
|
||||||
|
t_string!(i18n, scored_pts, n = points_earned)
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
{jan_rows}
|
||||||
|
{(holes_gained > 0).then(|| view! {
|
||||||
|
<div class="scoring-hole">
|
||||||
|
<span>{move || if is_opponent {
|
||||||
|
t_string!(i18n, opp_hole_made, holes = holes_total)
|
||||||
|
} else {
|
||||||
|
t_string!(i18n, hole_made, holes = holes_total)
|
||||||
|
}}</span>
|
||||||
|
{bredouille.then(|| view! {
|
||||||
|
<span class="bredouille-badge">
|
||||||
|
{move || t_string!(i18n, bredouille_applied)}
|
||||||
|
</span>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
{show_hold_go.then(|| {
|
||||||
|
let dismissed = RwSignal::new(false);
|
||||||
|
view! {
|
||||||
|
<div class="hold-go-buttons" class:hidden=move || dismissed.get()>
|
||||||
|
// stop_propagation so these buttons don't also toggle the panel
|
||||||
|
<button class="btn btn-secondary" on:click=move |ev: leptos::web_sys::MouseEvent| {
|
||||||
|
ev.stop_propagation();
|
||||||
|
dismissed.set(true);
|
||||||
|
}>
|
||||||
|
{t!(i18n, hold)}
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-primary" on:click=move |ev: leptos::web_sys::MouseEvent| {
|
||||||
|
ev.stop_propagation();
|
||||||
|
cmd_tx.unbounded_send(NetCommand::Action(PlayerAction::Go)).ok();
|
||||||
|
}>
|
||||||
|
{t!(i18n, go)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
4
clients/web/src/game/mod.rs
Normal file
4
clients/web/src/game/mod.rs
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
pub mod components;
|
||||||
|
pub mod session;
|
||||||
|
pub mod sound;
|
||||||
|
pub mod trictrac;
|
||||||
253
clients/web/src/game/session.rs
Normal file
253
clients/web/src/game/session.rs
Normal file
|
|
@ -0,0 +1,253 @@
|
||||||
|
use futures::channel::mpsc;
|
||||||
|
use leptos::prelude::*;
|
||||||
|
|
||||||
|
use backbone_lib::traits::{BackEndArchitecture, BackendCommand};
|
||||||
|
|
||||||
|
use crate::app::{GameUiState, NetCommand, PauseReason, Screen};
|
||||||
|
use crate::game::trictrac::backend::TrictracBackend;
|
||||||
|
use crate::game::trictrac::bot_local::bot_decide;
|
||||||
|
use crate::game::trictrac::types::{
|
||||||
|
JanEntry, ScoredEvent, SerStage, SerTurnStage, ViewState,
|
||||||
|
};
|
||||||
|
use trictrac_store::CheckerMove;
|
||||||
|
|
||||||
|
use std::collections::VecDeque;
|
||||||
|
|
||||||
|
/// Runs one local bot game. Returns `true` if the player wants to play again.
|
||||||
|
pub async fn run_local_bot_game(
|
||||||
|
screen: RwSignal<Screen>,
|
||||||
|
cmd_rx: &mut mpsc::UnboundedReceiver<NetCommand>,
|
||||||
|
pending: RwSignal<VecDeque<GameUiState>>,
|
||||||
|
) -> bool {
|
||||||
|
let mut backend = TrictracBackend::new(0);
|
||||||
|
backend.player_arrival(0);
|
||||||
|
backend.player_arrival(1);
|
||||||
|
|
||||||
|
let mut vs = ViewState::default_with_names("You", "Bot");
|
||||||
|
for cmd in backend.drain_commands() {
|
||||||
|
match cmd {
|
||||||
|
BackendCommand::ResetViewState => {
|
||||||
|
vs = backend.get_view_state().clone();
|
||||||
|
}
|
||||||
|
BackendCommand::Delta(delta) => {
|
||||||
|
vs.apply_delta(&delta);
|
||||||
|
}
|
||||||
|
_ => {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
screen.set(Screen::Playing(GameUiState {
|
||||||
|
view_state: vs.clone(),
|
||||||
|
player_id: 0,
|
||||||
|
room_id: String::new(),
|
||||||
|
is_bot_game: true,
|
||||||
|
waiting_for_confirm: false,
|
||||||
|
pause_reason: None,
|
||||||
|
my_scored_event: None,
|
||||||
|
opp_scored_event: None,
|
||||||
|
last_moves: None,
|
||||||
|
}));
|
||||||
|
|
||||||
|
use futures::StreamExt;
|
||||||
|
loop {
|
||||||
|
match cmd_rx.next().await {
|
||||||
|
Some(NetCommand::Action(action)) => {
|
||||||
|
let prev_vs = vs.clone();
|
||||||
|
backend.inform_rpc(0, action);
|
||||||
|
for cmd in backend.drain_commands() {
|
||||||
|
if let BackendCommand::Delta(delta) = cmd {
|
||||||
|
vs.apply_delta(&delta);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let scored = compute_scored_event(&prev_vs, &vs, 0);
|
||||||
|
let opp_scored = compute_scored_event(&prev_vs, &vs, 1);
|
||||||
|
screen.set(Screen::Playing(GameUiState {
|
||||||
|
view_state: vs.clone(),
|
||||||
|
player_id: 0,
|
||||||
|
room_id: String::new(),
|
||||||
|
is_bot_game: true,
|
||||||
|
waiting_for_confirm: false,
|
||||||
|
pause_reason: None,
|
||||||
|
my_scored_event: scored,
|
||||||
|
opp_scored_event: opp_scored,
|
||||||
|
last_moves: compute_last_moves(&prev_vs, &vs, true),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
Some(NetCommand::PlayVsBot) => return true,
|
||||||
|
_ => return false,
|
||||||
|
}
|
||||||
|
|
||||||
|
loop {
|
||||||
|
let pgr = backend.get_view_state().pre_game_roll.clone();
|
||||||
|
match bot_decide(backend.get_game(), pgr.as_ref()) {
|
||||||
|
None => break,
|
||||||
|
Some(action) => {
|
||||||
|
backend.inform_rpc(1, action);
|
||||||
|
for cmd in backend.drain_commands() {
|
||||||
|
if let BackendCommand::Delta(delta) = cmd {
|
||||||
|
let delta_prev_vs = vs.clone();
|
||||||
|
vs.apply_delta(&delta);
|
||||||
|
push_or_show(
|
||||||
|
&delta_prev_vs,
|
||||||
|
GameUiState {
|
||||||
|
view_state: vs.clone(),
|
||||||
|
player_id: 0,
|
||||||
|
room_id: String::new(),
|
||||||
|
is_bot_game: true,
|
||||||
|
waiting_for_confirm: false,
|
||||||
|
pause_reason: None,
|
||||||
|
my_scored_event: None,
|
||||||
|
opp_scored_event: None,
|
||||||
|
last_moves: compute_last_moves(&delta_prev_vs, &vs, false),
|
||||||
|
},
|
||||||
|
pending,
|
||||||
|
screen,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Returns the checker moves to animate when the board changed between two ViewStates.
|
||||||
|
pub fn compute_last_moves(
|
||||||
|
prev: &ViewState,
|
||||||
|
next: &ViewState,
|
||||||
|
own_move: bool,
|
||||||
|
) -> Option<(CheckerMove, CheckerMove)> {
|
||||||
|
if prev.board == next.board {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
let (m1, m2) = next.dice_moves;
|
||||||
|
if m1 == CheckerMove::default() && m2 == CheckerMove::default() {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
if own_move {
|
||||||
|
if m2 == CheckerMove::default() {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
return Some((m2, CheckerMove::default()));
|
||||||
|
}
|
||||||
|
Some((m1, m2))
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Computes a scoring event for `player_id` by comparing the previous and next ViewState.
|
||||||
|
pub fn compute_scored_event(prev: &ViewState, next: &ViewState, player_id: u16) -> Option<ScoredEvent> {
|
||||||
|
let prev_score = &prev.scores[player_id as usize];
|
||||||
|
let next_score = &next.scores[player_id as usize];
|
||||||
|
|
||||||
|
let holes_gained = next_score.holes.saturating_sub(prev_score.holes);
|
||||||
|
if holes_gained == 0 && prev_score.points == next_score.points {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
|
||||||
|
let bredouille = holes_gained > 0 && prev_score.can_bredouille;
|
||||||
|
|
||||||
|
let my_jans: Vec<JanEntry> = if next.active_mp_player == Some(player_id)
|
||||||
|
&& prev.active_mp_player == Some(player_id)
|
||||||
|
{
|
||||||
|
next.dice_jans
|
||||||
|
.iter()
|
||||||
|
.filter(|e| e.total > 0)
|
||||||
|
.cloned()
|
||||||
|
.collect()
|
||||||
|
} else if next.active_mp_player == Some(player_id) && prev.active_mp_player != Some(player_id) {
|
||||||
|
next.dice_jans
|
||||||
|
.iter()
|
||||||
|
.filter(|e| e.total < 0)
|
||||||
|
.map(|e| JanEntry {
|
||||||
|
total: -e.total,
|
||||||
|
points_per: -e.points_per,
|
||||||
|
..e.clone()
|
||||||
|
})
|
||||||
|
.collect()
|
||||||
|
} else {
|
||||||
|
return None;
|
||||||
|
};
|
||||||
|
|
||||||
|
let points_earned: u8 = my_jans
|
||||||
|
.iter()
|
||||||
|
.fold(0u8, |acc, e| acc.saturating_add(e.total.unsigned_abs()));
|
||||||
|
|
||||||
|
if points_earned == 0 && holes_gained == 0 {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
|
||||||
|
Some(ScoredEvent {
|
||||||
|
points_earned,
|
||||||
|
holes_gained,
|
||||||
|
holes_total: next_score.holes,
|
||||||
|
bredouille,
|
||||||
|
jans: my_jans,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Either queues the state as a confirmation step or shows it immediately.
|
||||||
|
pub fn push_or_show(
|
||||||
|
prev_vs: &ViewState,
|
||||||
|
new_state: GameUiState,
|
||||||
|
pending: RwSignal<VecDeque<GameUiState>>,
|
||||||
|
screen: RwSignal<Screen>,
|
||||||
|
) {
|
||||||
|
let scored = compute_scored_event(prev_vs, &new_state.view_state, new_state.player_id);
|
||||||
|
let opp_scored = compute_scored_event(prev_vs, &new_state.view_state, 1 - new_state.player_id);
|
||||||
|
|
||||||
|
if let Some(reason) = infer_pause_reason(prev_vs, &new_state.view_state, new_state.player_id) {
|
||||||
|
pending.update(|q| {
|
||||||
|
q.push_back(GameUiState {
|
||||||
|
waiting_for_confirm: true,
|
||||||
|
pause_reason: Some(reason),
|
||||||
|
my_scored_event: scored,
|
||||||
|
opp_scored_event: opp_scored,
|
||||||
|
..new_state.clone()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
screen.set(Screen::Playing(GameUiState {
|
||||||
|
last_moves: None,
|
||||||
|
..new_state
|
||||||
|
}));
|
||||||
|
} else {
|
||||||
|
screen.set(Screen::Playing(GameUiState {
|
||||||
|
my_scored_event: scored,
|
||||||
|
opp_scored_event: opp_scored,
|
||||||
|
..new_state
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Compares the previous and next ViewState to decide whether the transition
|
||||||
|
/// warrants a confirmation pause.
|
||||||
|
pub fn infer_pause_reason(prev: &ViewState, next: &ViewState, player_id: u16) -> Option<PauseReason> {
|
||||||
|
let opponent_id = 1 - player_id;
|
||||||
|
|
||||||
|
if next.stage == SerStage::PreGameRoll {
|
||||||
|
if let (Some(prev_pgr), Some(next_pgr)) = (&prev.pre_game_roll, &next.pre_game_roll) {
|
||||||
|
let both_now = next_pgr.host_die.is_some() && next_pgr.guest_die.is_some();
|
||||||
|
let both_before = prev_pgr.host_die.is_some() && prev_pgr.guest_die.is_some();
|
||||||
|
if both_now && !both_before {
|
||||||
|
return Some(PauseReason::AfterOpponentPreGameRoll);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
|
||||||
|
if prev.stage == SerStage::PreGameRoll {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
|
||||||
|
if next.active_mp_player == Some(opponent_id) {
|
||||||
|
if next.dice != prev.dice {
|
||||||
|
return Some(PauseReason::AfterOpponentRoll);
|
||||||
|
}
|
||||||
|
if prev.turn_stage == SerTurnStage::HoldOrGoChoice && next.turn_stage == SerTurnStage::Move {
|
||||||
|
return Some(PauseReason::AfterOpponentGo);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if next.active_mp_player == Some(player_id) && prev.active_mp_player == Some(opponent_id) {
|
||||||
|
return Some(PauseReason::AfterOpponentMove);
|
||||||
|
}
|
||||||
|
|
||||||
|
None
|
||||||
|
}
|
||||||
182
clients/web/src/game/sound.rs
Normal file
182
clients/web/src/game/sound.rs
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
//! Synthesised sound effects using the Web Audio API.
|
||||||
|
//!
|
||||||
|
//! All public functions are no-ops on non-WASM targets so callers need no
|
||||||
|
//! `#[cfg]` guards themselves.
|
||||||
|
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
mod inner {
|
||||||
|
use std::cell::RefCell;
|
||||||
|
use web_sys::{AudioContext, OscillatorType};
|
||||||
|
|
||||||
|
thread_local! {
|
||||||
|
static CTX: RefCell<Option<AudioContext>> = const { RefCell::new(None) };
|
||||||
|
}
|
||||||
|
|
||||||
|
fn with_ctx<F: FnOnce(&AudioContext)>(f: F) {
|
||||||
|
CTX.with(|cell| {
|
||||||
|
let mut opt = cell.borrow_mut();
|
||||||
|
if opt.is_none() {
|
||||||
|
*opt = AudioContext::new().ok();
|
||||||
|
}
|
||||||
|
if let Some(ctx) = opt.as_ref() {
|
||||||
|
f(ctx);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Schedule a single oscillator tone with an exponential gain decay.
|
||||||
|
///
|
||||||
|
/// - `start_offset`: seconds from `ctx.current_time()` when the tone starts
|
||||||
|
/// - `duration`: how long (in seconds) until gain reaches ~0
|
||||||
|
fn play_tone(
|
||||||
|
ctx: &AudioContext,
|
||||||
|
freq: f32,
|
||||||
|
gain: f32,
|
||||||
|
duration: f64,
|
||||||
|
start_offset: f64,
|
||||||
|
wave: OscillatorType,
|
||||||
|
) {
|
||||||
|
let t0 = ctx.current_time() + start_offset;
|
||||||
|
let t1 = t0 + duration;
|
||||||
|
|
||||||
|
let Ok(osc) = ctx.create_oscillator() else {
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
let Ok(gain_node) = ctx.create_gain() else {
|
||||||
|
return;
|
||||||
|
};
|
||||||
|
|
||||||
|
osc.set_type(wave);
|
||||||
|
osc.frequency().set_value(freq);
|
||||||
|
|
||||||
|
let gain_param = gain_node.gain();
|
||||||
|
let _ = gain_param.set_value_at_time(gain, t0);
|
||||||
|
// exponential_ramp requires a positive target; 0.001 is inaudible
|
||||||
|
let _ = gain_param.exponential_ramp_to_value_at_time(0.001, t1);
|
||||||
|
|
||||||
|
let dest = ctx.destination();
|
||||||
|
let _ = osc.connect_with_audio_node(&gain_node);
|
||||||
|
let _ = gain_node.connect_with_audio_node(&dest);
|
||||||
|
|
||||||
|
let _ = osc.start_with_when(t0);
|
||||||
|
let _ = osc.stop_with_when(t1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Short wooden clack: sine fundamental + triangle body resonance, ~80 ms.
|
||||||
|
pub fn play_checker_move() {
|
||||||
|
with_ctx(|ctx| {
|
||||||
|
// Sine at 300 Hz for the clean attack click
|
||||||
|
play_tone(ctx, 300.0, 0.55, 0.080, 0.000, OscillatorType::Sine);
|
||||||
|
// Triangle at 150 Hz for the woody body resonance
|
||||||
|
play_tone(ctx, 150.0, 0.35, 0.070, 0.005, OscillatorType::Triangle);
|
||||||
|
// Sub at 80 Hz for weight
|
||||||
|
play_tone(ctx, 80.0, 0.20, 0.060, 0.008, OscillatorType::Triangle);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Cinematic dice roll: ~500 ms of rolling texture + 5 impact transients.
|
||||||
|
///
|
||||||
|
/// Two layers:
|
||||||
|
/// - A dense series of detuned sawtooth bursts that thin out over time,
|
||||||
|
/// modelling the continuous scrape/rattle of dice tumbling.
|
||||||
|
/// - Five percussive impacts (square clicks + triangle thuds) whose
|
||||||
|
/// inter-arrival gap shrinks as the dice decelerate and settle.
|
||||||
|
pub fn play_dice_roll_cinematic() {
|
||||||
|
with_ctx(|ctx| {
|
||||||
|
// ── Continuous rolling texture ─────────────────────────────────
|
||||||
|
// 16 steps over 440 ms; each step is two detuned sawtooth waves
|
||||||
|
// (the interference between them produces a noise-like texture).
|
||||||
|
// Gain fades by ~55 % from first to last step.
|
||||||
|
const N: u32 = 16;
|
||||||
|
for i in 0..N {
|
||||||
|
let t = i as f64 * 0.028;
|
||||||
|
let g = 0.017 * (1.0 - i as f32 / N as f32 * 0.55);
|
||||||
|
// Quasi-random frequencies so each step sounds different.
|
||||||
|
let f1 = 310.0 + (i as f32 * 29.3 % 280.0);
|
||||||
|
let f2 = 480.0 + (i as f32 * 43.7 % 220.0);
|
||||||
|
play_tone(ctx, f1, g, 0.028, t, OscillatorType::Sawtooth);
|
||||||
|
play_tone(ctx, f2, g * 0.70, 0.028, t, OscillatorType::Sawtooth);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Impact transients ──────────────────────────────────────────
|
||||||
|
// Gaps narrow toward the end (0.13 → 0.11 → 0.10 → 0.08 s),
|
||||||
|
// mimicking dice decelerating and settling.
|
||||||
|
let impacts: &[(f64, f32)] = &[(0.00, 1.00), (0.13, 0.8), (0.24, 0.54), (0.34, 0.30)];
|
||||||
|
for &(t_off, amp) in impacts {
|
||||||
|
// Hard click: bright square partials → percussive attack
|
||||||
|
for &freq in &[700.0f32, 1_050.0, 1_500.0] {
|
||||||
|
play_tone(ctx, freq, amp * 0.03, 0.022, t_off, OscillatorType::Square);
|
||||||
|
}
|
||||||
|
// Woody body thud: two low triangle partials
|
||||||
|
play_tone(
|
||||||
|
ctx,
|
||||||
|
130.0,
|
||||||
|
amp * 0.05,
|
||||||
|
0.070,
|
||||||
|
t_off,
|
||||||
|
OscillatorType::Triangle,
|
||||||
|
);
|
||||||
|
play_tone(
|
||||||
|
ctx,
|
||||||
|
68.0,
|
||||||
|
amp * 0.07,
|
||||||
|
0.090,
|
||||||
|
t_off,
|
||||||
|
OscillatorType::Triangle,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Play the pre-recorded dice-roll MP3 asset.
|
||||||
|
pub fn play_dice_roll() {
|
||||||
|
if let Ok(audio) = web_sys::HtmlAudioElement::new_with_src("/diceroll.mp3") {
|
||||||
|
audio.set_volume(0.2);
|
||||||
|
let _ = audio.play();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Ascending three-note chime (C5 – E5 – G5).
|
||||||
|
pub fn play_points_scored() {
|
||||||
|
with_ctx(|ctx| {
|
||||||
|
let notes: [(f32, f64); 3] = [(523.25, 0.0), (659.25, 0.14), (783.99, 0.28)];
|
||||||
|
for (freq, offset) in notes {
|
||||||
|
play_tone(ctx, freq, 0.28, 0.30, offset, OscillatorType::Sine);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Triumphant four-note fanfare (C5 – E5 – G5 – C6).
|
||||||
|
pub fn play_hole_scored() {
|
||||||
|
with_ctx(|ctx| {
|
||||||
|
let notes: [(f32, f64, f64); 4] = [
|
||||||
|
(523.25, 0.0, 0.35),
|
||||||
|
(659.25, 0.17, 0.35),
|
||||||
|
(783.99, 0.34, 0.35),
|
||||||
|
(1046.5, 0.51, 0.55),
|
||||||
|
];
|
||||||
|
for (freq, offset, dur) in notes {
|
||||||
|
play_tone(ctx, freq, 0.32, dur, offset, OscillatorType::Sine);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Public API: WASM delegates to `inner`, other targets are no-ops ───────────
|
||||||
|
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
pub use inner::{
|
||||||
|
play_checker_move, play_dice_roll, play_dice_roll_cinematic, play_hole_scored,
|
||||||
|
play_points_scored,
|
||||||
|
};
|
||||||
|
|
||||||
|
#[cfg(not(target_arch = "wasm32"))]
|
||||||
|
pub fn play_checker_move() {}
|
||||||
|
#[cfg(not(target_arch = "wasm32"))]
|
||||||
|
pub fn play_dice_roll() {}
|
||||||
|
#[cfg(not(target_arch = "wasm32"))]
|
||||||
|
pub fn play_dice_roll_cinematic() {}
|
||||||
|
#[cfg(not(target_arch = "wasm32"))]
|
||||||
|
pub fn play_points_scored() {}
|
||||||
|
#[cfg(not(target_arch = "wasm32"))]
|
||||||
|
pub fn play_hole_scored() {}
|
||||||
487
clients/web/src/game/trictrac/backend.rs
Normal file
487
clients/web/src/game/trictrac/backend.rs
Normal file
|
|
@ -0,0 +1,487 @@
|
||||||
|
use backbone_lib::traits::{BackEndArchitecture, BackendCommand};
|
||||||
|
use trictrac_store::{Dice, DiceRoller, GameEvent, GameState, TurnStage};
|
||||||
|
|
||||||
|
use super::types::{GameDelta, PlayerAction, PreGameRollState, SerStage, 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],
|
||||||
|
/// Die rolled by each player during the ceremony ([host, guest]).
|
||||||
|
pre_game_dice: [Option<u8>; 2],
|
||||||
|
/// Number of tied rounds so far.
|
||||||
|
tie_count: u8,
|
||||||
|
/// True while the first-player ceremony is running.
|
||||||
|
ceremony_started: bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
impl TrictracBackend {
|
||||||
|
fn sync_view_state(&mut self) {
|
||||||
|
let mut vs = ViewState::from_game_state(&self.game, HOST_PLAYER_ID, GUEST_PLAYER_ID);
|
||||||
|
if self.ceremony_started {
|
||||||
|
vs.stage = SerStage::PreGameRoll;
|
||||||
|
vs.pre_game_roll = Some(PreGameRollState {
|
||||||
|
host_die: self.pre_game_dice[0],
|
||||||
|
guest_die: self.pre_game_dice[1],
|
||||||
|
tie_count: self.tie_count,
|
||||||
|
});
|
||||||
|
// Both players roll independently; no single "active" player.
|
||||||
|
vs.active_mp_player = None;
|
||||||
|
}
|
||||||
|
self.view_state = vs;
|
||||||
|
}
|
||||||
|
|
||||||
|
fn broadcast_state(&mut self) {
|
||||||
|
self.sync_view_state();
|
||||||
|
let delta = GameDelta {
|
||||||
|
state: self.view_state.clone(),
|
||||||
|
};
|
||||||
|
self.commands.push(BackendCommand::Delta(delta));
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Process one ceremony die-roll for `mp_player` (0 = host, 1 = guest).
|
||||||
|
fn handle_pre_game_roll(&mut self, mp_player: u16) {
|
||||||
|
let idx = mp_player as usize;
|
||||||
|
// Ignore if this player already rolled.
|
||||||
|
if self.pre_game_dice[idx].is_some() {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let single = self.dice_roller.roll().values.0;
|
||||||
|
self.pre_game_dice[idx] = Some(single);
|
||||||
|
|
||||||
|
if let [Some(h), Some(g)] = self.pre_game_dice {
|
||||||
|
// Both have rolled — broadcast both dice before resolving.
|
||||||
|
self.broadcast_state();
|
||||||
|
if h == g {
|
||||||
|
// Tie: reset for another round.
|
||||||
|
self.tie_count += 1;
|
||||||
|
self.pre_game_dice = [None; 2];
|
||||||
|
self.broadcast_state();
|
||||||
|
} else {
|
||||||
|
// Highest die goes first.
|
||||||
|
let goes_first = if h > g {
|
||||||
|
HOST_PLAYER_ID
|
||||||
|
} else {
|
||||||
|
GUEST_PLAYER_ID
|
||||||
|
};
|
||||||
|
self.ceremony_started = false;
|
||||||
|
let _ = self.game.consume(&GameEvent::BeginGame { goes_first });
|
||||||
|
// Use pre-game dice roll for the first move
|
||||||
|
let _ = self.game.consume(&GameEvent::Roll {
|
||||||
|
player_id: goes_first,
|
||||||
|
});
|
||||||
|
let _ = self.game.consume(&GameEvent::RollResult {
|
||||||
|
player_id: goes_first,
|
||||||
|
dice: Dice { values: (g, h) },
|
||||||
|
});
|
||||||
|
self.broadcast_state();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Only one die rolled so far — broadcast the partial result.
|
||||||
|
self.broadcast_state();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 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 {
|
||||||
|
// Stop if the game has already ended (stage transitions to Ended but
|
||||||
|
// turn_stage may still be MarkPoints when schools_enabled=false, which
|
||||||
|
// makes consume(Mark) a no-op and would cause an infinite loop).
|
||||||
|
if self.game.stage == trictrac_store::Stage::Ended {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
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 TrictracBackend {
|
||||||
|
pub fn get_game(&self) -> &GameState {
|
||||||
|
&self.game
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
impl BackEndArchitecture<PlayerAction, GameDelta, ViewState> for TrictracBackend {
|
||||||
|
fn new(_rule_variation: u16) -> Self {
|
||||||
|
let mut game = GameState::new(false);
|
||||||
|
game.init_player("Blancs");
|
||||||
|
game.init_player("Noirs");
|
||||||
|
|
||||||
|
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],
|
||||||
|
pre_game_dice: [None; 2],
|
||||||
|
tie_count: 0,
|
||||||
|
ceremony_started: false,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 ceremony once both players have arrived.
|
||||||
|
if self.arrived[0]
|
||||||
|
&& self.arrived[1]
|
||||||
|
&& self.game.stage == trictrac_store::Stage::PreGame
|
||||||
|
&& !self.ceremony_started
|
||||||
|
{
|
||||||
|
self.ceremony_started = true;
|
||||||
|
self.pre_game_dice = [None; 2];
|
||||||
|
self.tie_count = 0;
|
||||||
|
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) {
|
||||||
|
// During the first-player ceremony only PreGameRoll actions are accepted.
|
||||||
|
if self.ceremony_started {
|
||||||
|
if matches!(action, PlayerAction::PreGameRoll) {
|
||||||
|
self.handle_pre_game_roll(mp_player);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
PlayerAction::PreGameRoll => {} // ignored outside ceremony
|
||||||
|
}
|
||||||
|
|
||||||
|
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 super::types::{SerStage, SerTurnStage};
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
|
||||||
|
/// Drive the ceremony to completion (both players roll until one wins).
|
||||||
|
fn complete_ceremony(b: &mut TrictracBackend) {
|
||||||
|
loop {
|
||||||
|
if b.get_view_state().stage != SerStage::PreGameRoll {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
let pgr = b.get_view_state().pre_game_roll.clone().unwrap_or_default();
|
||||||
|
let host_needs = pgr.host_die.is_none();
|
||||||
|
let guest_needs = pgr.guest_die.is_none();
|
||||||
|
if !host_needs && !guest_needs {
|
||||||
|
break; // both rolled but stage not yet resolved — shouldn't happen
|
||||||
|
}
|
||||||
|
if host_needs {
|
||||||
|
b.inform_rpc(0, PlayerAction::PreGameRoll);
|
||||||
|
}
|
||||||
|
if guest_needs {
|
||||||
|
b.inform_rpc(1, PlayerAction::PreGameRoll);
|
||||||
|
}
|
||||||
|
b.drain_commands();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn both_players_arrive_starts_ceremony() {
|
||||||
|
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 to start the ceremony.
|
||||||
|
let has_reset = cmds
|
||||||
|
.iter()
|
||||||
|
.any(|c| matches!(c, BackendCommand::ResetViewState));
|
||||||
|
assert!(
|
||||||
|
has_reset,
|
||||||
|
"expected ResetViewState after both players arrive"
|
||||||
|
);
|
||||||
|
|
||||||
|
// Stage should now be PreGameRoll, not InGame.
|
||||||
|
assert_eq!(b.get_view_state().stage, SerStage::PreGameRoll);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn ceremony_resolves_to_in_game() {
|
||||||
|
let mut b = make_backend();
|
||||||
|
b.player_arrival(0);
|
||||||
|
b.player_arrival(1);
|
||||||
|
b.drain_commands();
|
||||||
|
|
||||||
|
complete_ceremony(&mut b);
|
||||||
|
|
||||||
|
assert_eq!(b.get_view_state().stage, SerStage::InGame);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn ceremony_any_order_allowed() {
|
||||||
|
let mut b = make_backend();
|
||||||
|
b.player_arrival(0);
|
||||||
|
b.player_arrival(1);
|
||||||
|
b.drain_commands();
|
||||||
|
|
||||||
|
// Guest may roll before host.
|
||||||
|
b.inform_rpc(1, PlayerAction::PreGameRoll);
|
||||||
|
let states = drain_deltas(&mut b);
|
||||||
|
assert!(
|
||||||
|
!states.is_empty(),
|
||||||
|
"guest PreGameRoll should broadcast a state"
|
||||||
|
);
|
||||||
|
let pgr = states.last().unwrap().pre_game_roll.as_ref().unwrap();
|
||||||
|
assert!(
|
||||||
|
pgr.guest_die.is_some(),
|
||||||
|
"guest die should be set after guest rolls"
|
||||||
|
);
|
||||||
|
assert!(pgr.host_die.is_none(), "host die should still be blank");
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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();
|
||||||
|
|
||||||
|
// Complete ceremony before rolling.
|
||||||
|
complete_ceremony(&mut b);
|
||||||
|
|
||||||
|
// Roll for whoever won the ceremony (either player could go first).
|
||||||
|
let first_player = b
|
||||||
|
.get_view_state()
|
||||||
|
.active_mp_player
|
||||||
|
.expect("someone should be active");
|
||||||
|
b.inform_rpc(first_player, PlayerAction::Roll);
|
||||||
|
let states = drain_deltas(&mut b);
|
||||||
|
assert!(!states.is_empty(), "expected a state broadcast after roll");
|
||||||
|
|
||||||
|
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();
|
||||||
|
complete_ceremony(&mut b);
|
||||||
|
|
||||||
|
// Identify who goes first and have the OTHER player try to roll.
|
||||||
|
let active = b.get_view_state().active_mp_player;
|
||||||
|
let wrong_player = if active == Some(0) { 1u16 } else { 0u16 };
|
||||||
|
b.inform_rpc(wrong_player, PlayerAction::Roll);
|
||||||
|
let cmds = b.drain_commands();
|
||||||
|
assert!(cmds.is_empty(), "wrong player roll should be ignored");
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Public API: WASM delegates to `inner`, other targets are no-ops ───────────
|
||||||
|
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
mod inner {
|
||||||
|
use web_sys::console;
|
||||||
|
|
||||||
|
pub fn console_log(message: String) {
|
||||||
|
console::log_1(&message.into());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(target_arch = "wasm32")]
|
||||||
|
pub use inner::console_log;
|
||||||
|
|
||||||
|
#[cfg(not(target_arch = "wasm32"))]
|
||||||
|
pub fn console_log(message: String) {}
|
||||||
43
clients/web/src/game/trictrac/bot_local.rs
Normal file
43
clients/web/src/game/trictrac/bot_local.rs
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
use rand::prelude::IndexedRandom;
|
||||||
|
use trictrac_store::{CheckerMove, Color, GameState, MoveRules, Stage, TurnStage};
|
||||||
|
|
||||||
|
use super::types::{PlayerAction, PreGameRollState};
|
||||||
|
|
||||||
|
const GUEST_PLAYER_ID: u64 = 2;
|
||||||
|
|
||||||
|
/// Returns the next action for the bot (mp_player 1 / guest), or None if it is not the bot's turn.
|
||||||
|
/// `pgr` is the current pre-game ceremony state if the ceremony is in progress.
|
||||||
|
pub fn bot_decide(game: &GameState, pgr: Option<&PreGameRollState>) -> Option<PlayerAction> {
|
||||||
|
// During the ceremony, the bot (guest) rolls when its die is missing.
|
||||||
|
if game.stage == Stage::PreGame {
|
||||||
|
if let Some(pgr) = pgr {
|
||||||
|
if pgr.guest_die.is_none() {
|
||||||
|
return Some(PlayerAction::PreGameRoll);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
if game.stage == Stage::Ended {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
if game.active_player_id != GUEST_PLAYER_ID {
|
||||||
|
return None;
|
||||||
|
}
|
||||||
|
match game.turn_stage {
|
||||||
|
TurnStage::RollDice => Some(PlayerAction::Roll),
|
||||||
|
// TurnStage::HoldOrGoChoice => Some(PlayerAction::Go),
|
||||||
|
TurnStage::Move | TurnStage::HoldOrGoChoice => {
|
||||||
|
let rules = MoveRules::new(&Color::Black, &game.board, game.dice);
|
||||||
|
let sequences = rules.get_possible_moves_sequences(true, vec![]);
|
||||||
|
let mut rng = rand::rng();
|
||||||
|
let (m1, m2) = sequences
|
||||||
|
.choose(&mut rng)
|
||||||
|
.cloned()
|
||||||
|
.unwrap_or((CheckerMove::default(), CheckerMove::default()));
|
||||||
|
// MoveRules with Color::Black mirrors the board internally, so
|
||||||
|
// returned move coordinates are in mirrored (White) space — mirror back.
|
||||||
|
Some(PlayerAction::Move(m1.mirror(), m2.mirror()))
|
||||||
|
}
|
||||||
|
_ => None,
|
||||||
|
}
|
||||||
|
}
|
||||||
3
clients/web/src/game/trictrac/mod.rs
Normal file
3
clients/web/src/game/trictrac/mod.rs
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
pub mod backend;
|
||||||
|
pub mod bot_local;
|
||||||
|
pub mod types;
|
||||||
256
clients/web/src/game/trictrac/types.rs
Normal file
256
clients/web/src/game/trictrac/types.rs
Normal file
|
|
@ -0,0 +1,256 @@
|
||||||
|
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,
|
||||||
|
/// Roll a single die during the pre-game ceremony to decide who goes first.
|
||||||
|
PreGameRoll,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── 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 ────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
/// State of the pre-game ceremony where each player rolls one die to decide
|
||||||
|
/// who goes first. Present only when `stage == SerStage::PreGameRoll`.
|
||||||
|
#[derive(Clone, Default, PartialEq, Serialize, Deserialize)]
|
||||||
|
pub struct PreGameRollState {
|
||||||
|
/// Die value (1–6) rolled by the host; `None` = not yet rolled this round.
|
||||||
|
pub host_die: Option<u8>,
|
||||||
|
/// Die value (1–6) rolled by the guest; `None` = not yet rolled this round.
|
||||||
|
pub guest_die: Option<u8>,
|
||||||
|
/// Number of tied rounds so far (0 on the first round).
|
||||||
|
pub tie_count: u8,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[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>,
|
||||||
|
/// Last two checker moves played; default when no move has occurred yet.
|
||||||
|
pub dice_moves: (CheckerMove, CheckerMove),
|
||||||
|
/// Present while the pre-game ceremony is in progress.
|
||||||
|
#[serde(default)]
|
||||||
|
pub pre_game_roll: Option<PreGameRollState>,
|
||||||
|
}
|
||||||
|
|
||||||
|
/// 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,
|
||||||
|
can_bredouille: false,
|
||||||
|
},
|
||||||
|
PlayerScore {
|
||||||
|
name: guest_name.to_string(),
|
||||||
|
points: 0,
|
||||||
|
holes: 0,
|
||||||
|
can_bredouille: false,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dice: (0, 0),
|
||||||
|
dice_jans: Vec::new(),
|
||||||
|
dice_moves: (CheckerMove::default(), CheckerMove::default()),
|
||||||
|
pre_game_roll: None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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,
|
||||||
|
can_bredouille: p.can_bredouille,
|
||||||
|
})
|
||||||
|
.unwrap_or_else(|| PlayerScore {
|
||||||
|
name: String::new(),
|
||||||
|
points: 0,
|
||||||
|
holes: 0,
|
||||||
|
can_bredouille: false,
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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,
|
||||||
|
dice_moves: gs.dice_moves,
|
||||||
|
pre_game_roll: None,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Scored event (notification) ──────────────────────────────────────────
|
||||||
|
|
||||||
|
/// Points scored in a single scoring event, used for the notification panel.
|
||||||
|
#[derive(Clone, PartialEq)]
|
||||||
|
pub struct ScoredEvent {
|
||||||
|
/// Raw points earned (sum of jan values; before hole wrapping).
|
||||||
|
pub points_earned: u8,
|
||||||
|
/// Number of holes gained (0 = no hole).
|
||||||
|
pub holes_gained: u8,
|
||||||
|
/// Total holes after this event.
|
||||||
|
pub holes_total: u8,
|
||||||
|
/// Was bredouille active when the hole was made (doubles hole count)?
|
||||||
|
pub bredouille: bool,
|
||||||
|
/// Contributing jans from this player's perspective (totals always positive).
|
||||||
|
pub jans: Vec<JanEntry>,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Score snapshot ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
#[derive(Clone, PartialEq, Serialize, Deserialize)]
|
||||||
|
pub struct PlayerScore {
|
||||||
|
pub name: String,
|
||||||
|
pub points: u8,
|
||||||
|
pub holes: u8,
|
||||||
|
pub can_bredouille: bool,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Serialisable mirrors of store enums ──────────────────────────────────────
|
||||||
|
|
||||||
|
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
|
||||||
|
pub enum SerStage {
|
||||||
|
PreGame,
|
||||||
|
/// Both players have arrived; ceremony in progress to decide who goes first.
|
||||||
|
PreGameRoll,
|
||||||
|
InGame,
|
||||||
|
Ended,
|
||||||
|
}
|
||||||
|
|
||||||
|
#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
|
||||||
|
pub enum SerTurnStage {
|
||||||
|
RollDice,
|
||||||
|
RollWaiting,
|
||||||
|
MarkPoints,
|
||||||
|
HoldOrGoChoice,
|
||||||
|
Move,
|
||||||
|
MarkAdvPoints,
|
||||||
|
}
|
||||||
14
clients/web/src/main.rs
Normal file
14
clients/web/src/main.rs
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
leptos_i18n::load_locales!();
|
||||||
|
|
||||||
|
mod api;
|
||||||
|
mod app;
|
||||||
|
mod game;
|
||||||
|
mod nav;
|
||||||
|
mod portal;
|
||||||
|
|
||||||
|
use app::App;
|
||||||
|
use leptos::prelude::*;
|
||||||
|
|
||||||
|
fn main() {
|
||||||
|
mount_to_body(|| view! { <App /> })
|
||||||
|
}
|
||||||
51
clients/web/src/nav.rs
Normal file
51
clients/web/src/nav.rs
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use leptos::task::spawn_local;
|
||||||
|
use leptos_router::components::A;
|
||||||
|
|
||||||
|
use crate::api;
|
||||||
|
use crate::app::Screen;
|
||||||
|
use crate::i18n::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn SiteNav() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let screen = use_context::<RwSignal<Screen>>().expect("Screen context not found");
|
||||||
|
let auth_username =
|
||||||
|
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
|
||||||
|
|
||||||
|
let is_game_active =
|
||||||
|
move || !matches!(screen.get(), Screen::Login { .. });
|
||||||
|
|
||||||
|
let logout = move |_| {
|
||||||
|
spawn_local(async move {
|
||||||
|
let _ = api::post_logout().await;
|
||||||
|
auth_username.set(None);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<nav class="site-nav" class:hidden=is_game_active>
|
||||||
|
<A href="/" attr:class="site-nav-brand">"Trictrac"</A>
|
||||||
|
<div class="site-nav-spacer" />
|
||||||
|
<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>
|
||||||
|
{move || match auth_username.get() {
|
||||||
|
Some(u) => view! {
|
||||||
|
<A href=format!("/profile/{u}")>{ u.clone() }</A>
|
||||||
|
<button class="site-nav-btn" on:click=logout>{t!(i18n, sign_out)}</button>
|
||||||
|
}.into_any(),
|
||||||
|
None => view! {
|
||||||
|
<A href="/account">{t!(i18n, sign_in)}</A>
|
||||||
|
}.into_any(),
|
||||||
|
}}
|
||||||
|
</nav>
|
||||||
|
}
|
||||||
|
}
|
||||||
166
clients/web/src/portal/account.rs
Normal file
166
clients/web/src/portal/account.rs
Normal file
|
|
@ -0,0 +1,166 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use leptos_router::hooks::use_navigate;
|
||||||
|
|
||||||
|
use crate::api;
|
||||||
|
use crate::i18n::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn AccountPage() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let auth_username =
|
||||||
|
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
|
||||||
|
let navigate = use_navigate();
|
||||||
|
|
||||||
|
Effect::new(move |_| {
|
||||||
|
if let Some(u) = auth_username.get() {
|
||||||
|
navigate(&format!("/profile/{u}"), Default::default());
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
let tab = RwSignal::new("login");
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="portal-main" style="display:flex;justify-content:center;padding-top:3rem">
|
||||||
|
<div class="portal-card" style="max-width:420px;width:100%">
|
||||||
|
<h1 style="font-family:var(--font-display);font-size:1.6rem;margin-bottom:1.5rem;text-align:center">
|
||||||
|
{t!(i18n, account_title)}
|
||||||
|
</h1>
|
||||||
|
<div class="portal-tabs">
|
||||||
|
<button
|
||||||
|
class=move || if tab.get() == "login" { "portal-tab-btn active" } else { "portal-tab-btn" }
|
||||||
|
on:click=move |_| tab.set("login")
|
||||||
|
>{t!(i18n, sign_in)}</button>
|
||||||
|
<button
|
||||||
|
class=move || if tab.get() == "register" { "portal-tab-btn active" } else { "portal-tab-btn" }
|
||||||
|
on:click=move |_| tab.set("register")
|
||||||
|
>{t!(i18n, create_account)}</button>
|
||||||
|
</div>
|
||||||
|
{move || if tab.get() == "login" {
|
||||||
|
view! { <LoginForm /> }.into_any()
|
||||||
|
} else {
|
||||||
|
view! { <RegisterForm /> }.into_any()
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn LoginForm() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let auth_username =
|
||||||
|
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
|
||||||
|
let navigate = use_navigate();
|
||||||
|
|
||||||
|
let username = RwSignal::new(String::new());
|
||||||
|
let password = RwSignal::new(String::new());
|
||||||
|
let error = RwSignal::new(String::new());
|
||||||
|
let pending = RwSignal::new(false);
|
||||||
|
|
||||||
|
let submit = move |ev: leptos::ev::SubmitEvent| {
|
||||||
|
ev.prevent_default();
|
||||||
|
if pending.get() { return; }
|
||||||
|
pending.set(true);
|
||||||
|
error.set(String::new());
|
||||||
|
let u = username.get();
|
||||||
|
let p = password.get();
|
||||||
|
let navigate = navigate.clone();
|
||||||
|
wasm_bindgen_futures::spawn_local(async move {
|
||||||
|
match api::post_login(&u, &p).await {
|
||||||
|
Ok(me) => {
|
||||||
|
let dest = format!("/profile/{}", me.username);
|
||||||
|
auth_username.set(Some(me.username));
|
||||||
|
navigate(&dest, Default::default());
|
||||||
|
}
|
||||||
|
Err(e) => {
|
||||||
|
error.set(e);
|
||||||
|
pending.set(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<form on:submit=submit>
|
||||||
|
<label class="portal-label">{t!(i18n, label_username)}</label>
|
||||||
|
<input class="portal-input" type="text" required
|
||||||
|
prop:value=move || username.get()
|
||||||
|
on:input=move |ev| username.set(event_target_value(&ev)) />
|
||||||
|
<label class="portal-label">{t!(i18n, label_password)}</label>
|
||||||
|
<input class="portal-input" type="password" required
|
||||||
|
prop:value=move || password.get()
|
||||||
|
on:input=move |ev| password.set(event_target_value(&ev)) />
|
||||||
|
<button class="portal-submit-btn" type="submit"
|
||||||
|
disabled=move || pending.get()
|
||||||
|
>{t!(i18n, sign_in)}</button>
|
||||||
|
{move || if !error.get().is_empty() {
|
||||||
|
view! { <p class="portal-error">{ error.get() }</p> }.into_any()
|
||||||
|
} else {
|
||||||
|
view! { <span /> }.into_any()
|
||||||
|
}}
|
||||||
|
</form>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn RegisterForm() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let auth_username =
|
||||||
|
use_context::<RwSignal<Option<String>>>().expect("auth_username context not found");
|
||||||
|
let navigate = use_navigate();
|
||||||
|
|
||||||
|
let username = RwSignal::new(String::new());
|
||||||
|
let email = RwSignal::new(String::new());
|
||||||
|
let password = RwSignal::new(String::new());
|
||||||
|
let error = RwSignal::new(String::new());
|
||||||
|
let pending = RwSignal::new(false);
|
||||||
|
|
||||||
|
let submit = move |ev: leptos::ev::SubmitEvent| {
|
||||||
|
ev.prevent_default();
|
||||||
|
if pending.get() { return; }
|
||||||
|
pending.set(true);
|
||||||
|
error.set(String::new());
|
||||||
|
let u = username.get();
|
||||||
|
let e = email.get();
|
||||||
|
let p = password.get();
|
||||||
|
let navigate = navigate.clone();
|
||||||
|
wasm_bindgen_futures::spawn_local(async move {
|
||||||
|
match api::post_register(&u, &e, &p).await {
|
||||||
|
Ok(me) => {
|
||||||
|
let dest = format!("/profile/{}", me.username);
|
||||||
|
auth_username.set(Some(me.username));
|
||||||
|
navigate(&dest, Default::default());
|
||||||
|
}
|
||||||
|
Err(err) => {
|
||||||
|
error.set(err);
|
||||||
|
pending.set(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<form on:submit=submit>
|
||||||
|
<label class="portal-label">{t!(i18n, label_username)}</label>
|
||||||
|
<input class="portal-input" type="text" required
|
||||||
|
prop:value=move || username.get()
|
||||||
|
on:input=move |ev| username.set(event_target_value(&ev)) />
|
||||||
|
<label class="portal-label">{t!(i18n, label_email)}</label>
|
||||||
|
<input class="portal-input" type="email" required
|
||||||
|
prop:value=move || email.get()
|
||||||
|
on:input=move |ev| email.set(event_target_value(&ev)) />
|
||||||
|
<label class="portal-label">{t!(i18n, label_password)}</label>
|
||||||
|
<input class="portal-input" type="password" required
|
||||||
|
prop:value=move || password.get()
|
||||||
|
on:input=move |ev| password.set(event_target_value(&ev)) />
|
||||||
|
<button class="portal-submit-btn" type="submit"
|
||||||
|
disabled=move || pending.get()
|
||||||
|
>{t!(i18n, create_account)}</button>
|
||||||
|
{move || if !error.get().is_empty() {
|
||||||
|
view! { <p class="portal-error">{ error.get() }</p> }.into_any()
|
||||||
|
} else {
|
||||||
|
view! { <span /> }.into_any()
|
||||||
|
}}
|
||||||
|
</form>
|
||||||
|
}
|
||||||
|
}
|
||||||
109
clients/web/src/portal/game_detail.rs
Normal file
109
clients/web/src/portal/game_detail.rs
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use leptos_router::{components::A, hooks::use_params_map};
|
||||||
|
|
||||||
|
use crate::api::{self, GameDetail, Participant};
|
||||||
|
use crate::i18n::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn GameDetailPage() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let params = use_params_map();
|
||||||
|
let id_str = move || params.read().get("id").unwrap_or_default();
|
||||||
|
|
||||||
|
let detail = LocalResource::new(move || {
|
||||||
|
let s = id_str();
|
||||||
|
async move {
|
||||||
|
let id: i64 = s.parse().map_err(|_| "invalid game id".to_string())?;
|
||||||
|
api::get_game_detail(id).await
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="portal-main">
|
||||||
|
{move || match detail.get().map(|sw| sw.take()) {
|
||||||
|
None => view! { <p class="portal-loading">{t!(i18n, loading)}</p> }.into_any(),
|
||||||
|
Some(Err(e)) => view! { <p class="portal-error">{ e }</p> }.into_any(),
|
||||||
|
Some(Ok(g)) => view! { <GameDetailView game=g /> }.into_any(),
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn GameDetailView(game: GameDetail) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let started = api::format_ts(game.started_at);
|
||||||
|
let ended = game.ended_at.map(api::format_ts)
|
||||||
|
.unwrap_or_else(|| t_string!(i18n, game_ongoing).to_string());
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="portal-card">
|
||||||
|
<h1>{t!(i18n, room_detail_title)} " " { game.room_code.clone() }</h1>
|
||||||
|
<p class="portal-meta">
|
||||||
|
{t!(i18n, started_label)} ": " { started.clone() }
|
||||||
|
" · "
|
||||||
|
{t!(i18n, ended_label)} ": " { ended }
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<h2>{t!(i18n, players_header)}</h2>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{t!(i18n, col_player)}</th>
|
||||||
|
<th>{t!(i18n, label_username)}</th>
|
||||||
|
<th>{t!(i18n, col_outcome)}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{game.participants.iter().map(|p| {
|
||||||
|
view! { <ParticipantRow participant=p.clone() /> }
|
||||||
|
}).collect_view()}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
{game.result.as_ref().map(|r| view! {
|
||||||
|
<div style="margin-top:1.5rem">
|
||||||
|
<h2>{t!(i18n, score_header)}</h2>
|
||||||
|
<p style="font-family:var(--font-display);font-size:1.1rem;color:var(--ui-ink)">
|
||||||
|
{ r.clone() }
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn ParticipantRow(participant: Participant) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let outcome_class = match participant.outcome.as_deref() {
|
||||||
|
Some("win") => "outcome-win",
|
||||||
|
Some("loss") => "outcome-loss",
|
||||||
|
Some("draw") => "outcome-draw",
|
||||||
|
_ => "",
|
||||||
|
};
|
||||||
|
let outcome_text = move || match participant.outcome.as_deref() {
|
||||||
|
Some("win") => t_string!(i18n, outcome_win),
|
||||||
|
Some("loss") => t_string!(i18n, outcome_loss),
|
||||||
|
Some("draw") => t_string!(i18n, outcome_draw),
|
||||||
|
_ => "—",
|
||||||
|
};
|
||||||
|
let name = participant.username.clone();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<tr>
|
||||||
|
<td>{t!(i18n, col_player)} " " { participant.player_id }</td>
|
||||||
|
<td>
|
||||||
|
{match name {
|
||||||
|
Some(u) => view! {
|
||||||
|
<A href=format!("/profile/{u}")>{ u }</A>
|
||||||
|
}.into_any(),
|
||||||
|
None => view! {
|
||||||
|
<span style="color:#aa9070">{t!(i18n, anonymous_player)}</span>
|
||||||
|
}.into_any(),
|
||||||
|
}}
|
||||||
|
</td>
|
||||||
|
<td class=outcome_class>{ outcome_text }</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
}
|
||||||
88
clients/web/src/portal/lobby.rs
Normal file
88
clients/web/src/portal/lobby.rs
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
use futures::channel::mpsc::UnboundedSender;
|
||||||
|
use leptos::prelude::*;
|
||||||
|
|
||||||
|
use crate::app::{NetCommand, Screen};
|
||||||
|
use crate::i18n::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn LobbyPage() -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let (room_name, set_room_name) = signal(String::new());
|
||||||
|
|
||||||
|
let screen = use_context::<RwSignal<Screen>>().expect("Screen context not found");
|
||||||
|
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.clone();
|
||||||
|
let cmd_tx_bot = cmd_tx;
|
||||||
|
|
||||||
|
// Extract connection error from screen state.
|
||||||
|
let error = move || match screen.get() {
|
||||||
|
Screen::Login { error } => error,
|
||||||
|
_ => None,
|
||||||
|
};
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="portal-main" style="display:flex;justify-content:center;align-items:flex-start;padding-top:5vh">
|
||||||
|
<div class="login-card">
|
||||||
|
<div class="login-card-header">
|
||||||
|
<div class="login-board-stripe"></div>
|
||||||
|
</div>
|
||||||
|
<div class="login-card-body">
|
||||||
|
<h1 class="login-title">"Trictrac"</h1>
|
||||||
|
<p class="login-subtitle">
|
||||||
|
<em>"Une interprétation numérique"</em>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="login-ornament">"✦"</div>
|
||||||
|
|
||||||
|
{move || error().map(|err| view! { <p class="error-msg">{err}</p> })}
|
||||||
|
|
||||||
|
<input
|
||||||
|
class="login-input"
|
||||||
|
type="text"
|
||||||
|
placeholder=move || t_string!(i18n, room_name_placeholder)
|
||||||
|
prop:value=move || room_name.get()
|
||||||
|
on:input=move |ev| set_room_name.set(event_target_value(&ev))
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="login-actions">
|
||||||
|
<button
|
||||||
|
class="login-btn login-btn-primary"
|
||||||
|
disabled=move || room_name.get().is_empty()
|
||||||
|
on:click=move |_| {
|
||||||
|
cmd_tx_create
|
||||||
|
.unbounded_send(NetCommand::CreateRoom { room: room_name.get() })
|
||||||
|
.ok();
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t!(i18n, create_room)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="login-btn login-btn-secondary"
|
||||||
|
disabled=move || room_name.get().is_empty()
|
||||||
|
on:click=move |_| {
|
||||||
|
cmd_tx_join
|
||||||
|
.unbounded_send(NetCommand::JoinRoom { room: room_name.get() })
|
||||||
|
.ok();
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t!(i18n, join_room)}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="login-btn login-btn-bot"
|
||||||
|
on:click=move |_| {
|
||||||
|
cmd_tx_bot.unbounded_send(NetCommand::PlayVsBot).ok();
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{t!(i18n, play_vs_bot)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
4
clients/web/src/portal/mod.rs
Normal file
4
clients/web/src/portal/mod.rs
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
pub mod account;
|
||||||
|
pub mod game_detail;
|
||||||
|
pub mod lobby;
|
||||||
|
pub mod profile;
|
||||||
153
clients/web/src/portal/profile.rs
Normal file
153
clients/web/src/portal/profile.rs
Normal file
|
|
@ -0,0 +1,153 @@
|
||||||
|
use leptos::prelude::*;
|
||||||
|
use leptos_router::{components::A, hooks::use_params_map};
|
||||||
|
|
||||||
|
use crate::api::{self, GameSummary, UserProfile};
|
||||||
|
use crate::i18n::*;
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
pub fn ProfilePage() -> impl IntoView {
|
||||||
|
let params = use_params_map();
|
||||||
|
let username = move || params.read().get("username").unwrap_or_default();
|
||||||
|
|
||||||
|
let profile = LocalResource::new(move || {
|
||||||
|
let u = username();
|
||||||
|
async move { api::get_user_profile(&u).await }
|
||||||
|
});
|
||||||
|
|
||||||
|
let i18n = use_i18n();
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="portal-main">
|
||||||
|
{move || match profile.get().map(|sw| sw.take()) {
|
||||||
|
None => view! { <p class="portal-loading">{t!(i18n, loading)}</p> }.into_any(),
|
||||||
|
Some(Err(e)) => view! { <p class="portal-error">{ e }</p> }.into_any(),
|
||||||
|
Some(Ok(p)) => view! { <ProfileContent profile=p username=username() /> }.into_any(),
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn ProfileContent(profile: UserProfile, username: String) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let page = RwSignal::new(0i64);
|
||||||
|
let games = LocalResource::new(move || {
|
||||||
|
let u = username.clone();
|
||||||
|
let p = page.get();
|
||||||
|
async move { api::get_user_games(&u, p).await }
|
||||||
|
});
|
||||||
|
|
||||||
|
let joined = api::format_ts(profile.created_at);
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<div class="portal-card">
|
||||||
|
<h1>{ profile.username.clone() }</h1>
|
||||||
|
<p class="portal-meta">{t!(i18n, member_since)} " " { joined }</p>
|
||||||
|
|
||||||
|
<div class="stats-grid">
|
||||||
|
<div class="stat-box">
|
||||||
|
<div class="value">{ profile.total_games }</div>
|
||||||
|
<div class="label">{t!(i18n, stat_games)}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<div class="value outcome-win">{ profile.wins }</div>
|
||||||
|
<div class="label">{t!(i18n, stat_wins)}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<div class="value outcome-loss">{ profile.losses }</div>
|
||||||
|
<div class="label">{t!(i18n, stat_losses)}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-box">
|
||||||
|
<div class="value outcome-draw">{ profile.draws }</div>
|
||||||
|
<div class="label">{t!(i18n, stat_draws)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="portal-card">
|
||||||
|
<h2>{t!(i18n, game_history_title)}</h2>
|
||||||
|
{move || match games.get().map(|sw| sw.take()) {
|
||||||
|
None => view! { <p class="portal-loading">{t!(i18n, loading)}</p> }.into_any(),
|
||||||
|
Some(Err(e)) => view! { <p class="portal-error">{ e }</p> }.into_any(),
|
||||||
|
Some(Ok(r)) => {
|
||||||
|
if r.games.is_empty() {
|
||||||
|
view! { <p class="portal-empty">{t!(i18n, no_games)}</p> }.into_any()
|
||||||
|
} else {
|
||||||
|
view! { <GamesTable games=r.games page=page /> }.into_any()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#[component]
|
||||||
|
fn GamesTable(games: Vec<GameSummary>, page: RwSignal<i64>) -> impl IntoView {
|
||||||
|
let i18n = use_i18n();
|
||||||
|
let rows = games.clone();
|
||||||
|
let has_next = games.len() == 20;
|
||||||
|
|
||||||
|
view! {
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>{t!(i18n, col_room)}</th>
|
||||||
|
<th>{t!(i18n, col_started)}</th>
|
||||||
|
<th>{t!(i18n, col_ended)}</th>
|
||||||
|
<th>{t!(i18n, col_outcome)}</th>
|
||||||
|
<th>{t!(i18n, col_detail)}</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{rows.into_iter().map(|g| {
|
||||||
|
let started = api::format_ts(g.started_at);
|
||||||
|
let ended = g.ended_at.map(api::format_ts).unwrap_or_else(|| "—".into());
|
||||||
|
let outcome_class = match g.outcome.as_deref() {
|
||||||
|
Some("win") => "outcome-win",
|
||||||
|
Some("loss") => "outcome-loss",
|
||||||
|
Some("draw") => "outcome-draw",
|
||||||
|
_ => "",
|
||||||
|
};
|
||||||
|
let outcome_text = move || match g.outcome.as_deref() {
|
||||||
|
Some("win") => t_string!(i18n, outcome_win),
|
||||||
|
Some("loss") => t_string!(i18n, outcome_loss),
|
||||||
|
Some("draw") => t_string!(i18n, outcome_draw),
|
||||||
|
_ => "—",
|
||||||
|
};
|
||||||
|
view! {
|
||||||
|
<tr>
|
||||||
|
<td>{ g.room_code.clone() }</td>
|
||||||
|
<td>{ started }</td>
|
||||||
|
<td>{ ended }</td>
|
||||||
|
<td class=outcome_class>{ outcome_text }</td>
|
||||||
|
<td>
|
||||||
|
<A href=format!("/games/{}", g.id)>{t!(i18n, view_link)}</A>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
}
|
||||||
|
}).collect_view()}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<div style="display:flex;gap:0.75rem;margin-top:1.25rem;align-items:center">
|
||||||
|
{move || if page.get() > 0 {
|
||||||
|
view! {
|
||||||
|
<button class="portal-page-btn"
|
||||||
|
on:click=move |_| page.update(|p| *p -= 1)
|
||||||
|
>{t!(i18n, prev_page)}</button>
|
||||||
|
}.into_any()
|
||||||
|
} else {
|
||||||
|
view! { <span /> }.into_any()
|
||||||
|
}}
|
||||||
|
<span class="portal-meta" style="margin:0">{t!(i18n, page_label)} " " { move || page.get() + 1 }</span>
|
||||||
|
{if has_next {
|
||||||
|
view! {
|
||||||
|
<button class="portal-page-btn"
|
||||||
|
on:click=move |_| page.update(|p| *p += 1)
|
||||||
|
>{t!(i18n, next_page)}</button>
|
||||||
|
}.into_any()
|
||||||
|
} else {
|
||||||
|
view! { <span /> }.into_any()
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
}
|
||||||
21
justfile
21
justfile
|
|
@ -9,6 +9,23 @@ shell:
|
||||||
runcli:
|
runcli:
|
||||||
RUST_LOG=info cargo run --bin=client_cli
|
RUST_LOG=info cargo run --bin=client_cli
|
||||||
|
|
||||||
|
[working-directory: 'clients/web']
|
||||||
|
dev:
|
||||||
|
trunk serve
|
||||||
|
|
||||||
|
[working-directory: 'clients/web']
|
||||||
|
build:
|
||||||
|
trunk build --release
|
||||||
|
cp dist/index.html ../../deploy/index.html
|
||||||
|
cp dist/*.wasm ../../deploy/
|
||||||
|
cp dist/*.js ../../deploy/
|
||||||
|
cp dist/*.css ../../deploy/
|
||||||
|
|
||||||
|
[working-directory: 'deploy']
|
||||||
|
run-relay:
|
||||||
|
./relay-server
|
||||||
|
|
||||||
|
# Legacy targets kept for reference during transition
|
||||||
[working-directory: 'clients/web-game']
|
[working-directory: 'clients/web-game']
|
||||||
dev-game:
|
dev-game:
|
||||||
trunk serve
|
trunk serve
|
||||||
|
|
@ -21,10 +38,6 @@ build-game:
|
||||||
cp dist/*.js ../../deploy/
|
cp dist/*.js ../../deploy/
|
||||||
cp dist/*.css ../../deploy/
|
cp dist/*.css ../../deploy/
|
||||||
|
|
||||||
[working-directory: 'deploy']
|
|
||||||
run-relay:
|
|
||||||
./relay-server
|
|
||||||
|
|
||||||
[working-directory: 'clients/web-user-portal']
|
[working-directory: 'clients/web-user-portal']
|
||||||
dev-portal:
|
dev-portal:
|
||||||
trunk serve
|
trunk serve
|
||||||
|
|
|
||||||
|
|
@ -81,8 +81,7 @@ async fn main() {
|
||||||
|
|
||||||
let cors = CorsLayer::new()
|
let cors = CorsLayer::new()
|
||||||
.allow_origin(AllowOrigin::list([
|
.allow_origin(AllowOrigin::list([
|
||||||
"http://localhost:9091".parse().unwrap(), // game dev server
|
"http://localhost:9091".parse().unwrap(), // unified web dev server
|
||||||
"http://localhost:9092".parse().unwrap(), // portal dev server
|
|
||||||
]))
|
]))
|
||||||
.allow_methods([Method::GET, Method::POST, Method::OPTIONS])
|
.allow_methods([Method::GET, Method::POST, Method::OPTIONS])
|
||||||
.allow_headers([
|
.allow_headers([
|
||||||
|
|
@ -96,10 +95,6 @@ async fn main() {
|
||||||
.route("/enlist", get(enlist_handler))
|
.route("/enlist", get(enlist_handler))
|
||||||
.route("/ws", get(websocket_handler))
|
.route("/ws", get(websocket_handler))
|
||||||
.merge(http::router())
|
.merge(http::router())
|
||||||
.nest_service(
|
|
||||||
"/portal",
|
|
||||||
ServeDir::new("portal").not_found_service(ServeFile::new("portal/index.html")),
|
|
||||||
)
|
|
||||||
.with_state(app_state)
|
.with_state(app_state)
|
||||||
.layer(auth_layer)
|
.layer(auth_layer)
|
||||||
.layer(cors)
|
.layer(cors)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue