From 47d8491080bc9c83e3436f137fd4d0df9f4b1f66 Mon Sep 17 00:00:00 2001
From: StarArawn <toasterthegamer@gmail.com>
Date: Tue, 14 Dec 2021 13:53:03 -0500
Subject: [PATCH] Updated the README a bit more.

---
 README.md | 77 +++++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 63 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 7ac4177..a16f447 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@ Kayak UI is in the very early stages of development. Important features are miss
 - Basic widget and global state management
 - Input events
 - Fast and accurate layouts using morphorm: https://github.com/geom3trik/morphorm
-- A bunch of default widgets check out `kayak_widgets`!
+- A few default widgets check out [kayak_widgets](./kayak_widgets)!
 - Style system built to kind of mimic CSS styles.
 - Image and Nine patch rendering.
 
@@ -32,8 +32,11 @@ Kayak UI is in the very early stages of development. Important features are miss
 - Fully integrated into bevy to capture input events, use bevy assets(images, etc).
 
 ## Missing features
-- Tree diffing
-- Removing of widgets.
+- Widget diffing see issue: https://github.com/StarArawn/kayak_ui/issues/1
+- Removal of widgets.
+- More default widgets.
+- More events(keyboard events, etc)
+- Vec widgets IE: `{some_vec.map(|my_string| <Text content={my_string} />)}`
 
 ## Example Screenshot
 <img src="images/screen1.png" alt="Kayak UI" width="600" />
@@ -56,7 +59,7 @@ rsx! {
 You can easily declare your own custom widgets:
 ```rust
 #[widget]
-pub fn MyCustomWidget(children: Children, styles: Option<Style>) {
+pub fn MyCustomWidget(children: Children) {
     rsx! {
         <>
             {children}
@@ -66,27 +69,27 @@ pub fn MyCustomWidget(children: Children, styles: Option<Style>) {
 ```
 
 ## Widget State
+
+Widget's can create their own state and will re-render when that state changes.
 ```rust
 #[widget]
 fn Counter(context: &mut KayakContext) {
-    let count = {
-        let x = context.create_state(0i32).unwrap();
-        *x
-    };
-
-    let id = self.get_id();
+    let count = context.create_state(0i32).unwrap();
+    // Since we move the variable into the closure we need to clone here.
+    // Similar cost to cloning an Arc
+    let cloned_count = count.clone();
     let on_event = OnEvent::new(move |context, event| match event.event_type {
         EventType::Click => {
-            context.set_current_id(id);
-            context.set_state(count + 1);
+            cloned_count.set(cloned_count.get() + 1);
         }
         _ => {}
     });
 
+    let count_text = format!("Current Count: {}", count.get());
     rsx! {
         <>
             <Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}>
-                <Text size={32.0} content={format!("Current Count: {}", count).to_string()} />
+                <Text size={32.0} content={count_text} />
                 <Button on_event={Some(on_event)}>
                     <Text size={24.0} content={"Count!".to_string()} />
                 </Button>
@@ -94,4 +97,50 @@ fn Counter(context: &mut KayakContext) {
         </>
     }
 }
-```
\ No newline at end of file
+```
+
+Widget's can also access global state and when the global state is bound to the widget it will auto re-render:
+```rust
+#[widget]
+fn Counter(context: &mut KayakContext) {
+    let global_count = {
+        if let Ok(world) = context.get_global_state::<World>() {
+            if let Some(global_count) = world.get_resource::<Binding<GlobalCount>>() {
+                global_count.clone()
+            } else {
+                return;
+            }
+        } else {
+            return;
+        }
+    };
+
+    // Binds the global state to the widget.
+    // When `global_count.set()` is called the Counter widget will auto re-render.
+    context.bind(&global_count);
+    let global_count = global_count.get().0;
+    
+    rsx! {
+        <>
+            <Window position={(50.0, 50.0)} size={(300.0, 300.0)} title={"Counter Example".to_string()}>
+                <Text size={32.0} content={format!("Current Count: {}", global_count).to_string()}>{}</Text>
+            </Window>
+        </>
+    }
+}
+
+// Example bevy system:
+fn count_up(global_count: Res<Binding<GlobalCount>>) {
+    global_count.set(GlobalCount(global_count.get().0 + 1));
+}
+```
+
+## Creating new fonts
+The `bevy_kayak_ui` renderer uses MSDF fonts in order to render crisp and accurate fonts at different scales without needing to re-rasterize the font. In order to generate custom fonts you need to use the following tool:
+https://github.com/Chlumsky/msdf-atlas-gen
+
+To generate a font run the following command:
+```
+.\msdf-atlas-gen.exe -font .\font_name.ttf -type msdf -minsize 32 -format png -imageout font_name.png -json font_name.json
+```
+Where font_name is the name of your font. You can play around with the different parameters that are provided but keep in mind that some of the font stuff is currently hardcoded and might result in graphical glitches if you change the settings too much. You should also try to use a decent size for the `minsize` parameter. The smaller the size the more artifacts will appear in the text.
\ No newline at end of file
-- 
GitLab