feat: add reverse and shuffle features to Text (#88)

examples/rows_cols.rs

@@ -5,13 +5,13 @@ use lerni::*;
 pub fn RowsCols() -> impl IntoView {
     view! {
         <Slide>
-            <Row border_width=4 stretch=vec![1, 1, 4, 1, 1] padding=20>
+            <Row border_width=4 stretch=[1, 1, 4, 1, 1] padding=20>
                 <Label>"1"</Label>
                 <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>
                     "2"
                 </Button>
                 <Label bold=true>"3"</Label>
-                <Column border_width=4 stretch=vec![1, 2, 3, 4] spacing=20>
+                <Column border_width=4 stretch=[1, 2, 3, 4] spacing=20>
                     <Label>"4"</Label>
                     <Label>"5"</Label>
                     <Button align=Align::Fill valign=VAlign::Fill on_click=|_| ()>

examples/text.rs

@@ -33,7 +33,7 @@ pub fn TextExample() -> impl IntoView {
     view! {
         <Slide node_ref=node_ref>
             <Row cols=2 padding=30 border_width=4>
-                <Column stretch=vec![5, 1]>
+                <Column stretch=[5, 1]>
                     <Text
                         lattice=true
                         word_count=word_count1
@@ -47,12 +47,13 @@ pub fn TextExample() -> impl IntoView {
                     <Label>{words_read1} "w (" {letters_read1} " / " {letters_total1} ")"</Label>
                 </Column>
 
-                <Column stretch=vec![5, 1, 5, 1]>
+                <Column stretch=[5, 1, 5, 1]>
                     <Text
                         font_size=48
                         bold=true
                         font="serif"
                         valign=VAlign::Middle
+                        reverse_words=true
                         words_read=words_read2
                         letters_read=letters_read2
                         letters_total=letters_total2

src/legacy/utils.rs

@@ -1,7 +1,6 @@
 //! Utility functions and various helpers.
 
 use gloo_events::EventListener;
-use rand::rngs::OsRng;
 use std::collections::HashMap;
 use wasm_bindgen::JsCast;
 use yew::{html::Scope, prelude::*};
@@ -89,11 +88,6 @@ pub mod keys {
     pub const DIGIT_9: u32 = 57;
 }
 
-/// Creates Random Number Generator (RNG).
-pub fn rng() -> OsRng {
-    Default::default()
-}
-
 /// Add keyboard handler.
 ///
 /// `messages` is an assotiative array with the keyboard key as a key ansd a message as a value.

src/widgets/column.rs

@@ -8,7 +8,7 @@ pub fn Column(
     #[prop(optional)] rows: Option<usize>,
     #[prop(optional)] border_width: i32,
     #[prop(default = Color::Black)] border_color: Color,
-    #[prop(optional)] stretch: Vec<i32>,
+    #[prop(optional, into)] stretch: Vec<i32>,
     #[prop(optional)] spacing: i32,
     #[prop(optional)] padding: i32,
     #[prop(default = true.into(), into)] visible: MaybeSignal<bool>,

src/widgets/row.rs

@@ -8,7 +8,7 @@ pub fn Row(
     #[prop(optional)] cols: Option<usize>,
     #[prop(optional)] border_width: i32,
     #[prop(default = Color::Black)] border_color: Color,
-    #[prop(optional)] stretch: Vec<i32>,
+    #[prop(optional, into)] stretch: Vec<i32>,
     #[prop(optional)] spacing: i32,
     #[prop(optional)] padding: i32,
     #[prop(default = true.into(), into)] visible: MaybeSignal<bool>,

src/widgets/text.rs

@@ -2,6 +2,7 @@ extern crate alloc;
 
 use alloc::rc::Rc;
 use leptos::*;
+use rand::{prelude::SliceRandom, rngs::OsRng};
 use wasm_bindgen::JsValue;
 use web_sys::{CanvasRenderingContext2d, HtmlCanvasElement, MouseEvent};
 
@@ -41,6 +42,8 @@ pub fn Text(
     #[prop(default = VAlign::Top)] valign: VAlign,
     #[prop(default = Color::PaleGreen)] marker_color: Color,
     #[prop(optional)] lattice: bool,
+    #[prop(optional)] reverse_words: bool,
+    #[prop(optional)] shuffle_letters: bool,
     #[prop(optional)] erase_top: f32,
     #[prop(optional)] erase_bottom: f32,
     #[prop(optional, into)] words_read: RwSignal<usize>,
@@ -71,6 +74,18 @@ pub fn Text(
     letters_total.set(letter_counters.iter().sum());
     word_count.set(words.len());
 
+    let mut orig_words = words.clone();
+    if reverse_words {
+        orig_words.iter_mut().for_each(|word| {
+            *word = reverse_word(word);
+        });
+    }
+    if shuffle_letters {
+        orig_words.iter_mut().for_each(|word| {
+            *word = shuffle_word(word);
+        });
+    }
+
     let word = |i, r: &Rect, hidden| {
         view! {
             <text
@@ -85,7 +100,7 @@ pub fn Text(
                 fill=color
                 pointer-events="none"
             >
-                {&words[i]}
+                {if hidden { &words[i] } else { &orig_words[i] }}
             </text>
         }
     };
@@ -189,6 +204,34 @@ pub fn Text(
     }
 }
 
+fn reverse_word(word: &str) -> String {
+    let mut result = String::new();
+    let mut last = 0;
+    // Reverse only alphabetic chars
+    for (i, matched) in word.match_indices(|c: char| !(c.is_alphanumeric())) {
+        if last != i {
+            result.push_str(&word[last..i].chars().rev().collect::<String>());
+        }
+        result.push_str(matched);
+        last = i + matched.len();
+    }
+    if last < word.len() {
+        result.push_str(&word[last..].chars().rev().collect::<String>());
+    }
+    result
+}
+
+fn shuffle_word(word: &str) -> String {
+    let mut rng = OsRng;
+    let mut chars: Vec<char> = word.chars().collect();
+    // Shuffle only internal chars except first and last
+    let len = chars.len();
+    if len > 2 {
+        chars[1..len - 1].shuffle(&mut rng);
+    }
+    chars.into_iter().collect()
+}
+
 fn canvas_context(props: &TextProperties) -> CanvasRenderingContext2d {
     let doc = web_sys::window()
         .and_then(|win| win.document())