Separate Table controller and view; display player hand from server

4 files changed, 37 insertions, 12 deletions

diff --git a/protocol/src/bridge_engine.rs b/protocol/src/bridge_engine.rs
index 261f650..acf7246 100644
--- a/protocol/src/bridge_engine.rs
+++ b/protocol/src/bridge_engine.rs
@@ -527,13 +527,13 @@ pub fn deal() -> Deal {
 
 #[derive(Serialize, Deserialize, PartialEq, Eq, Clone, Debug)]
 pub struct TableView {
-    dealer: Player,
-    player_position: Player,
-    hand: Vec<Card>,
+    pub dealer: Player,
+    pub player_position: Player,
+    pub hand: Vec<Card>,
 }
 
 impl TableView {
-    pub fn from_game_state(game_state: &GameState, player_position: Player) -> Self {
+    fn from_game_state(game_state: &GameState, player_position: Player) -> Self {
         TableView {
             dealer: game_state.dealer(),
             player_position,
diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index 6d861d0..92302b2 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -2,11 +2,11 @@ use gloo_net::http::Request;
 use log::info;
 use protocol::bridge_engine::TableView;
 use yew::prelude::*;
-
 use crate::use_app_context;
+use crate::components::Hand;
 
-#[function_component(Table)]
-pub fn table(props: &TableProps) -> Html {
+#[function_component(OnlineTable)]
+pub fn online_table(props: &OnlineTableProps) -> Html {
     let ctx = use_app_context();
 
     let table_state: UseStateHandle<Option<TableView>> = use_state(|| None);
@@ -44,12 +44,37 @@ pub fn table(props: &TableProps) -> Html {
         <button onclick={leave_table}>
             { "Leave table" }
         </button>
-            <pre>{ format!("Table view: {:?}", *table_state) }</pre>
+        if let Some(table_state) = &*table_state {
+            <Table table={ table_state.clone() }/>
+        }
     </>
     }
 }
 
 #[derive(PartialEq, Properties, Clone)]
-pub struct TableProps {
+pub struct OnlineTableProps {
     pub table: protocol::Table,
 }
+
+#[function_component(Table)]
+pub fn table(props: &TableProps) -> Html {
+    let on_card_clicked = {
+        Callback::from(move |card| {
+            info!("Card clicked: {}", card);
+        })
+    };
+    html! {
+        <>
+            <div class="hand south">
+                <Hand cards={ props.table.hand.clone() } on_card_clicked={ on_card_clicked.clone() } />
+            </div>
+            <h2>{ "Table view" }</h2>
+            <pre>{ format!("{:#?}", props.table) }</pre>
+        </>
+    }
+}
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct TableProps {
+    pub table: TableView,
+}
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 1a6817f..5a84e12 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -1,7 +1,7 @@
 @charset "utf-8";
 
 body {
-    background-color: #eeb;
+    background-color: #fff;
     font-family: Arial, sans-serif;
     font-size: 12pt;
 }
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index f9a3f01..72d0d29 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -3,7 +3,7 @@ use log::{debug, error, info, warn};
 use yew::prelude::*;
 use yew_router::prelude::*;
 pub mod components;
-use components::{AppContextProvider, ErrorInfo, Game, Table};
+use components::{AppContextProvider, ErrorInfo, Game, OnlineTable};
 extern crate wee_alloc;
 pub mod routing;
 use crate::{components::use_app_context, routing::Route};
@@ -82,7 +82,7 @@ fn switch(routes: &Route) -> Html {
             <div class="game-layout"><Game /></div>
         },
         Route::Table { id } => html! {
-            <Table table={ protocol::Table { id: *id } } />
+            <OnlineTable table={ protocol::Table { id: *id } } />
         },
     };