Merge pull request #7 from kimonp/general_refactor

Add title, improve README

README.md

@@ -1,12 +1,15 @@
 # Conway's Game Of Life implemented with the Dioxus framework
 An implementation of [Conway's game of life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life) using the Dioxus framework,
-ported from the [rust wasm tutorial](https://rustwasm.github.io/docs/book/game-of-life/introduction.html).
+adapted from the [rust wasm tutorial](https://rustwasm.github.io/docs/book/game-of-life/introduction.html).
 
-While the code from the original tutorial is about 50% rust, 50% JavaScript, with the Dioxus framework the code can be 100% Rust.
+While the code from the original tutorial is about 50% Rust, 50% JavaScript, with the Dioxus framework the code is 100% Rust.
 
 ## Install and run
-* Install cargo and rust
-* Install the dioxus API: `cargo dioxus install`
+* Install the rust development environment: https://www.rust-lang.org/tools/install
+* Install the [dioxus CLI](https://dioxuslabs.com/learn/0.4/CLI/installation): `cargo install dioxus-cli`
+* Install the wasm target for rust: `rustup target add wasm32-unknown-unknown`
+* clone this repository: `git clone https://github.com/kimonp/dioxus-game-of-life.git`
+* `cd dioxus-game-of-life`
 * Run in debug mode with the dioxus cli: `dx serve --platform=web`
 * Point your browser at: http://localhost:8080
 

src/main.rs

@@ -18,6 +18,7 @@ fn App(cx: Scope) -> Element {
     let (frames_running, frame_id) = use_animation_frame(cx, false);
 
     render! {
+        h2 { display: "flex", justify_content: "center", font_family: "Helvetica", "Game of Life" }
         GameOfLifeGrid { frame_id: *frame_id.get() }
         div { display: "flex", justify_content: "center",
             button {
@@ -37,6 +38,9 @@ fn App(cx: Scope) -> Element {
     }
 }
 
+// https://www.w3schools.com/react/react_useref.asp
+// How to do the ref tag of an element?
+// How do you do this in dioxus? https://react.dev/learn/manipulating-the-dom-with-refs
 // use web_sys::HtmlElement;
 
 // #[component]