Sync tile placements for all players

board-frontend/src/remote_view.rs

@@ -1,13 +1,17 @@
 use crate::app::BoardView;
+use crate::hand_view::HandView;
 use crate::types::SelectedTile;
 use board_network::protocol::{ClientMessage, ServerMessage};
-use board_shared::game::Game;
+use board_shared::board::Board;
+use board_shared::game::Hand;
+use board_shared::position::Position2d;
 use futures::stream::{SplitSink, SplitStream};
 use futures::{SinkExt, StreamExt};
 use gloo_dialogs::alert;
 use gloo_net::websocket::futures::WebSocket;
 use gloo_net::websocket::Message;
 use std::cell::RefCell;
+use std::ops::Deref;
 use std::rc::Rc;
 use yew::platform::spawn_local;
 use yew::prelude::*;
@@ -56,8 +60,11 @@ pub fn remote_game_view(
     let selected_tile = use_state(|| SelectedTile::None);
     let is_started = use_state(|| false);
     let current_player_turn = use_state(|| 0);
-    let game = use_state(Game::default);
+    let board = use_state(Board::default);
+    let in_hand = use_state(Hand::default);
     {
+        let board = board.clone();
+        let in_hand = in_hand.clone();
         let player_name = player_name.clone();
         let room_name = room_name.clone();
         let write = write.clone();
@@ -96,6 +103,15 @@ pub fn remote_game_view(
                                     current_player_turn.set(player_id);
                                     is_started.set(true);
                                 }
+                                Ok(ServerMessage::SyncHand(hand)) => {
+                                    in_hand
+                                        .set(Hand::new(hand.iter().map(|&x| x.into()).collect()));
+                                }
+                                Ok(ServerMessage::TilePlaced(pos, tile)) => {
+                                    let mut changed = board.deref().clone();
+                                    changed.set(pos.x, pos.y, tile.into());
+                                    board.set(changed);
+                                }
                                 r => {
                                     alert(&format!("{r:?}"));
                                 }
@@ -109,6 +125,28 @@ pub fn remote_game_view(
         );
     }
 
+    let on_tile_select = {
+        let selected_tile = selected_tile.clone();
+        Callback::from(move |idx| {
+            selected_tile.set(SelectedTile::InHand(idx));
+        })
+    };
+    let on_tile_click = {
+        let selected_tile = selected_tile.clone();
+        let write = write.clone();
+        Callback::from(move |pos: (usize, usize)| {
+            let position: Position2d = pos.into();
+            match *selected_tile {
+                SelectedTile::None => {}
+                SelectedTile::InHand(idx) => {
+                    send_client_message!(write, ClientMessage::TileUse(position.into(), idx));
+                }
+                SelectedTile::Equals => {
+                    send_client_message!(write, ClientMessage::TilePlaceEqual(position.into()))
+                }
+            }
+        })
+    };
     let on_validate_click = {
         let write = write.clone();
         Callback::from(move |_| {
@@ -130,7 +168,8 @@ pub fn remote_game_view(
     html! {
         <main>
             <h1>{"Remote Game"}</h1>
-            <BoardView board={game.board.clone()} on_click={Callback::from(|_| {})} />
+            <BoardView board={board.deref().clone()} on_click={on_tile_click} />
+            <HandView hand={in_hand.deref().clone()} on_select={on_tile_select} />
             <div class="row">
                 <button onclick={on_equals_select} class="button">{"="}</button>
                 if *is_started {