Compare commits
No commits in common. "04369ea28e9a1ac6185710fc409fb50aa05f14fb" and "15a2963f7e7273f5997874c57c037d2d707d1a65" have entirely different histories.
04369ea28e
...
15a2963f7e
11 changed files with 92 additions and 423 deletions
7
Cargo.lock
generated
7
Cargo.lock
generated
|
|
@ -6347,12 +6347,6 @@ dependencies = [
|
|||
"bytemuck",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "qrcodegen"
|
||||
version = "1.8.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "4339fc7a1021c9c1621d87f5e3505f2805c8c105420ba2f2a4df86814590c142"
|
||||
|
||||
[[package]]
|
||||
name = "quick-error"
|
||||
version = "2.0.1"
|
||||
|
|
@ -8720,7 +8714,6 @@ dependencies = [
|
|||
"leptos",
|
||||
"leptos_i18n",
|
||||
"leptos_router",
|
||||
"qrcodegen",
|
||||
"rand 0.9.3",
|
||||
"serde",
|
||||
"serde_json",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ serde_json = "1"
|
|||
futures = "0.3"
|
||||
rand = "0.9"
|
||||
gloo-storage = "0.3"
|
||||
qrcodegen = "1.8"
|
||||
|
||||
[target.'cfg(target_arch = "wasm32")'.dependencies]
|
||||
wasm-bindgen = "0.2"
|
||||
|
|
@ -39,7 +38,4 @@ web-sys = { version = "0.3", features = [
|
|||
"OscillatorType",
|
||||
"BaseAudioContext",
|
||||
"HtmlAudioElement",
|
||||
"Clipboard",
|
||||
"Navigator",
|
||||
"Location",
|
||||
] }
|
||||
|
|
|
|||
|
|
@ -287,74 +287,10 @@ a:hover { text-decoration: underline; }
|
|||
.portal-error { color: var(--ui-red-accent); font-size: 0.875rem; margin-top: 0.5rem; }
|
||||
.portal-success { color: var(--ui-green-accent); font-size: 0.875rem; margin-top: 0.5rem; }
|
||||
|
||||
/* ── Share URL row (lobby waiting card + game top bar) ──────────── */
|
||||
.share-url-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background: rgba(0,0,0,0.18);
|
||||
border: 1px solid rgba(200,164,72,0.25);
|
||||
border-radius: 5px;
|
||||
padding: 0.4rem 0.6rem;
|
||||
}
|
||||
.share-url-text {
|
||||
flex: 1;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.72rem;
|
||||
color: rgba(242,232,208,0.75);
|
||||
word-break: break-all;
|
||||
user-select: all;
|
||||
}
|
||||
.share-copy-btn {
|
||||
flex-shrink: 0;
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.72rem;
|
||||
padding: 0.2rem 0.6rem;
|
||||
border: 1px solid rgba(200,164,72,0.4);
|
||||
border-radius: 3px;
|
||||
background: rgba(200,164,72,0.1);
|
||||
color: var(--ui-parchment);
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.share-copy-btn:hover { background: rgba(200,164,72,0.22); }
|
||||
|
||||
/* ── QR code container ───────────────────────────────────────────── */
|
||||
.qr-container {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
margin: 0 auto;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.qr-container svg { width: 100%; height: 100%; display: block; }
|
||||
|
||||
/* ── Share popover (in-game top bar) ─────────────────────────────── */
|
||||
.share-popover {
|
||||
width: 100%;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(200,164,72,0.2);
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.share-popover .qr-container { width: 120px; height: 120px; }
|
||||
.share-popover-label {
|
||||
font-size: 0.75rem;
|
||||
color: rgba(242,232,208,0.6);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Game overlay (full-screen, covers portal during play) ───────── */
|
||||
.game-overlay {
|
||||
position: fixed;
|
||||
inset: 54px 0 0 0;
|
||||
inset: 0;
|
||||
background: #8a7050;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 10%, rgba(80,48,16,0.35) 0%, transparent 60%),
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
"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",
|
||||
"anonymous_name": "Anonymous",
|
||||
"login_failed": "Invalid username or password.",
|
||||
"sign_in": "Sign in",
|
||||
"sign_out": "Sign out",
|
||||
|
|
@ -94,12 +93,5 @@
|
|||
"anonymous_player": "anonymous",
|
||||
"started_label": "Started",
|
||||
"ended_label": "Ended",
|
||||
"room_detail_title": "Room",
|
||||
"share_link": "Share this link to invite an opponent",
|
||||
"copy_link": "Copy link",
|
||||
"link_copied": "Copied!",
|
||||
"scan_qr": "or scan the QR code",
|
||||
"join_code_label": "Join by code",
|
||||
"join_code_placeholder": "Room code",
|
||||
"share_btn": "Share"
|
||||
"room_detail_title": "Room"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
"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",
|
||||
"anonymous_name": "Anonyme",
|
||||
"login_failed": "Identifiant ou mot de passe incorrect.",
|
||||
"sign_in": "Se connecter",
|
||||
"sign_out": "Se déconnecter",
|
||||
|
|
@ -94,12 +93,5 @@
|
|||
"anonymous_player": "anonyme",
|
||||
"started_label": "Début",
|
||||
"ended_label": "Fin",
|
||||
"room_detail_title": "Salle",
|
||||
"share_link": "Partagez ce lien pour inviter un adversaire",
|
||||
"copy_link": "Copier le lien",
|
||||
"link_copied": "Copié !",
|
||||
"scan_qr": "ou scannez le QR code",
|
||||
"join_code_label": "Rejoindre par code",
|
||||
"join_code_placeholder": "Code de salle",
|
||||
"share_btn": "Partager"
|
||||
"room_detail_title": "Salle"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ use gloo_storage::{LocalStorage, Storage};
|
|||
use leptos::prelude::*;
|
||||
use leptos::task::spawn_local;
|
||||
use leptos_router::components::{Route, Router, Routes};
|
||||
use leptos_router::hooks::use_location;
|
||||
use leptos_router::path;
|
||||
use serde::{Deserialize, Serialize};
|
||||
|
||||
|
|
@ -12,15 +11,15 @@ use backbone_lib::session::{ConnectError, GameSession, RoomConfig, RoomRole, Ses
|
|||
use backbone_lib::traits::ViewStateUpdate;
|
||||
|
||||
use crate::api;
|
||||
use crate::i18n::*;
|
||||
use crate::game::components::{ConnectingScreen, GameScreen};
|
||||
use crate::game::session::{
|
||||
compute_last_moves, patch_player_name, push_or_show, run_local_bot_game,
|
||||
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;
|
||||
|
|
@ -129,7 +128,6 @@ async fn submit_game_result(room_code: String, game_state: ViewState) {
|
|||
|
||||
#[component]
|
||||
pub fn App() -> impl IntoView {
|
||||
let i18n = use_i18n();
|
||||
let stored = load_session();
|
||||
let initial_screen = if stored.is_some() {
|
||||
Screen::Connecting
|
||||
|
|
@ -227,10 +225,8 @@ pub fn App() -> impl IntoView {
|
|||
};
|
||||
|
||||
if remote_config.is_none() {
|
||||
let player_name = auth_username.get_untracked()
|
||||
.unwrap_or_else(|| t_string!(i18n, anonymous_name).to_string());
|
||||
loop {
|
||||
let restart = run_local_bot_game(screen, &mut cmd_rx, pending, player_name.clone()).await;
|
||||
let restart = run_local_bot_game(screen, &mut cmd_rx, pending).await;
|
||||
if !restart {
|
||||
break;
|
||||
}
|
||||
|
|
@ -270,9 +266,7 @@ pub fn App() -> impl IntoView {
|
|||
let is_host = session.is_host;
|
||||
let player_id = session.player_id;
|
||||
let reconnect_token = session.reconnect_token;
|
||||
let my_name = auth_username.get_untracked()
|
||||
.unwrap_or_else(|| t_string!(i18n, anonymous_name).to_string());
|
||||
let mut vs = ViewState::default_with_names("", "");
|
||||
let mut vs = ViewState::default_with_names("Blancs", "Noirs");
|
||||
let mut result_submitted = false;
|
||||
|
||||
loop {
|
||||
|
|
@ -296,7 +290,6 @@ pub fn App() -> impl IntoView {
|
|||
ViewStateUpdate::Full(state) => vs = state,
|
||||
ViewStateUpdate::Incremental(delta) => vs.apply_delta(&delta),
|
||||
}
|
||||
patch_player_name(&mut vs, player_id, &my_name);
|
||||
|
||||
if is_host && !result_submitted && vs.stage == SerStage::Ended {
|
||||
result_submitted = true;
|
||||
|
|
@ -350,9 +343,12 @@ pub fn App() -> impl IntoView {
|
|||
});
|
||||
|
||||
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 />
|
||||
|
|
@ -362,24 +358,8 @@ pub fn App() -> impl IntoView {
|
|||
</Routes>
|
||||
</main>
|
||||
|
||||
<GameOverlay pending=pending screen=screen />
|
||||
</Router>
|
||||
}
|
||||
}
|
||||
|
||||
/// Renders the full-screen game overlay, but only when the current route is "/".
|
||||
/// This lets the user navigate to profile/account pages while a game is running.
|
||||
#[component]
|
||||
fn GameOverlay(
|
||||
pending: RwSignal<VecDeque<GameUiState>>,
|
||||
screen: RwSignal<Screen>,
|
||||
) -> impl IntoView {
|
||||
let location = use_location();
|
||||
|
||||
move || {
|
||||
if location.pathname.get() != "/" {
|
||||
return view! { }.into_any();
|
||||
}
|
||||
// Game overlay: fixed, covers portal during play
|
||||
{move || {
|
||||
let q = pending.get();
|
||||
let front = q.front().cloned();
|
||||
if let Some(state) = front {
|
||||
|
|
@ -396,6 +376,9 @@ fn GameOverlay(
|
|||
}.into_any(),
|
||||
_ => view! { }.into_any(),
|
||||
}
|
||||
}}
|
||||
</Router>
|
||||
</I18nContextProvider>
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ use trictrac_store::{Board as StoreBoard, CheckerMove, Color, Dice as StoreDice,
|
|||
use super::die::Die;
|
||||
use crate::app::{GameUiState, NetCommand, PauseReason};
|
||||
use crate::i18n::*;
|
||||
use crate::portal::lobby::{qr_svg, room_url};
|
||||
use crate::game::trictrac::types::{PlayerAction, PreGameRollState, SerStage, SerTurnStage};
|
||||
|
||||
use super::board::Board;
|
||||
|
|
@ -224,10 +223,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
let opp_name_end = opp_score.name.clone();
|
||||
let opp_holes_end = opp_score.holes;
|
||||
|
||||
let share_open = RwSignal::new(false);
|
||||
let share_url = if !is_bot_game { room_url(&room_id) } else { String::new() };
|
||||
let share_svg = if !is_bot_game { qr_svg(&share_url) } else { String::new() };
|
||||
|
||||
view! {
|
||||
<div class="game-container">
|
||||
// ── Top bar ──────────────────────────────────────────────────────
|
||||
|
|
@ -237,18 +232,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
} else {
|
||||
t_string!(i18n, room_label, id = room_id.as_str())
|
||||
}}</span>
|
||||
|
||||
{move || (!is_bot_game).then(|| view! {
|
||||
<button
|
||||
class="quit-link"
|
||||
style="border:none;background:transparent;cursor:pointer"
|
||||
on:click=move |_| share_open.update(|v| *v = !*v)
|
||||
>
|
||||
{move || if share_open.get() { "✕ " } else { "" }}
|
||||
{t!(i18n, share_btn)}
|
||||
</button>
|
||||
})}
|
||||
|
||||
<div class="lang-switcher">
|
||||
<button
|
||||
class:lang-active=move || i18n.get_locale() == Locale::en
|
||||
|
|
@ -270,20 +253,6 @@ pub fn GameScreen(state: GameUiState) -> impl IntoView {
|
|||
}>{t!(i18n, quit)}</a>
|
||||
</div>
|
||||
|
||||
// ── Share popover ─────────────────────────────────────────────────
|
||||
{move || share_open.get().then(|| view! {
|
||||
<div class="share-popover">
|
||||
<p class="share-popover-label">{t!(i18n, share_link)}</p>
|
||||
<div class="share-url-row">
|
||||
<span class="share-url-text">{ share_url.clone() }</span>
|
||||
</div>
|
||||
<p class="share-popover-label" style="margin-top:0.75rem">
|
||||
{t!(i18n, scan_qr)}
|
||||
</p>
|
||||
<div class="qr-container" inner_html=share_svg.clone() />
|
||||
</div>
|
||||
})}
|
||||
|
||||
// ── Opponent score (above board) ─────────────────────────────────
|
||||
<PlayerScorePanel score=opp_score is_you=false />
|
||||
|
||||
|
|
|
|||
|
|
@ -18,13 +18,12 @@ pub async fn run_local_bot_game(
|
|||
screen: RwSignal<Screen>,
|
||||
cmd_rx: &mut mpsc::UnboundedReceiver<NetCommand>,
|
||||
pending: RwSignal<VecDeque<GameUiState>>,
|
||||
player_name: String,
|
||||
) -> bool {
|
||||
let mut backend = TrictracBackend::new(0);
|
||||
backend.player_arrival(0);
|
||||
backend.player_arrival(1);
|
||||
|
||||
let mut vs = ViewState::default_with_names(&player_name, "Bot");
|
||||
let mut vs = ViewState::default_with_names("You", "Bot");
|
||||
for cmd in backend.drain_commands() {
|
||||
match cmd {
|
||||
BackendCommand::ResetViewState => {
|
||||
|
|
@ -36,7 +35,6 @@ pub async fn run_local_bot_game(
|
|||
_ => {}
|
||||
}
|
||||
}
|
||||
patch_bot_names(&mut vs, &player_name);
|
||||
screen.set(Screen::Playing(GameUiState {
|
||||
view_state: vs.clone(),
|
||||
player_id: 0,
|
||||
|
|
@ -60,7 +58,6 @@ pub async fn run_local_bot_game(
|
|||
vs.apply_delta(&delta);
|
||||
}
|
||||
}
|
||||
patch_bot_names(&mut vs, &player_name);
|
||||
let scored = compute_scored_event(&prev_vs, &vs, 0);
|
||||
let opp_scored = compute_scored_event(&prev_vs, &vs, 1);
|
||||
screen.set(Screen::Playing(GameUiState {
|
||||
|
|
@ -89,7 +86,6 @@ pub async fn run_local_bot_game(
|
|||
if let BackendCommand::Delta(delta) = cmd {
|
||||
let delta_prev_vs = vs.clone();
|
||||
vs.apply_delta(&delta);
|
||||
patch_bot_names(&mut vs, &player_name);
|
||||
push_or_show(
|
||||
&delta_prev_vs,
|
||||
GameUiState {
|
||||
|
|
@ -114,17 +110,6 @@ pub async fn run_local_bot_game(
|
|||
}
|
||||
}
|
||||
|
||||
/// Patches the player names in a ViewState after a backend delta (bot game: slot 0 = human, 1 = Bot).
|
||||
pub fn patch_bot_names(vs: &mut ViewState, player_name: &str) {
|
||||
vs.scores[0].name = player_name.to_string();
|
||||
vs.scores[1].name = "Bot".to_string();
|
||||
}
|
||||
|
||||
/// Patches the local player's name in a ViewState after a backend delta (multiplayer).
|
||||
pub fn patch_player_name(vs: &mut ViewState, player_id: u16, name: &str) {
|
||||
vs.scores[player_id as usize].name = name.to_string();
|
||||
}
|
||||
|
||||
/// Returns the checker moves to animate when the board changed between two ViewStates.
|
||||
pub fn compute_last_moves(
|
||||
prev: &ViewState,
|
||||
|
|
|
|||
|
|
@ -7,13 +7,8 @@ mod nav;
|
|||
mod portal;
|
||||
|
||||
use app::App;
|
||||
use i18n::I18nContextProvider;
|
||||
use leptos::prelude::*;
|
||||
|
||||
fn main() {
|
||||
mount_to_body(|| view! {
|
||||
<I18nContextProvider>
|
||||
<App />
|
||||
</I18nContextProvider>
|
||||
})
|
||||
mount_to_body(|| view! { <App /> })
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,14 +3,19 @@ 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;
|
||||
|
|
@ -19,7 +24,7 @@ pub fn SiteNav() -> impl IntoView {
|
|||
};
|
||||
|
||||
view! {
|
||||
<nav class="site-nav">
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -1,103 +1,28 @@
|
|||
use futures::channel::mpsc::UnboundedSender;
|
||||
use leptos::prelude::*;
|
||||
use leptos_router::hooks::use_query_map;
|
||||
|
||||
use crate::app::{NetCommand, Screen};
|
||||
use crate::i18n::*;
|
||||
|
||||
// ── Room code generation ──────────────────────────────────────────────────────
|
||||
|
||||
fn generate_room_code() -> String {
|
||||
use rand::Rng;
|
||||
let mut rng = rand::rng();
|
||||
const CHARS: &[u8] = b"abcdefghijklmnopqrstuvwxyz0123456789";
|
||||
(0..6)
|
||||
.map(|_| CHARS[rng.random_range(0..CHARS.len())] as char)
|
||||
.collect()
|
||||
}
|
||||
|
||||
// ── QR code SVG rendering ─────────────────────────────────────────────────────
|
||||
|
||||
pub(crate) fn qr_svg(text: &str) -> String {
|
||||
use qrcodegen::{QrCode, QrCodeEcc};
|
||||
let qr = match QrCode::encode_text(text, QrCodeEcc::Medium) {
|
||||
Ok(q) => q,
|
||||
Err(_) => return String::new(),
|
||||
};
|
||||
let size = qr.size();
|
||||
let border = 2;
|
||||
let total = size + 2 * border;
|
||||
let mut svg = format!(
|
||||
"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 {t} {t}\" shape-rendering=\"crispEdges\">",
|
||||
t = total,
|
||||
);
|
||||
svg.push_str("<rect width=\"100%\" height=\"100%\" fill=\"#f2e8d0\"/>");
|
||||
for y in 0..size {
|
||||
for x in 0..size {
|
||||
if qr.get_module(x, y) {
|
||||
svg.push_str(&format!(
|
||||
"<rect x=\"{}\" y=\"{}\" width=\"1\" height=\"1\" fill=\"#2a1508\"/>",
|
||||
x + border,
|
||||
y + border,
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
svg.push_str("</svg>");
|
||||
svg
|
||||
}
|
||||
|
||||
// ── Share URL helper ──────────────────────────────────────────────────────────
|
||||
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
pub(crate) fn room_url(code: &str) -> String {
|
||||
let origin = web_sys::window()
|
||||
.and_then(|w| w.location().origin().ok())
|
||||
.unwrap_or_default();
|
||||
format!("{}/?room={}", origin, code)
|
||||
}
|
||||
|
||||
#[cfg(not(target_arch = "wasm32"))]
|
||||
pub(crate) fn room_url(code: &str) -> String {
|
||||
format!("http://localhost:9091/?room={}", code)
|
||||
}
|
||||
|
||||
// ── Lobby component ───────────────────────────────────────────────────────────
|
||||
|
||||
#[derive(Clone)]
|
||||
enum LobbyView {
|
||||
Idle,
|
||||
Waiting { code: String },
|
||||
}
|
||||
|
||||
#[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 query = use_query_map();
|
||||
|
||||
let view_state: RwSignal<LobbyView> = RwSignal::new(LobbyView::Idle);
|
||||
|
||||
// Auto-join when the URL contains ?room=CODE
|
||||
let cmd_tx_query = cmd_tx.clone();
|
||||
Effect::new(move |_| {
|
||||
if let Some(code) = query.read().get("room") {
|
||||
if !code.is_empty() {
|
||||
cmd_tx_query
|
||||
.unbounded_send(NetCommand::JoinRoom { room: code })
|
||||
.ok();
|
||||
}
|
||||
}
|
||||
});
|
||||
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,
|
||||
};
|
||||
|
||||
let cmd_tx_idle = cmd_tx;
|
||||
|
||||
view! {
|
||||
<div class="portal-main" style="display:flex;justify-content:center;align-items:flex-start;padding-top:5vh">
|
||||
<div class="login-card">
|
||||
|
|
@ -109,157 +34,55 @@ pub fn LobbyPage() -> impl IntoView {
|
|||
<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> })}
|
||||
|
||||
{move || match view_state.get() {
|
||||
LobbyView::Idle => {
|
||||
// Create fresh closures each render so they are FnMut-compatible
|
||||
let cmd_tx_create = cmd_tx_idle.clone();
|
||||
let cmd_tx_bot = cmd_tx_idle.clone();
|
||||
let on_create = move |_: leptos::ev::MouseEvent| {
|
||||
let code = generate_room_code();
|
||||
cmd_tx_create
|
||||
.unbounded_send(NetCommand::CreateRoom { room: code.clone() })
|
||||
.ok();
|
||||
view_state.set(LobbyView::Waiting { code });
|
||||
};
|
||||
view! {
|
||||
<IdleCard on_create=on_create cmd_tx_bot=cmd_tx_bot />
|
||||
}.into_any()
|
||||
}
|
||||
LobbyView::Waiting { code } => view! {
|
||||
<WaitingCard code=code />
|
||||
}.into_any(),
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
// ── Idle card: Create + vs Bot + hidden join-by-code ─────────────────────────
|
||||
|
||||
#[component]
|
||||
fn IdleCard(
|
||||
on_create: impl Fn(leptos::ev::MouseEvent) + 'static,
|
||||
cmd_tx_bot: UnboundedSender<NetCommand>,
|
||||
) -> impl IntoView {
|
||||
let i18n = use_i18n();
|
||||
let join_open = RwSignal::new(false);
|
||||
let join_code = RwSignal::new(String::new());
|
||||
let cmd_tx_join = cmd_tx_bot.clone();
|
||||
|
||||
view! {
|
||||
<div class="login-actions">
|
||||
<button class="login-btn login-btn-primary" on:click=on_create>
|
||||
{t!(i18n, create_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>
|
||||
|
||||
// Hidden "join by code" fallback
|
||||
<div style="margin-top:1.25rem;text-align:center">
|
||||
<button
|
||||
class="portal-page-btn"
|
||||
style="font-size:0.75rem;opacity:0.7"
|
||||
on:click=move |_| join_open.update(|v| *v = !*v)
|
||||
>
|
||||
{move || if join_open.get() { "▲ " } else { "▼ " }}
|
||||
{t!(i18n, join_code_label)}
|
||||
</button>
|
||||
{move || {
|
||||
// Clone the sender on each reactive run to keep the outer closure FnMut
|
||||
let cmd = cmd_tx_join.clone();
|
||||
join_open.get().then(|| view! {
|
||||
<div style="margin-top:0.75rem;display:flex;gap:0.5rem">
|
||||
<input
|
||||
class="login-input"
|
||||
style="flex:1;margin:0"
|
||||
type="text"
|
||||
placeholder=move || t_string!(i18n, join_code_placeholder)
|
||||
prop:value=move || join_code.get()
|
||||
on:input=move |ev| join_code.set(event_target_value(&ev))
|
||||
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"
|
||||
style="margin:0;padding:0 1rem"
|
||||
disabled=move || join_code.get().is_empty()
|
||||
disabled=move || room_name.get().is_empty()
|
||||
on:click=move |_| {
|
||||
cmd.unbounded_send(NetCommand::JoinRoom { room: join_code.get() })
|
||||
cmd_tx_join
|
||||
.unbounded_send(NetCommand::JoinRoom { room: room_name.get() })
|
||||
.ok();
|
||||
}
|
||||
>
|
||||
{t!(i18n, join_room)}
|
||||
</button>
|
||||
</div>
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="login-btn login-btn-bot"
|
||||
on:click=move |_| {
|
||||
cmd_tx_bot.unbounded_send(NetCommand::PlayVsBot).ok();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Waiting card: URL + copy + QR ────────────────────────────────────────────
|
||||
|
||||
#[component]
|
||||
fn WaitingCard(code: String) -> impl IntoView {
|
||||
let i18n = use_i18n();
|
||||
let url = room_url(&code);
|
||||
let svg = qr_svg(&url);
|
||||
let copied = RwSignal::new(false);
|
||||
|
||||
let on_copy = {
|
||||
let url = url.clone();
|
||||
move |_| {
|
||||
#[cfg(target_arch = "wasm32")]
|
||||
{
|
||||
let url = url.clone();
|
||||
wasm_bindgen_futures::spawn_local(async move {
|
||||
if let Some(clipboard) = web_sys::window()
|
||||
.map(|w| w.navigator().clipboard())
|
||||
{
|
||||
let _ = wasm_bindgen_futures::JsFuture::from(
|
||||
clipboard.write_text(&url)
|
||||
).await;
|
||||
copied.set(true);
|
||||
gloo_timers::future::TimeoutFuture::new(2000).await;
|
||||
copied.set(false);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
view! {
|
||||
<p style="font-size:0.85rem;color:rgba(242,232,208,0.75);margin-bottom:1rem;text-align:center">
|
||||
{t!(i18n, waiting_for_opponent)}
|
||||
</p>
|
||||
|
||||
<p style="font-size:0.8rem;color:rgba(242,232,208,0.6);margin-bottom:0.5rem;text-align:center">
|
||||
{t!(i18n, share_link)}
|
||||
</p>
|
||||
|
||||
<div class="share-url-row">
|
||||
<span class="share-url-text">{ url.clone() }</span>
|
||||
<button class="share-copy-btn" on:click=on_copy>
|
||||
{move || if copied.get() {
|
||||
t_string!(i18n, link_copied)
|
||||
} else {
|
||||
t_string!(i18n, copy_link)
|
||||
}}
|
||||
>
|
||||
{t!(i18n, play_vs_bot)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p style="font-size:0.75rem;color:rgba(242,232,208,0.45);margin:1rem 0 0.5rem;text-align:center">
|
||||
{t!(i18n, scan_qr)}
|
||||
</p>
|
||||
|
||||
<div class="qr-container" inner_html=svg />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue