Creating the Resource List and Adding Icons

The whole point about the move to React was to make the pages easier to implement, in particular with regards to getting some icons involved. The plan in this post was to create a resource list of the player’s current resources, and then get some images attached to the resource types.

Creating the Component

Firstly I needed to create a component for the resource window. This should be something quite simple; it’s input (props in the React world) consist of the resource store, and I don’t need any more than that (The state is maintained by the MainWindow as that is also reading the messages).

This should be quite simple. For now we’re just going to have a column, with the graphic, the name of the resource and the number we have all in a div. It really is quite simple with React / Kotlin:

/**
 * Render the resource window.
 */
override fun RBuilder.render() {
    div("Resources") {
        for(res in props.resources)
        {
            val image = graphics[res.key] ?: unknownImage

            div("Resources-item")
            {
                img(alt = res.key.name, src = image) {}
                +"${res.key.name}: ${res.value.amount}"
            }
        }
    }
}

Adding the Images

The only thing left here is the actual graphics; this (for now) I’ve added to this object although it’s likely this will be moved to a shared library or another component – it would make sense for me to have an image component that I can use anywhere that shows the graphic for a resource.

So to do this we add a couple of images and create a graphics map:

@JsModule("src/graphics/herb.png")
external val herbImage: dynamic

@JsModule("src/graphics/unknown.png")
external val unknownImage: dynamic

val graphics = mapOf(
    ResourceType.HERB to herbImage
)

And…well, that’s pretty much it. We have now got the graphics items loaded – we only have a herb image for now, everything else uses the default unknown graphic.

Adding the Component to the Main Window

Now we have our delightful resource window component, we can add this into the main window. This was pretty simple:

override fun RBuilder.render()
{
    div("Main-header") {
        h2 {
            +"Witch Main Window"
        }
    }
    p("Main-ticks") {
        +"Current ticks: ${state.player.ticks}."
    }
    resourceWindow(state.player.resources)
}

And hey presto, we get a list appearing at the bottom of the page:

Conclusions and Further work

The list isn’t very pretty yet, but it’s a nice demonstration that we can get Kotlin and React working together. I’m impressed by the simplicity of it so far; I feel like this is really starting to come together after a difficult time getting started.

There’s some obvious flaws here:

• The names are all in capitals
• The numbers and text are aligned at the bottom of the icons
• The icons are not aligned in a column
• We don’t have icons for anything other than herbs (and the herb graphic was thrown together quickly!)
• The order of the icons is wrong

These are things that will be ironed out in the future – most of this sort of thing should be fixable with styling.

There’s also a design issue here, in that the names are potentially redundant as the icon should convey enough information. We should take away the text, and use a tooltip to give details for people that can’t make sense of the icons.

All and all, I’m happy that there’s some real progress here. I’m hoping soon to get to a point where I can put a demonstration version of the game on this site.