feat(client): hold, next and associated styles

client/src/game.rs

@@ -1,13 +1,51 @@
 use ratatui::{
     buffer::Buffer,
-    layout::Rect,
+    layout::{Constraint, Layout, Rect},
-    widgets::{Block, Borders, Padding, Paragraph, Widget},
+    style::{Modifier, Style, palette::tailwind::*},
+    symbols,
+    text::Line,
+    widgets::{Block, Borders, Widget},
 };
 
-pub fn render(area: Rect, buf: &mut Buffer) {
+use crate::tui;
-    let block = Block::new()
-        .padding(Padding::symmetric(2, 1))
-        .borders(Borders::ALL);
 
-    Paragraph::new("").block(block).render(area, buf);
+const GAMEMODE_STYLE: Style = Style::new().bg(NEUTRAL.c700).add_modifier(Modifier::BOLD);
+const TITLE_STYLE: Style = Style::new()
+    .fg(NEUTRAL.c800)
+    .bg(NEUTRAL.c100)
+    .add_modifier(Modifier::BOLD);
+
+pub fn render(mode: &mut tui::Mode, area: Rect, buf: &mut Buffer) {
+    let gamemode = format!(" {} ", match mode {
+        tui::Mode::Blitz => "Blitz",
+        tui::Mode::FortyL => "40L",
+        tui::Mode::TxLadder => "txLadder",
+        _ => "",
+    });
+
+    let [mut hold_area, grid_area, mut next_area] =
+        Layout::horizontal(Constraint::from_percentages([25, 50, 25])).areas(area);
+
+    hold_area.height = 5;
+    next_area.height = 16;
+
+    Block::new()
+        .title(Line::styled(" HOLD ", TITLE_STYLE).centered())
+        .borders(Borders::TOP | Borders::LEFT | Borders::BOTTOM)
+        .render(hold_area, buf);
+
+    Block::new()
+        .title(Line::styled(gamemode, GAMEMODE_STYLE).centered())
+        .border_set(symbols::border::Set {
+            top_left: symbols::line::NORMAL.horizontal_down,
+            top_right: symbols::line::NORMAL.horizontal_down,
+            ..symbols::border::PLAIN
+        })
+        .borders(Borders::ALL)
+        .render(grid_area, buf);
+
+    Block::new()
+        .title(Line::styled(" NEXT ", TITLE_STYLE).centered())
+        .borders(Borders::TOP | Borders::RIGHT | Borders::BOTTOM)
+        .render(next_area, buf);
 }

client/src/tui.rs

@@ -52,7 +52,7 @@ impl Mode {
 
         match self {
             Mode::MainMenu(menu_list) => menu_list.handle_key(key),
-            _ => Mode::Exit,
+            _ => Mode::Exit, // TODO: handle keys differently based on modes
         }
     }
 }
@@ -68,7 +68,7 @@ impl Widget for &mut Mode {
 
         let center_area = center(
             main_area,
-            Constraint::Length(50),
+            Constraint::Length(60),
             Constraint::Percentage(60),
         );
 
@@ -79,7 +79,7 @@ impl Widget for &mut Mode {
                 menu::render_menu(center_area, menu_list, buf);
             }
             _ => {
-                game::render(center_area, buf);
+                game::render(self, center_area, buf);
             }
         }
         menu::render_footer(footer_area, buf);