Overlap

[demoran23]

In https://hexworks.org/posts/tutorials/2018/12/28/how-to-make-a-roguelike-views-screens-inputs.html, there is some overlap between the sidebar and the log area.

This is exacerbated in https://hexworks.org/posts/tutorials/2019/01/05/how-to-make-a-roguelike-generating-random-caves.html, where there is an additional error. The game world takes up the whole screen, overwriting the sidebar and log area.

This is because

        fun create(worldSize: Size3D = GameConfig.WORLD_SIZE,
                   visibleSize: Size3D = GameConfig.WORLD_SIZE) = Game(WorldBuilder(worldSize)
                .makeCaves()
                .build(visibleSize))

uses the world size for both, and it is set as val WORLD_SIZE = Sizes.create3DSize(WINDOW_WIDTH, WINDOW_HEIGHT, DUNGEON_LEVELS), which takes up the entire window.

Now, when trying to use WINDOW_WIDTH - SIDEBAR_WIDTH (which would seem to make sense), we encounter the same overlap issue with the world. I used

    val WORLD_SIZE = Sizes.create3DSize(
            WINDOW_WIDTH - SIDEBAR_WIDTH,
            WINDOW_HEIGHT - LOG_AREA_HEIGHT,
            DUNGEON_LEVELS)

and

        val logArea = Components.logArea()
                .withTitle("Log") // 1
                .wrapWithBox()  // 2
                .withSize(GameConfig.WINDOW_WIDTH - GameConfig.SIDEBAR_WIDTH - 2, GameConfig.LOG_AREA_HEIGHT - 2)
                .withAlignmentWithin(screen, ComponentAlignment.BOTTOM_RIGHT)  // 3
                .build()

in conjunction to resolve this issue, which reduces the size of the log area so it doesn't overlap with the other two.

The source of this problem, I think, is with the .wrapWithBox method, which appears to increase the overall size of the component rather than eating into its interior (like margin, rather than padding in css).

[adam-arold]

Thanks, @demoran23 ! The tutorial will get a retrofit this year to support the latest version of Zircon and Amethyst. This will also be fixed in the new version.