Add bidding box component

3 files changed, 97 insertions, 16 deletions

diff --git a/webapp/src/bridge_engine.rs b/webapp/src/bridge_engine.rs
index 70fd828..accfed4 100644
--- a/webapp/src/bridge_engine.rs
+++ b/webapp/src/bridge_engine.rs
@@ -105,8 +105,8 @@ impl FromStr for ContractLevel {
 
 #[derive(PartialEq, Eq, Clone, Copy)]
 pub struct Bid {
-    level: ContractLevel,
-    suit: Option<Suit>,
+    pub level: ContractLevel,
+    pub suit: Option<Suit>,
 }
 
 impl Bid {
diff --git a/webapp/src/default.css b/webapp/src/default.css
index d2b3a10..d4f291b 100644
--- a/webapp/src/default.css
+++ b/webapp/src/default.css
@@ -62,17 +62,55 @@ body {
     content: "♣"
 }
 
-.card .rank-2:after {content: "2";}
-.card .rank-3:after {content: "3";}
-.card .rank-4:after {content: "4";}
-.card .rank-5:after {content: "5";}
-.card .rank-6:after {content: "6";}
-.card .rank-7:after {content: "7";}
-.card .rank-8:after {content: "8";}
-.card .rank-9:after {content: "9";}
-.card .rank-10:after {content: "10";}
-.card .rank-J:after {content: "J";}
-.card .rank-Q:after {content: "Q";}
-.card .rank-K:after {content: "K";}
-.card .rank-A:after {content: "A";}
+.bidding-box {
+    max-width: 250px;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+}
+.bidding-box div {
+    border: 1px solid #000;
+    background-color: #eee;
+    border-radius: 5px;
+    min-width: 30px;
+    padding: 2px;
+    text-align: center;
+}
+.bidding-box div.enabled:hover {
+    background-color: #fcc;
+}
+
+.bidding-box div.disabled {
+    background-color: #aaa;
+}
 
+.bidding-box .suit-spade {
+    color: #000;
+}
+.bidding-box .suit-heart {
+    color: #d00;
+}
+.bidding-box .suit-diamond {
+    color: #d00;
+}
+.bidding-box .suit-club {
+    color: #000;
+}
+.bidding-box .suit-notrump {
+    background-color: #dde;
+}
+
+.bidding-box .suit-spade:after {
+    content: "♠"
+}
+.bidding-box .suit-heart:after {
+    content: "♥"
+}
+.bidding-box .suit-diamond:after {
+    content: "♦"
+}
+.bidding-box .suit-club:after {
+    content: "♣"
+}
+.bidding-box .suit-notrump:after {
+    content: "NT"
+}
diff --git a/webapp/src/main.rs b/webapp/src/main.rs
index 4e61344..61e007c 100644
--- a/webapp/src/main.rs
+++ b/webapp/src/main.rs
@@ -2,8 +2,9 @@ use crate::card::{Rank, Suit};
 #[allow(unused_imports)]
 use log::{debug, error, info, warn};
 use yew::prelude::*;
-pub mod card;
 pub mod bridge_engine;
+pub mod card;
+use bridge_engine::Bid;
 extern crate wee_alloc;
 
 // Use `wee_alloc` as the global allocator.
@@ -44,6 +45,8 @@ pub fn app() -> Html {
 
     html! {
         <>
+            <p>{ "Bids" }</p>
+            <BiddingBox lower_limit={"1H".parse::<Bid>().unwrap()} />
             <p>{ "North" }</p>
             <Hand ..(*north).clone() />
             <p>{ "West" }</p>
@@ -125,6 +128,46 @@ impl From<card::Card> for CardProps {
     }
 }
 
+pub fn bid_css_class(suit: Option<Suit>) -> &'static str {
+    match suit {
+        None => "suit-notrump",
+        Some(x) => suit_css_class(x),
+    }
+}
+
+#[function_component(BiddingBox)]
+pub fn bidding_box(props: &BiddingBoxProps) -> Html {
+    let bids: Html = Bid::all_bids()
+        .iter()
+        .map(|bid| {
+            let mut class = if bid < &props.lower_limit {
+                classes!("disabled")
+            } else {
+                classes!("enabled")
+            };
+            class.extend(
+                classes!(bid_css_class(bid.suit)));
+            html! {
+              <div class={class}>
+                { bid.level }
+              </div>
+            }
+        })
+        .collect();
+
+    html! {
+        <div class="bidding-box">
+          { bids }
+        </div>
+    }
+}
+
+#[derive(PartialEq, Properties, Clone)]
+pub struct BiddingBoxProps {
+    #[prop_or("1♣".parse().unwrap())]
+    lower_limit: Bid,
+}
+
 #[cfg(test)]
 mod tests {
     pub fn test_setup() {