feat: ✨ coin flip

feat: ✨ button trigger

back/Cargo.toml

@@ -7,6 +7,7 @@ edition = "2021"
 
 [dependencies]
 axum = "0.7.4"
+rand = "0.8.5"
 serde = { version = "1.0.197", features = ["derive"] }
 serde_json = "1.0.114"
 tokio = { version = "1.36.0", features = ["full"] }

back/src/routing.rs

@@ -1,20 +1,35 @@
 use crate::AppState;
 use axum::{extract::State, http::StatusCode, response::IntoResponse, routing::get, Json, Router};
 use tower_http::cors::CorsLayer;
+use rand::prelude::*;
 
 
-pub async fn routing(State(state): State<AppState>) -> Router{
+pub async fn routing(State(state): State<AppState>) -> Router {
     Router::new()
     .route("/", get(alive))
+    .route("/coin", get(flip_coin))
     .layer(CorsLayer::permissive())
     .with_state(state.clone())
 }
 
-async fn alive() -> impl IntoResponse{
+async fn alive() -> impl IntoResponse {
     let alive_json = serde_json::json!({
         "status":"Alive",
     });
     println!("Alive");
     (StatusCode::OK, Json(alive_json))
-    
+}
+
+async fn flip_coin() -> impl IntoResponse {
+    let mut rng = rand::thread_rng();
+    let random:f64 = rng.gen();
+    let mut flip_status:String = "Tail".to_string();
+    if random > 0.5 {
+        flip_status = "Head".to_string();
+    }
+    let coin_json = serde_json::json!({
+        "status":flip_status,
+    });
+    println!("Coin Flip");
+    (StatusCode::OK, Json(coin_json))
 }

front/src/main.rs

@@ -20,37 +20,13 @@ async fn server_status_check() ->Result<ServerStatus, reqwest::Error> {
     Ok(reqwest::get(SERVER_ADDRESS).await.unwrap().json::<ServerStatus>().await.unwrap())
 }
 async fn coin_status_check() -> Result<CoinStatus, reqwest::Error> {
-    Ok(reqwest::get(SERVER_ADDRESS).await.unwrap().json::<CoinStatus>().await.unwrap())
+    Ok(reqwest::get(format!("{}{}", SERVER_ADDRESS, "/coin")).await.unwrap().json::<CoinStatus>().await.unwrap())
 }
-
 fn app() -> Element {
-    let server_status = use_resource(move || server_status_check());
+    rsx! {
-    match &*server_status.value().read() {
+        { page_base() }
-        Some(Ok(server_status)) => {
+        { coin_status_renderer() }
-            rsx! {
+        { server_status_renderer() }
-                { page_base() }
-                h5 {
-                    ShowServerStatus { server_status: server_status.clone() }
-                }
-            }
-            
-        }
-        Some(Err(_)) => {
-            rsx! {
-                { page_base() }
-                div {
-                    "A"
-                }
-            }
-        }
-        None => {
-            rsx! {
-                { page_base() }
-                h5 {
-                    "Server Status: Dead"
-                }
-            }
-        }
     }
 }
 
@@ -63,19 +39,71 @@ fn page_base() ->Element {
             div {
                 class: "flex items-center",
                 span {
-                    button { 
-                        "style":"width: 70px; height: 40px;",
-                        "Coin Flip"
-                    }
                 }
-                span { "   " },
-                span {  }
             }
             
         }
     }
 }
 
+fn server_status_renderer() -> Element {
+    let server_status = use_resource(move || server_status_check());
+    match &*server_status.value().read() {
+        Some(Ok(server_status)) => {
+            rsx! {
+                h5 {
+                    ShowServerStatus { server_status: server_status.clone() }
+                }
+            }
+            
+        }
+        Some(Err(err_val)) => {
+            rsx! {
+                h5 {
+                    "Server Status: "
+                    { err_val.to_string() }
+                }
+            }
+        }
+        None => {
+            rsx! {
+                h5 {
+                    "Server Status: Dead"
+                }
+            }
+        }
+    }
+}
+fn coin_status_renderer() -> Element {
+    let mut coin_response = use_resource(move || coin_status_check());
+    match &*coin_response.value().read() {
+        Some(Ok(coin_status)) => {
+            rsx! {
+                button { 
+                    onclick: move |_| coin_response.restart(),
+                    "style":"width: 70px; height: 40px;",
+                    "Coin Flip"
+                }
+                ShowCoinStatus{ coin_status: coin_status.clone() }
+            }
+        }
+        Some(Err(err_val)) => {
+            rsx! {
+                div {
+                    "Coin Status: "
+                    { err_val.to_string() }
+                }
+            }
+        }
+        None => {
+            rsx! {
+                div {
+                    "Coin Status: None"
+                }
+            }
+        }
+    }
+}
 #[component]
 fn ShowServerStatus(server_status: ServerStatus) -> Element {
     rsx! {