Feature: Add cursor events for moon stats

src/main.rs

@@ -13,7 +13,8 @@ async fn main() -> std::io::Result<()> {
             .wrap(middleware::Logger::default())
             .service(fs::Files::new("/static", "./static"))
             .service(home::get)
-            .service(game::get)
+            .service(game::get_game)
+            .service(game::get_moon_stats)
             .service(box_change::post)
             .service(router::auth_get)
     })

src/moon/component.rs

@@ -45,3 +45,31 @@ pub fn MoonAppMenu(cx: Scope) -> impl IntoView {
         </div>
     }
 }
+
+
+#[component]
+pub fn MoonRender(cx: Scope) -> impl IntoView {
+    let moon = Moon::new(SystemTime::now());
+    let pos = moon.get_sun_relative_position();
+    view! { cx,
+        <a-entity
+             id="moon-obj"
+             gltf-model="#moon"
+             modify-materials
+             position="0 35 -46.69"
+             rotation="1.21 0 -0.48"
+             scale="0.01 0.01 0.01"
+             hx-get="/game/moon/stats"
+             hx-trigger="mouseenter once"
+             hx-target="#hud"
+             hx-swap="outerHTML"
+        >
+            <a-light
+              type="directional"
+              intensity="4.47"
+              position=move || format!("{} {} {}", pos[0], pos[1], pos[2])
+              target="#moon-obj">
+            </a-light>
+        </a-entity>
+    }
+}

src/router/game.rs

@@ -1,35 +1,30 @@
-use std::time::SystemTime;
 use actix_web::{get, HttpResponse, Responder};
-use leptos::IntoAttribute;
-use moon_phases::moon::Moon;
+use leptos::*;
+use moon_phases::moon::component::MoonRender;
 
 #[get("/game")]
-pub async fn get() -> impl Responder {
-    let moon = Moon::new(SystemTime::now());
-    let pos = moon.get_sun_relative_position();
-    let html = leptos::ssr::render_to_string(|cx| leptos::view! { cx,
-        <a-scene cursor="rayOrigin: mouse">
-          <a-assets>
-            <a-asset-item id="moon" src="/static/moon.glb"></a-asset-item>
-          </a-assets>
+pub async fn get_game() -> impl Responder {
+    let html = ssr::render_to_string(|cx| view! { cx,
+        <a-scene>
+            <a-assets>
+                <a-asset-item id="moon" src="/static/moon.glb"></a-asset-item>
+            </a-assets>
           <a-camera
-              sound="src: url(/static/bobs-adventure-theme.mp3); autoplay: true; loop: true;"
-              light="color: #fff; intensity: .2; type: ambient;"
-          ></a-camera>
-          <a-entity
-             id="moon-obj"
-             gltf-model="#moon"
-             modify-materials
-             position="0 35 -46.69"
-             rotation="1.21 0 -0.48"
-             scale="0.01 0.01 0.01">
-            <a-light
-              type="directional"
-              intensity="4.47"
-              position=move || format!("{} {} {}", pos[0], pos[1], pos[2])
-              target="#moon-obj">
-            </a-light>
-          </a-entity>
+            look-controls
+            sound="src: url(/static/bobs-adventure-theme.mp3); autoplay: true; loop: true;"
+            light="color: #fff; intensity: .2; type: ambient;"
+          >
+            <a-entity id="hud" position="0 0.16 -0.5" scale="0.3 0.3 0.3" opacity="0.8" align="center">
+              <a-text id="counter" value="" align="center"></a-text>
+            </a-entity>
+            <a-entity
+              cursor="fuse: true; fuseTimeout: 500"
+              position="0 0 -3"
+              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
+              material="color: #fff; shader: flat"
+            ></a-entity>
+          </a-camera>
+          <MoonRender />
           <a-entity
            environment="preset: starry; playArea: 1.2; ground: hills; grid: none; lightPosition: -5.12 -0.01 -2.68;"
           ></a-entity>
@@ -40,18 +35,40 @@ pub async fn get() -> impl Responder {
         .body(html)
 }
 
+#[get("/game/moon/stats")]
+pub async fn get_moon_stats() -> impl Responder {
+    let html = ssr::render_to_string(|cx| view! { cx,
+         <a-entity id="hud" position="0 0.16 -0.5" scale="0.3 0.3 0.3" opacity="0.8" align="center">
+            <a-text id="counter" value="Good" align="center"></a-text>
+         </a-entity>
+    });
+    HttpResponse::Ok()
+        .content_type("text/html; charset=utf-8")
+        .body(html)
+}
+
 #[cfg(test)]
 mod game_route_tests {
-    use super::get;
+    use super::*;
     use actix_web::{App, test};
 
     #[actix_web::test]
     async fn it_has_ok_status() {
-        let mut app = test::init_service(App::new().service(get)).await;
+        let mut app = test::init_service(App::new().service(get_game)).await;
         let req = test::TestRequest::get().uri("/game").to_request();
         let resp = test::call_service(&mut app, req).await;
 
         assert!(resp.status().is_success());
         assert_eq!(resp.status(), 200);
     }
+
+    #[actix_web::test]
+    async fn stats_has_ok_status() {
+        let mut app = test::init_service(App::new().service(get_moon_stats)).await;
+        let req = test::TestRequest::get().uri("/game/moon/stats").to_request();
+        let resp = test::call_service(&mut app, req).await;
+
+        assert!(resp.status().is_success());
+        assert_eq!(resp.status(), 200);
+    }
 }

static/output.css

@@ -615,6 +615,12 @@ video {
   text-decoration-line: underline;
 }
 
+.ring {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
 @media (prefers-color-scheme: dark) {
   .dark\:flex {
     display: flex;