Proper web/wasm support

.cargo/config.toml

@@ -0,0 +1,2 @@
+[target.wasm32-unknown-unknown]
+rustflags = ['--cfg', 'getrandom_backend="wasm_js"']

Cargo.lock

@@ -49,12 +49,23 @@ version = "0.7.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "435a87a52755b8f27fcf321ac4f04b2802e337c8c4872923137471ec39c37532"
 dependencies = [
- "event-listener",
+ "event-listener 5.4.0",
  "event-listener-strategy",
  "futures-core",
  "pin-project-lite",
 ]
 
+[[package]]
+name = "async-channel"
+version = "1.9.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "81953c529336010edd6d8e358f886d9581267795c61b19475b71314bffa46d35"
+dependencies = [
+ "concurrent-queue",
+ "event-listener 2.5.3",
+ "futures-core",
+]
+
 [[package]]
 name = "async-channel"
 version = "2.3.1"
@@ -67,6 +78,35 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "async-executor"
+version = "1.13.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bb812ffb58524bdd10860d7d974e2f01cc0950c2438a74ee5ec2e2280c6c4ffa"
+dependencies = [
+ "async-task",
+ "concurrent-queue",
+ "fastrand",
+ "futures-lite",
+ "pin-project-lite",
+ "slab",
+]
+
+[[package]]
+name = "async-global-executor"
+version = "2.4.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "05b1b633a2115cd122d73b955eadd9916c18c8f510ec9cd1686404c60ad1c29c"
+dependencies = [
+ "async-channel 2.3.1",
+ "async-executor",
+ "async-io",
+ "async-lock",
+ "blocking",
+ "futures-lite",
+ "once_cell",
+]
+
 [[package]]
 name = "async-io"
 version = "2.4.1"
@@ -92,7 +132,7 @@ version = "3.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "ff6e472cdea888a4bd64f342f09b3f50e1886d32afe8df3d663c01140b811b18"
 dependencies = [
- "event-listener",
+ "event-listener 5.4.0",
  "event-listener-strategy",
  "pin-project-lite",
 ]
@@ -103,14 +143,14 @@ version = "2.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cde3f4e40e6021d7acffc90095cbd6dc54cb593903d1de5832f435eb274b85dc"
 dependencies = [
- "async-channel",
+ "async-channel 2.3.1",
  "async-io",
  "async-lock",
  "async-signal",
  "async-task",
  "blocking",
  "cfg-if",
- "event-listener",
+ "event-listener 5.4.0",
  "futures-lite",
  "rustix",
  "tracing",
@@ -145,6 +185,32 @@ dependencies = [
  "windows-sys 0.59.0",
 ]
 
+[[package]]
+name = "async-std"
+version = "1.13.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "730294c1c08c2e0f85759590518f6333f0d5a0a766a27d519c1b244c3dfd8a24"
+dependencies = [
+ "async-channel 1.9.0",
+ "async-global-executor",
+ "async-io",
+ "async-lock",
+ "crossbeam-utils",
+ "futures-channel",
+ "futures-core",
+ "futures-io",
+ "futures-lite",
+ "gloo-timers",
+ "kv-log-macro",
+ "log",
+ "memchr",
+ "once_cell",
+ "pin-project-lite",
+ "pin-utils",
+ "slab",
+ "wasm-bindgen-futures",
+]
+
 [[package]]
 name = "async-task"
 version = "4.7.1"
@@ -272,7 +338,7 @@ version = "1.6.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "703f41c54fc768e63e091340b424302bb1c29ef4aa0c7f10fe849dfb114d29ea"
 dependencies = [
- "async-channel",
+ "async-channel 2.3.1",
  "async-task",
  "futures-io",
  "futures-lite",
@@ -1354,6 +1420,12 @@ dependencies = [
  "serde",
 ]
 
+[[package]]
+name = "event-listener"
+version = "2.5.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0206175f82b8d6bf6652ff7d71a1e27fd2e4efde587fd368662814d6ec1d9ce0"
+
 [[package]]
 name = "event-listener"
 version = "5.4.0"
@@ -1371,7 +1443,7 @@ version = "0.5.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "8be9f3dfaaffdae2972880079a491a1a8bb7cbed0b8dd7a347f668b4150a3b93"
 dependencies = [
- "event-listener",
+ "event-listener 5.4.0",
  "pin-project-lite",
 ]
 
@@ -1404,7 +1476,9 @@ dependencies = [
 name = "flashcards"
 version = "0.1.0"
 dependencies = [
+ "async-std",
  "dioxus",
+ "getrandom 0.3.3",
  "include_dir",
  "rand 0.9.1",
  "serde",
@@ -1733,9 +1807,11 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "26145e563e54f2cadc477553f1ec5ee650b00862f0a58bcd12cbdc5f0ea2d2f4"
 dependencies = [
  "cfg-if",
+ "js-sys",
  "libc",
  "r-efi",
  "wasi 0.14.2+wasi-0.2.4",
+ "wasm-bindgen",
 ]
 
 [[package]]
@@ -1861,6 +1937,18 @@ dependencies = [
  "web-sys",
 ]
 
+[[package]]
+name = "gloo-timers"
+version = "0.3.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "bbb143cf96099802033e0d4f4963b19fd2e0b728bcf076cd9cf7f6634f092994"
+dependencies = [
+ "futures-channel",
+ "futures-core",
+ "js-sys",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "gloo-utils"
 version = "0.2.0"
@@ -2372,6 +2460,15 @@ dependencies = [
  "selectors",
 ]
 
+[[package]]
+name = "kv-log-macro"
+version = "1.0.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "0de8b303297635ad57c9f5059fd9cee7a47f8e8daa09df0fcd07dd39fb22977f"
+dependencies = [
+ "log",
+]
+
 [[package]]
 name = "lazy-js-bundle"
 version = "0.6.2"
@@ -2480,6 +2577,9 @@ name = "log"
 version = "0.4.27"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "13dc2df351e3202783a1fe0d44375f7295ffb4049267b0f3018346dc122a1d94"
+dependencies = [
+ "value-bag",
+]
 
 [[package]]
 name = "longest-increasing-subsequence"
@@ -4507,6 +4607,12 @@ dependencies = [
  "wasm-bindgen",
 ]
 
+[[package]]
+name = "value-bag"
+version = "1.11.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "943ce29a8a743eb10d6082545d861b24f9d1b160b7d741e0f2cdf726bec909c5"
+
 [[package]]
 name = "version-compare"
 version = "0.2.0"
@@ -5306,7 +5412,7 @@ dependencies = [
  "async-trait",
  "derivative",
  "enumflags2",
- "event-listener",
+ "event-listener 5.4.0",
  "futures-core",
  "futures-sink",
  "futures-util",

Cargo.toml

@@ -7,17 +7,23 @@ edition = "2024"
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
 [dependencies]
-dioxus = { version = "0.6", features = [] }
+dioxus = { version = "0.6" }
 toml = { version = "0.8" }
 serde = { version = "1.0", features = ["derive"] }
 rand = { version = "0.9" }
-tokio = { version = "1.45" }
 include_dir = { version = "0.7" }
 
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tokio = { version = "1.45", default-features = false, features = ["time"] }
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+getrandom = { version = "0.3", features = ["wasm_js"] }
+async-std = { version = "1.13" }
+
 [features]
 default = ["desktop"]
 bundled = []
-web = ["dioxus/web"]
+web = ["dioxus/web", "bundled"]
 desktop = ["dioxus/desktop"]
 mobile = ["dioxus/mobile", "bundled"]
 

assets/main.css

@@ -158,7 +158,7 @@ form {
 	}
 }
 
-@media only screen and (max-width: 640px) {
+@media only screen and (max-width: 540px) {
 	form {
 		h1 {
 			font-size: 5vw;

src/main.rs

@@ -1,5 +1,7 @@
-use std::{fs, sync::OnceLock, time::Duration};
+use std::{sync::OnceLock, time::Duration};
 
+#[cfg(feature = "web")]
+use async_std::task::sleep;
 #[cfg(feature = "desktop")]
 use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
 use dioxus::prelude::*;
@@ -8,7 +10,9 @@ use include_dir::{Dir, include_dir};
 use models::{Question, Questions};
 use rand::seq::SliceRandom;
 #[cfg(feature = "desktop")]
-use std::env;
+use std::{env, fs};
+#[cfg(not(feature = "web"))]
+use tokio::time::sleep;
 
 mod models;
 
@@ -104,7 +108,7 @@ fn main() {
 			.launch(App)
 	}
 
-	#[cfg(feature = "mobile")]
+	#[cfg(not(feature = "desktop"))]
 	{
 		dioxus::launch(App);
 	}
@@ -162,11 +166,12 @@ pub fn QuestionForm(questions: Vec<Question>) -> Element {
 
 	use_future(move || async move {
 		loop {
-			tokio::time::sleep(Duration::from_millis(400)).await;
+			// Sleep will either be from async_std for WASM for tokio for desktop/mobile
+			sleep(Duration::from_millis(400)).await;
 			let is_correct = correct_animation();
 			let is_wrong = wrong_animation();
 			if is_correct || is_wrong {
-				tokio::time::sleep(Duration::from_millis(600)).await;
+				sleep(Duration::from_millis(600)).await;
 
 				// Uncheck all the answers
 				current().answers.iter_mut().for_each(|a| a.checked = false);
@@ -243,6 +248,7 @@ pub fn QuestionForm(questions: Vec<Question>) -> Element {
 			{ answer_buttons }
 			input {
 				type: "submit",
+				value: "Submit"
 			}
 		}
 	}