From 3cac865e0bf1e5d7b6a5b37ff64fa08e66880eb8 Mon Sep 17 00:00:00 2001
From: Kjetil Orbekk <kj@orbekk.com>
Date: Mon, 26 Dec 2022 22:19:34 -0500
Subject: Display game context info in sidebar during play

---
 webapp/src/components/table.rs | 32 ++++++++++++++++++++++++--------
 webapp/src/default.css         | 24 +++++++-----------------
 2 files changed, 31 insertions(+), 25 deletions(-)

diff --git a/webapp/src/components/table.rs b/webapp/src/components/table.rs
index 3bc52a3..403ee8d 100644
--- a/webapp/src/components/table.rs
+++ b/webapp/src/components/table.rs
@@ -178,6 +178,10 @@ pub fn bidding_view(
 ) -> Html {
     html! {
         <>
+            <div class="sidebar">
+              <h2>{ "Table view" }</h2>
+              <pre>{ format!("{:#?}", bidding) }</pre>
+            </div>
             <div class="center">
                 <BiddingTable bidding={bidding.bidding.clone()} />
                 <BiddingBox current_bid={bidding.bidding.highest_bid().clone()} on_bid={ on_bid } />
@@ -186,8 +190,6 @@ pub fn bidding_view(
             <div class="hand south">
             <Hand cards={ bidding.hand.clone() } on_card_clicked={ Callback::from(|_| {}) } />
             </div>
-            <h2>{ "Table view" }</h2>
-            <pre>{ format!("{:#?}", bidding) }</pre>
         </>
     }
 }
@@ -209,17 +211,31 @@ pub fn playing_view(
 
     html! {
         <>
+            <div class="sidebar">
+              <div>
+                <h2>{"Contract"}</h2>
+                <p>{format!("{}", playing.contract)}</p>
+              </div>
+              <div>
+                <h2>{"Bidding"}</h2>
+                <BiddingTable bidding={playing.bidding.clone()} />
+              </div>
+              <div>
+                <h2>{"Trick Count"}</h2>
+                <p>{format!("Declarer: {}", playing.declarer_tricks)}</p>
+              </div>
+              if let Some(previous_trick) = &playing.previous_trick {
+              <div>
+                <h2>{"Previous Trick"}</h2>
+                    <TrickInPlay trick={previous_trick.clone()}/>
+              </div>
+              }
+            </div>
             <div class="center">
               <div class="playing-center-layout">
                 <div class="current-trick">
                   <TrickInPlay  trick={playing.current_trick.trick.clone()}/>
                 </div>
-                <div class="previous-trick">
-                  <p>{"Last trick"}</p>
-                  if let Some(previous_trick) = &playing.previous_trick {
-                    <TrickInPlay trick={previous_trick.clone()}/>
-                  }
-                </div>
               </div>
             </div>
             <div class="hand north">
diff --git a/webapp/src/default.css b/webapp/src/default.css
index 0345118..6240fa8 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -22,18 +22,18 @@ body {
 
 .game-layout {
     display: grid;
-    grid-template-areas: "north north north nav"
-                         "west center east nav"
-                         "south south south nav";
+    grid-template-areas: "north north north sidebar"
+                         "west center east sidebar"
+                         "south south south sidebar";
     grid-template-rows: 10vw minmax(200px, 1fr) 10vw;
-    grid-template-columns: 10vw 1fr 10vw 10vw;
+    grid-template-columns: 10vw 1fr 10vw 20vw;
     width: 100vw;
     height: 100vh;
 }
 
 .playing-center-layout {
     display: grid;
-    grid-template-areas: "current-trick previous-trick";
+    grid-template-areas: "current-trick";
     grid-template-rows: 1fr;
     grid-template-columns: 3fr 1fr;
 }
@@ -42,10 +42,6 @@ body {
     grid-area: current-trick;
 }
 
-.previous-trick {
-    grid-area: previous-trick;
-}
-
 .trick-layout {
     display: grid;
     grid-template-areas: ". top ."
@@ -79,18 +75,12 @@ button {
   cursor: pointer;
 }
 
-.nav {
-    grid-area: nav;
+.sidebar {
+    grid-area: sidebar;
     display: grid;
-    background-color: #ccc;
     align-content: start;
 }
 
-.nav p, .nav div {
-    background-color: #edc;
-    margin-bottom: 1vw;
-}
-
 .west {
     grid-area: west;
     /* transform: rotate(90deg); */
-- 
cgit v1.2.3