Use Kino.listen throughout

This commit is contained in:
José Valim 2023-03-20 11:23:56 +01:00
parent afd7feac29
commit d880b9a073
2 changed files with 18 additions and 21 deletions

View file

@ -200,7 +200,7 @@ defmodule Livebook.Notebook.Learn do
@group_configs [ @group_configs [
%{ %{
title: "Deep dive into Kino", title: "Interactive notebooks with Kino",
description: description:
"Learn more about the Kino package, including the creation of custom UI components.", "Learn more about the Kino package, including the creation of custom UI components.",
cover_url: "/images/kino.png", cover_url: "/images/kino.png",

View file

@ -260,23 +260,19 @@ the keyboard is disabled (i.e. we get a `:status` event with the
`:enabled` key set to `false`), the stream stops: `:enabled` key set to `false`), the stream stops:
```elixir ```elixir
stream =
keyboard keyboard
|> Kino.Control.stream() |> Kino.Control.stream()
|> Stream.take_while(fn |> Stream.take_while(fn
%{type: :status, enabled: false} -> false %{type: :status, enabled: false} -> false
_event -> true _event -> true
end) end)
|> Kino.listen()
for event <- stream do
IO.inspect(event)
end
``` ```
Once you execute the cell above, it will start consuming Once you execute the cell above, it will start consuming
the event stream. Click on the keyboard icon and watch it the event stream. Click on the keyboard icon from the previous
print keyboard events as you press different keys. When cell and watch it print keyboard events as you press different keys.
you are done, **disable the keyboard control**. Now we know When you are done, **disable the keyboard control**. Now we know
how to capture keyboard events and how they look like, we are how to capture keyboard events and how they look like, we are
ready to implement the paddles. ready to implement the paddles.
@ -376,7 +372,7 @@ disabled:
%{type: :status, enabled: false} -> false %{type: :status, enabled: false} -> false
_event -> true _event -> true
end) end)
|> Enum.reduce(paddle, fn event, paddle -> |> Kino.listen(paddle, fn event, paddle ->
# Build the image # Build the image
image = scene |> Scene.add(paddle) |> Scene.to_svg() |> Kino.Image.new(:svg) image = scene |> Scene.add(paddle) |> Scene.to_svg() |> Kino.Image.new(:svg)
@ -384,9 +380,10 @@ end)
Kino.Frame.render(frame, image) Kino.Frame.render(frame, image)
# Input the event into the paddle and animate it # Input the event into the paddle and animate it
{:cont,
paddle paddle
|> Game.Paddle.on_key(event) |> Game.Paddle.on_key(event)
|> Animation.step(scene) |> Animation.step(scene)}
end) end)
``` ```
@ -749,13 +746,13 @@ game = Game.State.new()
# Every 33ms, paint a new frame until it completes a round # Every 33ms, paint a new frame until it completes a round
Kino.Control.interval(33) Kino.Control.interval(33)
|> Kino.Control.stream() |> Kino.Control.stream()
|> Enum.reduce_while(Game.State.start(game), fn _, game -> |> Kino.listen(Game.State.start(game), fn _, game ->
if game.status == :running do if game.status == :running do
game = Game.State.step(game) game = Game.State.step(game)
Kino.Frame.render(frame, game |> Game.State.to_svg() |> Kino.Image.new(:svg)) Kino.Frame.render(frame, game |> Game.State.to_svg() |> Kino.Image.new(:svg))
{:cont, game} {:cont, game}
else else
{:halt, game} :halt
end end
end) end)
``` ```