Compare commits
No commits in common. "806a103b0b09768a0541d230d263e92385a8139f" and "59fba4a13ceda2542526a60f8210f39889d869f0" have entirely different histories.
806a103b0b
...
59fba4a13c
|
@ -16,10 +16,9 @@ include_dir = { version = "0.7" }
|
||||||
|
|
||||||
[features]
|
[features]
|
||||||
default = ["desktop"]
|
default = ["desktop"]
|
||||||
bundled = []
|
|
||||||
web = ["dioxus/web"]
|
web = ["dioxus/web"]
|
||||||
desktop = ["dioxus/desktop"]
|
desktop = ["dioxus/desktop"]
|
||||||
mobile = ["dioxus/mobile", "bundled"]
|
mobile = ["dioxus/mobile"]
|
||||||
|
|
||||||
[profile]
|
[profile]
|
||||||
|
|
||||||
|
|
|
@ -12,11 +12,6 @@
|
||||||
--selection-shadow: gold;
|
--selection-shadow: gold;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
|
||||||
font-size: 62.5%;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #0f1116;
|
background-color: #0f1116;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
@ -52,25 +47,19 @@ body {
|
||||||
#result {
|
#result {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40%;
|
width: 100%;
|
||||||
left: 50%;
|
font-size: 40vw;
|
||||||
transform: translate(-50%, -50%);
|
margin: auto;
|
||||||
justify-content: center;
|
text-align: center;
|
||||||
align-items: center;
|
line-height: 1;
|
||||||
user-select: none;
|
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
cursor: default;
|
user-select: none;
|
||||||
|
|
||||||
&.visible {
|
&.visible {
|
||||||
display: flex;
|
display: block;
|
||||||
animation: 200ms fade-in forwards;
|
animation: 200ms fade-in forwards;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 40vw;
|
|
||||||
|
|
||||||
&.correct {
|
&.correct {
|
||||||
color: var(--correct);
|
color: var(--correct);
|
||||||
text-shadow: var(--correct-shadow) 0px 0px 30px;
|
text-shadow: var(--correct-shadow) 0px 0px 30px;
|
||||||
|
@ -81,7 +70,6 @@ body {
|
||||||
text-shadow: var(--fail-shadow) 0px 0px 30px;
|
text-shadow: var(--fail-shadow) 0px 0px 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade-in {
|
@keyframes fade-in {
|
||||||
0% {
|
0% {
|
||||||
|
@ -103,7 +91,6 @@ form {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3vw;
|
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
|
|
||||||
&.correct {
|
&.correct {
|
||||||
|
@ -133,6 +120,10 @@ form {
|
||||||
box-shadow: 0px 0px 13px -5px var(--selection-shadow);
|
box-shadow: 0px 0px 13px -5px var(--selection-shadow);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover:not(.selected) {
|
||||||
|
border: solid 1px var(--hoveer);
|
||||||
|
}
|
||||||
|
|
||||||
> input[type="checkbox"] {
|
> input[type="checkbox"] {
|
||||||
display: none;
|
display: none;
|
||||||
scale: 1.5;
|
scale: 1.5;
|
||||||
|
@ -142,6 +133,11 @@ form {
|
||||||
> label {
|
> label {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
> *:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> input[type="submit"] {
|
> input[type="submit"] {
|
||||||
|
@ -152,41 +148,14 @@ form {
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 42px;
|
font-size: 42px;
|
||||||
|
|
||||||
&:focus {
|
&:hover {
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 640px) {
|
|
||||||
form {
|
|
||||||
h1 {
|
|
||||||
font-size: 5vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#result > div {
|
|
||||||
font-size: 70vw;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
form {
|
|
||||||
> input[type="submit"]:hover {
|
|
||||||
font-size: 48px;
|
font-size: 48px;
|
||||||
color: var(--selection);
|
color: var(--selection);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
> div {
|
&:focus {
|
||||||
&:hover:not(.selected) {
|
outline: none;
|
||||||
border: solid 1px var(--hover);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover,
|
|
||||||
> *:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
27
src/main.rs
27
src/main.rs
|
@ -1,9 +1,8 @@
|
||||||
use std::{fs, sync::OnceLock, time::Duration};
|
use std::{sync::OnceLock, time::Duration};
|
||||||
|
|
||||||
#[cfg(feature = "desktop")]
|
#[cfg(feature = "desktop")]
|
||||||
use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
|
use dioxus::desktop::{Config, LogicalSize, WindowBuilder};
|
||||||
use dioxus::prelude::*;
|
use dioxus::prelude::*;
|
||||||
#[cfg(feature = "bundled")]
|
|
||||||
use include_dir::{Dir, include_dir};
|
use include_dir::{Dir, include_dir};
|
||||||
use models::{Question, Questions};
|
use models::{Question, Questions};
|
||||||
use rand::seq::SliceRandom;
|
use rand::seq::SliceRandom;
|
||||||
|
@ -12,10 +11,7 @@ use std::env;
|
||||||
|
|
||||||
mod models;
|
mod models;
|
||||||
|
|
||||||
#[cfg(feature = "bundled")]
|
|
||||||
const QUESTIONS_DIR: Dir = include_dir!("./questions");
|
const QUESTIONS_DIR: Dir = include_dir!("./questions");
|
||||||
#[cfg(feature = "desktop")]
|
|
||||||
const DEFAULT_DIR: &str = "./questions";
|
|
||||||
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
const MAIN_CSS: Asset = asset!("/assets/main.css");
|
||||||
|
|
||||||
pub static QUESTIONS: OnceLock<Questions> = OnceLock::new();
|
pub static QUESTIONS: OnceLock<Questions> = OnceLock::new();
|
||||||
|
@ -25,16 +21,13 @@ fn get_questions() -> Questions {
|
||||||
.get_or_init(|| {
|
.get_or_init(|| {
|
||||||
let mut questions = Questions::default();
|
let mut questions = Questions::default();
|
||||||
|
|
||||||
#[cfg(feature = "bundled")]
|
for entry in QUESTIONS_DIR.files() {
|
||||||
{
|
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) {
|
if let Ok(other_questions) = toml::from_str(content) {
|
||||||
questions += other_questions;
|
questions += other_questions;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
#[cfg(feature = "desktop")]
|
#[cfg(feature = "desktop")]
|
||||||
{
|
{
|
||||||
|
@ -56,16 +49,6 @@ fn get_questions() -> Questions {
|
||||||
|
|
||||||
questions += other_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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -295,7 +278,6 @@ pub fn AnswerCheckbox(current: Signal<Question>, id: usize) -> Element {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#[allow(clippy::redundant_closure)]
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ResultPopup(is_correct: Signal<bool>, is_wrong: Signal<bool>) -> Element {
|
pub fn ResultPopup(is_correct: Signal<bool>, is_wrong: Signal<bool>) -> Element {
|
||||||
let is_correct = use_memo(move || is_correct());
|
let is_correct = use_memo(move || is_correct());
|
||||||
|
@ -306,12 +288,9 @@ pub fn ResultPopup(is_correct: Signal<bool>, is_wrong: Signal<bool>) -> Element
|
||||||
div {
|
div {
|
||||||
id: "result",
|
id: "result",
|
||||||
class: if is_visible() { "visible" },
|
class: if is_visible() { "visible" },
|
||||||
|
|
||||||
div {
|
|
||||||
class: if is_correct() { "correct" },
|
class: if is_correct() { "correct" },
|
||||||
class: if is_wrong() { "wrong" },
|
class: if is_wrong() { "wrong" },
|
||||||
if is_correct() { "✓" } else { "X" }
|
if is_correct() { "✓" } else { "X" }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue