Finish environment

src/cheat_sheet.md

@@ -1,38 +1,137 @@
 # Cheat Sheet
 
-Again, views are the heart of Quarve. There is a decent number of provided views,
-of which we will cover commonly used ones.
-(really, the standard library has a wide collection of ViewProviders and
-IntoViewProviders rather than Views, but we'll generally blur the distinction for sake
-of notational convenience).
-
-Here is a guide
 Some concepts are mentioned in more detail in later lessons. Treat this lesson more as a
-'cheat sheet' of good to know views rather than full explanation.
+'cheat sheet' of good to know methods rather than a full explanation.
 
-## General
+## Views
 Construct basic text with the `text` function located in the prelude.
 ```rust
 text("rabbit")
 ```
 
-All colors are IVPs so
-(usually you will also want to set a size, hence the second line)
+Display image
+```rust
+ImageView::new("path_to_resource_in_res_folder")
+```
 
-## Controls
+All colors are IVPs (usually you want to set a size, hence the second line)
+```rust
+BLACK
+    .intrinsic(100, 100)
+```
 
 Dropdown Menu
+```rust
+let selection = Store::new(None);
+
+Dropdown::new(selection.binding())
+    .option("Alpha")
+    .option("Beta");
+```
 
 TextField
+```rust
+let text = Store::new("initial".into());
+TextField::new(text.binding());
+```
 
-Button
+Text Button
+```rust
+button("Label", |s| {...})
+```
 
 \*There are many controls that one would expect from a UI library that are yet to
 be added. I apologize for this and may add them in the future if there is interest.
 
 ## Layouts
 
-You can use a `vstack`, `hstack`, and `zstack` to c
+You can use a `vstack`, `hstack`, or `zstack` to organize content easily.
+There are also flex layouts, but these are needed less.
+
+You can either layout heterogenous data known at compile time,or dynamically
+based off of bindings and signals.
+```rust
+// hetereogenous
 vstack()
+    .push(ivp1)
+    .push(ivp2)
+
+// binding
+binding.binding_vmap(|content, s| text(content.to_string());
+
+// signal (slow)
+signal.sig_vmap(|content, s| text(content.to_string());
+```
+
+## Modifiers
+
+Apply padding to an ivp
+```rust
+ivp
+    .padding(amount)
+```
+
+Offset the ivp by some amount
+```rust
+ivp
+    .offset(dx, dy)
+```
 
-These and other layout views are covered in more detail [here](./layouts.md).
+Set the intrinsic size, essentially allocating a rectangle of space.
+```rust
+ivp
+    .intrinsic(width, height)
+// shorthand for .frame(F.intrinsic(width, height))
+```
+
+Setting text attributes
+```rust
+ivp
+    .text_font("font_file_in_res/font")
+    .text_size(size)
+    .text_color(color)
+```
+
+Set the background color
+```rust
+ivp
+    .bg_color(COLOR)
+```
+
+Add a foreground view
+```rust
+ivp
+    .foreground(attraction)
+```
+
+Add a background view
+```rust
+ivp
+    .background(attraction)
+```
+
+Lifecycle methods
+```rust
+ivp
+    .pre_show(|s| { ... }) // called before children and before being shown
+    .post_show(|s| { ... }) // called after children and after being shown
+    .pre_hide(|s| { ... }) // called before children and before being hidden
+    .post_hide(|s| { ... }) // called after children and after being hidden
+```
+
+## Conditional
+
+if else
+```rust
+view_if(condition_signal, IVP1)
+    .view_else(IVP2)
+```
+
+view match
+```rust
+view_match!(signal;
+    0 => arm1ivp,
+    1 => arm2ivp,
+    _ => default_arm_ivp
+);
+```

src/conditional.md

@@ -3,9 +3,72 @@
 Here we show how to show or hide views conditionally.
 
 ## If Else
-The most simplest conditional is
+The simplest conditional is the if (and else) block. These statements
+conditionally hide or show views based on the given boolean signal.
+Here's the syntax:
+```rust
+let shown = Store::new(false);
+let shown_binding = shown.binding();
+
+hstack()
+    .push(button("toggle color", move |s| {
+        let curr = *shown_binding.borrow(s);
+        shown_binding.apply(SetAction::Set(!curr), s);
+    }))
+    .push(
+        // dont like this syntax that much
+        // but i also think a macro would be overkill
+        view_if(shown.signal(), BLUE.intrinsic(50, 50))
+            // else if would go here
+            .view_else(RED.intrinsic(50, 50))
+    )
+```
 
 ## View Match
+A common paradigm is to only show one view out of a set of views, depending on some
+state (think about a router). This can be accomplished by the `view_match!` macro.
+It's conceptually similar to a match statement based upon the value of some signal.
+However, a key distinction is that the different arms are allowed to take different
+types.
+
+The general syntax is as follows
+```rust
+view_match!(signal;
+    pattern_1 => IVP1,
+    pattern_2 => IVP2,
+    _ => DEFAULT_IVP
+)
+// sometimes you don't want to match exactly on the content of a signal
+// but rather match on the content of a signal after some initial
+// operation
+view_match!(signal, |content| mapped_expr;
+    pattern_1 => IVP1,
+    pattern_2 => IVP2,
+    _ => DEFAULT_IVP
+)
+```
+
+Here's an example:
+```rust
+fn mux_demo() -> impl IVP {
+    let selection = Store::new(None);
+    let selection_sig = selection.signal();
+
+    let mux = view_match!(selection_sig, |val: &Option<String>| val.as_ref().map(move |q| q.as_str());
+        Some("Alpha") => text("alpha text").bold(),
+        Some("Beta") => button("beta button", |_s| println!("clicked!")).italic(),
+        _ => text("Please select an option")
+    );
+
+    // macro syntax of vstack
+    vstack! {
+        mux;
+        Dropdown::new(selection.binding())
+            .option("Alpha")
+            .option("Beta");
+    }
+}
+```
 
 The included examples are available in
 [this project](https://github.com/monocurl/quarve/tree/main/examples/conditional).

src/layouts.md

@@ -1 +1,13 @@
 # Layouts
+
+## Types of Layouts
+
+## Heterogenous layouts
+
+## Binding
+
+## Signal
+
+## LayoutProvider
+
+## VecLayoutProvider (Advanced)