mirror of
https://github.com/livebook-dev/livebook.git
synced 2025-09-10 23:14:35 +08:00
Use Kino.listen throughout
This commit is contained in:
parent
afd7feac29
commit
d880b9a073
2 changed files with 18 additions and 21 deletions
|
@ -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",
|
||||||
|
|
|
@ -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)
|
||||||
```
|
```
|
||||||
|
|
Loading…
Add table
Reference in a new issue