Separate Table controller and view; display player hand from server

1 files changed, 30 insertions, 5 deletions

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