Add Kino.Controls for user interactions

[jonatanklosko]

For the Livebook counterpart see livebook-dev/livebook#710.

Introduces UI controls that allow the user to feed events into any process that subscribes. I built a multiplayer Pong as a driving showcase, but we already have some cooler things in mind 😸

Basic usage

pong_events.mp4

Notebook preview

pong_notebook.mp4

The game

pong.mp4

[jonatanklosko]

Here is the current notebook. I think that's something we could have in the Explore section.

[josevalim]

This is absolutely amazing!

My only comment for now is, instead of having a control with different kinds of inputs, we should have different controls and find a mechanism for rendering multiple elements in the same frame. Perhaps it could be as simple as allowing a list in frame? Some elements could be inline-block by default and others block, which means they also get nicely formatted.

[jonatanklosko]

I split it into individual controls and implemented subscription for controls and inputs. There is still a number of things, like anonymous functions and un-sync, but I've just pushed the changes, so let me know what you think of the API.

In particular I made it so that the event name is specified when subscribing, like Kino.Control.subscribe(button, :hello), while previously it would be a part of the button. The primary reason is that otherwise we would need to pass event name when creating inputs for consistency, which feels backwards and in many cases unnecessary.

controls_inputs.mp4

[jonatanklosko]

I've updated the Pong notebook to match the new design.

[josevalim]

Let's add a test for this to make sure it is triggered. Something like this should trigger it:

Kino.start_child({Task, fn -> Kino.start_child({Task, fn -> :ok end}) end})

[jonatanklosko]

Good call! We need the assertion in the inner call, so I made the test wait for the outer process to terminate, let me know if there's any better way :)

[josevalim]

I just dropped one comment, plus the changes we discussed in Slack, then we are good to go!