basic buttons

jayshrivastava · Apr 4, 2024 · 0fc37f9 · 0fc37f9
1 parent 8060739
commit 0fc37f9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 12 deletions.
diff --git a/src/main.rs b/src/main.rs
@@ -155,10 +155,11 @@ fn App() -> impl IntoView {
                 </For>
             </div>
             <div class=styles::arrow_container>
-            <div class=styles::arrow_button> "◀️"</div>
-            <div class=styles::arrow_button> "🔽" </div>
-            <div class=styles::arrow_button> "⏬" </div>
-            <div class=styles::arrow_button> "▶️" </div>
+            <button class=styles::arrow_button on:click=move |_| { handle_key_press(KEY_A); }> "<"</button>
+            <button class=styles::arrow_button on:click=move |_| { handle_key_press(KEY_S); }> "."</button>
+            <button class=styles::arrow_button on:click=move |_| { handle_key_press(KEY_W); }> "^"</button>
+            <button class=styles::arrow_button on:click=move |_| { handle_key_press(KEY_D); }> ">"</button>
+
             </div>
         </div>
     }

diff --git a/src/styles.module.scss b/src/styles.module.scss
@@ -47,16 +47,17 @@ body {
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
-  width: 150px;
+  width: 170px;
 
   display: grid;
   grid-template-columns: repeat(4, 25px);
-  gap: 15px;
+  gap: 20px;
 }
 
 .arrow-button{
   text-align: center;
-  width: 25px;
-  height: 25px;
+  width: 35px;
+  height: 35px;
   font-size: 25px;
+  padding: 0;
 }
diff --git a/styles/bundled.scss b/styles/bundled.scss
@@ -47,16 +47,17 @@ body {
   margin-top: 10px;
   margin-left: auto;
   margin-right: auto;
-  width: 150px;
+  width: 170px;
 
   display: grid;
   grid-template-columns: repeat(4, 25px);
-  gap: 15px;
+  gap: 20px;
 }
 
 .arrow-button-94e563a{
   text-align: center;
-  width: 25px;
-  height: 25px;
+  width: 35px;
+  height: 35px;
   font-size: 25px;
+  padding: 0;
 }