0.3.0

Rust-Ninja-Sabi · Rust-Ninja-Sabi · commit 2676f74eb4c6 · 2024-11-24T18:09:21.000+01:00
diff --git a/README.md b/README.md
@@ -95,6 +95,9 @@ https://medium.com/@hebi_73682/fasttea-a-python-developers-quest-for-elegant-web
 **FastTEA: A Python Developer's Quest for Elegant Web Apps - Part 2**
 https://medium.com/@hebi_73682/fasttea-a-python-developers-quest-for-elegant-web-apps-part-2-a25fc77e09c3
 
+**FastTEA: Behind the Scenes - Diving into JavaScript Integration - Part 3**
+https://medium.com/@hebi_73682/fasttea-behind-the-scenes-diving-into-javascript-integration-part-3-90f27d48b424
+
 ### Coming Soon!
 
 We're constantly working to improve fastTEA and add new features. Here's a sneak peek at what's coming:
diff --git a/threejs_htmlbubble.py b/threejs_htmlbubble.py
@@ -8,6 +8,7 @@
 class CubeModel(Model):
     color: str = "#ff0000"  # Default red color
     rotation_speed: float = 1.0  # Default rotation speed
+    first_time: bool = True # First time start
 
 
 # Initialize FastTEA app
@@ -148,22 +149,53 @@ def update(msg: Msg, model: CubeModel) -> tuple[CubeModel, Optional[Cmd]]:
     if msg.action == "changeColor":
         new_model = CubeModel(
             color=msg.value,
-            rotation_speed=model.rotation_speed
+            rotation_speed=model.rotation_speed,
+            first_time=False
         )
         return new_model, Cmd(action="setColor", payload={"color": msg.value})
 
     elif msg.action == "changeSpeed":
         speed = float(msg.value)
         new_model = CubeModel(
             color=model.color,
-            rotation_speed=speed
+            rotation_speed=speed,
+            first_time=False
         )
         return new_model, Cmd(action="setSpeed", payload={"speed": speed})
 
     return model, None
 
 
+
 # View function
+def view_controlls(model: CubeModel) -> Element:
+    # Controls card
+    return card({"id":"view_controlls"}, [
+        div({}, [
+            label({"for": "colorPicker"}, "Cube Color:"),
+            input_({
+                "type": "color",
+                "id": "colorPicker",
+                "value": model.color,
+                "onChange": "changeColor",
+                "hx-target": "#view_controlls"
+            }, [])
+        ]),
+        div({"style": "margin-top: 1rem;"}, [
+            label({"for": "speedSlider"}, f"Rotation Speed ({model.rotation_speed}x):"),
+            input_({
+                "type": "range",
+                "id": "speedSlider",
+                "min": "0",
+                "max": "3",
+                "step": "0.1",
+                "value": str(model.rotation_speed),
+                "onChange": "changeSpeed",
+                "hx-target": "#view_controlls"
+                ""
+            }, [])
+        ])
+    ])
 @app.view
 def view(model: CubeModel) -> Element:
     return container({}, [
@@ -180,33 +212,8 @@ def view(model: CubeModel) -> Element:
                     }, [])
                 ])
             ]),
-            # Controls card
-            card({}, [
-                div({}, [
-                    label({"for": "colorPicker"}, "Cube Color:"),
-                    input_({
-                        "type": "color",
-                        "id": "colorPicker",
-                        "value": model.color,
-                        "onChange": "changeColor"
-                    }, [])
-                ]),
-                div({"style": "margin-top: 1rem;"}, [
-                    label({"for": "speedSlider"}, f"Rotation Speed ({model.rotation_speed}x):"),
-                    input_({
-                        "type": "range",
-                        "id": "speedSlider",
-                        "min": "0",
-                        "max": "3",
-                        "step": "0.1",
-                        "value": str(model.rotation_speed),
-                        "onChange": "changeSpeed"
-                    }, [])
-                ])
-            ])
+            view_controlls(model)
         ])
-    ])
-
-
+    ]) if model.first_time else view_controlls(model)
 
 app.run()
