karx/rgl
1
1
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: karx:1cead6f1af4763d849bf4727c4613c5176e7e77c
Branches Tags
karx:master
...
compare: karx:555108ff8fb6699652ddc612cd87ca552f829a35
Branches Tags
karx:master

3 commits
1cead6f1af ... 555108ff8f

Author SHA1 Message Date
Yash Karandikar 555108ff8f
Rustfmt 2022-03-20 19:30:51 -05:00
Yash Karandikar 26c96f4341
Now cards can be flipped 2022-03-20 19:19:01 -05:00
Yash Karandikar 6a8a1ef107
dyn_ref to the rescue 2022-03-20 18:31:30 -05:00
4 changed files with 99 additions and 41 deletions
Show stats Expand all files Collapse all files

2
remembers/index.html
View file

@ -7,7 +7,7 @@
<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">
<link rel="css" data-trunk href="style.css">
<link rel="inline" data-trunk href="script.js">
<!-- <link rel="inline" data-trunk href="script.js"> -->
</head>
<body></body>
</html>

10
remembers/script.js
View file

@ -1,10 +0,0 @@
function toggle_cards() {
console.log("toggle_cards() called");
const cards = document.querySelectorAll(".card");
function flipCard() {
this.classList.toggle("flip");
}
cards.forEach(card => card.addEventListener("click", flipCard));
}

64
remembers/src/main.rs
View file

@ -1,5 +1,6 @@
use sycamore::prelude::*;
use wasm_bindgen::prelude::*;
use wasm_bindgen::{prelude::*, JsCast};
use web_sys::{Element, Event};
macro_rules! wasm_import {
($($tt:tt)*) => {
@ -9,6 +10,9 @@ macro_rules! wasm_import {
pub fn $($tt)*;
}
};
}
macro_rules! wasm_import_with_ns {
($ns: ident, $($tt:tt)*) => {
#[wasm_bindgen]
extern "C" {
@ -16,45 +20,45 @@ macro_rules! wasm_import {
pub fn $($tt)*;
}
};
($name: ident, $($tt:tt)*) => {
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_name = $name)]
pub fn $($tt)*;
}
};
($name:ident, $ns: ident, $($tt:tt)*) => {
#[wasm_bindgen]
extern "C" {
#[wasm_bindgen(js_name = $name, js_namespace = $ns)]
pub fn $($tt)*;
}
};
}
wasm_import!(toggle_cards());
wasm_import_with_ns!(console, log(s: &str));
fn main() {
sycamore::render(|ctx| {
console_error_panic_hook::set_once();
let first_render = ctx.create_signal(true);
ctx.create_effect(|| {
if !*first_render.get() {
toggle_cards();
}
first_render.set(false);
println!("{}", first_render.get());
});
let v: &Signal<Vec<u8>> = ctx.create_signal((0..12u8).collect());
view! {ctx,
div(class="wrapper") {
h1(class="text-align-center") { "RemembeRS" }
div(id="game") {
div(class="card") {
"Hello, world!"
let on_click = |event: Event| {
let elem = event
.current_target()
.unwrap()
.dyn_ref::<Element>()
.unwrap()
.clone();
elem.class_list().toggle("flip").unwrap();
};
view! {ctx,
div(class="wrapper") {
h1(class="text-align-center") { "RemembeRS" }
section(id="game") {
Keyed {
iterable: v,
view: move |ctx, i| view! {ctx,
div(class="card", on:click=on_click) {
h2(class="back-face") {
(i)
}
div(class="front-face")
}
},
key: |x| *x
}
}
}
}
}});
});
}

64
remembers/style.css
View file

@ -9,3 +9,67 @@
text-align: center;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
}
#game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.card {
width: calc(25% - 10px); /* minus 10px for the margin */
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
/* border: 1px #606c76 solid; */
border: 1px black solid;
border-radius: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .3);
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
}
.card:active {
transform: scale(0.97);
transition: transform .2s;
}
.card.flip {
transform: rotateY(180deg);
}
.back-face, .front-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.front-face {
background-color: #9b4dca;
}
.back-face {
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
}