Reworking UI

kanash-components/src/app.rs

@@ -48,23 +48,26 @@ impl Components for App {
                     return None;
                 }
 
-                if msg == Message::Home(HomeMessage::Up) || msg == Message::Home(HomeMessage::Down)
-                {
-                    let response = h.update(msg.clone());
-                    return response;
-                }
-
                 // transform self en App::Kana(new_kana(selected)) if msg == Message::Home(Enter)
                 if let Message::Home(HomeMessage::Enter(mode)) = msg {
                     let mut new_kana = KanaModel::new();
 
                     new_kana.mode = mode;
-                    new_kana.update(Message::Kana(KanaMessage::Pass));
+                    match mode {
+                        Mode::Hira => new_kana.scroll_state = ScrollbarState::new(HIRAGANA_NUMBER),
+                        Mode::Kata => new_kana.scroll_state = ScrollbarState::new(KATAKANA_NUMBER),
+                        Mode::Both => {
+                            new_kana.scroll_state =
+                                ScrollbarState::new(HIRAGANA_NUMBER + KATAKANA_NUMBER)
+                        }
+                    }
+                    let response = new_kana.update(Message::Kana(KanaMessage::Pass));
 
                     self.page = AppPage::Kana(new_kana);
+                    return response;
                 }
 
-                None
+                h.update(msg.clone())
             }
             AppPage::Kana(ref mut k) => {
                 let response = k.update(msg.clone());

kanash-components/src/helper/ja.rs

@@ -1,14 +1,14 @@
-const HIRAGANA_NUMBER: usize = 71;
-const WANTED_HIRAGANA: [u16; HIRAGANA_NUMBER] = [
+pub const HIRAGANA_NUMBER: usize = 71;
+pub const WANTED_HIRAGANA: [u16; HIRAGANA_NUMBER] = [
     12354, 12356, 12358, 12360, 12362, 12363, 12364, 12365, 12366, 12367, 12368, 12369, 12370,
     12371, 12372, 12373, 12374, 12375, 12376, 12377, 12378, 12379, 12380, 12381, 12382, 12383,
     12384, 12385, 12386, 12388, 12389, 12390, 12391, 12392, 12393, 12394, 12395, 12396, 12397,
     12398, 12399, 12400, 12401, 12402, 12403, 12404, 12405, 12406, 12407, 12408, 12409, 12410,
     12411, 12412, 12413, 12414, 12415, 12416, 12417, 12418, 12420, 12422, 12424, 12425, 12426,
     12427, 12428, 12429, 12431, 12434, 12435,
 ];
-const KATAKANA_NUMBER: usize = 81;
-const WANTED_KATAKANA: [u16; KATAKANA_NUMBER] = [
+pub const KATAKANA_NUMBER: usize = 81;
+pub const WANTED_KATAKANA: [u16; KATAKANA_NUMBER] = [
     12449, 12450, 12451, 12452, 12453, 12454, 12455, 12456, 12457, 12458, 12459, 12460, 12461,
     12462, 12463, 12464, 12465, 12466, 12467, 12468, 12469, 12470, 12471, 12472, 12473, 12474,
     12475, 12476, 12477, 12478, 12479, 12480, 12481, 12482, 12484, 12485, 12486, 12487, 12488,
@@ -18,15 +18,23 @@ const WANTED_KATAKANA: [u16; KATAKANA_NUMBER] = [
     12530, 12531, 12532,
 ];
 
-pub fn random_hiragana() -> String {
-    String::from_utf16(&[WANTED_HIRAGANA[rand::random_range(0..71)]]).expect("error hiragana")
+pub fn random_hiragana() -> (String, usize) {
+    let index = rand::random_range(0..HIRAGANA_NUMBER);
+    (
+        String::from_utf16(&[WANTED_HIRAGANA[index]]).expect("error hiragana"),
+        index,
+    )
 }
 
-pub fn random_katakana() -> String {
-    String::from_utf16(&[WANTED_KATAKANA[rand::random_range(0..81)]]).expect("error katakana")
+pub fn random_katakana() -> (String, usize) {
+    let index = rand::random_range(0..KATAKANA_NUMBER);
+    (
+        String::from_utf16(&[WANTED_KATAKANA[index]]).expect("error katakana"),
+        index + HIRAGANA_NUMBER,
+    )
 }
 
-pub fn random_kana() -> String {
+pub fn random_kana() -> (String, usize) {
     if rand::random() {
         random_hiragana()
     } else {

kanash-components/src/helper/mod.rs

@@ -1,2 +1,46 @@
 pub mod ja;
 pub mod rain;
+
+use super::*;
+
+pub fn help_popup(help_strings: [&str; 5], max_height: u16, max_width: u16, frame: &mut Frame) {
+    let block = Block::new()
+        .title(Line::from(" Help ").fg(ColorPalette::TITLE).centered())
+        .border_type(BorderType::Rounded)
+        .fg(ColorPalette::KEY_HINT)
+        .borders(Borders::ALL);
+
+    let p = Paragraph::new(parse_strings_to_text(help_strings))
+        .wrap(Wrap { trim: true })
+        .fg(Color::White);
+
+    let vertical = Layout::vertical([Constraint::Max(max_height)]).flex(Flex::Center);
+    let horizontal = Layout::horizontal([Constraint::Max(max_width)]).flex(Flex::Center);
+    let [area] = vertical.areas(frame.area());
+    let [area] = horizontal.areas(area);
+
+    frame.render_widget(Clear, area);
+    frame.render_widget(p.block(block), area);
+}
+
+fn parse_strings_to_text(strings: [&str; 5]) -> Text<'_> {
+    strings
+        .into_iter()
+        .map(|s| {
+            if s.is_empty() {
+                return Line::default();
+            }
+
+            if !s.contains(" - ") {
+                return Line::from(s).centered();
+            }
+
+            let mut sub_strings = s.split(" - ");
+
+            let key = Span::from(sub_strings.next().unwrap_or("")).bg(ColorPalette::SELECTION);
+            let function = Span::from(sub_strings.next().unwrap_or(""));
+
+            Line::from(vec![key, " - ".into(), function]).centered()
+        })
+        .collect()
+}

kanash-components/src/home.rs

@@ -1,10 +1,14 @@
 use super::*;
 
-const KEY_HELPER_CYCLE: &str =
-    " Quit <Esc> | Move <j,Down,k,Up> | Select <Enter> | Rain <x> | Cycle Background <b> ";
-const KEY_HELPER_NONE: &str =
-    " Quit <Esc> | Move <j,Down,k,Up> | Select <Enter> | Rain <x> | No Background <b> ";
 const TITLE: &str = " KANA SH ";
+const KEY_HELPER: &str = " h - ? ";
+const HELP_STRINGS: [&str; 5] = [
+    "h? - toggle this popup",
+    "jk - navigate up and down",
+    "x - disable rain fx",
+    "Enter - enter selected mode",
+    "esc q - quit",
+];
 const SELECTED_STYLE: Style = Style::new()
     .bg(ColorPalette::SELECTION)
     .add_modifier(Modifier::BOLD);
@@ -26,7 +30,7 @@ pub enum BackgroundMode {
 pub struct HomeModel {
     page_list: Vec<String>,
     state: ListState,
-    pub key_helper_state: BackgroundMode,
+    show_help_popup: bool,
 }
 
 #[derive(Debug, PartialEq, Eq, Clone, Copy)]
@@ -38,6 +42,8 @@ pub enum HomeMessage {
     Down,
 
     RainFx,
+
+    Help,
 }
 
 impl Components for HomeModel {
@@ -52,14 +58,14 @@ impl Components for HomeModel {
                 "Learn Both".into(),
             ],
             state: init_state,
-            key_helper_state: BackgroundMode::Cycle,
+            show_help_popup: false,
         }
     }
 
     /// Handle Event (Mostly convert key event to message)
     fn handle_event(&self, event: &PlatformKeyEvent) -> Option<Message> {
         match event.code {
-            KeyCode::Esc => Some(Message::Back),
+            KeyCode::Esc | KeyCode::Char('q') => Some(Message::Back),
             KeyCode::Enter => {
                 if let Some(i) = self.state.selected() {
                     match i {
@@ -74,6 +80,7 @@ impl Components for HomeModel {
             }
             KeyCode::Char('j') | KeyCode::Down => Some(Message::Home(HomeMessage::Down)),
             KeyCode::Char('k') | KeyCode::Up => Some(Message::Home(HomeMessage::Up)),
+            KeyCode::Char('h') | KeyCode::Char('?') => Some(Message::Home(HomeMessage::Help)),
             KeyCode::Char('x') => Some(Message::Home(HomeMessage::RainFx)),
             _ => None,
         }
@@ -88,6 +95,9 @@ impl Components for HomeModel {
                 HomeMessage::Up => {
                     self.state.select_previous();
                 }
+                HomeMessage::Help => {
+                    self.show_help_popup = !self.show_help_popup;
+                }
                 _ => {}
             }
         }
@@ -96,26 +106,17 @@ impl Components for HomeModel {
 
     fn view(&mut self, frame: &mut Frame, _elapsed: Duration) {
         let n_page: u16 = self.page_list.len().try_into().unwrap();
-        let [_, main_area, _] = Layout::vertical([
-            Constraint::Min(0),
-            Constraint::Length(n_page + 4),
-            Constraint::Min(0),
-        ])
-        .areas(frame.area());
-
-        let key_helper = match self.key_helper_state {
-            BackgroundMode::Cycle => KEY_HELPER_CYCLE,
-            BackgroundMode::Disable => KEY_HELPER_NONE,
-        };
+        let [vert_area] = Layout::vertical([Constraint::Length(n_page + 4)])
+            .flex(Flex::Center)
+            .areas(frame.area());
+
+        let [main_area] = Layout::horizontal([Constraint::Max(23)])
+            .flex(Flex::Center)
+            .areas(vert_area);
 
         let block = Block::new()
             .title(Line::from(TITLE).fg(ColorPalette::TITLE).centered())
-            .title_bottom(
-                Line::from(key_helper)
-                    .fg(ColorPalette::KEY_HINT)
-                    .bold()
-                    .centered(),
-            )
+            .title_bottom(Line::from(KEY_HELPER).fg(ColorPalette::KEY_HINT).centered())
             .border_type(BorderType::Rounded)
             .padding(Padding::vertical(1))
             .borders(Borders::ALL);
@@ -133,5 +134,9 @@ impl Components for HomeModel {
 
         frame.render_widget(Clear, main_area);
         frame.render_stateful_widget(list, main_area, &mut self.state);
+
+        if self.show_help_popup {
+            help_popup(HELP_STRINGS, 10, 30, frame);
+        }
     }
 }