Control lights in Home Assistant from within a 2D Browser Game

A friend of mine and I talked about the idea to control lights in Home Assistant from within a 2D browser game for a while. I used the bad weather over the weekend and I finally took some time to create a proof of concept.

The idea

During the last year we've seen a lot of new ways to meet online. One are conferencing tools in form of a 2D browser game. They allow the user to navigate an avatar through a world and talk with other participants they meet on the way. In my opinion it's a nice way to create more natural conversations at social online events.

A recent example is GoogleIO Adventure which was created for Googles virtual IO conference. Another example is the virtual office we created in January and which is also used for the Home Assistant Munich Meetup.

While creating and trying out the map we wondered if we could control smart lights from within a game.

Short answer: Yes, that's possible! 😃

Take a look at the final result:

On the left you see the game. The player is controlled using the arrow keys, as soon as he reaches a lamp the "real life" light is toggled. So if it is on it turns off and vice versa. You see the real lights on the right in the Home Assistant view. It visualizes the current state of the lights in my flat. So if a light turns on there, it also turned on in my flat.

Three steps were necessary to reach this solution:

1. Create the map

I created the simple test map using Tiled. It is a map editor to create maps based on tilesets. It also allows to create objects, which later can be used in our browser game and help us identify the light we want to turn on or off. After creating the map we save it as json so we can import it later in our game.

2. Create the game

The biggest part for me was creating the game. I chose Phaser as my game framework. It offers a lot of tutorials and examples how to create games in the browser. I struggeld a little bit because a lot of the content in the forums or questions sites are for older versions of Phaser and not the current version 3. But after I realised that I worked a lot more with the API documentation directly and took more care looking which version the blog entry or example targeted.

So at the moment I have a solution which loads the Tiled map, creates a player on the start area, creates invisible collision rectangles for the given lights and triggers an action when the player overlaps a lamp.

3. Use Home Assistant REST API to toggle light

The final step was to toggle a light via the REST API of Home Assistant. That was quite easy. The api is documented very well.

All I needed to do was to activate the api and add localhost to the allowed cors headers. After that I created a Long-Lived Access Token in my profile (http://homeassistant.local:8123/profile) which then can be used in the request. To toggle a light it only needs one request:

function toggleLight(entity_id) {
    fetch(homeAssistantConfig.home_assistant_url + "/api/services/light/toggle", {
        method: 'POST',
        headers: {
            'Authorization': 'Bearer ' + homeAssistantConfig.home_assistant_auth_bearer,
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ "entity_id": entity_id })
    })
    ...
}

If you are interested in the code or want to try it out yourself you can find the project on github: https://github.com/svendroid/homegame

Ideas for future

For the future I want to clean up the code and structure it better. Also I want to expand the proof of concept and wrap it inside an Addon which would make the configuration more convenient and allow anybody to easily play arround with own custom maps. Another idea is to create a Poltergeist game which allows the player to navigate a ghost through the house which lets every light flicker which is passed. I think it could be a fun demo at a Meetup or other events.

Do you have feedback? Or any fun ideas I could do based on this project?

Feel free to reach me on Twitter