Add ability to get id from button
This commit is contained in:
parent
a367d0aca5
commit
4bac221923
GPG key ID:
A794DA2529474BA5
32
riddlrs/Cargo.lock
generated
32
riddlrs/Cargo.lock
generated
|
|
@ -31,6 +31,16 @@ version = "1.0.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
|
||||
|
||||
[[package]]
|
||||
name = "console_error_panic_hook"
|
||||
version = "0.1.7"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
|
||||
dependencies = [
|
||||
"cfg-if",
|
||||
"wasm-bindgen",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
name = "getrandom"
|
||||
version = "0.2.3"
|
||||
|
|
@ -167,6 +177,12 @@ version = "1.8.0"
|
|||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "692fcb63b64b1758029e0a96ee63e049ce8c5948587f2f7208df04625e5f6b56"
|
||||
|
||||
[[package]]
|
||||
name = "paste"
|
||||
version = "1.0.6"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "0744126afe1a6dd7f394cb50a716dbe086cb06e255e53d8d0185d82828358fb5"
|
||||
|
||||
[[package]]
|
||||
name = "proc-macro2"
|
||||
version = "1.0.33"
|
||||
|
|
@ -189,9 +205,12 @@ dependencies = [
|
|||
name = "riddlrs"
|
||||
version = "0.1.0"
|
||||
dependencies = [
|
||||
"console_error_panic_hook",
|
||||
"indexmap",
|
||||
"js-sys",
|
||||
"sycamore",
|
||||
"wasm-bindgen",
|
||||
"web-sys",
|
||||
]
|
||||
|
||||
[[package]]
|
||||
|
|
@ -208,14 +227,15 @@ checksum = "a2eb9349b6444b326872e140eb1cf5e7c522154d69e7a0ffb0fb81c06b37543f"
|
|||
|
||||
[[package]]
|
||||
name = "sycamore"
|
||||
version = "0.6.3"
|
||||
version = "0.7.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "8de41394e31bfe094278234d99525202b7197cd8a2181f84abeb8c672021bb45"
|
||||
checksum = "fbff2c313c75b52785b39fcd508807c1d7e5372a8a9d319e381ebdf68ee9f1c3"
|
||||
dependencies = [
|
||||
"ahash",
|
||||
"indexmap",
|
||||
"js-sys",
|
||||
"lexical",
|
||||
"paste",
|
||||
"smallvec",
|
||||
"sycamore-macro",
|
||||
"sycamore-reactive",
|
||||
|
|
@ -225,9 +245,9 @@ dependencies = [
|
|||
|
||||
[[package]]
|
||||
name = "sycamore-macro"
|
||||
version = "0.6.3"
|
||||
version = "0.7.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "53f2c753e9ba592d05d0004ceaa84914372ed68558455eff1b0ccc4c666fa83d"
|
||||
checksum = "d0f2b42f470ceafe6939660cb79545f907978e8d6a0c4ac3c146c332dd391aa7"
|
||||
dependencies = [
|
||||
"once_cell",
|
||||
"proc-macro2",
|
||||
|
|
@ -237,9 +257,9 @@ dependencies = [
|
|||
|
||||
[[package]]
|
||||
name = "sycamore-reactive"
|
||||
version = "0.6.3"
|
||||
version = "0.7.0"
|
||||
source = "registry+https://github.com/rust-lang/crates.io-index"
|
||||
checksum = "5a10366f851c674cbc42092fb3073d29377b0fcff828bbaff57af3397100f21a"
|
||||
checksum = "96cf29f9778a127db8c5940e7e1439a84b73b607baa4f3ea35e7c2f773e77386"
|
||||
dependencies = [
|
||||
"ahash",
|
||||
"indexmap",
|
||||
|
|
|
|||
|
|
@ -6,6 +6,12 @@ edition = "2021"
|
|||
# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
|
||||
|
||||
[dependencies]
|
||||
sycamore = "0.6.3"
|
||||
sycamore = "0.7"
|
||||
wasm-bindgen = "0.2.78"
|
||||
indexmap = "1.7.0"
|
||||
js-sys = "0.3.55"
|
||||
console_error_panic_hook = "0.1.7"
|
||||
|
||||
[dependencies.web-sys]
|
||||
version = "0.3.55"
|
||||
features = ["Event", "EventTarget"]
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="css" data-trunk href="style.css">
|
||||
<link rel="inline" data-trunk href="script.js">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
use sycamore::prelude::*;
|
||||
#![allow(unused_macros)]
|
||||
|
||||
use indexmap::IndexMap;
|
||||
use std::panic;
|
||||
use sycamore::prelude::*;
|
||||
use wasm_bindgen::prelude::*;
|
||||
use web_sys::Event;
|
||||
|
||||
macro_rules! indexmap {
|
||||
($($key:expr => $value:expr),*) => {{
|
||||
let mut map = IndexMap::with_capacity(5);
|
||||
|
||||
$(
|
||||
map.insert($key, $value);
|
||||
map.insert($key, $value);
|
||||
)*
|
||||
|
||||
map
|
||||
|
|
@ -45,11 +49,32 @@ macro_rules! wasm_import {
|
|||
}
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug)]
|
||||
macro_rules! wasm_import_type {
|
||||
($name:ident) => {
|
||||
#[wasm_bindgen]
|
||||
extern "C" {
|
||||
pub type $name;
|
||||
}
|
||||
};
|
||||
($($name:ident),*) => {
|
||||
#[wasm_bindgen]
|
||||
extern "C" {
|
||||
$(pub type $name;)*
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
macro_rules! read_js_value {
|
||||
($target:expr, $key:expr) => {
|
||||
js_sys::Reflect::get(&$target, &wasm_bindgen::JsValue::from_str($key))
|
||||
};
|
||||
}
|
||||
|
||||
#[derive(Clone, Debug, Default)]
|
||||
struct Question {
|
||||
prompt: &'static str,
|
||||
answer: char,
|
||||
choices: IndexMap<char, &'static str>
|
||||
choices: IndexMap<char, &'static str>,
|
||||
}
|
||||
|
||||
macro_rules! create_question {
|
||||
|
|
@ -57,53 +82,102 @@ macro_rules! create_question {
|
|||
Question {
|
||||
prompt: $prompt,
|
||||
answer: $answer,
|
||||
choices: $choices
|
||||
choices: $choices,
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
wasm_import!(log(s: String));
|
||||
|
||||
fn main() {
|
||||
let questions = [create_question!("Which of these fruits contains potassium?", 'B',
|
||||
indexmap! {
|
||||
'A' => "apple",
|
||||
'B' => "banana",
|
||||
'C' => "cherry",
|
||||
'D' => "dragonfruit"
|
||||
}
|
||||
),
|
||||
create_question!("The moon's light actually comes from the sun", 'A', indexmap! {
|
||||
'A' => "True",
|
||||
'B' => "False"
|
||||
}),
|
||||
create_question!("Which of these countries is not considered a kingdom?", 'C', indexmap! {
|
||||
'A' => "Belgium",
|
||||
'B' => "Denmark",
|
||||
'C' => "Monaco",
|
||||
'D' => "Sweden"
|
||||
}),
|
||||
create_question!("Force is measured in which unit?", 'B', indexmap! {
|
||||
'A' => "Kilograms",
|
||||
'B' => "Newtons",
|
||||
'C' => "Joules"
|
||||
}),
|
||||
create_question!("What does a vulcanologist study?", 'A', indexmap! {
|
||||
'A' => "Volcanoes",
|
||||
'B' => "Plants",
|
||||
'C' => "Constellations"
|
||||
}),
|
||||
create_question!("Energy is measured in which unit?", 'C', indexmap! {
|
||||
'A' => "Kilograms",
|
||||
'B' => "Newtons",
|
||||
'C' => "Joules"
|
||||
}),
|
||||
panic::set_hook(Box::new(console_error_panic_hook::hook));
|
||||
|
||||
let questions = [
|
||||
create_question!(
|
||||
"Which of these fruits contains potassium?",
|
||||
'B',
|
||||
indexmap! {
|
||||
'A' => "apple",
|
||||
'B' => "banana",
|
||||
'C' => "cherry",
|
||||
'D' => "dragonfruit"
|
||||
}
|
||||
),
|
||||
create_question!(
|
||||
"The moon's light actually comes from the sun",
|
||||
'A',
|
||||
indexmap! {
|
||||
'A' => "True",
|
||||
'B' => "False"
|
||||
}
|
||||
),
|
||||
create_question!(
|
||||
"Which of these countries is not considered a kingdom?",
|
||||
'C',
|
||||
indexmap! {
|
||||
'A' => "Belgium",
|
||||
'B' => "Denmark",
|
||||
'C' => "Monaco",
|
||||
'D' => "Sweden"
|
||||
}
|
||||
),
|
||||
create_question!(
|
||||
"Force is measured in which unit?",
|
||||
'B',
|
||||
indexmap! {
|
||||
'A' => "Kilograms",
|
||||
'B' => "Newtons",
|
||||
'C' => "Joules"
|
||||
}
|
||||
),
|
||||
create_question!(
|
||||
"What does a vulcanologist study?",
|
||||
'A',
|
||||
indexmap! {
|
||||
'A' => "Volcanoes",
|
||||
'B' => "Plants",
|
||||
'C' => "Constellations"
|
||||
}
|
||||
),
|
||||
create_question!(
|
||||
"Energy is measured in which unit?",
|
||||
'C',
|
||||
indexmap! {
|
||||
'A' => "Kilograms",
|
||||
'B' => "Newtons",
|
||||
'C' => "Joules"
|
||||
}
|
||||
),
|
||||
];
|
||||
log(format!("{:#?}", questions));
|
||||
sycamore::render(|| template! {
|
||||
let index = Signal::new(0usize);
|
||||
let current_prompt = create_memo(cloned!((index, questions) => move || {
|
||||
questions[*index.get()].prompt.to_string()
|
||||
}));
|
||||
let current_choices = create_memo(cloned!((index, questions) => move || {
|
||||
questions[*index.get()].choices.clone().into_iter().collect::<Vec<(char, &str)>>()
|
||||
}));
|
||||
|
||||
let answer_question = cloned!((index, questions) => move |e: Event| {
|
||||
let answer = questions[*index.get()].answer;
|
||||
let id = read_js_value!(e.target().unwrap(), "id").unwrap().as_string().unwrap().chars().collect::<Vec<char>>()[0];
|
||||
log(format!("{}", id == answer));
|
||||
});
|
||||
|
||||
sycamore::render(cloned!(answer_question => || view! {
|
||||
div(class="wrapper") {
|
||||
h1(class="text-align-center") { "RiddlRS" }
|
||||
p { "Hello, world!" }
|
||||
div(class="card") {
|
||||
p(class="text-align-center") { (current_prompt.get()) }
|
||||
div(class="text-align-center") {
|
||||
Keyed(KeyedProps {
|
||||
iterable: current_choices,
|
||||
template: move |(c, s)| view! {
|
||||
button(class="fw", id=c, on:click=answer_question.clone()) { (c)") "(s) }
|
||||
},
|
||||
key: |(c, _)| *c
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,4 +7,18 @@
|
|||
|
||||
.text-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card {
|
||||
border: 0.1rem solid #d1d1d1;
|
||||
border-radius: .4rem;
|
||||
padding: .6rem 1.0rem .7rem;
|
||||
margin-bottom: 1.5rem;
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.fw {
|
||||
/* display: block; */
|
||||
width: 100%;
|
||||
}
|
||||
Loading…
Reference in a new issue