working-but-not-columnwise

src/musicplayer/ui/layout.gleam

@@ -1,5 +1,6 @@
 import gleam/dict
 import gleam/erlang/process.{type Subject}
+import gleam/float
 import gleam/int
 import gleam/list
 import gleam/string
@@ -23,8 +24,6 @@ pub type Section {
 pub type Node {
   Node(
     content: String,
-    x: Int,
-    y: Int,
     width_percent: Int,
     height_percent: Int,
     children: List(Section),
@@ -36,18 +35,11 @@ pub fn new() -> Layout {
     dict.from_list([
       #(
         Root,
-        Node(
-          content: "",
-          x: 1,
-          y: 1,
-          width_percent: 100,
-          height_percent: 100,
-          children: [
+        Node(content: "", width_percent: 100, height_percent: 100, children: [
           // Header,
           // Search,
           PlaybackTime,
-          ],
-        ),
+        ]),
       ),
       // #(
       //   Header,
@@ -58,9 +50,7 @@ pub fn new() -> Layout {
         PlaybackTime,
         Node(
           content: "00:00",
-          x: 1,
-          y: 2,
-          width_percent: 100,
+          width_percent: 50,
           height_percent: 100,
           children: [],
         ),
@@ -101,31 +91,88 @@ pub fn render(logger: Subject(logging_control.Control), layout: Layout) -> Nil {
   |> string.append("layout - render: ", _)
   |> logging.log(logger, _)
 
-  render_loop(layout, layout.width, layout.height, Root)
+  let container_width = int.to_float(layout.width)
+  let container_height = int.to_float(layout.height)
+  let container_top_left_x = 1
+  let container_top_left_y = 1
+
+  render_loop(
+    layout,
+    container_width,
+    container_height,
+    container_top_left_x,
+    container_top_left_y,
+    Root,
+    logger,
+  )
 }
 
 pub fn render_loop(
   layout: Layout,
-  container_width: Int,
-  container_height: Int,
+  container_width: Float,
+  container_height: Float,
+  container_top_left_x: Int,
+  container_top_left_y: Int,
   from: Section,
+  logger: Subject(logging_control.Control),
 ) -> Nil {
+  let margin = 2.0
+
   case dict.get(layout.nodes, from) {
     Error(_) -> Nil
     Ok(node) -> {
       list.each(node.children, fn(child) {
-        let cw = container_width * { node.width_percent / 100 }
-        let ch = container_height * { node.height_percent / 100 }
+        let cw =
+          container_width
+          *. { int.to_float(node.width_percent) /. 100.0 }
+          -. margin
+          |> float.floor
 
-        render_loop(layout, cw, ch, child)
+        let ch =
+          container_height
+          *. { int.to_float(node.height_percent) /. 100.0 }
+          -. margin
+          |> float.floor
+
+        let cx = container_top_left_x + 1
+        let cy = container_top_left_y + 1
+
+        render_loop(layout, cw, ch, cx, cy, child, logger)
       })
 
-      let width = container_width * { node.width_percent / 100 }
-      let height = container_height * { node.height_percent / 100 }
+      logging.log(logger, "section: " <> string.inspect(from))
+      logging.log(
+        logger,
+        "container width: " <> float.to_string(container_width),
+      )
+      logging.log(
+        logger,
+        "container height: " <> float.to_string(container_height),
+      )
 
-      draw_box(node.x, node.y, width, height)
+      let width =
+        container_width
+        *. { int.to_float(node.width_percent) /. int.to_float(100) }
+        |> float.floor
+        |> float.truncate
 
-      internal.print_at(node.content, node.x, node.y)
+      let height =
+        container_height
+        *. { int.to_float(node.height_percent) /. int.to_float(100) }
+        |> float.floor
+        |> float.truncate
+
+      logging.log(logger, "width: " <> int.to_string(width))
+      logging.log(logger, "height: " <> int.to_string(height))
+
+      let cx = container_top_left_x
+      let cy = container_top_left_y
+      logging.log(logger, "cx: " <> int.to_string(cx))
+      logging.log(logger, "cy: " <> int.to_string(cy))
+
+      draw_box(cx, cy, width, height)
+      // Box heading
+      internal.print_at(node.content, cx, cy)
     }
   }
 }