Settings menu (not functional)

src/app.rs

@@ -1,3 +1,5 @@
+#[warn(unused_assignments)]
+
 // use serde_wasm_bindgen::to_value;
 use wasm_bindgen::prelude::*;
 // use wasm_bindgen_futures::spawn_local;
@@ -19,7 +21,8 @@ extern "C" {
 pub enum Msg {
     Discover{ cell: Cell },
     Flag{ cell: Cell },
-    Reset
+    Reset, 
+    ToggleSettings
 }
 
 pub struct App {
@@ -27,7 +30,8 @@ pub struct App {
     game: Game,
     height: usize,
     width: usize,
-    num_mines: usize
+    num_mines: usize,
+    show_settings: bool
 }
 
 impl Component for App {
@@ -36,8 +40,8 @@ impl Component for App {
     type Properties = ();
 
     fn create(ctx: &Context<Self>) -> Self {
-        let height = 30;
+        let height = 10;
-        let width = 30;
+        let width = 10;
         let num_mines =(height * width / 10) as usize;
 
         let mut game = Game::new(height, width, 5);
@@ -48,12 +52,19 @@ impl Component for App {
             game,
             height,
             width,
-            num_mines
+            num_mines,
+            show_settings: false
         }
     }
 
     fn view(&self, _ctx: &Context<Self>) -> Html {
         let b = self.game.get_board().clone();
+        let mut style = String::new();
+        if !self.show_settings {
+            style = format!("height: 0px; transition: height 1s;");
+        } else {
+            style = format!("height: 98px; transition: height 1s");
+        }
         html!{
             <main class="container">
                 // Disable context menu
@@ -62,16 +73,60 @@ impl Component for App {
                 </script>
                 
                 <div class="upper-menu">
+                    <div class="menu-buttons">
                         <button class="button-reset" 
-                        onclick={self.link.callback(|_| Msg::Reset)}>{"Reset"}</button>
+                            onclick={self.link.callback(|_| Msg::Reset)}>
+                            {"Reset"}
+                        </button>
+                        <div class="time">
+                            {"00:00"}
+                        </div>
+                        <button 
+                            id="open-settings" 
+                            class="open-settings"
+                            onclick={self.link.callback(|_| Msg::ToggleSettings)}>
+                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-settings-filled" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                <path d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z" stroke-width="0" fill="#ffffff"></path>
+                            </svg>
+                        </button>
+                    </div>
+
+                    <div style={style} class="settings">
+                        <div class="custom-settings">
+                            <div class="setting">
+                                {"Height  "}
+                                <input class="text-input" id="height-input" type="text" value="10"/>
+                            </div>
+                            // <br/>
+                            <div class="setting">
+                                {"Width  "}
+                                <input class="text-input" id="width-input" type="text" value="10"/>
+                            </div>
+                            // <br/>
+                            <div class="setting">
+                                {"Mines  "}
+                                <input class="text-input" id="mines-input" type="text" value="10"/>
+                            </div>
+                        </div>
+                        <div class="preset-settings">
+                            <button class="preset-setting">{"Easy"}</button>
+                            <button class="preset-setting">{"Normal"}</button>
+                            <button class="preset-setting">{"Hard"}</button>
+                        </div>
+                    </div>
+
+                    // if self.show_settings {
+                    // }
+
                 </div>
 
                 <div class="game">
-                </div>
                     <BoardComponent 
                         onsignal={self.link.callback(|cell| Msg::Discover{cell})} 
                         flagsignal={self.link.callback(|cell| Msg::Flag{cell})} 
                         board={b}/>
+                </div>
             </main>
         }
     }
@@ -88,6 +143,9 @@ impl Component for App {
                 self.game = Game::new(self.height, self.width, self.num_mines);
                 self.game.start_board();
             }
+            Msg::ToggleSettings => {
+                self.show_settings = !self.show_settings;
+            }
         }
         true
     }

styles.css

@@ -9,6 +9,7 @@
   height: 100%;
   display: flex;
   justify-content: center;
+  font-size: 25px;
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -30,25 +31,49 @@ button {
   text-align: center;
   border-radius: 8px;
   border: 1px solid transparent;
+  margin: 2px;
 }
 
 .upper-menu {
   display: flex;
-  justify-content: left;
+  flex-direction: column;
+  justify-content: center;
+  font-size: 25px;
+  font-weight: 700;
+}
+
+.menu-buttons {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: #2f2f2f;
+}
+
+.time {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #ffffff;
+  font-size: 25px;
 }
 
 .game {
+  position: relative;
+  z-index: 1;
   display: flex;
   justify-content: center;
+  background-color: #2f2f2f;
 }
 
 .button-reset {
   height: 50px;
-  width: 100px;
+  width: 104px;
   margin: 2px;
   font-size: 25px;
+  font-weight: 700;
   background-color: #0f0f0f98;
   color: #ffffff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
 }
@@ -59,6 +84,86 @@ button {
   -webkit-transition: background-color 0.5s;
 }
 
+.open-settings {
+  height: 50px;
+  width: 104px;
+  margin: 2px;
+  font-size: 25px;
+  font-weight: 700;
+  background-color: #0f0f0f98;
+  color: #ffffff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  transition: background-color 0.5s;
+  -webkit-transition: background-color 0.5s;
+}
+
+.open-settings:hover {
+  background-color: #262626;
+  transition: background-color 0.5s;
+  -webkit-transition: background-color 0.5s;
+}
+
+.settings {
+  display: flex;
+  flex-direction: column;
+  /* justify-content: space-between; */
+  position: relative;
+  height: 0px;
+  color: #ffffff;
+  transition: height 1s;
+  -webkit-transition: height 1s;
+}
+
+.custom-settings {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.preset-settings {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-evenly;
+}
+
+.setting {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 2px;
+}
+
+.preset-setting {
+  /* height: 25px; */
+  margin: 2px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  background-color: #0f0f0f98;
+  color: #ffffff;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+  font-size: 25px;
+  font-weight: 700;
+  padding: 5px;
+  transition: background-color 0.5s;
+  -webkit-transition: background-color 0.5s;
+}
+.preset-setting:hover {
+  background-color: #262626;
+  transition: background-color 0.5s;
+  -webkit-transition: background-color 0.5s;
+}
+
+.text-input {
+  width: 50px;
+  font-size: 25px;
+  margin: 2px;
+  margin-left: 10px;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  text-align: center;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
 .button-hidden {
   font-size: 25px;
   color: rgba(15, 15, 15, 0.0);
@@ -66,7 +171,6 @@ button {
   box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
   height: 50px;
   width: 50px;
-  margin: 2px;
   transition: background-color 0.5s;
   -webkit-transition: background-color 0.5s;
 }
@@ -78,7 +182,7 @@ button {
   background-color: #2f2f2f;
   height: 50px;
   width: 50px;
-  margin: 2px;
+
 }
 
 .button-hidden:hover {