Better result centering, better desktop/mobile separation for when to load local files vs when to bundle them, added @media queries for true hover

Cargo.toml

@@ -16,9 +16,10 @@ include_dir = { version = "0.7" }
 
 [features]
 default = ["desktop"]
+bundled = []
 web = ["dioxus/web"]
 desktop = ["dioxus/desktop"]
-mobile = ["dioxus/mobile"]
+mobile = ["dioxus/mobile", "bundled"]
 
 [profile]
 

assets/main.css

@@ -48,18 +48,23 @@ body {
 	display: none;
 	position: absolute;
 	width: 100%;
-	font-size: 40vw;
+	height: 80%;
-	margin: auto;
+	justify-content: center;
-	text-align: center;
+	align-items: center;
-	line-height: 1;
-	opacity: 0;
 	user-select: none;
+	opacity: 0;
+	cursor: default;
 
 	&.visible {
-		display: block;
+		display: flex;
 		animation: 200ms fade-in forwards;
 	}
 
+	> div {
+		position: relative;
+		text-align: center;
+		font-size: 40vw;
+
 		&.correct {
 			color: var(--correct);
 			text-shadow: var(--correct-shadow) 0px 0px 30px;
@@ -70,6 +75,7 @@ body {
 			text-shadow: var(--fail-shadow) 0px 0px 30px;
 		}
 	}
+}
 
 @keyframes fade-in {
 	0% {
@@ -120,8 +126,10 @@ form {
 			box-shadow: 0px 0px 13px -5px var(--selection-shadow);
 		}
 
+		@media (hover: hover) {
 			&:hover:not(.selected) {
-			border: solid 1px var(--hoveer);
+				border: solid 1px var(--hover);
+			}
 		}
 
 		> input[type="checkbox"] {
@@ -134,11 +142,13 @@ form {
 			flex-grow: 1;
 		}
 
+		@media (hover: hover) {
 			&:hover,
 			> *:hover {
 				cursor: pointer;
 			}
 		}
+	}
 
 	> input[type="submit"] {
 		margin-top: 40px;
@@ -148,11 +158,13 @@ form {
 		color: white;
 		font-size: 42px;
 
+		@media (hover: hover) {
 			&:hover {
 				font-size: 48px;
 				color: var(--selection);
 				cursor: pointer;
 			}
+		}
 
 		&:focus {
 			outline: none;

src/main.rs

@@ -1,8 +1,9 @@
-use std::{sync::OnceLock, time::Duration};
+use std::{fs, sync::OnceLock, time::Duration};
 
 #[cfg(feature = "desktop")]
 use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
 use dioxus::prelude::*;
+#[cfg(feature = "bundled")]
 use include_dir::{Dir, include_dir};
 use models::{Question, Questions};
 use rand::seq::SliceRandom;
@@ -11,7 +12,10 @@ use std::env;
 
 mod models;
 
+#[cfg(feature = "bundled")]
 const QUESTIONS_DIR: Dir = include_dir!("./questions");
+#[cfg(feature = "desktop")]
+const DEFAULT_DIR: &str = "./questions";
 const MAIN_CSS: Asset = asset!("/assets/main.css");
 
 pub static QUESTIONS: OnceLock<Questions> = OnceLock::new();
@@ -21,13 +25,16 @@ fn get_questions() -> Questions {
 		.get_or_init(|| {
 			let mut questions = Questions::default();
 
-			for entry in QUESTIONS_DIR.files() {
+			#[cfg(feature = "bundled")]
-				if let Some(content) = entry.contents_utf8() {
+			{
+				for file in QUESTIONS_DIR.files() {
+					if let Some(content) = file.contents_utf8() {
 						if let Ok(other_questions) = toml::from_str(content) {
 							questions += other_questions;
 						}
 					}
 				}
+			}
 
 			#[cfg(feature = "desktop")]
 			{
@@ -49,6 +56,16 @@ fn get_questions() -> Questions {
 
 						questions += other_questions;
 					}
+				} else if questions.is_empty() {
+					if let Ok(dir) = fs::read_dir(DEFAULT_DIR) {
+						for file in dir.flatten() {
+							if let Ok(questions_str) = std::fs::read_to_string(file.path()) {
+								if let Ok(other_questions) = toml::from_str(&questions_str) {
+									questions += other_questions;
+								}
+							}
+						}
+					}
 				}
 			}
 
@@ -278,6 +295,7 @@ pub fn AnswerCheckbox(current: Signal<Question>, id: usize) -> Element {
 	}
 }
 
+#[allow(clippy::redundant_closure)]
 #[component]
 pub fn ResultPopup(is_correct: Signal<bool>, is_wrong: Signal<bool>) -> Element {
 	let is_correct = use_memo(move || is_correct());
@@ -288,9 +306,12 @@ pub fn ResultPopup(is_correct: Signal<bool>, is_wrong: Signal<bool>) -> Element
 		div {
 			id: "result",
 			class: if is_visible() { "visible" },
+
+			div {
 				class: if is_correct() { "correct" },
 				class: if is_wrong() { "wrong" },
 				if is_correct() { "✓" } else { "X" }
 			}
 		}
 	}
+}