Now cards can be flipped

remembers/src/main.rs

@@ -28,18 +28,29 @@ wasm_import_with_ns!(console, log(s: &str));
 fn main() {
     sycamore::render(|ctx| {
         console_error_panic_hook::set_once();
+        
+        let v: &Signal<Vec<u8>> = ctx.create_signal((0..12u8).collect());
 
         let on_click = |event: Event| {
-            let elem = event.target().unwrap().dyn_ref::<Element>().unwrap().clone();
+            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" }
-            div(id="game") {
-                div(class="card", on:click=on_click) {
-                    "Hello, world!"
+            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
                 }
             }
         }

remembers/style.css

@@ -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;
+}