working-but-not-columnwise

src/musicplayer/ui/layout.gleam

@@ -1,10 +1,9 @@
 import gleam/dict
-import gleam/erlang/process.{type Subject}
+import gleam/float
 import gleam/int
 import gleam/list
 import gleam/string
 
-import musicplayer/logging/control as logging_control
 import musicplayer/logging/logging
 import musicplayer/ui/internal
 
@@ -23,8 +22,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 +33,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 +48,7 @@ pub fn new() -> Layout {
         PlaybackTime,
         Node(
           content: "00:00",
-          x: 1,
-          y: 2,
-          width_percent: 100,
+          width_percent: 50,
           height_percent: 100,
           children: [],
         ),
@@ -93,39 +81,86 @@ pub fn update_dimensions(layout: Layout, width: Int, height: Int) -> Layout {
   Layout(..layout, width:, height:)
 }
 
-pub fn render(logger: Subject(logging_control.Control), layout: Layout) -> Nil {
+pub fn render(layout: Layout) -> Nil {
   internal.clear_screen()
   [layout.width, layout.height]
   |> list.map(int.to_string)
   |> string.join(" ")
   |> string.append("layout - render: ", _)
-  |> logging.log(logger, _)
+  |> logging.log
 
-  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,
+  )
 }
 
 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,
 ) -> 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)
       })
 
-      let width = container_width * { node.width_percent / 100 }
-      let height = container_height * { node.height_percent / 100 }
+      logging.log("section: " <> string.inspect(from))
+      logging.log("container width: " <> float.to_string(container_width))
+      logging.log("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) /. 100.0 }
+        |> float.floor
+        |> float.truncate
 
-      internal.print_at(node.content, node.x, node.y)
+      let height =
+        container_height *. { int.to_float(node.height_percent) /. 100.0 }
+        |> float.floor
+        |> float.truncate
+
+      logging.log("width: " <> int.to_string(width))
+      logging.log("height: " <> int.to_string(height))
+
+      let cx = container_top_left_x
+      let cy = container_top_left_y
+      logging.log("cx: " <> int.to_string(cx))
+      logging.log("cy: " <> int.to_string(cy))
+
+      draw_box(cx, cy, width, height)
+      // Box heading
+      internal.print_at(node.content, cx, cy)
     }
   }
 }

src/musicplayer/ui/ui.gleam

@@ -38,7 +38,7 @@ pub fn new() -> Result(Subject(Control), String) {
         internal.clear_screen()
         internal.hide_cursor()
 
-        redraw_loop(logger, redraw)
+        redraw_loop(redraw)
       })
 
       Ok(ui)
@@ -85,14 +85,11 @@ fn handle_message(
   }
 }
 
-fn redraw_loop(
-  logger: Subject(logging_control.Control),
-  redraw: Subject(Layout),
-) -> Nil {
+fn redraw_loop(redraw: Subject(Layout)) -> Nil {
   process.receive_forever(redraw)
-  |> layout.render(logger, _)
+  |> layout.render
 
-  redraw_loop(logger, redraw)
+  redraw_loop(redraw)
 }
 
 fn update_dimensions_on_interval(ui: Subject(Control), interval_ms: Int) {