Make example work on web and update READMEs

4 files changed, 49 insertions, 17 deletions

diff --git a/examples/tour/Cargo.toml b/examples/tour/Cargo.toml
index a0e3eee8..8cdce295 100644
--- a/examples/tour/Cargo.toml
+++ b/examples/tour/Cargo.toml
@@ -8,9 +8,12 @@ repository = "https://github.com/hecrj/iced"
 edition = "2018"
 publish = false
 
+[lib]
+crate-type = ["cdylib", "rlib"]
+
 [[bin]]
-name = "ggez"
-path = "src/iced_ggez/main.rs"
+name = "main"
+path = "src/main.rs"
 
 [dependencies]
 futures-preview = "=0.3.0-alpha.18"
diff --git a/examples/tour/README.md b/examples/tour/README.md
index 2af048cc..a33de7f5 100644
--- a/examples/tour/README.md
+++ b/examples/tour/README.md
@@ -3,31 +3,60 @@
 A simple UI tour showcasing different widgets that can be built using Iced. It
 also shows how the library can be integrated into an existing system.
 
-The example is built on top of [`ggez`], a game library for Rust. Currently, it
-is using a [personal fork] to [add a `FontCache` type] and
-[fix some issues with HiDPI].
+The example can run both on native and web platforms, using the same GUI code!
+
+The native renderer of the example is built on top of [`ggez`], a game library
+for Rust. Currently, it is using a [personal fork] to [add a `FontCache` type]
+and [fix some issues with HiDPI].
+
+The web version uses `iced_web` directly. This crate is still a work in
+progress. In particular, the styling of elements is not finished yet
+(text color, alignment, sizing, etc).
 
 The implementation consists of different modules:
-  - __[`tour`]__ contains the actual GUI code: __state__, __messages__,
-    __update logic__ and __view logic__.
-  - __[`renderer`]__ implements a simple renderer for each of the used widgets on
-    top of the graphics module of [`ggez`].
-  - __[`widget`]__ re-exposes Iced's built-in widgets with the renderer type parameter
-    replaced with the implemented [`renderer`], for convenience.
+  - __[`tour`]__ contains the actual cross-platform GUI code: __state__,
+    __messages__, __update logic__ and __view logic__.
+  - __[`iced_ggez`]__ implements a simple renderer for each of the used widgets
+    on top of the graphics module of [`ggez`].
+  - __[`widget`]__ conditionally re-exposes the correct platform widgets based
+    on the target architecture.
   - __[`main`]__ integrates Iced with [`ggez`] and connects the [`tour`] with
     the [`renderer`].
+  - __[`lib`]__ exposes the [`tour`] types and conditionally implements the
+    WebAssembly entrypoint in the [`web`] module.
+
+The conditional compilation awkwardness from targetting both native and web
+platforms should be handled seamlessly by the `iced` crate in the near future!
+
+If you want to run it as a native app:
+
+```
+cd examples/tour
+cargo run
+```
+
+If you want to run it on web, you will need [`wasm-pack`]:
+
+```
+cd examples/tour
+wasm-pack build --target web
+```
+
+Then, simply serve the directory with any HTTP server. For instance:
 
 ```
-cargo run --example tour
+python3 -m http.server
 ```
 
 [![Tour - Iced][gui_gif]][gui_gfycat]
 
 [`ggez`]: https://github.com/ggez/ggez
-[`tour`]: tour.rs
-[`renderer`]: renderer
-[`widget`]: widget.rs
-[`main`]: main.rs
+[`tour`]: src/tour.rs
+[`iced_ggez`]: src/iced_ggez
+[`widget`]: src/widget.rs
+[`main`]: src/main.rs
+[`lib`]: src/lib.rs
+[`web`]: src/web.rs
 [personal fork]: https://github.com/hecrj/ggez
 [add a `FontCache` type]: https://github.com/ggez/ggez/pull/679
 [fix some issues with HiDPI]: https://github.com/hecrj/ggez/commit/dfe2fd2423c51a6daf42c75f66dfaeaacd439fb1
diff --git a/examples/tour/src/iced_ggez/main.rs b/examples/tour/src/main.rs
index 72774d38..72774d38 100644
--- a/examples/tour/src/iced_ggez/main.rs
+++ b/examples/tour/src/main.rs
diff --git a/examples/tour/src/tour.rs b/examples/tour/src/tour.rs
index fd9c2dde..04740fce 100644
--- a/examples/tour/src/tour.rs
+++ b/examples/tour/src/tour.rs
@@ -16,7 +16,7 @@ impl Tour {
             steps: Steps::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
-            debug: true,
+            debug: false,
         }
     }