Added some types

Dominux · May 9, 2023 · ad3c635 · ad3c635
1 parent 3aabbf6
commit ad3c635
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 42 deletions.
diff --git a/index.html b/index.html
@@ -6,38 +6,9 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Approaching tiles</title>
-  <style>
-    :root {
-      --tile-gap: 0.5rem;
-    }
 
-    .playground {
-      display: flex;
-      justify-content: center;
-      gap: var(--tile-gap);
-      cursor: pointer;
-      user-select: none;
-      -webkit-tap-highlight-color: transparent;
-    }
+  <link data-trunk rel="css" href="./styles.css" />
 
-    .tiles_column {
-      display: flex;
-      flex-direction: column;
-      gap: var(--tile-gap);
-    }
-
-    .tile {
-      padding: 0.5rem;
-      font-size: 2rem;
-      background: lightcyan;
-      border: 0.3rem transparent solid;
-      border-radius: 15%;
-    }
-
-    .selected {
-      border-color: orange;
-    }
-  </style>
 </head>
 
 <body>

diff --git a/src/components/Playground.rs b/src/components/Playground.rs
@@ -30,18 +30,20 @@ pub fn Playground(cx: Scope) -> impl IntoView {
 
     let view = view! { cx,
         <h1>{"Score: "}{score}</h1>
-        <div class="playground">
-            {
-                cols.iter()
-                    .map(|(is_add_row, _)| view! {cx,
-                        <TilesColumn
-                            is_add_row=*is_add_row
-                            selected_keys
-                            set_selected_keys
-                            checking_result
-                        />})
-                    .collect::<Vec<_>>()
-            }
+        <div class="playground_wrapper">
+            <div class="playground">
+                {
+                    cols.iter()
+                        .map(|(is_add_row, _)| view! {cx,
+                            <TilesColumn
+                                is_add_row=*is_add_row
+                                selected_keys
+                                set_selected_keys
+                                checking_result
+                            />})
+                        .collect::<Vec<_>>()
+                }
+            </div>
         </div>
     };
 

diff --git a/styles.css b/styles.css
@@ -0,0 +1,38 @@
+:root {
+  --tile-gap: 0.3rem;
+}
+
+.playground_wrapper {
+  margin: 0 auto;
+  padding: 0.2rem 0.5rem;
+  height: 50rem;
+  border: 0.3rem red solid;
+  width: fit-content;
+}
+
+.playground {
+  display: flex;
+  justify-content: center;
+  gap: var(--tile-gap);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.tiles_column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tile-gap);
+}
+
+.tile {
+  padding: 0.5rem;
+  font-size: 2rem;
+  background: lightcyan;
+  border: 0.3rem transparent solid;
+  border-radius: 15%;
+}
+
+.selected {
+  border-color: orange;
+}