components work a lot better now

haaase · Sep 15, 2023 · c93fca6 · c93fca6
1 parent 6f59d80
commit c93fca6
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 36 deletions.
diff --git a/src/main/scala/uicomponents.scala b/src/main/scala/uicomponents.scala
@@ -5,27 +5,48 @@ import miniscribe.data.{Force, Hero}
 import scalatags.JsDom._
 import scalatags.JsDom.all._
 import org.scalajs.dom.HTMLDivElement
+import rescala.extra.Tags._
 
 trait UIComponent:
   def render: HtmlTag
 
-case object ForceComponent:
-  val toggle = Evt[String]()
-  // todo manage component state here:
+case class ArmyComponent(forces: Signal[Seq[Force]]) extends UIComponent:
+  // Maintain map of reactive sub components. Right now they are not deleted, just hidden when the
+  // respective force disappears.
+  val ForceComponents: Signal[Map[Force, ForceComponent]] =
+    forces.changed.fold(forces.now.map(f => (f, ForceComponent(f))).toMap)(
+      (current, forces) => {
+        val newForces = forces.filter(!current.keySet.contains(_))
+        current ++ newForces.map(f => (f, ForceComponent(f)))
+      }
+    )
+
+  def render: HtmlTag =
+    div(
+      `class` := "army-overview",
+      Signal {
+        forces().map(ForceComponents()(_).render)
+      }.asModifierL
+    )
 
-case class ForceComponent(force: Force, toggled: Boolean = false)
+case class ForceComponent(force: Force, startToggled: Boolean = false)
     extends UIComponent:
-  def render: HtmlTag = div(
-    h2(force.name),
+  val toggled: Var[Boolean] = Var(false)
+  def render: HtmlTag =
     div(
-      a(
-        s"${if this.toggled then "▼" else "▶"} manage",
-        onclick := { () => ForceComponent.toggle.fire(force.name) }
-      ),
-      " | ",
-      a(
-        "delete",
-        onclick := { () => miniscribe.ForceEvents.delete.fire(force.name) }
+      `class` := "force",
+      h2(force.name),
+      div(
+        a(
+          Signal {
+            span(s"${if toggled() then "▼" else "▶"} manage")
+          }.asModifier,
+          onclick := { () => toggled.transform(!_) }
+        ),
+        " | ",
+        a(
+          "delete",
+          onclick := { () => miniscribe.ForceEvents.delete.fire(force.name) }
+        )
       )
     )
-  )
diff --git a/src/main/scala/view.scala b/src/main/scala/view.scala
@@ -37,11 +37,13 @@ class toggleMenu(label: String, content: Signal[TypedTag[Element]]):
     println(s"visible of $label changed. Is now ${visible.now}")
   )
   val show = Signal {
-    Seq(
-      toggleButton.data,
-      div(
-        display := (if this.visible() then "inherit" else "none"),
-        content()
+    span(
+      Seq(
+        toggleButton.data,
+        div(
+          display := (if this.visible() then "inherit" else "none"),
+          content()
+        )
       )
     )
   }
@@ -109,20 +111,6 @@ class View(controller: Controller):
   def getContent(): HtmlTag =
     body(
       h1(title.asModifier),
-      Signal.dynamic {
-        div(
-          controller
-            .state()
-            .forces
-            .map(f =>
-              val x =
-                new toggleMenu(
-                  s"${f.name}",
-                  Signal.dynamic { div(s"TODO ${f.name}") }
-                )
-              div(f.toHTML, x.show())
-            ),
-          forcesMenu.show()
-        )
-      }.asModifier
+      ArmyComponent(appState.map(_.forces)).render,
+      forcesMenu.show.asModifier
     )