Add in write up of border collapse.

public/posts/2024-03-20.md

@@ -1313,4 +1313,140 @@ end
 ```
 
 ![alt text](
-https://corofides.github.io/images/2024-03-25_21.30.10.png "A list of views")
+https://corofides.github.io/images/2024-03-25_21.30.10.png "A list of views")
+
+We finally have a list of views displaying. Each child is positioned correctly within the parent view.
+
+We can improve upon this a bit though. As you may have noticed one of the views is currently not as wide as the others, 
+this is correct behaviour but doesn't look very good. The other non-issue is our borders are doubling now we could fix 
+this with our border properties and margins but implementing borderCollapse might be fun.
+
+I think I'll start with the second point.
+
+Let's add a borderCollapse property to our default parameters table and set it to false.
+
+```lua
+function View:init(content, params)
+
+    self._defaultParams = {
+        borderTopWidth = 0,
+        borderBottomWidth = 0,
+        borderLeftWidth = 0,
+        borderRightWidth = 0,
+        borderCollapse = false,
+        paddingTop = 0,
+        paddingLeft = 0,
+        paddingBottom = 0,
+        paddingRight = 0,
+        marginTop = 0,
+        marginLeft = 0,
+        marginBottom = 0,
+        marginRight = 0,
+        top = 0,
+        left = 0,
+        color = gfx.kColorBlack,
+    }
+
+    self.params = self:inflateParams(params);
+    self.content = content;
+
+end
+```
+
+Next we'll go to our main lua file and add the borderCollapse property to the parent view with a value of true.
+
+```lua
+local view = View(childViewArray, {
+   left = 1,
+   top = 1,
+   borderCollapse = true,
+   borderTopWidth = 2,
+   borderBottomWidth = 2,
+   borderLeftWidth = 2,
+   borderRightWidth = 2,
+   paddingLeft = 10,
+   paddingRight = 10,
+   paddingTop = 10,
+   paddingBottom = 10,
+})
+view:drawView()
+```
+
+In our View class I'm going to define a new method called getBorderCollapseOffset which will take a direction, and a key;
+the position we are in our array of children. (Direction is so we can make horizontal lists later and I just thought we'd
+sort that now.)
+
+```lua
+function View:getBorderCollapseOffset(direction, key)
+
+    if (not self.params.borderCollapse) then
+        return 0
+    end
+
+    if (key == #self.content) then
+        return 0
+    end
+
+    local currentBorderProperty = "borderBottomWidth"
+    local nextBorderProperty = "borderTopWidth"
+
+    if (direction == "horizontal") then
+        currentBorderProperty = "borderRightWidth"
+        nextBorderProperty = "borderLeftWidth"
+    end
+
+    local nextChildTopBorderWidth = self.content[key].params[nextBorderProperty]
+    local smallestBorderWidth = self.params[currentBorderProperty]
+
+    if (nextChildTopBorderWidth < smallestBorderWidth) then
+        smallestBorderWidth = nextChildTopBorderWidth
+    end
+
+    return smallestBorderWidth
+
+end
+```
+
+Okay, so explaining this function. The purpose of this is to get the amount we need to offset each child to collapse the
+border - I may need to revisit this as I'm not sure how border collapse works with margins in CSS and I'd like it to be 
+similar here but currently I'm just offsetting the view and still drawing the border so it wouldn't work if we added 
+margins to this.
+
+To begin with we check if the borderCollapseProperty is set, return 0 if not and we also check if the key is the last item
+in the array since we'd never have to collapse that border. Okay, bor we have the currentBorderProperty and nextBorderProperty,
+this is to allow us to address the appropriate property if we are going from top to bottom, vertically we'd want to check
+the bottom border against the top, if horizontally we'd check the right border against the left.
+
+After this we just need to get the smallest of the two borders and return that.
+
+In our drawArrayOfViews function after we set the new y position we then subtract whatever is returned from this function.
+
+```lua
+function View:drawArrayOfViews(contentPositionLeft, contentPositionTop)
+
+    local positionX = self.params.left + self.params.borderLeftWidth + self.params.paddingLeft;
+    local positionY = self.params.top + self.params.borderTopWidth + self.params.paddingTop;
+
+    for key, value in pairs(self.content) do
+
+        value:setParam("top", positionY)
+        value:setParam("left", positionX)
+
+        value:drawView()
+
+        positionY = positionY + value:getOuterHeight()
+        positionY = positionY - self:getBorderCollapseOffset("vertical", key);
+
+    end
+
+end
+```
+
+Now we get nice collapsed borders in our list.
+
+![alt text](
+https://corofides.github.io/images/2024-03-26_21.02.24.png "A list of views")
+
+This should also work if the list was running left to right if it doesn't that can be a future me issue.
+
+