├── lib
    ├── demo
    │   ├── mailer.ex
    │   ├── repo.ex
    │   ├── accounts
    │   │   └── user.ex
    │   ├── application.ex
    │   └── accounts.ex
    ├── demo_web
    │   ├── views
    │   │   ├── page_view.ex
    │   │   ├── layout_view.ex
    │   │   ├── error_view.ex
    │   │   └── error_helpers.ex
    │   ├── templates
    │   │   └── layout
    │   │   │   ├── app.html.heex
    │   │   │   ├── live.html.heex
    │   │   │   ├── game.html.heex
    │   │   │   └── root.html.heex
    │   ├── channels
    │   │   └── presence.ex
    │   ├── gettext.ex
    │   ├── live
    │   │   ├── top_live.ex
    │   │   ├── clock_live.ex
    │   │   ├── user_live
    │   │   │   ├── new.html.heex
    │   │   │   ├── edit.html.heex
    │   │   │   ├── new.ex
    │   │   │   ├── presence_index.ex
    │   │   │   ├── index_manual_scroll.ex
    │   │   │   ├── edit.ex
    │   │   │   ├── presence_index.html.heex
    │   │   │   ├── index.html.heex
    │   │   │   ├── show.ex
    │   │   │   ├── index.ex
    │   │   │   └── index_auto_scroll.ex
    │   │   ├── weather_live.ex
    │   │   ├── image_live.ex
    │   │   ├── search_live.ex
    │   │   ├── thermostat_live.ex
    │   │   ├── page_live.ex
    │   │   ├── rainbow_live.ex
    │   │   ├── pacman_live.ex
    │   │   └── snake_live.ex
    │   ├── endpoint.ex
    │   ├── router.ex
    │   └── telemetry.ex
    ├── demo.ex
    └── demo_web.ex
├── test
    ├── test_helper.exs
    ├── demo_web
    │   ├── views
    │   │   ├── page_view_test.exs
    │   │   ├── layout_view_test.exs
    │   │   └── error_view_test.exs
    │   └── controllers
    │   │   └── page_controller_test.exs
    └── support
    │   ├── channel_case.ex
    │   ├── conn_case.ex
    │   └── data_case.ex
├── priv
    ├── repo
    │   ├── migrations
    │   │   ├── .formatter.exs
    │   │   └── 20180610040824_create_users.exs
    │   └── seeds.exs
    └── gettext
    │   ├── en
    │       └── LC_MESSAGES
    │       │   └── errors.po
    │   └── errors.pot
├── .formatter.exs
├── README.md
├── config
    ├── test.exs
    ├── config.exs
    ├── prod.exs
    ├── dev.exs
    └── runtime.exs
├── .gitignore
├── mix.exs
├── assets
    ├── js
    │   └── app.js
    ├── css
    │   ├── pacman.css
    │   ├── app.css
    │   ├── snake.css
    │   ├── thermostat.css
    │   └── phoenix.css
    └── vendor
    │   └── topbar.js
└── mix.lock


/lib/demo/mailer.ex:
--------------------------------------------------------------------------------
1 | defmodule Demo.Mailer do
2 |   use Swoosh.Mailer, otp_app: :demo
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/demo_web/views/page_view.ex:
--------------------------------------------------------------------------------
1 | defmodule DemoWeb.PageView do
2 |   use DemoWeb, :view
3 | end
4 | 


--------------------------------------------------------------------------------
/test/test_helper.exs:
--------------------------------------------------------------------------------
1 | ExUnit.start()
2 | Ecto.Adapters.SQL.Sandbox.mode(Demo.Repo, :manual)
3 | 


--------------------------------------------------------------------------------
/priv/repo/migrations/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 |   import_deps: [:ecto_sql],
3 |   inputs: ["*.exs"]
4 | ]
5 | 


--------------------------------------------------------------------------------
/test/demo_web/views/page_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule DemoWeb.PageViewTest do
2 |   use DemoWeb.ConnCase, async: true
3 | end
4 | 


--------------------------------------------------------------------------------
/lib/demo/repo.ex:
--------------------------------------------------------------------------------
1 | defmodule Demo.Repo do
2 |   use Ecto.Repo,
3 |     otp_app: :demo,
4 |     adapter: Ecto.Adapters.Postgres
5 | end
6 | 


--------------------------------------------------------------------------------
/.formatter.exs:
--------------------------------------------------------------------------------
1 | [
2 |   import_deps: [:ecto, :phoenix],
3 |   inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"],
4 |   subdirectories: ["priv/*/migrations"]
5 | ]
6 | 


--------------------------------------------------------------------------------
/test/demo_web/controllers/page_controller_test.exs:
--------------------------------------------------------------------------------
1 | defmodule DemoWeb.PageControllerTest do
2 |   use DemoWeb.ConnCase
3 | 
4 |   test "GET /", %{conn: conn} do
5 |     conn = get(conn, "/")
6 |     assert html_response(conn, 200) =~ "Welcome to Phoenix!"
7 |   end
8 | end
9 | 


--------------------------------------------------------------------------------
/lib/demo_web/templates/layout/app.html.heex:
--------------------------------------------------------------------------------
1 | <main class="container">
2 |   <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
3 |   <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
4 |   <%= @inner_content %>
5 | </main>
6 | 


--------------------------------------------------------------------------------
/lib/demo.ex:
--------------------------------------------------------------------------------
 1 | defmodule Demo do
 2 |   @moduledoc """
 3 |   Demo keeps the contexts that define your domain
 4 |   and business logic.
 5 | 
 6 |   Contexts are also responsible for managing your data, regardless
 7 |   if it comes from the database, an external API or others.
 8 |   """
 9 | end
10 | 


--------------------------------------------------------------------------------
/lib/demo_web/views/layout_view.ex:
--------------------------------------------------------------------------------
1 | defmodule DemoWeb.LayoutView do
2 |   use DemoWeb, :view
3 | 
4 |   # Phoenix LiveDashboard is available only in development by default,
5 |   # so we instruct Elixir to not warn if the dashboard route is missing.
6 |   @compile {:no_warn_undefined, {Routes, :live_dashboard_path, 2}}
7 | end
8 | 


--------------------------------------------------------------------------------
/test/demo_web/views/layout_view_test.exs:
--------------------------------------------------------------------------------
1 | defmodule DemoWeb.LayoutViewTest do
2 |   use DemoWeb.ConnCase, async: true
3 | 
4 |   # When testing helpers, you may want to import Phoenix.HTML and
5 |   # use functions such as safe_to_string() to convert the helper
6 |   # result into an HTML string.
7 |   # import Phoenix.HTML
8 | end
9 | 


--------------------------------------------------------------------------------
/lib/demo_web/channels/presence.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.Presence do
 2 |   @moduledoc """
 3 |   Provides presence tracking to channels and processes.
 4 | 
 5 |   See the [`Phoenix.Presence`](http://hexdocs.pm/phoenix/Phoenix.Presence.html)
 6 |   docs for more details.
 7 |   """
 8 |   use Phoenix.Presence, otp_app: :demo,
 9 |                         pubsub_server: Demo.PubSub
10 | end
11 | 


--------------------------------------------------------------------------------
/priv/repo/migrations/20180610040824_create_users.exs:
--------------------------------------------------------------------------------
 1 | defmodule Demo.Repo.Migrations.CreateUsers do
 2 |   use Ecto.Migration
 3 | 
 4 |   def change do
 5 |     create table(:users) do
 6 |       add(:username, :string)
 7 |       add(:email, :string)
 8 |       add(:phone_number, :string)
 9 | 
10 |       timestamps()
11 |     end
12 | 
13 |     create(unique_index(:users, :email))
14 |   end
15 | end
16 | 


--------------------------------------------------------------------------------
/lib/demo_web/templates/layout/live.html.heex:
--------------------------------------------------------------------------------
 1 | <main class="container">
 2 |   <p class="alert alert-info" role="alert"
 3 |     phx-click="lv:clear-flash"
 4 |     phx-value-key="info"><%= live_flash(@flash, :info) %></p>
 5 | 
 6 |   <p class="alert alert-danger" role="alert"
 7 |     phx-click="lv:clear-flash"
 8 |     phx-value-key="error"><%= live_flash(@flash, :error) %></p>
 9 | 
10 |   <%= @inner_content %>
11 | </main>
12 | 


--------------------------------------------------------------------------------
/test/demo_web/views/error_view_test.exs:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ErrorViewTest do
 2 |   use DemoWeb.ConnCase, async: true
 3 | 
 4 |   # Bring render/3 and render_to_string/3 for testing custom views
 5 |   import Phoenix.View
 6 | 
 7 |   test "renders 404.html" do
 8 |     assert render_to_string(DemoWeb.ErrorView, "404.html", []) == "Not Found"
 9 |   end
10 | 
11 |   test "renders 500.html" do
12 |     assert render_to_string(DemoWeb.ErrorView, "500.html", []) == "Internal Server Error"
13 |   end
14 | end
15 | 


--------------------------------------------------------------------------------
/lib/demo_web/views/error_view.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ErrorView do
 2 |   use DemoWeb, :view
 3 | 
 4 |   # If you want to customize a particular status code
 5 |   # for a certain format, you may uncomment below.
 6 |   # def render("500.html", _assigns) do
 7 |   #   "Internal Server Error"
 8 |   # end
 9 | 
10 |   # By default, Phoenix returns the status message from
11 |   # the template name. For example, "404.html" becomes
12 |   # "Not Found".
13 |   def template_not_found(template, _assigns) do
14 |     Phoenix.Controller.status_message_from_template(template)
15 |   end
16 | end
17 | 


--------------------------------------------------------------------------------
/priv/repo/seeds.exs:
--------------------------------------------------------------------------------
 1 | # Script for populating the database. You can run it as:
 2 | #
 3 | #     mix run priv/repo/seeds.exs
 4 | #
 5 | # Inside the script, you can read and write to any of your
 6 | # repositories directly:
 7 | #
 8 | #     Demo.Repo.insert!(%Demo.SomeSchema{})
 9 | #
10 | # We recommend using the bang functions (`insert!`, `update!`
11 | # and so on) as they will fail if something goes wrong.
12 | 
13 | for i <- 1..1000 do
14 |   {:ok, _} =
15 |     Demo.Accounts.create_user(%{
16 |       username: "user#{i}",
17 |       name: "User #{i}",
18 |       email: "user#{i}@test",
19 |       phone_number: "555-555-5555"
20 |     })
21 | end
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Demo
 2 | 
 3 | To start your Phoenix server:
 4 | 
 5 |   * Install dependencies with `mix deps.get`
 6 |   * Create and migrate your database with `mix ecto.setup`
 7 |   * Start Phoenix endpoint with `mix phx.server` or inside IEx with `iex -S mix phx.server`
 8 | 
 9 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
10 | 
11 | Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html).
12 | 
13 | ## Learn more
14 | 
15 |   * Official website: https://www.phoenixframework.org/
16 |   * Guides: https://hexdocs.pm/phoenix/overview.html
17 |   * Docs: https://hexdocs.pm/phoenix
18 |   * Forum: https://elixirforum.com/c/phoenix-forum
19 |   * Source: https://github.com/phoenixframework/phoenix
20 | 


--------------------------------------------------------------------------------
/lib/demo_web/gettext.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.Gettext do
 2 |   @moduledoc """
 3 |   A module providing Internationalization with a gettext-based API.
 4 | 
 5 |   By using [Gettext](https://hexdocs.pm/gettext),
 6 |   your module gains a set of macros for translations, for example:
 7 | 
 8 |       import DemoWeb.Gettext
 9 | 
10 |       # Simple translation
11 |       gettext("Here is the string to translate")
12 | 
13 |       # Plural translation
14 |       ngettext("Here is the string to translate",
15 |                "Here are the strings to translate",
16 |                3)
17 | 
18 |       # Domain-based translation
19 |       dgettext("errors", "Here is the error message to translate")
20 | 
21 |   See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage.
22 |   """
23 |   use Gettext, otp_app: :demo
24 | end
25 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/top_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.TopLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <pre>
 7 |       <%= @top %>
 8 |     </pre>
 9 |     """
10 |   end
11 | 
12 |   def mount(_params, _session, socket) do
13 |     if connected?(socket), do: :timer.send_interval(1000, self(), :tick)
14 | 
15 |     {:ok, put_top(socket)}
16 |   end
17 | 
18 |   def handle_info(:tick, socket) do
19 |     {:noreply, put_top(socket)}
20 |   end
21 | 
22 |   defp put_top(socket) do
23 |     case :os.type() do
24 |       {:unix, :darwin} ->
25 |         {top, 0} = System.cmd("top", ["-l", "1"])
26 |         assign(socket, top: top)
27 |       {:unix, :linux} ->
28 |         {top, 0} = System.cmd("top", ["-n", "1", "-b"])
29 |         assign(socket, top: top)
30 |     end
31 |   end
32 | end
33 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/clock_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ClockLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <div>
 7 |       <h2>It's <%= NimbleStrftime.format(@date, "%H:%M:%S") %></h2>
 8 |       <%= live_render(@socket, DemoWeb.ImageLive, id: "image") %>
 9 |     </div>
10 |     """
11 |   end
12 | 
13 |   def mount(_params, _session, socket) do
14 |     if connected?(socket), do: Process.send_after(self(), :tick, 1000)
15 | 
16 |     {:ok, put_date(socket)}
17 |   end
18 | 
19 |   def handle_info(:tick, socket) do
20 |     Process.send_after(self(), :tick, 1000)
21 |     {:noreply, put_date(socket)}
22 |   end
23 | 
24 |   def handle_event("nav", _path, socket) do
25 |     {:noreply, socket}
26 |   end
27 | 
28 |   defp put_date(socket) do
29 |     assign(socket, date: NaiveDateTime.local_now())
30 |   end
31 | end
32 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/new.html.heex:
--------------------------------------------------------------------------------
 1 | <h2>Create Your Account</h2>
 2 | 
 3 | <.form let={f} for={@changeset} phx-change="validate" phx-submit="save">
 4 | 	<%= label f, :username %>
 5 | 	<%= text_input f, :username, phx_debounce: "blur" %>
 6 | 	<%= error_tag f, :username %>
 7 | 
 8 | 	<%= label f, :email %>
 9 | 	<%= text_input f, :email %>
10 | 	<%= error_tag f, :email %>
11 | 
12 | 	<%= label f, :password %>
13 | 	<%= password_input f, :password, value: input_value(f, :password) %>
14 | 	<%= error_tag f, :password %>
15 | 
16 | 	<%= password_input f, :password_confirmation, value: input_value(f, :password_confirmation) %>
17 | 	<%= error_tag f, :password_confirmation %>
18 | 
19 | 	<%= label f, :phone_number %>
20 | 	<%= text_input f, :phone_number %>
21 | 	<%= error_tag f, :phone_number %>
22 | 	<div>
23 | 		<%= submit "Save", phx_disable_with: "Saving..." %>
24 | 	</div>
25 | </.form>
26 | 
27 | <span><%= live_redirect "Back", to: Routes.user_index_path(@socket, :index) %></span>


--------------------------------------------------------------------------------
/lib/demo_web/templates/layout/game.html.heex:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=no" />
 7 |     <title>Demo · Phoenix Framework</title>
 8 |     <link rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
 9 |     <%= csrf_meta_tag() %>
10 |     <script type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
11 |     <%= csrf_meta_tag() %>
12 |   </head>
13 | 
14 |   <body class="game">
15 |     <main role="main" class="container">
16 |       <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
17 |       <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
18 |       <%= @inner_content %>
19 |     </main>
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/edit.html.heex:
--------------------------------------------------------------------------------
 1 | <h2>Edit User <%= @count %></h2>
 2 | 
 3 | <.form let={f} for={@changeset} phx-change="validate" phx-submit="save">
 4 | 	<%= label f, :username %>
 5 | 	<%= text_input f, :username, phx_debounce: "blur" %>
 6 | 	<%= error_tag f, :username %>
 7 | 
 8 | 	<%= label f, :email %>
 9 | 	<%= text_input f, :email %>
10 | 	<%= error_tag f, :email %>
11 | 
12 | 	<%= label f, :password %>
13 | 	<%= password_input f, :password, value: input_value(f, :password) %>
14 | 	<%= error_tag f, :password %>
15 | 
16 | 	<%= password_input f, :password_confirmation, value: input_value(f, :password_confirmation) %>
17 | 	<%= error_tag f, :password_confirmation %>
18 | 
19 | 	<%= label f, :phone_number %>
20 | 	<%= text_input f, :phone_number, phx_blur: "blur" %>
21 | 	<%= error_tag f, :phone_number %>
22 | 	<div>
23 | 		<%= submit "Save", phx_disable_with: "Saving..." %>
24 | 	</div>
25 | </.form>
26 | 
27 | <span><%= live_redirect "Back", to: Routes.user_index_path(@socket, :index) %></span>


--------------------------------------------------------------------------------
/config/test.exs:
--------------------------------------------------------------------------------
 1 | import Config
 2 | 
 3 | # Configure your database
 4 | #
 5 | # The MIX_TEST_PARTITION environment variable can be used
 6 | # to provide built-in test partitioning in CI environment.
 7 | # Run `mix help test` for more information.
 8 | config :demo, Demo.Repo,
 9 |   username: "postgres",
10 |   password: "postgres",
11 |   database: "demo_test#{System.get_env("MIX_TEST_PARTITION")}",
12 |   hostname: "localhost",
13 |   pool: Ecto.Adapters.SQL.Sandbox,
14 |   pool_size: 10
15 | 
16 | # We don't run a server during test. If one is required,
17 | # you can enable the server option below.
18 | config :demo, DemoWeb.Endpoint,
19 |   http: [ip: {127, 0, 0, 1}, port: 4002],
20 |   server: false
21 | 
22 | # In test we don't send emails.
23 | config :demo, Demo.Mailer, adapter: Swoosh.Adapters.Test
24 | 
25 | # Print only warnings and errors during test
26 | config :logger, level: :warn
27 | 
28 | # Initialize plugs at runtime for faster test compilation
29 | config :phoenix, :plug_init_mode, :runtime
30 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/new.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.New do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   alias Demo.Accounts
 5 |   alias Demo.Accounts.User
 6 | 
 7 |   def mount(_params, _session, socket) do
 8 |     changeset = Accounts.change_user(%User{})
 9 |     {:ok, assign(socket, changeset: changeset)}
10 |   end
11 | 
12 |   def handle_event("validate", %{"user" => user_params}, socket) do
13 |     changeset =
14 |       %User{}
15 |       |> Demo.Accounts.change_user(user_params)
16 |       |> Map.put(:action, :insert)
17 | 
18 |     {:noreply, assign(socket, changeset: changeset)}
19 |   end
20 | 
21 |   def handle_event("save", %{"user" => user_params}, socket) do
22 |     case Accounts.create_user(user_params) do
23 |       {:ok, user} ->
24 |         {:noreply,
25 |          socket
26 |          |> put_flash(:info, "user created")
27 |          |> push_redirect(to: Routes.user_show_path(socket, :show, user))}
28 | 
29 |       {:error, %Ecto.Changeset{} = changeset} ->
30 |         {:noreply, assign(socket, changeset: changeset)}
31 |     end
32 |   end
33 | end
34 | 


--------------------------------------------------------------------------------
/lib/demo/accounts/user.ex:
--------------------------------------------------------------------------------
 1 | defmodule Demo.Accounts.User do
 2 |   use Ecto.Schema
 3 |   import Ecto.Changeset
 4 | 
 5 |   schema "users" do
 6 |     field :username, :string
 7 |     field :email, :string
 8 |     field :phone_number, :string
 9 |     field :password, :string, virtual: true
10 |     field :password_confirmation, :string, virtual: true
11 | 
12 |     timestamps()
13 |   end
14 | 
15 |   @phone ~r/^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$/
16 | 
17 |   @doc false
18 |   def changeset(user, attrs) do
19 |     user
20 |     |> cast(attrs, [:username, :email, :phone_number, :password])
21 |     |> validate_required([:username, :email, :phone_number])
22 |     |> validate_confirmation(:password)
23 |     |> validate_format(:username, ~r/^[a-zA-Z0-9_]*$/,
24 |       message: "only letters, numbers, and underscores please"
25 |     )
26 |     |> validate_length(:username, max: 12)
27 |     |> validate_format(:email, ~r/.+@.+/, message: "must be a valid email address")
28 |     |> validate_format(:phone_number, @phone, message: "must be a valid number")
29 |     |> unique_constraint(:email)
30 |   end
31 | end
32 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/presence_index.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.PresenceIndex do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   alias Demo.Accounts
 5 |   alias DemoWeb.Presence
 6 |   alias Phoenix.Socket.Broadcast
 7 | 
 8 |   def mount(%{"name" => name}, _session, socket) do
 9 |     if connected?(socket) do
10 |       Demo.Accounts.subscribe()
11 |       Phoenix.PubSub.subscribe(Demo.PubSub, "users")
12 |       Presence.track(self(), "users", name, %{})
13 |     end
14 |     {:ok, fetch(socket)}
15 |   end
16 | 
17 |   defp fetch(socket) do
18 |     assign(socket, %{
19 |       users: Accounts.list_users(1, 10),
20 |       online_users: DemoWeb.Presence.list("users"),
21 |       page: 0
22 |     })
23 |   end
24 | 
25 |   def handle_info(%Broadcast{event: "presence_diff"}, socket) do
26 |     {:noreply, fetch(socket)}
27 |   end
28 | 
29 |   def handle_info({Accounts, [:user | _], _}, socket) do
30 |     {:noreply, fetch(socket)}
31 |   end
32 | 
33 |   def handle_event("delete_user", id, socket) do
34 |     user = Accounts.get_user!(id)
35 |     {:ok, _user} = Accounts.delete_user(user)
36 | 
37 |     {:noreply, socket}
38 |   end
39 | end
40 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/index_manual_scroll.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.IndexManualScroll do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <table>
 7 |       <tbody phx-update="append" id="users">
 8 |         <%= for user <- @users do %>
 9 |           <tr class="user-row" id={"user-#{user.id}"}>
10 |             <td><%= user.username %></td>
11 |             <td><%= user.email %></td>
12 |           </tr>
13 |         <% end %>
14 |       </tbody>
15 |     </table>
16 |     <form phx-submit="load-more">
17 |       <button phx-disable-with="loading...">more</button>
18 |     </form>
19 |     """
20 |   end
21 | 
22 |   def mount(_params, _session, socket) do
23 |     {:ok,
24 |      socket
25 |      |> assign(page: 1, per_page: 10, val: 0)
26 |      |> fetch(), temporary_assigns: [users: []]}
27 |   end
28 | 
29 |   defp fetch(%{assigns: %{page: page, per_page: per}} = socket) do
30 |     assign(socket, users: Demo.Accounts.list_users(page, per))
31 |   end
32 | 
33 |   def handle_event("load-more", _, %{assigns: assigns} = socket) do
34 |     {:noreply, socket |> assign(page: assigns.page + 1) |> fetch()}
35 |   end
36 | end
37 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/weather_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.WeatherLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <div>
 7 |       <form phx-submit="set-location">
 8 |         <input name="location" placeholder="Location" value={@location}/>
 9 |         <%= @weather %>
10 |       </form>
11 |     </div>
12 |     """
13 |   end
14 | 
15 |   def mount(_params, _session, socket) do
16 |     if connected?(socket), do: send(self(), {:put, "Austin"})
17 |     {:ok, assign(socket, location: nil, weather: "...")}
18 |   end
19 | 
20 |   def handle_event("set-location", %{"location" => location}, socket) do
21 |     {:noreply, put_location(socket, location)}
22 |   end
23 | 
24 |   def handle_info({:put, location}, socket) do
25 |     {:noreply, put_location(socket, location)}
26 |   end
27 | 
28 |   defp put_location(socket, location) do
29 |     assign(socket, location: location, weather: weather(location))
30 |   end
31 | 
32 |   defp weather(local) do
33 |     {:ok, {{_, 200, _}, _, body}} =
34 |       :httpc.request(:get, {~c"http://wttr.in/#{URI.encode(local)}?format=1", []}, [], [])
35 |     IO.iodata_to_binary(body)
36 |   end
37 | end
38 | 


--------------------------------------------------------------------------------
/lib/demo/application.ex:
--------------------------------------------------------------------------------
 1 | defmodule Demo.Application do
 2 |   # See https://hexdocs.pm/elixir/Application.html
 3 |   # for more information on OTP Applications
 4 |   @moduledoc false
 5 | 
 6 |   use Application
 7 | 
 8 |   @impl true
 9 |   def start(_type, _args) do
10 |     children = [
11 |       # Start the Ecto repository
12 |       Demo.Repo,
13 |       # Start the Telemetry supervisor
14 |       DemoWeb.Telemetry,
15 |       # Start the PubSub system
16 |       {Phoenix.PubSub, name: Demo.PubSub},
17 |       DemoWeb.Presence,
18 |       # Start the Endpoint (http/https)
19 |       DemoWeb.Endpoint
20 |       # Start a worker by calling: Demo.Worker.start_link(arg)
21 |       # {Demo.Worker, arg}
22 |     ]
23 | 
24 |     # See https://hexdocs.pm/elixir/Supervisor.html
25 |     # for other strategies and supported options
26 |     opts = [strategy: :one_for_one, name: Demo.Supervisor]
27 |     Supervisor.start_link(children, opts)
28 |   end
29 | 
30 |   # Tell Phoenix to update the endpoint configuration
31 |   # whenever the application is updated.
32 |   @impl true
33 |   def config_change(changed, _new, removed) do
34 |     DemoWeb.Endpoint.config_change(changed, removed)
35 |     :ok
36 |   end
37 | end
38 | 


--------------------------------------------------------------------------------
/test/support/channel_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ChannelCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   channel tests.
 5 | 
 6 |   Such tests rely on `Phoenix.ChannelTest` and also
 7 |   import other functionality to make it easier
 8 |   to build common data structures and query the data layer.
 9 | 
10 |   Finally, if the test case interacts with the database,
11 |   we enable the SQL sandbox, so changes done to the database
12 |   are reverted at the end of every test. If you are using
13 |   PostgreSQL, you can even run database tests asynchronously
14 |   by setting `use DemoWeb.ChannelCase, async: true`, although
15 |   this option is not recommended for other databases.
16 |   """
17 | 
18 |   use ExUnit.CaseTemplate
19 | 
20 |   using do
21 |     quote do
22 |       # Import conveniences for testing with channels
23 |       import Phoenix.ChannelTest
24 |       import DemoWeb.ChannelCase
25 | 
26 |       # The default endpoint for testing
27 |       @endpoint DemoWeb.Endpoint
28 |     end
29 |   end
30 | 
31 |   setup tags do
32 |     pid = Ecto.Adapters.SQL.Sandbox.start_owner!(Demo.Repo, shared: not tags[:async])
33 |     on_exit(fn -> Ecto.Adapters.SQL.Sandbox.stop_owner(pid) end)
34 |     :ok
35 |   end
36 | end
37 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/edit.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.Edit do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   alias Demo.Accounts
 5 | 
 6 |   def mount(_params, _session, socket) do
 7 |     {:ok, assign(socket, count: 0)}
 8 |   end
 9 | 
10 |   def handle_params(%{"id" => id}, _url, socket) do
11 |     user = Accounts.get_user!(id)
12 |     {:noreply,
13 |      assign(socket, %{
14 |        user: user,
15 |        changeset: Accounts.change_user(user)
16 |      })}
17 |   end
18 | 
19 |   def handle_event("validate", %{"user" => params}, socket) do
20 |     changeset =
21 |       socket.assigns.user
22 |       |> Demo.Accounts.change_user(params)
23 |       |> Map.put(:action, :update)
24 | 
25 |     {:noreply, assign(socket, changeset: changeset)}
26 |   end
27 | 
28 |   def handle_event("save", %{"user" => user_params}, socket) do
29 |     case Accounts.update_user(socket.assigns.user, user_params) do
30 |       {:ok, user} ->
31 |         {:noreply,
32 |          socket
33 |          |> put_flash(:info, "User updated successfully.")
34 |          |> push_redirect(to: Routes.user_show_path(socket, :show, user))}
35 | 
36 |       {:error, %Ecto.Changeset{} = changeset} ->
37 |         {:noreply, assign(socket, changeset: changeset)}
38 |     end
39 |   end
40 | end
41 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/image_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ImageLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def radio_tag(assigns) do
 5 |     ~H"""
 6 |     <input type="radio" name={@name} value={@value} checked={@value == @checked}/>
 7 |     """
 8 |   end
 9 | 
10 |   def render(assigns) do
11 |     ~H"""
12 |     <div style={"margin-left: #{@depth * 50}px;"}>
13 |       <form phx-change="update">
14 |         <input type="range" min="10" max="630" name="width" value={@width} />
15 |         <%= @width %>px
16 |         <fieldset>
17 |           White <.radio_tag name={:bg} value="white" checked={@bg}/>
18 |           Black <.radio_tag name={:bg} value="black" checked={@bg}/>
19 |           Blue <.radio_tag name={:bg} value="blue" checked={@bg}/>
20 |         </fieldset>
21 |       </form>
22 |       <br/>
23 |       <img phx-click="boom"
24 |         src={Routes.static_path(DemoWeb.Endpoint, "/images/phoenix.png")}
25 |         width={@width} style={"background: #{@bg};"}/>
26 |     </div>
27 |     """
28 |   end
29 | 
30 |   def mount(_params, _session, socket) do
31 |     {:ok, assign(socket, width: 100, bg: "white", depth: 0, max_depth: 0)}
32 |   end
33 | 
34 |   def handle_event("update", %{"width" => width, "bg" => bg}, socket) do
35 |     {:noreply, assign(socket, width: String.to_integer(width), bg: bg)}
36 |   end
37 | end
38 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/presence_index.html.heex:
--------------------------------------------------------------------------------
 1 | <h2>Listing Users, page <%= @page %></h2>
 2 | 
 3 | <table>
 4 |   <thead>
 5 |     <tr>
 6 |       <th>Username</th>
 7 |       <th>Email</th>
 8 |       <th>Phone #</th>
 9 | 
10 |       <th></th>
11 |     </tr>
12 |   </thead>
13 |   <tbody>
14 | 		<%= for user <- @users do %>
15 | 			<tr>
16 | 				<td><%= user.username %></td>
17 | 				<td><%= user.email %></td>
18 | 				<td><%= user.phone_number %></td>
19 | 
20 | 				<td>
21 | 					<%= live_redirect "Show", to: Routes.user_show_path(@socket, :show, user) %>
22 | 					<%= live_redirect "Edit", to: Routes.user_edit_path(@socket, :edit, user) %>
23 | 					<%= link "Delete", to: "#",
24 | 							phx_click: "delete_user",
25 | 							phx_value_id: user.id %>
26 | 				</td>
27 | 			</tr>
28 | 		<% end %>
29 |   </tbody>
30 | </table>
31 | 
32 | <%= if @page > 1 do %>
33 |   <span><%= live_patch "prev", to: Routes.user_index_path(@socket, :index, page: @page - 1) %></span>
34 | <% end %>
35 | <%= for i <- (@page - 5)..(@page + 5), i > 0 do %>
36 |   <span><%= live_patch "#{i}", to: Routes.user_index_path(@socket, :index, page: i) %></span>
37 | <% end %>
38 | <span><%= live_patch "next", to: Routes.user_index_path(@socket, :index, page: @page + 1) %></span>
39 | <br/>
40 | <span><%= live_redirect "New User (live)", to: Routes.user_new_path(@socket, :new) %></span>
41 | 


--------------------------------------------------------------------------------
/lib/demo_web/templates/layout/root.html.heex:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8"/>
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 7 |     <%= csrf_meta_tag() %>
 8 |     <%= live_title_tag assigns[:page_title] || "Demo", suffix: " · Phoenix Framework" %>
 9 |     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")}/>
10 |     <script defer phx-track-static type="text/javascript" src={Routes.static_path(@conn, "/assets/app.js")}></script>
11 |   </head>
12 |   <body>
13 |     <header>
14 |       <section class="container">
15 |         <nav>
16 |           <ul>
17 |             <li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
18 |             <%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
19 |               <li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
20 |             <% end %>
21 |           </ul>
22 |         </nav>
23 |         <a href="https://phoenixframework.org/" class="phx-logo">
24 |           <img src={Routes.static_path(@conn, "/images/phoenix.png")} alt="Phoenix Framework Logo"/>
25 |         </a>
26 |       </section>
27 |     </header>
28 |     <%= @inner_content %>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # The directory Mix will write compiled artifacts to.
 2 | /_build/
 3 | 
 4 | # If you run "mix test --cover", coverage assets end up here.
 5 | /cover/
 6 | 
 7 | # The directory Mix downloads your dependencies sources to.
 8 | /deps/
 9 | 
10 | # Where 3rd-party dependencies like ExDoc output generated docs.
11 | /doc/
12 | 
13 | # Ignore .fetch files in case you like to edit your project deps locally.
14 | /.fetch
15 | 
16 | # If the VM crashes, it generates a dump, let's ignore it too.
17 | erl_crash.dump
18 | 
19 | # Also ignore archive artifacts (built via "mix archive.build").
20 | *.ez
21 | 
22 | # Ignore package tarball (built via "mix hex.build").
23 | turbo-*.tar
24 | 
25 | # If NPM crashes, it generates a log, let's ignore it too.
26 | npm-debug.log
27 | 
28 | # The directory NPM downloads your dependencies sources to.
29 | /assets/node_modules/
30 | 
31 | # Since we are building assets from assets/,
32 | # we ignore priv/static. You may want to comment
33 | # this depending on your deployment strategy.
34 | /priv/static/
35 | 
36 | # Files matching config/*.secret.exs pattern contain sensitive
37 | # data and you should not commit them into version control.
38 | #
39 | # Alternatively, you may comment the line below and commit the
40 | # secrets files as long as you replace their contents by environment
41 | # variables.
42 | /config/*.secret.exs
43 | .elixir_ls


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/index.html.heex:
--------------------------------------------------------------------------------
 1 | <h2>Listing Users, page <%= @page %></h2>
 2 | 
 3 | <table phx-window-keydown="keydown" phx-throttle="500">
 4 |   <thead>
 5 |     <tr>
 6 |       <th>Username</th>
 7 |       <th>Email</th>
 8 |       <th>Phone #</th>
 9 | 
10 |       <th></th>
11 |     </tr>
12 |   </thead>
13 |   <tbody>
14 | 		<%= for user <- @users do %>
15 | 			<tr>
16 | 				<td><%= user.username %></td>
17 | 				<td><%= user.email %></td>
18 | 				<td><%= user.phone_number %></td>
19 | 
20 | 				<td>
21 | 					<%= live_redirect "Show", to: Routes.user_show_path(@socket, :show, user) %>
22 | 					<%= live_redirect "Edit", to: Routes.user_edit_path(@socket, :edit, user) %>
23 | 					<%= link "Delete", to: "#",
24 | 							phx_click: "delete_user",
25 | 							phx_value_id: user.id %>
26 | 				</td>
27 | 			</tr>
28 | 		<% end %>
29 |   </tbody>
30 | </table>
31 | 
32 | <%= if @page > 1 do %>
33 |   <span><%= live_patch "prev", to: Routes.user_index_path(@socket, :index, page: @page - 1) %></span>
34 | <% end %>
35 | <%= for i <- (@page - 5)..(@page + 5), i > 0 do %>
36 |   <span><%= live_patch "#{i}", to: Routes.user_index_path(@socket, :index, page: i) %></span>
37 | <% end %>
38 | <span><%= live_patch "next", to: Routes.user_index_path(@socket, :index, page: @page + 1) %></span>
39 | <br/>
40 | <span><%= live_redirect "New User (live)", to: Routes.user_new_path(@socket, :new) %></span>
41 | 


--------------------------------------------------------------------------------
/test/support/conn_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ConnCase do
 2 |   @moduledoc """
 3 |   This module defines the test case to be used by
 4 |   tests that require setting up a connection.
 5 | 
 6 |   Such tests rely on `Phoenix.ConnTest` and also
 7 |   import other functionality to make it easier
 8 |   to build common data structures and query the data layer.
 9 | 
10 |   Finally, if the test case interacts with the database,
11 |   we enable the SQL sandbox, so changes done to the database
12 |   are reverted at the end of every test. If you are using
13 |   PostgreSQL, you can even run database tests asynchronously
14 |   by setting `use DemoWeb.ConnCase, async: true`, although
15 |   this option is not recommended for other databases.
16 |   """
17 | 
18 |   use ExUnit.CaseTemplate
19 | 
20 |   using do
21 |     quote do
22 |       # Import conveniences for testing with connections
23 |       import Plug.Conn
24 |       import Phoenix.ConnTest
25 |       import DemoWeb.ConnCase
26 | 
27 |       alias DemoWeb.Router.Helpers, as: Routes
28 | 
29 |       # The default endpoint for testing
30 |       @endpoint DemoWeb.Endpoint
31 |     end
32 |   end
33 | 
34 |   setup tags do
35 |     pid = Ecto.Adapters.SQL.Sandbox.start_owner!(Demo.Repo, shared: not tags[:async])
36 |     on_exit(fn -> Ecto.Adapters.SQL.Sandbox.stop_owner(pid) end)
37 |     {:ok, conn: Phoenix.ConnTest.build_conn()}
38 |   end
39 | end
40 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/show.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.Show do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   alias Demo.Accounts
 5 |   alias Phoenix.LiveView.Socket
 6 | 
 7 |   def render(assigns) do
 8 |     ~H"""
 9 |     <h2>Show User</h2>
10 |     <ul>
11 |       <li><b>Username:</b> <%= @user.username %></li>
12 |       <li><b>Email:</b> <%= @user.email %></li>
13 |       <li><b>Phone:</b> <%= @user.phone_number %></li>
14 |     </ul>
15 |     <span><%= live_redirect "Edit", to: Routes.user_edit_path(@socket, :edit, @user) %></span>
16 |     <span><%= live_redirect "Back", to: Routes.user_index_path(@socket, :index) %></span>
17 |     """
18 |   end
19 | 
20 |   def mount(_params, _session, socket) do
21 |     {:ok, socket}
22 |   end
23 | 
24 |   def handle_params(%{"id" => id}, _url, socket) do
25 |     if connected?(socket), do: Demo.Accounts.subscribe(id)
26 |     {:noreply, socket |> assign(id: id) |> fetch()}
27 |   end
28 | 
29 |   defp fetch(%Socket{assigns: %{id: id}} = socket) do
30 |     assign(socket, user: Accounts.get_user!(id))
31 |   end
32 | 
33 |   def handle_info({Accounts, [:user, :updated], _}, socket) do
34 |     {:noreply, fetch(socket)}
35 |   end
36 | 
37 |   def handle_info({Accounts, [:user, :deleted], _}, socket) do
38 |     {:noreply,
39 |      socket
40 |      |> put_flash(:error, "This user has been deleted from the system")
41 |      |> push_redirect(to: Routes.user_index_path(socket, :index))}
42 |   end
43 | end
44 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/search_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.SearchLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <form phx-change="suggest" phx-submit="search">
 7 |       <input type="text" name="q" value={@query} list="matches" placeholder="Search..." {%{readonly: @loading}}/>
 8 |       <datalist id="matches">
 9 |         <%= for match <- @matches do %>
10 |           <option value={match}><%= match %></option>
11 |         <% end %>
12 |       </datalist>
13 |       <%= if @result do %><pre><%= @result %></pre><% end %>
14 |     </form>
15 |     """
16 |   end
17 | 
18 |   def mount(_params, _session, socket) do
19 |     {:ok, assign(socket, query: nil, result: nil, loading: false, matches: [])}
20 |   end
21 | 
22 |   def handle_event("suggest", %{"q" => query}, socket) when byte_size(query) <= 100 do
23 |     {words, _} = System.cmd("grep", ~w"^#{query}.* -m 5 /usr/share/dict/words")
24 |     {:noreply, assign(socket, matches: String.split(words, "\n"))}
25 |   end
26 | 
27 |   def handle_event("search", %{"q" => query}, socket) when byte_size(query) <= 100 do
28 |     send(self(), {:search, query})
29 |     {:noreply, assign(socket, query: query, result: "Searching...", loading: true, matches: [])}
30 |   end
31 | 
32 |   def handle_info({:search, query}, socket) do
33 |     {result, _} = System.cmd("dict", ["#{query}"], stderr_to_stdout: true)
34 |     {:noreply, assign(socket, loading: false, result: result, matches: [])}
35 |   end
36 | end
37 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/thermostat_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ThermostatLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <div class="thermostat">
 7 |       <div class={"bar #{@mode}"}>
 8 |         <a href="#" phx-click="toggle-mode"><%= @mode %></a>
 9 |         <span><%= NimbleStrftime.format(@time, "%H:%M:%S") %></span>
10 |       </div>
11 |       <div class="controls">
12 |         <span class="reading"><%= @val %></span>
13 |         <button phx-click="dec" class="minus">-</button>
14 |         <button phx-click="inc" class="plus">+</button>
15 |         <span class="weather">
16 |           <%= live_render(@socket, DemoWeb.WeatherLive, id: "weather") %>
17 |         </span>
18 |       </div>
19 |     </div>
20 |     """
21 |   end
22 | 
23 |   def mount(_params, _session, socket) do
24 |     if connected?(socket), do: :timer.send_interval(100, self(), :tick)
25 |     {:ok, assign(socket, val: 72, mode: :cooling, time: NaiveDateTime.local_now())}
26 |   end
27 | 
28 |   def handle_info(:tick, socket) do
29 |     {:noreply, assign(socket, time: NaiveDateTime.local_now())}
30 |   end
31 | 
32 |   def handle_event("inc", _, socket) do
33 |     if socket.assigns.val >= 75, do: raise("boom")
34 |     {:noreply, update(socket, :val, &(&1 + 1))}
35 |   end
36 | 
37 |   def handle_event("dec", _, socket) do
38 |     {:noreply, update(socket, :val, &(&1 - 1))}
39 |   end
40 | 
41 |   def handle_event("toggle-mode", _, socket) do
42 |     {:noreply,
43 |      update(socket, :mode, fn
44 |        :cooling -> :heating
45 |        :heating -> :cooling
46 |      end)}
47 |   end
48 | end
49 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/index.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.Index do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   alias Demo.Accounts
 5 |   alias DemoWeb.Router.Helpers, as: Routes
 6 | 
 7 |   def mount(_params, _session, socket) do
 8 |     if connected?(socket), do: Accounts.subscribe()
 9 |     {:ok, assign(socket, page: 1, per_page: 5)}
10 |   end
11 | 
12 |   def handle_params(params, _url, socket) do
13 |     {page, ""} = Integer.parse(params["page"] || "1")
14 |     {:noreply, socket |> assign(page: page) |> fetch()}
15 |   end
16 | 
17 |   defp fetch(socket) do
18 |     %{page: page, per_page: per_page} = socket.assigns
19 |     users = Accounts.list_users(page, per_page)
20 |     assign(socket, users: users, page_title: "Listing Users – Page #{page}")
21 |   end
22 | 
23 |   def handle_info({Accounts, [:user | _], _}, socket) do
24 |     {:noreply, fetch(socket)}
25 |   end
26 | 
27 |   def handle_event("keydown", %{"key" => "ArrowLeft"}, socket) do
28 |     {:noreply, go_page(socket, socket.assigns.page - 1)}
29 |   end
30 |   def handle_event("keydown", %{"key" => "ArrowRight"}, socket) do
31 |     {:noreply, go_page(socket, socket.assigns.page + 1)}
32 |   end
33 |   def handle_event("keydown", _, socket), do: {:noreply, socket}
34 | 
35 |   def handle_event("delete_user", %{"id" => id}, socket) do
36 |     user = Accounts.get_user!(id)
37 |     {:ok, _user} = Accounts.delete_user(user)
38 | 
39 |     {:noreply, socket}
40 |   end
41 | 
42 |   defp go_page(socket, page) when page > 0 do
43 |     push_patch(socket, to: Routes.user_index_path(socket, :index, page: page))
44 |   end
45 |   defp go_page(socket, _page), do: socket
46 | end
47 | 


--------------------------------------------------------------------------------
/lib/demo_web/endpoint.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.Endpoint do
 2 |   use Phoenix.Endpoint, otp_app: :demo
 3 | 
 4 |   # The session will be stored in the cookie and signed,
 5 |   # this means its contents can be read but not tampered with.
 6 |   # Set :encryption_salt if you would also like to encrypt it.
 7 |   @session_options [
 8 |     store: :cookie,
 9 |     key: "_demo_key",
10 |     signing_salt: "4nyFqBJ5"
11 |   ]
12 | 
13 |   socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
14 | 
15 |   # Serve at "/" the static files from "priv/static" directory.
16 |   #
17 |   # You should set gzip to true if you are running phx.digest
18 |   # when deploying your static files in production.
19 |   plug Plug.Static,
20 |     at: "/",
21 |     from: :demo,
22 |     gzip: false,
23 |     only: ~w(assets fonts images favicon.ico robots.txt)
24 | 
25 |   # Code reloading can be explicitly enabled under the
26 |   # :code_reloader configuration of your endpoint.
27 |   if code_reloading? do
28 |     socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
29 |     plug Phoenix.LiveReloader
30 |     plug Phoenix.CodeReloader
31 |     plug Phoenix.Ecto.CheckRepoStatus, otp_app: :demo
32 |   end
33 | 
34 |   plug Phoenix.LiveDashboard.RequestLogger,
35 |     param_key: "request_logger",
36 |     cookie_key: "request_logger"
37 | 
38 |   plug Plug.RequestId
39 |   plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint]
40 | 
41 |   plug Plug.Parsers,
42 |     parsers: [:urlencoded, :multipart, :json],
43 |     pass: ["*/*"],
44 |     json_decoder: Phoenix.json_library()
45 | 
46 |   plug Plug.MethodOverride
47 |   plug Plug.Head
48 |   plug Plug.Session, @session_options
49 |   plug DemoWeb.Router
50 | end
51 | 


--------------------------------------------------------------------------------
/test/support/data_case.ex:
--------------------------------------------------------------------------------
 1 | defmodule Demo.DataCase do
 2 |   @moduledoc """
 3 |   This module defines the setup for tests requiring
 4 |   access to the application's data layer.
 5 | 
 6 |   You may define functions here to be used as helpers in
 7 |   your tests.
 8 | 
 9 |   Finally, if the test case interacts with the database,
10 |   we enable the SQL sandbox, so changes done to the database
11 |   are reverted at the end of every test. If you are using
12 |   PostgreSQL, you can even run database tests asynchronously
13 |   by setting `use Demo.DataCase, async: true`, although
14 |   this option is not recommended for other databases.
15 |   """
16 | 
17 |   use ExUnit.CaseTemplate
18 | 
19 |   using do
20 |     quote do
21 |       alias Demo.Repo
22 | 
23 |       import Ecto
24 |       import Ecto.Changeset
25 |       import Ecto.Query
26 |       import Demo.DataCase
27 |     end
28 |   end
29 | 
30 |   setup tags do
31 |     pid = Ecto.Adapters.SQL.Sandbox.start_owner!(Demo.Repo, shared: not tags[:async])
32 |     on_exit(fn -> Ecto.Adapters.SQL.Sandbox.stop_owner(pid) end)
33 |     :ok
34 |   end
35 | 
36 |   @doc """
37 |   A helper that transforms changeset errors into a map of messages.
38 | 
39 |       assert {:error, changeset} = Accounts.create_user(%{password: "short"})
40 |       assert "password is too short" in errors_on(changeset).password
41 |       assert %{password: ["password is too short"]} = errors_on(changeset)
42 | 
43 |   """
44 |   def errors_on(changeset) do
45 |     Ecto.Changeset.traverse_errors(changeset, fn {message, opts} ->
46 |       Regex.replace(~r"%{(\w+)}", message, fn _, key ->
47 |         opts |> Keyword.get(String.to_existing_atom(key), key) |> to_string()
48 |       end)
49 |     end)
50 |   end
51 | end
52 | 


--------------------------------------------------------------------------------
/lib/demo_web/views/error_helpers.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.ErrorHelpers do
 2 |   @moduledoc """
 3 |   Conveniences for translating and building error messages.
 4 |   """
 5 | 
 6 |   use Phoenix.HTML
 7 | 
 8 |   @doc """
 9 |   Generates tag for inlined form input errors.
10 |   """
11 |   def error_tag(form, field) do
12 |     Enum.map(Keyword.get_values(form.errors, field), fn error ->
13 |       content_tag(:span, translate_error(error),
14 |         class: "invalid-feedback",
15 |         phx_feedback_for: input_name(form, field)
16 |       )
17 |     end)
18 |   end
19 | 
20 |   @doc """
21 |   Translates an error message using gettext.
22 |   """
23 |   def translate_error({msg, opts}) do
24 |     # When using gettext, we typically pass the strings we want
25 |     # to translate as a static argument:
26 |     #
27 |     #     # Translate "is invalid" in the "errors" domain
28 |     #     dgettext("errors", "is invalid")
29 |     #
30 |     #     # Translate the number of files with plural rules
31 |     #     dngettext("errors", "1 file", "%{count} files", count)
32 |     #
33 |     # Because the error messages we show in our forms and APIs
34 |     # are defined inside Ecto, we need to translate them dynamically.
35 |     # This requires us to call the Gettext module passing our gettext
36 |     # backend as first argument.
37 |     #
38 |     # Note we use the "errors" domain, which means translations
39 |     # should be written to the errors.po file. The :count option is
40 |     # set by Ecto and indicates we should also apply plural rules.
41 |     if count = opts[:count] do
42 |       Gettext.dngettext(DemoWeb.Gettext, "errors", msg, msg, count, opts)
43 |     else
44 |       Gettext.dgettext(DemoWeb.Gettext, "errors", msg, opts)
45 |     end
46 |   end
47 | end
48 | 


--------------------------------------------------------------------------------
/config/config.exs:
--------------------------------------------------------------------------------
 1 | # This file is responsible for configuring your application
 2 | # and its dependencies with the aid of the Config module.
 3 | #
 4 | # This configuration file is loaded before any dependency and
 5 | # is restricted to this project.
 6 | 
 7 | # General application configuration
 8 | import Config
 9 | 
10 | config :demo,
11 |   ecto_repos: [Demo.Repo]
12 | 
13 | # Configures the endpoint
14 | config :demo, DemoWeb.Endpoint,
15 |   url: [host: "localhost"],
16 |   secret_key_base: "TV0Hk+GbuJ5Ss2wuk/RUsZtuimE50C6YqwXkOKeBSQqTJkRmpXWUb3BCH71WxM+s",
17 |   render_errors: [view: DemoWeb.ErrorView, accepts: ~w(html json), layout: false],
18 |   pubsub_server: Demo.PubSub,
19 |   live_view: [signing_salt: "iyK7AY6P"]
20 | 
21 | # Configures the mailer
22 | #
23 | # By default it uses the "Local" adapter which stores the emails
24 | # locally. You can see the emails in your browser, at "/dev/mailbox".
25 | #
26 | # For production it's recommended to configure a different adapter
27 | # at the `config/runtime.exs`.
28 | config :demo, Demo.Mailer, adapter: Swoosh.Adapters.Local
29 | 
30 | # Swoosh API client is needed for adapters other than SMTP.
31 | config :swoosh, :api_client, false
32 | 
33 | # Configure esbuild (the version is required)
34 | config :esbuild,
35 |   version: "0.12.18",
36 |   default: [
37 |     args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/assets),
38 |     cd: Path.expand("../assets", __DIR__),
39 |     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
40 |   ]
41 | 
42 | # Configures Elixir's Logger
43 | config :logger, :console,
44 |   format: "$time $metadata[$level] $message\n",
45 |   metadata: [:request_id]
46 | 
47 | # Use Jason for JSON parsing in Phoenix
48 | config :phoenix, :json_library, Jason
49 | 
50 | # Import environment specific config. This must remain at the bottom
51 | # of this file so it overrides the configuration defined above.
52 | import_config "#{config_env()}.exs"
53 | 


--------------------------------------------------------------------------------
/config/prod.exs:
--------------------------------------------------------------------------------
 1 | import Config
 2 | 
 3 | # For production, don't forget to configure the url host
 4 | # to something meaningful, Phoenix uses this information
 5 | # when generating URLs.
 6 | #
 7 | # Note we also include the path to a cache manifest
 8 | # containing the digested version of static files. This
 9 | # manifest is generated by the `mix phx.digest` task,
10 | # which you should run after static files are built and
11 | # before starting your production server.
12 | config :demo, DemoWeb.Endpoint,
13 |   url: [host: "example.com", port: 80],
14 |   cache_static_manifest: "priv/static/cache_manifest.json"
15 | 
16 | # Do not print debug messages in production
17 | config :logger, level: :info
18 | 
19 | # ## SSL Support
20 | #
21 | # To get SSL working, you will need to add the `https` key
22 | # to the previous section and set your `:url` port to 443:
23 | #
24 | #     config :demo, DemoWeb.Endpoint,
25 | #       ...,
26 | #       url: [host: "example.com", port: 443],
27 | #       https: [
28 | #         ...,
29 | #         port: 443,
30 | #         cipher_suite: :strong,
31 | #         keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
32 | #         certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
33 | #       ]
34 | #
35 | # The `cipher_suite` is set to `:strong` to support only the
36 | # latest and more secure SSL ciphers. This means old browsers
37 | # and clients may not be supported. You can set it to
38 | # `:compatible` for wider support.
39 | #
40 | # `:keyfile` and `:certfile` expect an absolute path to the key
41 | # and cert in disk or a relative path inside priv, for example
42 | # "priv/ssl/server.key". For all supported SSL configuration
43 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
44 | #
45 | # We also recommend setting `force_ssl` in your endpoint, ensuring
46 | # no data is ever sent via http, always redirecting to https:
47 | #
48 | #     config :demo, DemoWeb.Endpoint,
49 | #       force_ssl: [hsts: true]
50 | #
51 | # Check `Plug.SSL` for all available options in `force_ssl`.
52 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/page_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.PageLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   def render(assigns) do
 5 |     ~H"""
 6 |     <section class="phx-hero">
 7 |       <h2><%= gettext "Welcome to %{name}!", name: "Phoenix LiveView" %></h2>
 8 |       <%= live_render(@socket, DemoWeb.WeatherLive, id: :weather) %>
 9 |     </section>
10 | 
11 |     <section class="row">
12 |       <article class="column">
13 |         <h4>LiveView Examples</h4>
14 |         <ul>
15 |           <li><%= live_redirect "Thermostat", to: Routes.live_path(@socket, DemoWeb.ThermostatLive) %></li>
16 |           <li><%= live_redirect "Snake", to: Routes.live_path(@socket, DemoWeb.SnakeLive) %></li>
17 |           <li><%= live_redirect "Search with autocomplete", to: Routes.live_path(@socket, DemoWeb.SearchLive) %></li>
18 |           <li><%= live_redirect "CRUD users with live pagination", to: Routes.user_index_path(@socket, :index) %></li>
19 |           <li><%= live_redirect "Manual infinite scroll with button", to: Routes.user_index_manual_scroll_path(@socket, :index) %></li>
20 |           <li><%= live_redirect "Automatic infinite scroll with JS hook", to: Routes.user_index_auto_scroll_path(@socket, :index) %></li>
21 |           <li><%= live_redirect "Image Editor", to: Routes.live_path(@socket, DemoWeb.ImageLive) %></li>
22 |           <li><%= live_redirect "Clock", to: Routes.live_path(@socket, DemoWeb.ClockLive) %></li>
23 |           <li><%= live_redirect "Pacman", to: Routes.live_path(@socket, DemoWeb.PacmanLive) %></li>
24 |           <li><%= live_redirect "Rainbow", to: Routes.live_path(@socket, DemoWeb.RainbowLive) %></li>
25 |           <li><%= live_redirect "Top", to: Routes.live_path(@socket, DemoWeb.TopLive) %></li>
26 |           <li><%= live_redirect "Presence Example", to: Routes.live_path(@socket, DemoWeb.UserLive.PresenceIndex, "user#{System.unique_integer([:positive])}") %></li>
27 |           <li><%= live_redirect "Live Dashboard", to: Routes.live_dashboard_path(@socket, :home) %></li>
28 |         </ul>
29 |       </article>
30 |     </section>
31 |     """
32 |   end
33 | end
34 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/user_live/index_auto_scroll.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.UserLive.Row do
 2 |   use DemoWeb, :live_component
 3 | 
 4 |   defmodule Email do
 5 |     use DemoWeb, :live_component
 6 | 
 7 |     def mount(socket) do
 8 |       {:ok, assign(socket, count: 0), temporary_assigns: [email: nil]}
 9 |     end
10 | 
11 |     def render(assigns) do
12 |       ~H"""
13 |       <span id={@id} phx-click="click" phx-target={@myself}>
14 |         Email: <%= @email %> <%= @count %>
15 |       </span>
16 |       """
17 |     end
18 | 
19 |     def handle_event("click", _, socket) do
20 |       {:noreply, update(socket, :count, &(&1 + 1))}
21 |     end
22 |   end
23 | 
24 |   def mount(socket) do
25 |     {:ok, assign(socket, count: 0), temporary_assigns: [user: nil]}
26 |   end
27 | 
28 |   def render(assigns) do
29 |     ~H"""
30 |     <tr class="user-row" id={@id} phx-click="click" phx-target={@myself}>
31 |       <td><%= @user.username %> <%= @count %></td>
32 |       <td>
33 |         <%= live_component @socket, Email, id: "email-#{@id}", email: @user.email %>
34 |       </td>
35 |     </tr>
36 |     """
37 |   end
38 | 
39 |   def handle_event("click", _, socket) do
40 |     {:noreply, update(socket, :count, &(&1 + 1))}
41 |   end
42 | end
43 | 
44 | defmodule DemoWeb.UserLive.IndexAutoScroll do
45 |   use DemoWeb, :live_view
46 | 
47 |   alias DemoWeb.UserLive.Row
48 | 
49 |   def render(assigns) do
50 |     ~H"""
51 |     <table>
52 |       <tbody id="users"
53 |              phx-update="append"
54 |              phx-hook="InfiniteScroll"
55 |              data-page={@page}>
56 |         <%= for user <- @users do %>
57 |           <%= live_component @socket, Row, id: "user-#{user.id}", user: user %>
58 |         <% end %>
59 |       </tbody>
60 |     </table>
61 |     """
62 |   end
63 | 
64 |   def mount(_params, _session, socket) do
65 |     {:ok,
66 |      socket
67 |      |> assign(page: 1, per_page: 10)
68 |      |> fetch(), temporary_assigns: [users: []]}
69 |   end
70 | 
71 |   defp fetch(%{assigns: %{page: page, per_page: per}} = socket) do
72 |     assign(socket, users: Demo.Accounts.list_users(page, per))
73 |   end
74 | 
75 |   def handle_event("load-more", _, %{assigns: assigns} = socket) do
76 |     {:noreply, socket |> assign(page: assigns.page + 1) |> fetch()}
77 |   end
78 | end
79 | 


--------------------------------------------------------------------------------
/mix.exs:
--------------------------------------------------------------------------------
 1 | defmodule Demo.MixProject do
 2 |   use Mix.Project
 3 | 
 4 |   def project do
 5 |     [
 6 |       app: :demo,
 7 |       version: "0.1.0",
 8 |       elixir: "~> 1.12",
 9 |       elixirc_paths: elixirc_paths(Mix.env()),
10 |       compilers: [:gettext] ++ Mix.compilers(),
11 |       start_permanent: Mix.env() == :prod,
12 |       aliases: aliases(),
13 |       deps: deps()
14 |     ]
15 |   end
16 | 
17 |   # Configuration for the OTP application.
18 |   #
19 |   # Type `mix help compile.app` for more information.
20 |   def application do
21 |     [
22 |       mod: {Demo.Application, []},
23 |       extra_applications: [:logger, :runtime_tools, :inets]
24 |     ]
25 |   end
26 | 
27 |   # Specifies which paths to compile per environment.
28 |   defp elixirc_paths(:test), do: ["lib", "test/support"]
29 |   defp elixirc_paths(_), do: ["lib"]
30 | 
31 |   # Specifies your project dependencies.
32 |   #
33 |   # Type `mix help deps` for examples and options.
34 |   defp deps do
35 |     [
36 |       {:phoenix, "~> 1.6.0"},
37 |       {:phoenix_ecto, "~> 4.4"},
38 |       {:ecto_sql, "~> 3.6"},
39 |       {:postgrex, ">= 0.0.0"},
40 |       {:phoenix_html, "~> 3.0"},
41 |       {:phoenix_live_reload, "~> 1.2", only: :dev},
42 |       {:phoenix_live_view, "~> 0.16.4"},
43 |       {:floki, ">= 0.30.0", only: :test},
44 |       {:phoenix_live_dashboard, "~> 0.5"},
45 |       {:esbuild, "~> 0.2", runtime: Mix.env() == :dev},
46 |       {:swoosh, "~> 1.3"},
47 |       {:telemetry_metrics, "~> 0.6"},
48 |       {:telemetry_poller, "~> 1.0"},
49 |       {:gettext, "~> 0.18"},
50 |       {:jason, "~> 1.2"},
51 |       {:plug_cowboy, "~> 2.5"},
52 |       {:nimble_strftime, ">= 0.0.0"}
53 |     ]
54 |   end
55 | 
56 |   # Aliases are shortcuts or tasks specific to the current project.
57 |   # For example, to install project dependencies and perform other setup tasks, run:
58 |   #
59 |   #     $ mix setup
60 |   #
61 |   # See the documentation for `Mix` for more info on aliases.
62 |   defp aliases do
63 |     [
64 |       setup: ["deps.get", "ecto.setup"],
65 |       "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
66 |       "ecto.reset": ["ecto.drop", "ecto.setup"],
67 |       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
68 |       "assets.deploy": ["esbuild default --minify", "phx.digest"]
69 |     ]
70 |   end
71 | end
72 | 


--------------------------------------------------------------------------------
/lib/demo_web/router.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.Router do
 2 |   use DemoWeb, :router
 3 | 
 4 |   pipeline :browser do
 5 |     plug :accepts, ["html"]
 6 |     plug :fetch_session
 7 |     plug :fetch_live_flash
 8 |     plug :put_root_layout, {DemoWeb.LayoutView, :root}
 9 |     plug :protect_from_forgery
10 |     plug :put_secure_browser_headers
11 |   end
12 | 
13 |   pipeline :api do
14 |     plug :accepts, ["json"]
15 |   end
16 | 
17 |   scope "/", DemoWeb do
18 |     pipe_through :browser
19 | 
20 |     live "/", PageLive, :index
21 | 
22 |     live "/thermostat", ThermostatLive
23 |     live "/search", SearchLive
24 |     live "/clock", ClockLive
25 |     live "/image", ImageLive
26 |     live "/pacman", PacmanLive
27 |     live "/rainbow", RainbowLive
28 |     live "/top", TopLive
29 |     live "/presence_users/:name", UserLive.PresenceIndex
30 | 
31 |     live "/users/page/:page", UserLive.Index
32 |     live "/users", UserLive.Index, :index
33 |     live "/users-scroll", UserLive.IndexManualScroll, :index
34 |     live "/users-auto-scroll", UserLive.IndexAutoScroll, :index
35 | 
36 |     live "/users/new", UserLive.New, :new
37 |     live "/users/:id", UserLive.Show, :show
38 |     live "/users/:id/edit", UserLive.Edit, :edit
39 | 
40 |     live_session :game, root_layout: {DemoWeb.LayoutView, :game} do
41 |       live "/snake", SnakeLive
42 |     end
43 |   end
44 | 
45 |   # Enables LiveDashboard only for development
46 |   #
47 |   # If you want to use the LiveDashboard in production, you should put
48 |   # it behind authentication and allow only admins to access it.
49 |   # If your application does not have an admins-only section yet,
50 |   # you can use Plug.BasicAuth to set up some basic authentication
51 |   # as long as you are also using SSL (which you should anyway).
52 |   if Mix.env() in [:dev, :test] do
53 |     import Phoenix.LiveDashboard.Router
54 | 
55 |     scope "/" do
56 |       pipe_through :browser
57 |       live_dashboard "/dashboard", metrics: DemoWeb.Telemetry
58 |     end
59 |   end
60 | 
61 |   # Enables the Swoosh mailbox preview in development.
62 |   #
63 |   # Note that preview only shows emails that were sent by the same
64 |   # node running the Phoenix server.
65 |   if Mix.env() == :dev do
66 |     scope "/dev" do
67 |       pipe_through :browser
68 | 
69 |       forward "/mailbox", Plug.Swoosh.MailboxPreview
70 |     end
71 |   end
72 | end
73 | 


--------------------------------------------------------------------------------
/lib/demo_web/telemetry.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.Telemetry do
 2 |   use Supervisor
 3 |   import Telemetry.Metrics
 4 | 
 5 |   def start_link(arg) do
 6 |     Supervisor.start_link(__MODULE__, arg, name: __MODULE__)
 7 |   end
 8 | 
 9 |   @impl true
10 |   def init(_arg) do
11 |     children = [
12 |       # Telemetry poller will execute the given period measurements
13 |       # every 10_000ms. Learn more here: https://hexdocs.pm/telemetry_metrics
14 |       {:telemetry_poller, measurements: periodic_measurements(), period: 10_000}
15 |       # Add reporters as children of your supervision tree.
16 |       # {Telemetry.Metrics.ConsoleReporter, metrics: metrics()}
17 |     ]
18 | 
19 |     Supervisor.init(children, strategy: :one_for_one)
20 |   end
21 | 
22 |   def metrics do
23 |     [
24 |       # Phoenix Metrics
25 |       summary("phoenix.endpoint.stop.duration",
26 |         unit: {:native, :millisecond}
27 |       ),
28 |       summary("phoenix.router_dispatch.stop.duration",
29 |         tags: [:route],
30 |         unit: {:native, :millisecond}
31 |       ),
32 | 
33 |       # Database Metrics
34 |       summary("demo.repo.query.total_time",
35 |         unit: {:native, :millisecond},
36 |         description: "The sum of the other measurements"
37 |       ),
38 |       summary("demo.repo.query.decode_time",
39 |         unit: {:native, :millisecond},
40 |         description: "The time spent decoding the data received from the database"
41 |       ),
42 |       summary("demo.repo.query.query_time",
43 |         unit: {:native, :millisecond},
44 |         description: "The time spent executing the query"
45 |       ),
46 |       summary("demo.repo.query.queue_time",
47 |         unit: {:native, :millisecond},
48 |         description: "The time spent waiting for a database connection"
49 |       ),
50 |       summary("demo.repo.query.idle_time",
51 |         unit: {:native, :millisecond},
52 |         description:
53 |           "The time the connection spent waiting before being checked out for the query"
54 |       ),
55 | 
56 |       # VM Metrics
57 |       summary("vm.memory.total", unit: {:byte, :kilobyte}),
58 |       summary("vm.total_run_queue_lengths.total"),
59 |       summary("vm.total_run_queue_lengths.cpu"),
60 |       summary("vm.total_run_queue_lengths.io")
61 |     ]
62 |   end
63 | 
64 |   defp periodic_measurements do
65 |     [
66 |       # A module, function and arguments to be invoked periodically.
67 |       # This function must call :telemetry.execute/3 and a metric must be added above.
68 |       # {DemoWeb, :count_users, []}
69 |     ]
70 |   end
71 | end
72 | 


--------------------------------------------------------------------------------
/config/dev.exs:
--------------------------------------------------------------------------------
 1 | import Config
 2 | 
 3 | # Configure your database
 4 | config :demo, Demo.Repo,
 5 |   username: "postgres",
 6 |   password: "postgres",
 7 |   database: "demo_dev",
 8 |   hostname: "localhost",
 9 |   show_sensitive_data_on_connection_error: true,
10 |   pool_size: 10
11 | 
12 | # For development, we disable any cache and enable
13 | # debugging and code reloading.
14 | #
15 | # The watchers configuration can be used to run external
16 | # watchers to your application. For example, we use it
17 | # with esbuild to bundle .js and .css sources.
18 | config :demo, DemoWeb.Endpoint,
19 |   # Binding to loopback ipv4 address prevents access from other machines.
20 |   # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
21 |   http: [ip: {127, 0, 0, 1}, port: 4000],
22 |   debug_errors: true,
23 |   code_reloader: true,
24 |   check_origin: false,
25 |   watchers: [
26 |     # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
27 |     esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
28 |   ]
29 | 
30 | # ## SSL Support
31 | #
32 | # In order to use HTTPS in development, a self-signed
33 | # certificate can be generated by running the following
34 | # Mix task:
35 | #
36 | #     mix phx.gen.cert
37 | #
38 | # Note that this task requires Erlang/OTP 20 or later.
39 | # Run `mix help phx.gen.cert` for more information.
40 | #
41 | # The `http:` config above can be replaced with:
42 | #
43 | #     https: [
44 | #       port: 4001,
45 | #       cipher_suite: :strong,
46 | #       keyfile: "priv/cert/selfsigned_key.pem",
47 | #       certfile: "priv/cert/selfsigned.pem"
48 | #     ],
49 | #
50 | # If desired, both `http:` and `https:` keys can be
51 | # configured to run both http and https servers on
52 | # different ports.
53 | 
54 | # Watch static and templates for browser reloading.
55 | config :demo, DemoWeb.Endpoint,
56 |   live_reload: [
57 |     patterns: [
58 |       ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
59 |       ~r"priv/gettext/.*(po)$",
60 |       ~r"lib/demo_web/(live|views)/.*(ex)$",
61 |       ~r"lib/demo_web/templates/.*(eex)$"
62 |     ]
63 |   ]
64 | 
65 | # Do not include metadata nor timestamps in development logs
66 | config :logger, :console, format: "[$level] $message\n"
67 | 
68 | # Set a higher stacktrace during development. Avoid configuring such
69 | # in production as building large stacktraces may be expensive.
70 | config :phoenix, :stacktrace_depth, 20
71 | 
72 | # Initialize plugs at runtime for faster development compilation
73 | config :phoenix, :plug_init_mode, :runtime
74 | 


--------------------------------------------------------------------------------
/priv/gettext/en/LC_MESSAGES/errors.po:
--------------------------------------------------------------------------------
 1 | ## `msgid`s in this file come from POT (.pot) files.
 2 | ##
 3 | ## Do not add, change, or remove `msgid`s manually here as
 4 | ## they're tied to the ones in the corresponding POT file
 5 | ## (with the same domain).
 6 | ##
 7 | ## Use `mix gettext.extract --merge` or `mix gettext.merge`
 8 | ## to merge POT files into PO files.
 9 | msgid ""
10 | msgstr ""
11 | "Language: en\n"
12 | 
13 | ## From Ecto.Changeset.cast/4
14 | msgid "can't be blank"
15 | msgstr ""
16 | 
17 | ## From Ecto.Changeset.unique_constraint/3
18 | msgid "has already been taken"
19 | msgstr ""
20 | 
21 | ## From Ecto.Changeset.put_change/3
22 | msgid "is invalid"
23 | msgstr ""
24 | 
25 | ## From Ecto.Changeset.validate_acceptance/3
26 | msgid "must be accepted"
27 | msgstr ""
28 | 
29 | ## From Ecto.Changeset.validate_format/3
30 | msgid "has invalid format"
31 | msgstr ""
32 | 
33 | ## From Ecto.Changeset.validate_subset/3
34 | msgid "has an invalid entry"
35 | msgstr ""
36 | 
37 | ## From Ecto.Changeset.validate_exclusion/3
38 | msgid "is reserved"
39 | msgstr ""
40 | 
41 | ## From Ecto.Changeset.validate_confirmation/3
42 | msgid "does not match confirmation"
43 | msgstr ""
44 | 
45 | ## From Ecto.Changeset.no_assoc_constraint/3
46 | msgid "is still associated with this entry"
47 | msgstr ""
48 | 
49 | msgid "are still associated with this entry"
50 | msgstr ""
51 | 
52 | ## From Ecto.Changeset.validate_length/3
53 | msgid "should be %{count} character(s)"
54 | msgid_plural "should be %{count} character(s)"
55 | msgstr[0] ""
56 | msgstr[1] ""
57 | 
58 | msgid "should have %{count} item(s)"
59 | msgid_plural "should have %{count} item(s)"
60 | msgstr[0] ""
61 | msgstr[1] ""
62 | 
63 | msgid "should be at least %{count} character(s)"
64 | msgid_plural "should be at least %{count} character(s)"
65 | msgstr[0] ""
66 | msgstr[1] ""
67 | 
68 | msgid "should have at least %{count} item(s)"
69 | msgid_plural "should have at least %{count} item(s)"
70 | msgstr[0] ""
71 | msgstr[1] ""
72 | 
73 | msgid "should be at most %{count} character(s)"
74 | msgid_plural "should be at most %{count} character(s)"
75 | msgstr[0] ""
76 | msgstr[1] ""
77 | 
78 | msgid "should have at most %{count} item(s)"
79 | msgid_plural "should have at most %{count} item(s)"
80 | msgstr[0] ""
81 | msgstr[1] ""
82 | 
83 | ## From Ecto.Changeset.validate_number/3
84 | msgid "must be less than %{number}"
85 | msgstr ""
86 | 
87 | msgid "must be greater than %{number}"
88 | msgstr ""
89 | 
90 | msgid "must be less than or equal to %{number}"
91 | msgstr ""
92 | 
93 | msgid "must be greater than or equal to %{number}"
94 | msgstr ""
95 | 
96 | msgid "must be equal to %{number}"
97 | msgstr ""
98 | 


--------------------------------------------------------------------------------
/priv/gettext/errors.pot:
--------------------------------------------------------------------------------
 1 | ## This is a PO Template file.
 2 | ##
 3 | ## `msgid`s here are often extracted from source code.
 4 | ## Add new translations manually only if they're dynamic
 5 | ## translations that can't be statically extracted.
 6 | ##
 7 | ## Run `mix gettext.extract` to bring this file up to
 8 | ## date. Leave `msgstr`s empty as changing them here has no
 9 | ## effect: edit them in PO (`.po`) files instead.
10 | 
11 | ## From Ecto.Changeset.cast/4
12 | msgid "can't be blank"
13 | msgstr ""
14 | 
15 | ## From Ecto.Changeset.unique_constraint/3
16 | msgid "has already been taken"
17 | msgstr ""
18 | 
19 | ## From Ecto.Changeset.put_change/3
20 | msgid "is invalid"
21 | msgstr ""
22 | 
23 | ## From Ecto.Changeset.validate_acceptance/3
24 | msgid "must be accepted"
25 | msgstr ""
26 | 
27 | ## From Ecto.Changeset.validate_format/3
28 | msgid "has invalid format"
29 | msgstr ""
30 | 
31 | ## From Ecto.Changeset.validate_subset/3
32 | msgid "has an invalid entry"
33 | msgstr ""
34 | 
35 | ## From Ecto.Changeset.validate_exclusion/3
36 | msgid "is reserved"
37 | msgstr ""
38 | 
39 | ## From Ecto.Changeset.validate_confirmation/3
40 | msgid "does not match confirmation"
41 | msgstr ""
42 | 
43 | ## From Ecto.Changeset.no_assoc_constraint/3
44 | msgid "is still associated with this entry"
45 | msgstr ""
46 | 
47 | msgid "are still associated with this entry"
48 | msgstr ""
49 | 
50 | ## From Ecto.Changeset.validate_length/3
51 | msgid "should be %{count} character(s)"
52 | msgid_plural "should be %{count} character(s)"
53 | msgstr[0] ""
54 | msgstr[1] ""
55 | 
56 | msgid "should have %{count} item(s)"
57 | msgid_plural "should have %{count} item(s)"
58 | msgstr[0] ""
59 | msgstr[1] ""
60 | 
61 | msgid "should be at least %{count} character(s)"
62 | msgid_plural "should be at least %{count} character(s)"
63 | msgstr[0] ""
64 | msgstr[1] ""
65 | 
66 | msgid "should have at least %{count} item(s)"
67 | msgid_plural "should have at least %{count} item(s)"
68 | msgstr[0] ""
69 | msgstr[1] ""
70 | 
71 | msgid "should be at most %{count} character(s)"
72 | msgid_plural "should be at most %{count} character(s)"
73 | msgstr[0] ""
74 | msgstr[1] ""
75 | 
76 | msgid "should have at most %{count} item(s)"
77 | msgid_plural "should have at most %{count} item(s)"
78 | msgstr[0] ""
79 | msgstr[1] ""
80 | 
81 | ## From Ecto.Changeset.validate_number/3
82 | msgid "must be less than %{number}"
83 | msgstr ""
84 | 
85 | msgid "must be greater than %{number}"
86 | msgstr ""
87 | 
88 | msgid "must be less than or equal to %{number}"
89 | msgstr ""
90 | 
91 | msgid "must be greater than or equal to %{number}"
92 | msgstr ""
93 | 
94 | msgid "must be equal to %{number}"
95 | msgstr ""
96 | 


--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
 1 | // We import the CSS which is extracted to its own file by esbuild.
 2 | // Remove this line if you add a your own CSS build pipeline (e.g postcss).
 3 | import "../css/app.css"
 4 | 
 5 | // If you want to use Phoenix channels, run `mix help phx.gen.channel`
 6 | // to get started and then uncomment the line below.
 7 | // import "./user_socket.js"
 8 | 
 9 | // You can include dependencies in two ways.
10 | //
11 | // The simplest option is to put them in assets/vendor and
12 | // import them using relative paths:
13 | //
14 | //     import "./vendor/some-package.js"
15 | //
16 | // Alternatively, you can `npm install some-package` and import
17 | // them using a path starting with the package name:
18 | //
19 | //     import "some-package"
20 | //
21 | 
22 | // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
23 | import "phoenix_html"
24 | // Establish Phoenix Socket and LiveView configuration.
25 | import {Socket} from "phoenix"
26 | import {LiveSocket} from "phoenix_live_view"
27 | import topbar from "../vendor/topbar"
28 | 
29 | let Hooks = {}
30 | 
31 | let scrollAt = () => {
32 |   let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
33 |   let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
34 |   let clientHeight = document.documentElement.clientHeight
35 | 
36 |   return scrollTop / (scrollHeight - clientHeight) * 100
37 | }
38 | 
39 | Hooks.InfiniteScroll = {
40 |   page() { return this.el.dataset.page },
41 |   mounted(){
42 |     this.pending = this.page()
43 |     window.addEventListener("scroll", e => {
44 |       if(this.pending == this.page() && scrollAt() > 90){
45 |         this.pending = this.page() + 1
46 |         this.pushEvent("load-more", {})
47 |       }
48 |     })
49 |   },
50 |   updated(){ this.pending = this.page() }
51 | }
52 | 
53 | let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
54 | let liveSocket = new LiveSocket("/live", Socket, {
55 |   hooks: Hooks, params: {_csrf_token: csrfToken}
56 | })
57 | 
58 | // Show progress bar on live navigation and form submits
59 | topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
60 | window.addEventListener("phx:page-loading-start", info => topbar.show())
61 | window.addEventListener("phx:page-loading-stop", info => topbar.hide())
62 | 
63 | // connect if there are any LiveViews on the page
64 | liveSocket.connect()
65 | 
66 | // expose liveSocket on window for web console debug logs and latency simulation:
67 | // >> liveSocket.enableDebug()
68 | // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
69 | // >> liveSocket.disableLatencySim()
70 | window.liveSocket = liveSocket
71 | 


--------------------------------------------------------------------------------
/config/runtime.exs:
--------------------------------------------------------------------------------
 1 | import Config
 2 | 
 3 | # config/runtime.exs is executed for all environments, including
 4 | # during releases. It is executed after compilation and before the
 5 | # system starts, so it is typically used to load production configuration
 6 | # and secrets from environment variables or elsewhere. Do not define
 7 | # any compile-time configuration in here, as it won't be applied.
 8 | # The block below contains prod specific runtime configuration.
 9 | if config_env() == :prod do
10 |   database_url =
11 |     System.get_env("DATABASE_URL") ||
12 |       raise """
13 |       environment variable DATABASE_URL is missing.
14 |       For example: ecto://USER:PASS@HOST/DATABASE
15 |       """
16 | 
17 |   config :demo, Demo.Repo,
18 |     # ssl: true,
19 |     # socket_options: [:inet6],
20 |     url: database_url,
21 |     pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10")
22 | 
23 |   secret_key_base =
24 |     System.get_env("SECRET_KEY_BASE") ||
25 |       raise """
26 |       environment variable SECRET_KEY_BASE is missing.
27 |       You can generate one by calling: mix phx.gen.secret
28 |       """
29 | 
30 |   config :demo, DemoWeb.Endpoint,
31 |     http: [
32 |       # Enable IPv6 and bind on all interfaces.
33 |       # Set it to  {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
34 |       # See the documentation on https://hexdocs.pm/plug_cowboy/Plug.Cowboy.html
35 |       # for details about using IPv6 vs IPv4 and loopback vs public addresses.
36 |       ip: {0, 0, 0, 0, 0, 0, 0, 0},
37 |       port: String.to_integer(System.get_env("PORT") || "4000")
38 |     ],
39 |     secret_key_base: secret_key_base
40 | 
41 |   # ## Using releases
42 |   #
43 |   # If you are doing OTP releases, you need to instruct Phoenix
44 |   # to start each relevant endpoint:
45 |   #
46 |   #     config :demo, DemoWeb.Endpoint, server: true
47 |   #
48 |   # Then you can assemble a release by calling `mix release`.
49 |   # See `mix help release` for more information.
50 | 
51 |   # ## Configuring the mailer
52 |   #
53 |   # In production you need to configure the mailer to use a different adapter.
54 |   # Also, you may need to configure the Swoosh API client of your choice if you
55 |   # are not using SMTP. Here is an example of the configuration:
56 |   #
57 |   #     config :demo, Demo.Mailer,
58 |   #       adapter: Swoosh.Adapters.Mailgun,
59 |   #       api_key: System.get_env("MAILGUN_API_KEY"),
60 |   #       domain: System.get_env("MAILGUN_DOMAIN")
61 |   #
62 |   # For this example you need include a HTTP client required by Swoosh API client.
63 |   # Swoosh supports Hackney and Finch out of the box:
64 |   #
65 |   #     config :swoosh, :api_client, Swoosh.ApiClient.Hackney
66 |   #
67 |   # See https://hexdocs.pm/swoosh/Swoosh.html#module-installation for details.
68 | end
69 | 


--------------------------------------------------------------------------------
/lib/demo_web.ex:
--------------------------------------------------------------------------------
  1 | defmodule DemoWeb do
  2 |   @moduledoc """
  3 |   The entrypoint for defining your web interface, such
  4 |   as controllers, views, channels and so on.
  5 | 
  6 |   This can be used in your application as:
  7 | 
  8 |       use DemoWeb, :controller
  9 |       use DemoWeb, :view
 10 | 
 11 |   The definitions below will be executed for every view,
 12 |   controller, etc, so keep them short and clean, focused
 13 |   on imports, uses and aliases.
 14 | 
 15 |   Do NOT define functions inside the quoted expressions
 16 |   below. Instead, define any helper function in modules
 17 |   and import those modules here.
 18 |   """
 19 | 
 20 |   def controller do
 21 |     quote do
 22 |       use Phoenix.Controller, namespace: DemoWeb
 23 | 
 24 |       import Plug.Conn
 25 |       import DemoWeb.Gettext
 26 |       alias DemoWeb.Router.Helpers, as: Routes
 27 |     end
 28 |   end
 29 | 
 30 |   def view do
 31 |     quote do
 32 |       use Phoenix.View,
 33 |         root: "lib/demo_web/templates",
 34 |         namespace: DemoWeb
 35 | 
 36 |       # Import convenience functions from controllers
 37 |       import Phoenix.Controller,
 38 |         only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1]
 39 | 
 40 |       # Include shared imports and aliases for views
 41 |       unquote(view_helpers())
 42 |     end
 43 |   end
 44 | 
 45 |   def live_view do
 46 |     quote do
 47 |       use Phoenix.LiveView,
 48 |         layout: {DemoWeb.LayoutView, "live.html"}
 49 | 
 50 |       unquote(view_helpers())
 51 |     end
 52 |   end
 53 | 
 54 |   def live_component do
 55 |     quote do
 56 |       use Phoenix.LiveComponent
 57 | 
 58 |       unquote(view_helpers())
 59 |     end
 60 |   end
 61 | 
 62 |   def router do
 63 |     quote do
 64 |       use Phoenix.Router
 65 | 
 66 |       import Plug.Conn
 67 |       import Phoenix.Controller
 68 |       import Phoenix.LiveView.Router
 69 |     end
 70 |   end
 71 | 
 72 |   def channel do
 73 |     quote do
 74 |       use Phoenix.Channel
 75 |       import DemoWeb.Gettext
 76 |     end
 77 |   end
 78 | 
 79 |   defp view_helpers do
 80 |     quote do
 81 |       # Use all HTML functionality (forms, tags, etc)
 82 |       use Phoenix.HTML
 83 | 
 84 |       # Import LiveView and .heex helpers (live_render, live_patch, <.form>, etc)
 85 |       import Phoenix.LiveView.Helpers
 86 | 
 87 |       # Import basic rendering functionality (render, render_layout, etc)
 88 |       import Phoenix.View
 89 | 
 90 |       import DemoWeb.ErrorHelpers
 91 |       import DemoWeb.Gettext
 92 |       alias DemoWeb.Router.Helpers, as: Routes
 93 |     end
 94 |   end
 95 | 
 96 |   @doc """
 97 |   When used, dispatch to the appropriate controller/view/etc.
 98 |   """
 99 |   defmacro __using__(which) when is_atom(which) do
100 |     apply(__MODULE__, which, [])
101 |   end
102 | end
103 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/rainbow_live.ex:
--------------------------------------------------------------------------------
 1 | defmodule DemoWeb.RainbowLive do
 2 |   use DemoWeb, :live_view
 3 | 
 4 |   @fps 60
 5 |   @inner_window_width 1200
 6 | 
 7 |   def render(assigns) do
 8 |     ~H"""
 9 |     <h1>Silky Smooth SSR</h1>
10 |     <h3>Fast enough to power animations <em>[on the server]</em> at <%= @fps %>FPS</h3>
11 |     <form phx-change="update_fps">
12 |       <input type="range" min="1" max="100" value={@fps} name="fps"/>
13 |     </form>
14 |     <div class="animated-sin-wave" phx-click="switch" style={"background: #{@bg};"}>
15 |       <%= for bar <- @bars do %>
16 |         <div class="bar" id={bar.id} style={"width: #{bar.width}%; left: #{bar.x}%; transform: scale(0.8,.5) translateY(#{bar.translate_y}%) rotate(#{bar.rotation}deg); background-color: hsl(#{bar.hue},95%,55%);"}>
17 |         </div>
18 |       <% end %>
19 |     </div>
20 |     <br/>
21 |     <h3>
22 |       The above animation is <%= @bar_count %> <%= "<div>" %> tags.
23 |       <br/>
24 |       No SVG, no CSS transitions/animations.
25 |       It's all powered by <em>Phoenix</em> which does a full re-render every frame.
26 |     </h3>
27 |     """
28 |   end
29 | 
30 |   defp assign_bars(socket) do
31 |     bar_count = socket.assigns.bar_count
32 |     count = socket.assigns.count
33 |     bar_width = 100 / bar_count
34 | 
35 |     bars =
36 |       for i <- 0..bar_count do
37 |         %{
38 |           id: "bar#{System.unique_integer([:positive])}",
39 |           x: bar_width * i,
40 |           translate_y: :math.sin(count / 10 + i / 5) * 100 * 0.5,
41 |           rotation: rem(trunc(count + i), 360),
42 |           width: bar_width,
43 |           hue: rem(trunc(360 / bar_count * i - count), 360)
44 |         }
45 |       end
46 | 
47 |     assign(socket, bars: bars)
48 |   end
49 | 
50 |   def mount(_params, _session, socket) do
51 |     socket =
52 |       socket
53 |       |> assign(%{
54 |         bg: "white",
55 |         fps: @fps,
56 |         step: 0.5,
57 |         count: 0,
58 |         inner_window_width: @inner_window_width,
59 |         bar_count: Enum.min([200, trunc(:math.floor(@inner_window_width / 15))])
60 |       })
61 |       |> assign_bars()
62 | 
63 |     if connected?(socket), do: schedule_next_frame(socket)
64 | 
65 |     {:ok, socket}
66 |   end
67 | 
68 |   defp schedule_next_frame(socket) do
69 |     Process.send_after(self(), :next_frame, trunc(1000 / socket.assigns.fps))
70 |   end
71 | 
72 |   def handle_info(:next_frame, socket) do
73 |     schedule_next_frame(socket)
74 |     %{count: count, step: step} = socket.assigns
75 | 
76 |     socket =
77 |       socket
78 |       |> assign(count: count + step)
79 |       |> assign_bars()
80 | 
81 |     {:noreply, socket}
82 |   end
83 | 
84 |   def handle_event("switch", _val, %{assigns: assigns} = socket) do
85 |     {:noreply, assign(socket, step: assigns.step * -1)}
86 |   end
87 | 
88 |   def handle_event("update_fps", %{"fps" => fps}, socket) do
89 |     fps = String.to_integer(fps)
90 |     {:noreply, assign(socket, :fps, fps)}
91 |   end
92 | end
93 | 


--------------------------------------------------------------------------------
/lib/demo/accounts.ex:
--------------------------------------------------------------------------------
  1 | defmodule Demo.Accounts do
  2 |   @moduledoc """
  3 |   The Accounts context.
  4 |   """
  5 | 
  6 |   import Ecto.Query, warn: false
  7 |   alias Demo.Repo
  8 | 
  9 |   alias Demo.Accounts.User
 10 | 
 11 |   @topic inspect(__MODULE__)
 12 | 
 13 |   def subscribe do
 14 |     Phoenix.PubSub.subscribe(Demo.PubSub, @topic)
 15 |   end
 16 | 
 17 |   def subscribe(user_id) do
 18 |     Phoenix.PubSub.subscribe(Demo.PubSub, @topic <> "#{user_id}")
 19 |   end
 20 | 
 21 |   @doc """
 22 |   Returns the list of users.
 23 | 
 24 |   ## Examples
 25 | 
 26 |       iex> list_users()
 27 |       [%User{}, ...]
 28 | 
 29 |   """
 30 |   def list_users(current_page, per_page) do
 31 |     Repo.all(
 32 |       from u in User,
 33 |         order_by: [asc: u.id],
 34 |         offset: ^((current_page - 1) * per_page),
 35 |         limit: ^per_page
 36 |     )
 37 |   end
 38 | 
 39 |   @doc """
 40 |   Gets a single user.
 41 | 
 42 |   Raises `Ecto.NoResultsError` if the User does not exist.
 43 | 
 44 |   ## Examples
 45 | 
 46 |       iex> get_user!(123)
 47 |       %User{}
 48 | 
 49 |       iex> get_user!(456)
 50 |       ** (Ecto.NoResultsError)
 51 | 
 52 |   """
 53 |   def get_user!(id), do: Repo.get!(User, id)
 54 | 
 55 |   @doc """
 56 |   Creates a user.
 57 | 
 58 |   ## Examples
 59 | 
 60 |       iex> create_user(%{field: value})
 61 |       {:ok, %User{}}
 62 | 
 63 |       iex> create_user(%{field: bad_value})
 64 |       {:error, %Ecto.Changeset{}}
 65 | 
 66 |   """
 67 |   def create_user(attrs \\ %{}) do
 68 |     %User{}
 69 |     |> User.changeset(attrs)
 70 |     |> Repo.insert()
 71 |     |> notify_subscribers([:user, :created])
 72 |   end
 73 | 
 74 |   @doc """
 75 |   Updates a user.
 76 | 
 77 |   ## Examples
 78 | 
 79 |       iex> update_user(user, %{field: new_value})
 80 |       {:ok, %User{}}
 81 | 
 82 |       iex> update_user(user, %{field: bad_value})
 83 |       {:error, %Ecto.Changeset{}}
 84 | 
 85 |   """
 86 |   def update_user(%User{} = user, attrs) do
 87 |     user
 88 |     |> User.changeset(attrs)
 89 |     |> Repo.update()
 90 |     |> notify_subscribers([:user, :updated])
 91 |   end
 92 | 
 93 |   @doc """
 94 |   Deletes a User.
 95 | 
 96 |   ## Examples
 97 | 
 98 |       iex> delete_user(user)
 99 |       {:ok, %User{}}
100 | 
101 |       iex> delete_user(user)
102 |       {:error, %Ecto.Changeset{}}
103 | 
104 |   """
105 |   def delete_user(%User{} = user) do
106 |     user
107 |     |> Repo.delete()
108 |     |> notify_subscribers([:user, :deleted])
109 |   end
110 | 
111 |   @doc """
112 |   Returns an `%Ecto.Changeset{}` for tracking user changes.
113 | 
114 |   ## Examples
115 | 
116 |       iex> change_user(user)
117 |       %Ecto.Changeset{source: %User{}}
118 | 
119 |   """
120 |   def change_user(user, attrs \\ %{}) do
121 |     User.changeset(user, attrs)
122 |   end
123 | 
124 |   defp notify_subscribers({:ok, result}, event) do
125 |     Phoenix.PubSub.broadcast(Demo.PubSub, @topic, {__MODULE__, event, result})
126 |     Phoenix.PubSub.broadcast(Demo.PubSub, @topic <> "#{result.id}", {__MODULE__, event, result})
127 |     {:ok, result}
128 |   end
129 | 
130 |   defp notify_subscribers({:error, reason}, _event), do: {:error, reason}
131 | end
132 | 


--------------------------------------------------------------------------------
/assets/css/pacman.css:
--------------------------------------------------------------------------------
  1 | @import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
  2 | 
  3 | html{
  4 |   overflow-x:hidden;
  5 | }
  6 | 
  7 | .game-container{
  8 |   position: absolute;
  9 | }
 10 | .pacman{
 11 |   position: relative;
 12 |   z-index: 999;
 13 | }
 14 | .game-container .block{
 15 |   display: block;
 16 |   position: absolute;
 17 | 
 18 | }
 19 | .game-container .block.tail{ background: yellow; }
 20 | .game-container .block.wall{ background: blue; }
 21 | .game-container .block.empty{ background: #000000; }
 22 | 
 23 | .pacman-top{
 24 |   background-color:yellow;
 25 |   border-radius:100px 100px 0 0;
 26 |   animation: spin1 0.5s infinite linear;
 27 | }
 28 | 
 29 | .pacman-bottom{
 30 |   background-color:yellow;
 31 |   border-radius:0 0 100px 100px;
 32 |   animation: spin2 0.5s infinite linear;
 33 | }
 34 | 
 35 | /* Animation*/
 36 | 
 37 | @keyframes spin1 {
 38 |   0%  {transform: rotate(0deg);}
 39 |   50%{transform: rotate(-35deg);}
 40 | 
 41 | }
 42 | @keyframes spin2 {
 43 |   0%  {transform: rotate(0deg);}
 44 |   50%{transform: rotate(35deg);}
 45 | }
 46 | 
 47 | @-moz-keyframes spin1 {
 48 |   0%  {transform: rotate(0deg);}
 49 |   50%{transform: rotate(-35deg);}
 50 | 
 51 | }
 52 | @-moz-keyframes spin2 {
 53 |   0%  {transform: rotate(0deg);}
 54 |   50%{transform: rotate(35deg);}
 55 | }
 56 | 
 57 | @-webkit-keyframes spin1 {
 58 |   0%  {transform: rotate(0deg);}
 59 |   50%{transform: rotate(-35deg);}
 60 | 
 61 | }
 62 | @-webkit-keyframes spin2 {
 63 |   0%  {transform: rotate(0deg);}
 64 |   50%{transform: rotate(35deg);}
 65 | }
 66 | 
 67 | @keyframes eat {
 68 |   0% { box-shadow:
 69 |        100px 65px 0 0 white,
 70 |        300px 65px 0 0 white,
 71 |        500px 65px 0 0 white,
 72 |        700px 65px 0 0 white,
 73 |        900px 65px 0 0 white,
 74 |        1100px 65px 0 0 white,
 75 |        1300px 65px 0 0 white;}
 76 | 
 77 |   100% { box-shadow:
 78 |          0px 65px 0 0 white,
 79 |          100px 65px 0 0 white,
 80 |          300px 65px 0 0 white,
 81 |          500px 65px 0 0 white,
 82 |          700px 65px 0 0 white,
 83 |          900px 65px 0 0 white,
 84 |          1100px 65px 0 0 white;}
 85 | }
 86 | 
 87 | 
 88 |  @-moz-keyframes eat {
 89 |    0% { box-shadow:
 90 |         100px 65px 0 0 white,
 91 |         300px 65px 0 0 white,
 92 |         500px 65px 0 0 white,
 93 |         700px 65px 0 0 white,
 94 |         900px 65px 0 0 white,
 95 |         1100px 65px 0 0 white,
 96 |         1300px 65px 0 0 white;}
 97 | 
 98 |    100% { box-shadow:
 99 |           0px 65px 0 0 white,
100 |           100px 65px 0 0 white,
101 |           300px 65px 0 0 white,
102 |           500px 65px 0 0 white,
103 |           700px 65px 0 0 white,
104 |           900px 65px 0 0 white,
105 |           1100px 65px 0 0 white;}
106 |  }
107 | 
108 | 
109 | 
110 |  @-webkit-keyframes eat {
111 |    0% { box-shadow:
112 |         100px 65px 0 0 white,
113 |         300px 65px 0 0 white,
114 |         500px 65px 0 0 white,
115 |         700px 65px 0 0 white,
116 |         900px 65px 0 0 white,
117 |         1100px 65px 0 0 white,
118 |         1300px 65px 0 0 white;}
119 | 
120 |    100% { box-shadow:
121 |           0px 65px 0 0 white,
122 |           100px 65px 0 0 white,
123 |           300px 65px 0 0 white,
124 |           500px 65px 0 0 white,
125 |           700px 65px 0 0 white,
126 |           900px 65px 0 0 white,
127 |           1100px 65px 0 0 white;}
128 |  }
129 | 


--------------------------------------------------------------------------------
/assets/css/app.css:
--------------------------------------------------------------------------------
  1 | /* This file is for your main application CSS */
  2 | @import "./pacman.css";
  3 | @import "./snake.css";
  4 | @import "./thermostat.css";
  5 | @import "./phoenix.css";
  6 | 
  7 | /* Alerts and form errors used by phx.new */
  8 | .alert {
  9 |   padding: 15px;
 10 |   margin-bottom: 20px;
 11 |   border: 1px solid transparent;
 12 |   border-radius: 4px;
 13 | }
 14 | .alert-info {
 15 |   color: #31708f;
 16 |   background-color: #d9edf7;
 17 |   border-color: #bce8f1;
 18 | }
 19 | .alert-warning {
 20 |   color: #8a6d3b;
 21 |   background-color: #fcf8e3;
 22 |   border-color: #faebcc;
 23 | }
 24 | .alert-danger {
 25 |   color: #a94442;
 26 |   background-color: #f2dede;
 27 |   border-color: #ebccd1;
 28 | }
 29 | .alert p {
 30 |   margin-bottom: 0;
 31 | }
 32 | .alert:empty {
 33 |   display: none;
 34 | }
 35 | .invalid-feedback {
 36 |   color: #a94442;
 37 |   display: block;
 38 |   margin: -1rem 0 2rem;
 39 | }
 40 | 
 41 | /* LiveView specific classes for your customization */
 42 | .phx-no-feedback.invalid-feedback,
 43 | .phx-no-feedback .invalid-feedback {
 44 |   display: none;
 45 | }
 46 | 
 47 | .phx-click-loading {
 48 |   opacity: 0.5;
 49 |   transition: opacity 1s ease-out;
 50 | }
 51 | 
 52 | .phx-disconnected{
 53 |   cursor: wait;
 54 | }
 55 | .phx-disconnected *{
 56 |   pointer-events: none;
 57 | }
 58 | 
 59 | .phx-modal {
 60 |   opacity: 1!important;
 61 |   position: fixed;
 62 |   z-index: 1;
 63 |   left: 0;
 64 |   top: 0;
 65 |   width: 100%;
 66 |   height: 100%;
 67 |   overflow: auto;
 68 |   background-color: rgb(0,0,0);
 69 |   background-color: rgba(0,0,0,0.4);
 70 | }
 71 | 
 72 | .phx-modal-content {
 73 |   background-color: #fefefe;
 74 |   margin: 15vh auto;
 75 |   padding: 20px;
 76 |   border: 1px solid #888;
 77 |   width: 80%;
 78 | }
 79 | 
 80 | .phx-modal-close {
 81 |   color: #aaa;
 82 |   float: right;
 83 |   font-size: 28px;
 84 |   font-weight: bold;
 85 | }
 86 | 
 87 | .phx-modal-close:hover,
 88 | .phx-modal-close:focus {
 89 |   color: black;
 90 |   text-decoration: none;
 91 |   cursor: pointer;
 92 | }
 93 | 
 94 | pre{
 95 |   padding: 1em;
 96 | }
 97 | .animated-sin-wave {
 98 |   position: relative;
 99 |   height: 150px;
100 |   width: 100%;
101 |   overflow: hidden;
102 | }
103 | 
104 | .animated-sin-wave > .bar {
105 |   position: absolute;
106 |   height: 100%;
107 |   border-radius: 50%;
108 |   max-width:10px;
109 | }
110 | 
111 | .animated-sin-wave-description {
112 |   width:100%;
113 |   text-align:center;
114 |   font-size:0.8em;
115 |   color:#747678;
116 |   padding: 2em
117 | }
118 | 
119 | .container.rainbow {
120 |   max-width: 100%;
121 |   text-align: center;
122 | }
123 | 
124 | [data-phx-view]{
125 |   padding: 1em;
126 | }
127 | 
128 | 
129 | .datalist-polyfill {
130 | 	list-style: none;
131 | 	display: none;
132 | 	background: white;
133 | 	box-shadow: 0 2px 2px #999;
134 | 	position: absolute;
135 | 	left: 0;
136 | 	top: 0;
137 | 	margin: 0;
138 | 	padding: 0;
139 | 	max-height: 300px;
140 | 	overflow-y: auto;
141 | }
142 | 
143 | .datalist-polyfill:empty {
144 |   display: none !important;
145 | }
146 | 
147 | .datalist-polyfill > li {
148 |   padding: 3px;
149 |   font: 13px "Lucida Grande", Sans-Serif;
150 | }
151 | 
152 | .datalist-polyfill__active {
153 |   background: #3875d7;
154 |   color: white;
155 | }
156 | 
157 | .user-row {
158 |   animation: slide-up 0.4s ease;
159 | }
160 | 
161 | @keyframes slide-up {
162 |   0% {
163 |     opacity: 0;
164 |     transform: translateY(20px);
165 |   }
166 |   100% {
167 |     opacity: 1;
168 |     transform: translateY(0);
169 |   }
170 | }
171 | 
172 | form[phx-submit="load-more"] button {
173 |   margin-bottom: 200px;
174 | }
175 | 


--------------------------------------------------------------------------------
/assets/css/snake.css:
--------------------------------------------------------------------------------
  1 | html{
  2 |   overflow-x:hidden;
  3 | }
  4 | 
  5 | body.game {
  6 |   background: #000000;
  7 | }
  8 | 
  9 | 
 10 | .dpad{
 11 |   opacity: 0.5;
 12 |   font-size: 60px;
 13 |   color: blue;
 14 |   position: absolute;
 15 |   top: 70px;
 16 |   left: 80px;
 17 |   z-index: 999999;
 18 | 
 19 | }
 20 | 
 21 | .dpad .control{
 22 |   position: absolute;
 23 | }
 24 | 
 25 | .dpad .up{
 26 |   transform: rotate(-90deg);
 27 |   top: -60px;
 28 |   left: 0px;
 29 | }
 30 | .dpad .down{
 31 |   transform: rotate(90deg);
 32 |   top: 60px;
 33 |   left: -5px;
 34 | }
 35 | .dpad .right{
 36 |   top: 0px;
 37 |   left: 55px;
 38 | }
 39 | .dpad .left{
 40 |   transform: rotate(180deg);
 41 |   top: -5px;
 42 |   left: -60px;
 43 | }
 44 | 
 45 | .snake-controls *{
 46 |   color: #ffffff;
 47 | }
 48 | 
 49 | .snake-container{
 50 |   width: 100%;
 51 |   position: absolute;
 52 |   color: #ffffff;
 53 | }
 54 | 
 55 | .game-over {
 56 |   text-align: center;
 57 | }
 58 | .snake-container h1{
 59 |   width: 100%;
 60 | }
 61 | .snake{
 62 |   position: relative;
 63 |   z-index: 999;
 64 | }
 65 | .snake-container .block{
 66 |   display: block;
 67 |   position: absolute;
 68 |   z-index: 1;
 69 | 
 70 | }
 71 | .snake-container .score{
 72 |   color: #ffffff;
 73 |   font-weight: bold;
 74 |   position: absolute;
 75 |   left: 2px;
 76 |   top: -0.1em;
 77 |   z-index: 3;
 78 | }
 79 | 
 80 | .snake-container .block.cherry{
 81 |   z-index: 2;
 82 |   background: red;
 83 | }
 84 | .snake-container .block.tail{
 85 |   z-index: 2;
 86 |   background: yellow;
 87 | }
 88 | .snake-container .block.wall{
 89 |   background: blue;
 90 | }
 91 | .snake-container .block.empty{
 92 |   background: #000000;
 93 | }
 94 | 
 95 | .snake-top{
 96 |   background-color:yellow;
 97 |   border-radius:0 100px 0 0;
 98 |   animation: snake-spin1 0.5s infinite linear;
 99 | }
100 | 
101 | .snake-middle{
102 |   position: absolute;
103 |   top: 0;
104 |   left: 0;
105 |   background-color: yellow;
106 |   border-radius:0 100px 100px 0;
107 | }
108 | .snake-bottom{
109 |   background-color:yellow;
110 |   border-radius:0 0 100px 0;
111 |   animation: snake-spin2 0.5s infinite linear;
112 | }
113 | 
114 | /* Animation*/
115 | 
116 | @keyframes snake-spin1 {
117 |   0%  {transform: rotate(0deg);}
118 |   50%{transform: rotate(-35deg);}
119 | 
120 | }
121 | @keyframes snake-spin2 {
122 |   0%  {transform: rotate(0deg);}
123 |   50%{transform: rotate(35deg);}
124 | }
125 | 
126 | @-moz-keyframes snake-spin1 {
127 |   0%  {transform: rotate(0deg);}
128 |   50%{transform: rotate(-35deg);}
129 | 
130 | }
131 | @-moz-keyframes snake-spin2 {
132 |   0%  {transform: rotate(0deg);}
133 |   50%{transform: rotate(35deg);}
134 | }
135 | 
136 | @-webkit-keyframes snake-spin1 {
137 |   0%  {transform: rotate(0deg);}
138 |   50%{transform: rotate(-35deg);}
139 | 
140 | }
141 | @-webkit-keyframes snake-spin2 {
142 |   0%  {transform: rotate(0deg);}
143 |   50%{transform: rotate(35deg);}
144 | }
145 | 
146 | @keyframes eat {
147 |   0% { box-shadow:
148 |        100px 65px 0 0 white,
149 |        300px 65px 0 0 white,
150 |        500px 65px 0 0 white,
151 |        700px 65px 0 0 white,
152 |        900px 65px 0 0 white,
153 |        1100px 65px 0 0 white,
154 |        1300px 65px 0 0 white;}
155 | 
156 |   100% { box-shadow:
157 |          0px 65px 0 0 white,
158 |          100px 65px 0 0 white,
159 |          300px 65px 0 0 white,
160 |          500px 65px 0 0 white,
161 |          700px 65px 0 0 white,
162 |          900px 65px 0 0 white,
163 |          1100px 65px 0 0 white;}
164 | }
165 | 
166 | 
167 |  @-moz-keyframes eat {
168 |    0% { box-shadow:
169 |         100px 65px 0 0 white,
170 |         300px 65px 0 0 white,
171 |         500px 65px 0 0 white,
172 |         700px 65px 0 0 white,
173 |         900px 65px 0 0 white,
174 |         1100px 65px 0 0 white,
175 |         1300px 65px 0 0 white;}
176 | 
177 |    100% { box-shadow:
178 |           0px 65px 0 0 white,
179 |           100px 65px 0 0 white,
180 |           300px 65px 0 0 white,
181 |           500px 65px 0 0 white,
182 |           700px 65px 0 0 white,
183 |           900px 65px 0 0 white,
184 |           1100px 65px 0 0 white;}
185 |  }
186 | 
187 | 
188 | 
189 |  @-webkit-keyframes eat {
190 |    0% { box-shadow:
191 |         100px 65px 0 0 white,
192 |         300px 65px 0 0 white,
193 |         500px 65px 0 0 white,
194 |         700px 65px 0 0 white,
195 |         900px 65px 0 0 white,
196 |         1100px 65px 0 0 white,
197 |         1300px 65px 0 0 white;}
198 | 
199 |    100% { box-shadow:
200 |           0px 65px 0 0 white,
201 |           100px 65px 0 0 white,
202 |           300px 65px 0 0 white,
203 |           500px 65px 0 0 white,
204 |           700px 65px 0 0 white,
205 |           900px 65px 0 0 white,
206 |           1100px 65px 0 0 white;}
207 |  }
208 | 


--------------------------------------------------------------------------------
/assets/vendor/topbar.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license MIT
  3 |  * topbar 1.0.0, 2021-01-06
  4 |  * http://buunguyen.github.io/topbar
  5 |  * Copyright (c) 2021 Buu Nguyen
  6 |  */
  7 | (function (window, document) {
  8 |   "use strict";
  9 | 
 10 |   // https://gist.github.com/paulirish/1579671
 11 |   (function () {
 12 |     var lastTime = 0;
 13 |     var vendors = ["ms", "moz", "webkit", "o"];
 14 |     for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
 15 |       window.requestAnimationFrame =
 16 |         window[vendors[x] + "RequestAnimationFrame"];
 17 |       window.cancelAnimationFrame =
 18 |         window[vendors[x] + "CancelAnimationFrame"] ||
 19 |         window[vendors[x] + "CancelRequestAnimationFrame"];
 20 |     }
 21 |     if (!window.requestAnimationFrame)
 22 |       window.requestAnimationFrame = function (callback, element) {
 23 |         var currTime = new Date().getTime();
 24 |         var timeToCall = Math.max(0, 16 - (currTime - lastTime));
 25 |         var id = window.setTimeout(function () {
 26 |           callback(currTime + timeToCall);
 27 |         }, timeToCall);
 28 |         lastTime = currTime + timeToCall;
 29 |         return id;
 30 |       };
 31 |     if (!window.cancelAnimationFrame)
 32 |       window.cancelAnimationFrame = function (id) {
 33 |         clearTimeout(id);
 34 |       };
 35 |   })();
 36 | 
 37 |   var canvas,
 38 |     progressTimerId,
 39 |     fadeTimerId,
 40 |     currentProgress,
 41 |     showing,
 42 |     addEvent = function (elem, type, handler) {
 43 |       if (elem.addEventListener) elem.addEventListener(type, handler, false);
 44 |       else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
 45 |       else elem["on" + type] = handler;
 46 |     },
 47 |     options = {
 48 |       autoRun: true,
 49 |       barThickness: 3,
 50 |       barColors: {
 51 |         0: "rgba(26,  188, 156, .9)",
 52 |         ".25": "rgba(52,  152, 219, .9)",
 53 |         ".50": "rgba(241, 196, 15,  .9)",
 54 |         ".75": "rgba(230, 126, 34,  .9)",
 55 |         "1.0": "rgba(211, 84,  0,   .9)",
 56 |       },
 57 |       shadowBlur: 10,
 58 |       shadowColor: "rgba(0,   0,   0,   .6)",
 59 |       className: null,
 60 |     },
 61 |     repaint = function () {
 62 |       canvas.width = window.innerWidth;
 63 |       canvas.height = options.barThickness * 5; // need space for shadow
 64 | 
 65 |       var ctx = canvas.getContext("2d");
 66 |       ctx.shadowBlur = options.shadowBlur;
 67 |       ctx.shadowColor = options.shadowColor;
 68 | 
 69 |       var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
 70 |       for (var stop in options.barColors)
 71 |         lineGradient.addColorStop(stop, options.barColors[stop]);
 72 |       ctx.lineWidth = options.barThickness;
 73 |       ctx.beginPath();
 74 |       ctx.moveTo(0, options.barThickness / 2);
 75 |       ctx.lineTo(
 76 |         Math.ceil(currentProgress * canvas.width),
 77 |         options.barThickness / 2
 78 |       );
 79 |       ctx.strokeStyle = lineGradient;
 80 |       ctx.stroke();
 81 |     },
 82 |     createCanvas = function () {
 83 |       canvas = document.createElement("canvas");
 84 |       var style = canvas.style;
 85 |       style.position = "fixed";
 86 |       style.top = style.left = style.right = style.margin = style.padding = 0;
 87 |       style.zIndex = 100001;
 88 |       style.display = "none";
 89 |       if (options.className) canvas.classList.add(options.className);
 90 |       document.body.appendChild(canvas);
 91 |       addEvent(window, "resize", repaint);
 92 |     },
 93 |     topbar = {
 94 |       config: function (opts) {
 95 |         for (var key in opts)
 96 |           if (options.hasOwnProperty(key)) options[key] = opts[key];
 97 |       },
 98 |       show: function () {
 99 |         if (showing) return;
100 |         showing = true;
101 |         if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
102 |         if (!canvas) createCanvas();
103 |         canvas.style.opacity = 1;
104 |         canvas.style.display = "block";
105 |         topbar.progress(0);
106 |         if (options.autoRun) {
107 |           (function loop() {
108 |             progressTimerId = window.requestAnimationFrame(loop);
109 |             topbar.progress(
110 |               "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
111 |             );
112 |           })();
113 |         }
114 |       },
115 |       progress: function (to) {
116 |         if (typeof to === "undefined") return currentProgress;
117 |         if (typeof to === "string") {
118 |           to =
119 |             (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
120 |               ? currentProgress
121 |               : 0) + parseFloat(to);
122 |         }
123 |         currentProgress = to > 1 ? 1 : to;
124 |         repaint();
125 |         return currentProgress;
126 |       },
127 |       hide: function () {
128 |         if (!showing) return;
129 |         showing = false;
130 |         if (progressTimerId != null) {
131 |           window.cancelAnimationFrame(progressTimerId);
132 |           progressTimerId = null;
133 |         }
134 |         (function loop() {
135 |           if (topbar.progress("+.1") >= 1) {
136 |             canvas.style.opacity -= 0.05;
137 |             if (canvas.style.opacity <= 0.05) {
138 |               canvas.style.display = "none";
139 |               fadeTimerId = null;
140 |               return;
141 |             }
142 |           }
143 |           fadeTimerId = window.requestAnimationFrame(loop);
144 |         })();
145 |       },
146 |     };
147 | 
148 |   if (typeof module === "object" && typeof module.exports === "object") {
149 |     module.exports = topbar;
150 |   } else if (typeof define === "function" && define.amd) {
151 |     define(function () {
152 |       return topbar;
153 |     });
154 |   } else {
155 |     this.topbar = topbar;
156 |   }
157 | }.call(this, window, document));
158 | 


--------------------------------------------------------------------------------
/assets/css/thermostat.css:
--------------------------------------------------------------------------------
  1 | @charset "UTF-8";
  2 | @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
  3 | 
  4 | [data-phx-view="DemoWeb.ThermostatView"]{
  5 |   height: 800px;
  6 | }
  7 | 
  8 | .controls_radius, .thermostat, .thermostat .bar, .thermostat .controls, .thermostat .controls .reading {
  9 |   top: 50%;
 10 |   left: 50%;
 11 |   -webkit-transform: translate(-50%, -50%);
 12 |           transform: translate(-50%, -50%);
 13 |   border-radius: 50%;
 14 | }
 15 | 
 16 | .thermostat {
 17 |   position: absolute;
 18 |   top: 220px;
 19 |   width: 400px;
 20 |   height: 400px;
 21 |   background: #6D697F;
 22 |   box-shadow: inset 0px -6px 1px 2px rgba(0, 0, 0, 0.35), 0px 7px 40px 11px rgba(84, 81, 97, 0.4);
 23 | }
 24 | .thermostat:hover .number {
 25 |   opacity: 1;
 26 | }
 27 | .thermostat .shadow {
 28 |   position: absolute;
 29 |   top: 50%;
 30 |   left: 50%;
 31 |   -webkit-transform: translate(-50%, -50%) rotateZ(10deg);
 32 |           transform: translate(-50%, -50%) rotateZ(10deg);
 33 |   width: 25px;
 34 |   height: 86%;
 35 |   text-align: center;
 36 |   transition: 0.7s ease;
 37 |   -webkit-animation: shadow 1.4s ease-out both;
 38 |           animation: shadow 1.4s ease-out both;
 39 | }
 40 | .thermostat .shadow .shadow-cube {
 41 |   position: absolute;
 42 |   top: 0;
 43 |   width: 25px;
 44 |   height: 0px;
 45 |   box-shadow: 0 0 45px 13px rgba(255, 158, 35, 0.5);
 46 | }
 47 | .thermostat .number {
 48 |   position: absolute;
 49 |   top: 50%;
 50 |   left: 50%;
 51 |   -webkit-transform: translate(-50%, -50%) rotateZ(10deg);
 52 |           transform: translate(-50%, -50%) rotateZ(10deg);
 53 |   width: 40px;
 54 |   height: 82%;
 55 |   text-align: center;
 56 |   transition: 0.7s ease;
 57 |   opacity: 0;
 58 | }
 59 | .thermostat .number .ext {
 60 |   font-size: 16px;
 61 |   color: white;
 62 |   font-weight: 1000;
 63 |   text-shadow: 1px 3px 3px #302e38;
 64 | }
 65 | .thermostat .bar.heating {
 66 |   background: linear-gradient(to bottom, #6e72f2 0%,#ff9d3b 0%,#ff9021 0%,#ff3a3a 100%,#ff8001 100%,#ff3a3a 100%);
 67 | }
 68 | .thermostat .bar.cooling {
 69 |   background: linear-gradient(to bottom, #6db3f2 0%,#54a3ee 0%,#3690f0 51%,#1e69de 100%);
 70 | }
 71 | 
 72 | .thermostat .bar {
 73 |   background-color: #3a3749;
 74 |   position: absolute;
 75 |   width: 356px;
 76 |   height: 356px;
 77 | }
 78 | .thermostat .bar .inner_bar {
 79 |   position: absolute;
 80 |   top: 50%;
 81 |   left: 50%;
 82 |   width: 344px;
 83 |   height: 344px;
 84 |   margin-left: -172px;
 85 |   margin-top: -172px;
 86 |   border-radius: 100%;
 87 |   background-color: #6D697F;
 88 |   z-index: 4;
 89 | }
 90 | .thermostat .bar .inner_bar:after {
 91 |   content: '';
 92 |   display: block;
 93 |   position: absolute;
 94 |   width: 0;
 95 |   height: 0;
 96 |   border-top: 70px solid transparent;
 97 |   border-left: 70px solid transparent;
 98 |   border-right: 70px solid transparent;
 99 |   border-bottom: 150px solid #6D697F;
100 |   bottom: -7px;
101 |   left: 50%;
102 |   -webkit-transform: translatex(-50%);
103 |           transform: translatex(-50%);
104 | }
105 | .thermostat .bar .hold {
106 |   position: absolute;
107 |   width: 100%;
108 |   height: 100%;
109 |   clip: rect(0px, 356px, 356px, 178px);
110 |   border-radius: 100%;
111 |   background-color: #3a3749;
112 | }
113 | .thermostat .bar .fill {
114 |   position: absolute;
115 |   width: 100%;
116 |   height: 100%;
117 |   border-radius: 100%;
118 |   clip: rect(0px, 178px, 356px, 0px);
119 | }
120 | .thermostat .bar .fill1 {
121 |   background: orange;
122 | }
123 | .thermostat .bar .fill2 {
124 |   background: orange;
125 | }
126 | .thermostat .bar .right {
127 |   z-index: 3;
128 |   -webkit-transform: rotate(180deg);
129 |   transform: rotate(180deg);
130 | }
131 | .thermostat .bar .right .fill {
132 |   z-index: 3;
133 |   transform: rotate(180deg);
134 | }
135 | .thermostat .bar .left .fill {
136 |   z-index: 1;
137 |   -webkit-animation: left 0.3s linear both;
138 |           animation: left 0.3s linear both;
139 |   -webkit-animation-delay: 1s;
140 |           animation-delay: 1s;
141 |   transition: -webkit-transform 0.6s;
142 |   transition: transform 0.6s;
143 |   transition: transform 0.6s, -webkit-transform 0.6s;
144 | }
145 | .thermostat .bar span {
146 |   width: 356px;
147 |   font-weight: 800;
148 |   position: absolute;
149 |   top: 18px;
150 |   text-align: center;
151 |   text-transform: uppercase;
152 |   font-size: 15px;
153 |   color: #ffffff;
154 |   z-index: 10;
155 | }
156 | .thermostat .bar a {
157 |   width: 356px;
158 |   font-weight: 800;
159 |   position: absolute;
160 |   bottom: 10px;
161 |   text-align: center;
162 |   text-transform: uppercase;
163 |   font-size: 15px;
164 |   color: #ffffff;
165 |   z-index: 10;
166 | }
167 | .thermostat .controls {
168 |   position: absolute;
169 |   width: 260px;
170 |   height: 260px;
171 |   background: #e3e4ed;
172 |   -webkit-animation: bound-in 0.6s ease forwards;
173 |           animation: bound-in 0.6s ease forwards;
174 | }
175 | .thermostat button.minus, .thermostat button.plus {
176 |   background: none;
177 |   border: 0;
178 |   position: absolute;
179 |   color: #b9b6c8;
180 |   font-size: 60px;
181 |   font-weight: 500;
182 |   margin-top: 111px;
183 |   cursor: pointer;
184 | }
185 | 
186 | .thermostat .controls .minus {
187 |   position: absolute;
188 |   left: -14px;
189 | }
190 | .thermostat .controls .plus {
191 |   position: absolute;
192 |   right: -20px;
193 | }
194 | 
195 | 
196 | .thermostat .controls .weather input {
197 |   max-width: 90px;
198 |   background: transparent;
199 |   border: 0;
200 |   outline: none;
201 |   font-size: 19px;
202 |   color: #57545f;
203 |   font-weight: 300;
204 |   text-decoration: underline;
205 | }
206 | .thermostat .controls .weather {
207 |   position: absolute;
208 |   width: 100%;
209 |   text-align: center;
210 |   top: 10px;
211 |   font-size: 19px;
212 |   color: #57545f;
213 |   font-weight: 300;
214 | }
215 | 
216 | .thermostat .controls .reading {
217 |   position: absolute;
218 |   width: 150px;
219 |   height: 150px;
220 |   background: #F8F9FA;
221 |   text-align: center;
222 | 
223 |   line-height: 150px;
224 |   font-size: 59px;
225 |   color: #57545f;
226 |   font-weight: 300;
227 | }
228 | .thermostat .controls .reading:after {
229 |   content: '°';
230 |   display: block;
231 |   position: absolute;
232 |   font-size: 40px;
233 |   top: -20px;
234 |   right: 30px;
235 | }
236 | 
237 | @-webkit-keyframes shadow {
238 |   0% {
239 |     -webkit-transform: translate(-50%, -50%) rotate(-190deg);
240 |             transform: translate(-50%, -50%) rotate(-190deg);
241 |   }
242 |   100% {
243 |     -webkit-transform: translate(-50%, -50%) rotate(10deg);
244 |             transform: translate(-50%, -50%) rotate(10deg);
245 |   }
246 | }
247 | @-webkit-keyframes right {
248 |   0% {
249 |     -webkit-transform: rotate(0deg);
250 |             transform: rotate(0deg);
251 |   }
252 |   100% {
253 |     -webkit-transform: rotate(180deg);
254 |             transform: rotate(180deg);
255 |   }
256 | }
257 | @-webkit-keyframes left {
258 |   0% {
259 |     -webkit-transform: rotate(0deg);
260 |             transform: rotate(0deg);
261 |   }
262 |   100% {
263 |     -webkit-transform: rotate(10deg);
264 |             transform: rotate(10deg);
265 |   }
266 | }
267 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/pacman_live.ex:
--------------------------------------------------------------------------------
  1 | defmodule DemoWeb.PacmanLive do
  2 |   use DemoWeb, :live_view
  3 | 
  4 |   @tick 100
  5 |   @width 25
  6 |   @rotation %{left: 180, right: 0, up: -90, down: 90}
  7 | 
  8 |   @board [
  9 |     ~w(X X X X X X X X X X X X X X X X X X X X X X X X X X),
 10 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 11 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 12 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 13 |     ~w(X 0 0 0 0 X X X X X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 14 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 15 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 16 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 17 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 18 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 19 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 20 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 21 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 22 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 23 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 24 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 25 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 26 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 27 |     ~w(X X X X X X X X X X X X X X X X X X X X X X X X X X)
 28 |   ]
 29 |   @board_rows length(@board)
 30 |   @board_cols length(hd(@board))
 31 | 
 32 |   def render(assigns) do
 33 |     ~H"""
 34 |     <form phx-change="update_settings">
 35 |       <select name="tick" onchange="this.blur()">
 36 |         <option value="50" selected={@tick == 50}>50</option>
 37 |         <option value="100" selected={@tick == 100}>100</option>
 38 |         <option value="200" selected={@tick == 200}>200</option>
 39 |         <option value="500" selected={@tick == 500}>500</option>
 40 |       </select>
 41 |       <input type="range" min="10" max="50" name="width" value={@width} onmouseup="blur()"/>
 42 |       <%= @width %>px
 43 |     </form>
 44 |     <div class="game-container">
 45 |       <div phx-window-keydown="keydown"
 46 |           class="pacman"
 47 |           style={"transform: rotate(#{@rotation}deg);
 48 |                   left: #{@x}px;
 49 |                   top: #{@y}px;
 50 |                   width: #{@width}px;
 51 |                   height: #{@width}px;"}
 52 |       >
 53 |         <div class="pacman-top" style={"width: #{@width}px; height: #{@width / 2}px;"}></div>
 54 |         <div class="pacman-bottom" style={"width: #{@width}px; height: #{@width / 2}px;"}></div>
 55 |       </div>
 56 |       <%= for {_, block} <- @blocks do %>
 57 |         <div class={"block #{block.type}"}
 58 |             style={"left: #{block.x}px;
 59 |                     top: #{block.y}px;
 60 |                     width: #{block.width}px;
 61 |                     height: #{block.width}px;"}
 62 |         ></div>
 63 |       <% end %>
 64 |     </div>
 65 |     """
 66 |   end
 67 | 
 68 |   def mount(_params, _session, socket) do
 69 |     socket =
 70 |       socket
 71 |       |> assign(%{
 72 |         heading: :stationary,
 73 |         width: @width,
 74 |         tick: @tick,
 75 |         rotation: 0,
 76 |         row: 1,
 77 |         col: 1,
 78 |         x: nil,
 79 |         y: nil
 80 |       })
 81 |       |> build_board()
 82 |       |> advance()
 83 | 
 84 |     if connected?(socket) do
 85 |       {:ok, schedule_tick(socket)}
 86 |     else
 87 |       {:ok, socket}
 88 |     end
 89 |   end
 90 | 
 91 |   def handle_info(:tick, socket) do
 92 |     new_socket =
 93 |       socket
 94 |       |> game_loop()
 95 |       |> schedule_tick()
 96 | 
 97 |     {:noreply, new_socket}
 98 |   end
 99 | 
100 |   def handle_event("update_settings", %{"width" => width, "tick" => tick}, socket) do
101 |     {width, ""} = Integer.parse(width)
102 |     {tick, ""} = Integer.parse(tick)
103 | 
104 |     new_socket =
105 |       socket
106 |       |> assign(width: width)
107 |       |> update_tick(tick)
108 |       |> build_board()
109 | 
110 |     {:noreply, new_socket}
111 |   end
112 | 
113 |   def handle_event("keydown", %{"key" => key}, socket) do
114 |     {:noreply, turn(socket, key)}
115 |   end
116 | 
117 |   defp update_tick(socket, tick) when tick >= 50 and tick <= 1000 do
118 |     assign(socket, :tick, tick)
119 |   end
120 | 
121 |   defp turn(socket, "ArrowLeft"), do: go(socket, :left)
122 |   defp turn(socket, "ArrowDown"), do: go(socket, :down)
123 |   defp turn(socket, "ArrowUp"), do: go(socket, :up)
124 |   defp turn(socket, "ArrowRight"), do: go(socket, :right)
125 |   defp turn(socket, _), do: socket
126 | 
127 |   defp go(%{assigns: %{heading: heading}} = socket, heading), do: socket
128 | 
129 |   defp go(socket, heading) do
130 |     socket
131 |     |> assign(rotation: Map.fetch!(@rotation, heading))
132 |     |> assign(heading: heading)
133 |   end
134 | 
135 |   def game_loop(socket) do
136 |     socket
137 |     |> advance()
138 |   end
139 | 
140 |   defp schedule_tick(socket) do
141 |     Process.send_after(self(), :tick, socket.assigns.tick)
142 |     socket
143 |   end
144 | 
145 |   defp build_board(socket) do
146 |     width = socket.assigns.width
147 | 
148 |     {_, blocks} =
149 |       Enum.reduce(@board, {0, %{}}, fn row, {y_index, acc} ->
150 |         {_, blocks} =
151 |           Enum.reduce(row, {0, acc}, fn
152 |             "X", {x_index, acc} ->
153 |               {x_index + 1,
154 |                Map.put(acc, {y_index, x_index}, %{
155 |                  type: :wall,
156 |                  x: x_index * width,
157 |                  y: y_index * width,
158 |                  width: width
159 |                })}
160 | 
161 |             "0", {x_index, acc} ->
162 |               {x_index + 1,
163 |                Map.put(acc, {y_index, x_index}, %{
164 |                  type: :empty,
165 |                  x: x_index * width,
166 |                  y: y_index * width,
167 |                  width: width
168 |                })}
169 |           end)
170 | 
171 |         {y_index + 1, blocks}
172 |       end)
173 | 
174 |     assign(socket, :blocks, blocks)
175 |   end
176 | 
177 |   defp advance(socket) do
178 |     %{width: width, heading: heading, blocks: blocks} = socket.assigns
179 |     col_before = socket.assigns.col
180 |     row_before = socket.assigns.row
181 |     maybe_row = row(row_before, heading)
182 |     maybe_col = col(col_before, heading)
183 | 
184 |     {row, col} =
185 |       case block(maybe_row, maybe_col, blocks) do
186 |         :wall -> {row_before, col_before}
187 |         :empty -> {maybe_row, maybe_col}
188 |       end
189 | 
190 |     socket
191 |     |> assign(:row, row)
192 |     |> assign(:col, col)
193 |     |> assign(:x, col * width)
194 |     |> assign(:y, row * width)
195 |   end
196 | 
197 |   defp col(val, :left) when val - 1 >= 1, do: val - 1
198 |   defp col(val, :right) when val + 1 < @board_cols - 1, do: val + 1
199 |   defp col(val, _), do: val
200 | 
201 |   defp row(val, :up) when val - 1 >= 1, do: val - 1
202 |   defp row(val, :down) when val + 1 < @board_rows - 1, do: val + 1
203 |   defp row(val, _), do: val
204 | 
205 |   def block(row, col, blocks) do
206 |     Map.fetch!(blocks, {row, col}).type
207 |   end
208 | end
209 | 


--------------------------------------------------------------------------------
/assets/css/phoenix.css:
--------------------------------------------------------------------------------
  1 | /* Includes some default style for the starter application.
  2 |  * This can be safely deleted to start fresh.
  3 |  */
  4 | 
  5 | /* Milligram v1.4.1 https://milligram.github.io
  6 |  * Copyright (c) 2020 CJ Patoilo Licensed under the MIT license
  7 |  */
  8 | 
  9 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;letter-spacing:.01em;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='color'],input[type='date'],input[type='datetime'],input[type='datetime-local'],input[type='email'],input[type='month'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],input[type='week'],input:not([type]),textarea,select{-webkit-appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem .7rem;width:100%}input[type='color']:focus,input[type='date']:focus,input[type='datetime']:focus,input[type='datetime-local']:focus,input[type='email']:focus,input[type='month']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,input[type='week']:focus,input:not([type]):focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%23d1d1d1" d="M0,0l6,8l6-8"/></svg>') center right no-repeat;padding-right:3.0rem}select:focus{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 8" width="30"><path fill="%230069d9" d="M0,0l6,8l6-8"/></svg>')}select[multiple]{background:none;height:auto}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.container{margin:0 auto;max-width:112.0rem;padding:0 2.0rem;position:relative;width:100%}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding>.column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-40{margin-left:40%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-60{margin-left:60%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{align-self:center}@media (min-width: 40rem){.row{flex-direction:row;margin-left:-1.0rem;width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;padding:0 1.0rem}}a{color:#0069d9;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3.0rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1.0rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;display:block;overflow-x:auto;text-align:left;width:100%}td,th{border-bottom:0.1rem solid #e1e1e1;padding:1.2rem 1.5rem}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}@media (min-width: 40rem){table{display:table;overflow-x:initial}}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2.0rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right}
 10 | 
 11 | /* General style */
 12 | h1{font-size: 3.6rem; line-height: 1.25}
 13 | h2{font-size: 2.8rem; line-height: 1.3}
 14 | h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35}
 15 | h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5}
 16 | h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4}
 17 | h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2}
 18 | pre{padding: 1em;}
 19 | 
 20 | .container{
 21 |   margin: 0 auto;
 22 |   max-width: 80.0rem;
 23 |   padding: 0 2.0rem;
 24 |   position: relative;
 25 |   width: 100%
 26 | }
 27 | select {
 28 |   width: auto;
 29 | }
 30 | 
 31 | /* Phoenix promo and logo */
 32 | .phx-hero {
 33 |   text-align: center;
 34 |   border-bottom: 1px solid #e3e3e3;
 35 |   background: #eee;
 36 |   border-radius: 6px;
 37 |   padding: 3em 3em 1em;
 38 |   margin-bottom: 3rem;
 39 |   font-weight: 200;
 40 |   font-size: 120%;
 41 | }
 42 | .phx-hero input {
 43 |   background: #ffffff;
 44 | }
 45 | .phx-logo {
 46 |   min-width: 300px;
 47 |   margin: 1rem;
 48 |   display: block;
 49 | }
 50 | .phx-logo img {
 51 |   width: auto;
 52 |   display: block;
 53 | }
 54 | 
 55 | /* Headers */
 56 | header {
 57 |   width: 100%;
 58 |   background: #fdfdfd;
 59 |   border-bottom: 1px solid #eaeaea;
 60 |   margin-bottom: 2rem;
 61 | }
 62 | header section {
 63 |   align-items: center;
 64 |   display: flex;
 65 |   flex-direction: column;
 66 |   justify-content: space-between;
 67 | }
 68 | header section :first-child {
 69 |   order: 2;
 70 | }
 71 | header section :last-child {
 72 |   order: 1;
 73 | }
 74 | header nav ul,
 75 | header nav li {
 76 |   margin: 0;
 77 |   padding: 0;
 78 |   display: block;
 79 |   text-align: right;
 80 |   white-space: nowrap;
 81 | }
 82 | header nav ul {
 83 |   margin: 1rem;
 84 |   margin-top: 0;
 85 | }
 86 | header nav a {
 87 |   display: block;
 88 | }
 89 | 
 90 | @media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */
 91 |   header section {
 92 |     flex-direction: row;
 93 |   }
 94 |   header nav ul {
 95 |     margin: 1rem;
 96 |   }
 97 |   .phx-logo {
 98 |     flex-basis: 527px;
 99 |     margin: 2rem 1rem;
100 |   }
101 | }
102 | 


--------------------------------------------------------------------------------
/mix.lock:
--------------------------------------------------------------------------------
 1 | %{
 2 |   "castore": {:hex, :castore, "0.1.11", "c0665858e0e1c3e8c27178e73dffea699a5b28eb72239a3b2642d208e8594914", [:mix], [], "hexpm", "91b009ba61973b532b84f7c09ce441cba7aa15cb8b006cf06c6f4bba18220081"},
 3 |   "connection": {:hex, :connection, "1.1.0", "ff2a49c4b75b6fb3e674bfc5536451607270aac754ffd1bdfe175abe4a6d7a68", [:mix], [], "hexpm", "722c1eb0a418fbe91ba7bd59a47e28008a189d47e37e0e7bb85585a016b2869c"},
 4 |   "cowboy": {:hex, :cowboy, "2.9.0", "865dd8b6607e14cf03282e10e934023a1bd8be6f6bacf921a7e2a96d800cd452", [:make, :rebar3], [{:cowlib, "2.11.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "2c729f934b4e1aa149aff882f57c6372c15399a20d54f65c8d67bef583021bde"},
 5 |   "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.4.0", "f239f68b588efa7707abce16a84d0d2acf3a0f50571f8bb7f56a15865aae820c", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7d98bac1ee4565d31b62d59f8823dfd8356a169e7fcbb83831b8a5397404c9de"},
 6 |   "cowlib": {:hex, :cowlib, "2.11.0", "0b9ff9c346629256c42ebe1eeb769a83c6cb771a6ee5960bd110ab0b9b872063", [:make, :rebar3], [], "hexpm", "2b3e9da0b21c4565751a6d4901c20d1b4cc25cbb7fd50d91d2ab6dd287bc86a9"},
 7 |   "db_connection": {:hex, :db_connection, "2.4.0", "d04b1b73795dae60cead94189f1b8a51cc9e1f911c234cc23074017c43c031e5", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "ad416c21ad9f61b3103d254a71b63696ecadb6a917b36f563921e0de00d7d7c8"},
 8 |   "decimal": {:hex, :decimal, "2.0.0", "a78296e617b0f5dd4c6caf57c714431347912ffb1d0842e998e9792b5642d697", [:mix], [], "hexpm", "34666e9c55dea81013e77d9d87370fe6cb6291d1ef32f46a1600230b1d44f577"},
 9 |   "ecto": {:hex, :ecto, "3.7.1", "a20598862351b29f80f285b21ec5297da1181c0442687f9b8329f0445d228892", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d36e5b39fc479e654cffd4dbe1865d9716e4a9b6311faff799b6f90ab81b8638"},
10 |   "ecto_sql": {:hex, :ecto_sql, "3.7.0", "2fcaad4ab0c8d76a5afbef078162806adbe709c04160aca58400d5cbbe8eeac6", [:mix], [{:db_connection, "~> 2.2", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.7.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.4.0 or ~> 0.5.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.15.0 or ~> 1.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.1", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "a26135dfa1d99bf87a928c464cfa25bba6535a4fe761eefa56077a4febc60f70"},
11 |   "esbuild": {:hex, :esbuild, "0.3.1", "bf6a3783f8677aa93e8e6ee04b79eeceadb29e07255941fab7e50f1e3527f4a8", [:mix], [{:castore, ">= 0.0.0", [hex: :castore, repo: "hexpm", optional: false]}], "hexpm", "342ccd0eb2c64211326580189389d52cdf0f16f5ca22bc0267a66357e269a14a"},
12 |   "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"},
13 |   "floki": {:hex, :floki, "0.31.0", "f05ee8a8e6a3ced4e62beeb2c79a63bc8e12ab98fbaaf6e6a3d9b76b1278e23f", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "b05afa372f5c345a5bf240ac25ea1f0f3d5fcfd7490ac0beeb4a203f9444891e"},
14 |   "gettext": {:hex, :gettext, "0.18.2", "7df3ea191bb56c0309c00a783334b288d08a879f53a7014341284635850a6e55", [:mix], [], "hexpm", "f9f537b13d4fdd30f3039d33cb80144c3aa1f8d9698e47d7bcbcc8df93b1f5c5"},
15 |   "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"},
16 |   "jason": {:hex, :jason, "1.2.2", "ba43e3f2709fd1aa1dce90aaabfd039d000469c05c56f0b8e31978e03fa39052", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "18a228f5f0058ee183f29f9eae0805c6e59d61c3b006760668d8d18ff0d12179"},
17 |   "mime": {:hex, :mime, "2.0.1", "0de4c81303fe07806ebc2494d5321ce8fb4df106e34dd5f9d787b637ebadc256", [:mix], [], "hexpm", "7a86b920d2aedce5fb6280ac8261ac1a739ae6c1a1ad38f5eadf910063008942"},
18 |   "nimble_strftime": {:hex, :nimble_strftime, "0.1.1", "b988184d1bd945bc139b2c27dd00a6c0774ec94f6b0b580083abd62d5d07818b", [:mix], [], "hexpm", "89e599c9b8b4d1203b7bb5c79eb51ef7c6a28fbc6228230b312f8b796310d755"},
19 |   "phoenix": {:hex, :phoenix, "1.6.0", "7b85023f7ddef9a5c70909a51cc37c8b868b474d853f90f4280efd26b0e7cce5", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 1.0", [hex: :phoenix_view, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "52ffdd31f2daeb399b2e1eb57d468f99a1ad6eee5d8ea19d2353492f06c9fc96"},
20 |   "phoenix_ecto": {:hex, :phoenix_ecto, "4.4.0", "0672ed4e4808b3fbed494dded89958e22fb882de47a97634c0b13e7b0b5f7720", [:mix], [{:ecto, "~> 3.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.9", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "09864e558ed31ee00bd48fcc1d4fc58ae9678c9e81649075431e69dbabb43cc1"},
21 |   "phoenix_html": {:hex, :phoenix_html, "3.0.4", "232d41884fe6a9c42d09f48397c175cd6f0d443aaa34c7424da47604201df2e1", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: true]}], "hexpm", "ce17fd3cf815b2ed874114073e743507704b1f5288bb03c304a77458485efc8b"},
22 |   "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.5.1", "eec48a6e07a34a5692f0a3bd0810999b3467efd9e79145569357f18cd9081af9", [:mix], [{:ecto, "~> 3.6.2 or ~> 3.7", [hex: :ecto, repo: "hexpm", optional: true]}, {:ecto_psql_extras, "~> 0.6", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:phoenix_live_view, "~> 0.16.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "b9e6a4101aec4b7a970ab3dae66dccc0bbbf133cc3be596bec953d405f903f8e"},
23 |   "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.3", "3a53772a6118d5679bf50fc1670505a290e32a1d195df9e069d8c53ab040c054", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "766796676e5f558dbae5d1bdb066849673e956005e3730dfd5affd7a6da4abac"},
24 |   "phoenix_live_view": {:hex, :phoenix_live_view, "0.16.4", "5692edd0bac247a9a816eee7394e32e7a764959c7d0cf9190662fc8b0cd24c97", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.9 or ~> 1.6.0", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "754ba49aa2e8601afd4f151492c93eb72df69b0b9856bab17711b8397e43bba0"},
25 |   "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"},
26 |   "phoenix_view": {:hex, :phoenix_view, "1.0.0", "fea71ecaaed71178b26dd65c401607de5ec22e2e9ef141389c721b3f3d4d8011", [:mix], [{:phoenix_html, "~> 2.14.2 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}], "hexpm", "82be3e2516f5633220246e2e58181282c71640dab7afc04f70ad94253025db0c"},
27 |   "plug": {:hex, :plug, "1.12.1", "645678c800601d8d9f27ad1aebba1fdb9ce5b2623ddb961a074da0b96c35187d", [:mix], [{:mime, "~> 1.0 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.3 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "d57e799a777bc20494b784966dc5fbda91eb4a09f571f76545b72a634ce0d30b"},
28 |   "plug_cowboy": {:hex, :plug_cowboy, "2.5.2", "62894ccd601cf9597e2c23911ff12798a8a18d237e9739f58a6b04e4988899fe", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "ea6e87f774c8608d60c8d34022a7d073bd7680a0a013f049fc62bf35efea1044"},
29 |   "plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"},
30 |   "postgrex": {:hex, :postgrex, "0.15.10", "2809dee1b1d76f7cbabe570b2a9285c2e7b41be60cf792f5f2804a54b838a067", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "1560ca427542f6b213f8e281633ae1a3b31cdbcd84ebd7f50628765b8f6132be"},
31 |   "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"},
32 |   "swoosh": {:hex, :swoosh, "1.5.0", "2be4cfc1be10f2203d1854c85b18d8c7be0321445a782efd53ef0b2b88f03ce4", [:mix], [{:cowboy, "~> 1.1 or ~> 2.4", [hex: :cowboy, repo: "hexpm", optional: true]}, {:finch, "~> 0.6", [hex: :finch, repo: "hexpm", optional: true]}, {:gen_smtp, "~> 0.13 or ~> 1.0", [hex: :gen_smtp, repo: "hexpm", optional: true]}, {:hackney, "~> 1.9", [hex: :hackney, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:mail, "~> 0.2", [hex: :mail, repo: "hexpm", optional: true]}, {:mime, "~> 1.1 or ~> 2.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_cowboy, ">= 1.0.0", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.2 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b53891359e3ddca263ece784051243de84c9244c421a0dee1bff1d52fc5ca420"},
33 |   "telemetry": {:hex, :telemetry, "1.0.0", "0f453a102cdf13d506b7c0ab158324c337c41f1cc7548f0bc0e130bbf0ae9452", [:rebar3], [], "hexpm", "73bc09fa59b4a0284efb4624335583c528e07ec9ae76aca96ea0673850aec57a"},
34 |   "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.1", "315d9163a1d4660aedc3fee73f33f1d355dcc76c5c3ab3d59e76e3edf80eef1f", [:mix], [{:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7be9e0871c41732c233be71e4be11b96e56177bf15dde64a8ac9ce72ac9834c6"},
35 |   "telemetry_poller": {:hex, :telemetry_poller, "1.0.0", "db91bb424e07f2bb6e73926fcafbfcbcb295f0193e0a00e825e589a0a47e8453", [:rebar3], [{:telemetry, "~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "b3a24eafd66c3f42da30fc3ca7dda1e9d546c12250a2d60d7b81d264fbec4f6e"},
36 | }
37 | 


--------------------------------------------------------------------------------
/lib/demo_web/live/snake_live.ex:
--------------------------------------------------------------------------------
  1 | defmodule DemoWeb.SnakeLive do
  2 |   use DemoWeb, :live_view
  3 | 
  4 |   @tick 100
  5 |   @width 16
  6 |   @snake_length 5
  7 | 
  8 |   @board [
  9 |     ~w(X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X),
 10 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 11 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 12 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 13 |     ~w(X 0 0 0 0 X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 14 |     ~w(X 0 0 0 0 X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 15 |     ~w(X 0 0 0 0 X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 16 |     ~w(X 0 0 0 0 X X X X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 17 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 18 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 19 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 20 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 21 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 22 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 23 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 24 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 25 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 26 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 27 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 28 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 29 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 30 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 31 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 32 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 33 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 34 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 35 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 36 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 37 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 38 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 39 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 40 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 41 |     ~w(X 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 X),
 42 |     ~w(X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X X)
 43 |   ]
 44 |   @board_rows length(@board)
 45 |   @board_cols length(hd(@board))
 46 | 
 47 |   def render(%{game_state: :over} = assigns) do
 48 |     ~H"""
 49 |     <div class="snake-container">
 50 |       <div class="game-over">
 51 |         <h1>GAME OVER <small>SCORE: <%= @score %></small></h1>
 52 |         <button phx-click="new_game">NEW GAME</button>
 53 |       </div>
 54 |     </div>
 55 |     """
 56 |   end
 57 | 
 58 |   def render(%{game_state: :playing} = assigns) do
 59 |     ~H"""
 60 |     <div class="snake-controls">
 61 |       <form phx-change="update_settings">
 62 |         <select name="tick" onchange="this.blur()">
 63 |           <option value="50" selected={@tick == 50}>50</option>
 64 |           <option value="100" selected={@tick == 100}>100</option>
 65 |           <option value="200" selected={@tick == 200}>200</option>
 66 |           <option value="500" selected={@tick == 500}>500</option>
 67 |         </select>
 68 |         <input type="range" min="5" max="50" name="width" value={@width} />
 69 |         <%= @width %>px
 70 |       </form>
 71 |     </div>
 72 |     <div class="snake-container" phx-window-keydown="keydown">
 73 |       <h3 class="score" style={"font-size: #{@width}px;"}>SCORE:&nbsp;<%= @score %></h3>
 74 |       <%= for block <- @compacted_tail do %>
 75 |         <div class="block tail"
 76 |             style={"left: #{block.x}px;
 77 |                     top: #{block.y}px;
 78 |                     width: #{block.width}px;
 79 |                     height: #{block.height}px;"}
 80 |         ></div>
 81 |       <% end %>
 82 |       <%= for {row, col} <- @cherries do %>
 83 |         <div class="block cherry"
 84 |             style={"left: #{x(col, @width)}px;
 85 |                     top: #{y(row, @width)}px;
 86 |                     width: #{@width}px;
 87 |                     height: #{@width}px;"}
 88 |         ></div>
 89 |       <% end %>
 90 |       <%= for {_, block} <- @blocks, block.type !== :empty do %>
 91 |         <div class={"block #{block.type}"}
 92 |             style={"left: #{block.x}px;
 93 |                     top: #{block.y}px;
 94 |                     width: #{block.width}px;
 95 |                     height: #{block.width}px;"}
 96 |         ></div>
 97 |       <% end %>
 98 |     </div>
 99 |     """
100 |   end
101 | 
102 |   def mount(_params, _session, socket) do
103 |     {:ok, socket |> new_game() |> schedule_tick()}
104 |   end
105 | 
106 |   defp new_game(socket) do
107 |     defaults = %{
108 |       score: 0,
109 |       game_state: :playing,
110 |       heading: :stationary,
111 |       pending_headings: {:stationary, []},
112 |       width: @width,
113 |       compacted_tail: [],
114 |       tick: @tick,
115 |       row: 1,
116 |       col: 6,
117 |       max_length: @snake_length,
118 |       tail: [{1, 6}],
119 |       cherries: []
120 |     }
121 | 
122 |     new_socket =
123 |       socket
124 |       |> assign(defaults)
125 |       |> build_board()
126 |       |> compact_tail()
127 | 
128 |     if connected?(new_socket) do
129 |       place_cherries(new_socket, 10)
130 |     else
131 |       new_socket
132 |     end
133 |   end
134 | 
135 |   def handle_event("update_settings", %{"width" => width, "tick" => tick}, socket) do
136 |     {width, ""} = Integer.parse(width)
137 |     {tick, ""} = Integer.parse(tick)
138 | 
139 |     new_socket =
140 |       socket
141 |       |> update_size(width)
142 |       |> update_tick(tick)
143 | 
144 |     {:noreply, new_socket}
145 |   end
146 | 
147 |   def handle_event("new_game", _, socket) do
148 |     {:noreply, new_game(socket)}
149 |   end
150 | 
151 |   def handle_event("keydown", %{"key" => key}, socket) do
152 |     {:noreply, turn(socket, key)}
153 |   end
154 | 
155 |   def handle_info(:tick, socket) do
156 |     new_socket =
157 |       socket
158 |       |> game_loop()
159 |       |> compact_tail()
160 |       |> schedule_tick()
161 | 
162 |     {:noreply, new_socket}
163 |   end
164 | 
165 |   defp update_tick(socket, tick) when tick <= 1000 and tick >= 50 do
166 |     assign(socket, :tick, tick)
167 |   end
168 | 
169 |   defp schedule_tick(socket) do
170 |     Process.send_after(self(), :tick, socket.assigns.tick)
171 |     socket
172 |   end
173 | 
174 |   defp update_size(socket, width) do
175 |     socket
176 |     |> assign(width: width)
177 |     |> build_board()
178 |     |> compact_tail()
179 |   end
180 | 
181 |   defp turn(socket, "ArrowLeft"), do: go(socket, :left)
182 |   defp turn(socket, "ArrowDown"), do: go(socket, :down)
183 |   defp turn(socket, "ArrowUp"), do: go(socket, :up)
184 |   defp turn(socket, "ArrowRight"), do: go(socket, :right)
185 |   defp turn(socket, _), do: socket
186 | 
187 |   defp go(socket, heading) do
188 |     update(socket, :pending_headings, fn
189 |       {^heading, prev} -> {heading, prev}
190 |       {_, prev} -> {heading, prev ++ [heading]}
191 |     end)
192 |   end
193 | 
194 |   defp next_heading(socket) do
195 |     {next, pending} =
196 |       case {socket.assigns.heading, socket.assigns.pending_headings} do
197 |         {current, {_, []}} -> {current, []}
198 |         {:left, {_, [:right | rest]}} -> {:left, rest}
199 |         {:right, {_, [:left | rest]}} -> {:right, rest}
200 |         {:up, {_, [:down | rest]}} -> {:up, rest}
201 |         {:down, {_, [:up | rest]}} -> {:down, rest}
202 |         {_current, {_, [new | rest]}} -> {new, rest}
203 |       end
204 | 
205 |     {next, {next, pending}}
206 |   end
207 | 
208 |   defp game_loop(%{assigns: %{pending_headings: {:stationary, []}}} = socket), do: socket
209 | 
210 |   defp game_loop(socket) do
211 |     {heading, new_pending} = next_heading(socket)
212 |     {row_before, col_before} = coord(socket)
213 |     maybe_row = row(row_before, heading)
214 |     maybe_col = col(col_before, heading)
215 | 
216 |     {row, col, collision} =
217 |       case block(socket, maybe_row, maybe_col) do
218 |         :wall -> {maybe_row, maybe_col, :wall}
219 |         :tail -> {maybe_row, maybe_col, :tail}
220 |         :empty -> {maybe_row, maybe_col, :empty}
221 |         :cherry -> {maybe_row, maybe_col, :cherry}
222 |       end
223 | 
224 |     socket
225 |     |> advance_tail({row_before, row}, {col_before, col})
226 |     |> update(:row, fn _ -> row end)
227 |     |> update(:col, fn _ -> col end)
228 |     |> update(:heading, fn _ -> heading end)
229 |     |> update(:pending_headings, fn _ -> new_pending end)
230 |     |> handle_collision(collision)
231 |   end
232 | 
233 |   defp advance_tail(socket, {row, row}, {col, col}), do: socket
234 | 
235 |   defp advance_tail(socket, {row, _}, {col, _}) do
236 |     tail = [{row, col} | socket.assigns.tail]
237 | 
238 |     if length(tail) < socket.assigns.max_length do
239 |       assign(socket, :tail, tail)
240 |     else
241 |       assign(socket, :tail, Enum.drop(tail, -1))
242 |     end
243 |   end
244 | 
245 |   defp compact_tail(socket) do
246 |     tail = compact([coord(socket) | socket.assigns.tail], socket.assigns.width)
247 |     assign(socket, :compacted_tail, tail)
248 |   end
249 | 
250 |   def handle_collision(socket, :wall), do: game_over(socket)
251 |   def handle_collision(socket, :tail), do: game_over(socket)
252 |   def handle_collision(socket, :cherry), do: level_up(socket)
253 |   def handle_collision(socket, :empty), do: socket
254 | 
255 |   defp game_over(socket), do: assign(socket, :game_state, :over)
256 | 
257 |   defp level_up(socket) do
258 |     new_cherries = Enum.filter(socket.assigns.cherries, &(&1 !== coord(socket)))
259 | 
260 |     socket
261 |     |> assign(:score, socket.assigns.score + 10)
262 |     |> assign(:max_length, socket.assigns.max_length + 4)
263 |     |> assign(:cherries, new_cherries)
264 |     |> place_cherries(1)
265 |   end
266 | 
267 |   defp col(val, :left) when val - 1 >= 0, do: val - 1
268 |   defp col(val, :right) when val + 1 < @board_cols, do: val + 1
269 |   defp col(val, _), do: val
270 | 
271 |   defp row(val, :up) when val - 1 >= 0, do: val - 1
272 |   defp row(val, :down) when val + 1 < @board_rows, do: val + 1
273 |   defp row(val, _), do: val
274 | 
275 |   def block(socket, row, col) do
276 |     cond do
277 |       {row, col} in socket.assigns.cherries -> :cherry
278 |       {row, col} in socket.assigns.tail -> :tail
279 |       true -> Map.fetch!(socket.assigns.blocks, {row, col}).type
280 |     end
281 |   end
282 | 
283 |   defp x(x, width), do: x * width
284 |   defp y(y, width), do: y * width
285 | 
286 |   defp coord(socket), do: {socket.assigns.row, socket.assigns.col}
287 | 
288 |   defp build_board(socket) do
289 |     width = socket.assigns.width
290 | 
291 |     {_, blocks} =
292 |       Enum.reduce(@board, {0, %{}}, fn row, {y_idx, acc} ->
293 |         {_, blocks} =
294 |           Enum.reduce(row, {0, acc}, fn
295 |             "X", {x_idx, acc} ->
296 |               {x_idx + 1, Map.put(acc, {y_idx, x_idx}, wall(x_idx, y_idx, width))}
297 | 
298 |             "0", {x_idx, acc} ->
299 |               {x_idx + 1, Map.put(acc, {y_idx, x_idx}, empty(x_idx, y_idx, width))}
300 |           end)
301 | 
302 |         {y_idx + 1, blocks}
303 |       end)
304 | 
305 |     assign(socket, :blocks, blocks)
306 |   end
307 | 
308 |   defp wall(x_idx, y_idx, width) do
309 |     %{type: :wall, x: x_idx * width, y: y_idx * width, width: width}
310 |   end
311 | 
312 |   defp empty(x_idx, y_idx, width) do
313 |     %{type: :empty, x: x_idx * width, y: y_idx * width, width: width}
314 |   end
315 | 
316 |   defp place_cherries(socket, count) do
317 |     Enum.reduce(0..(count - 1), socket, fn _, acc -> place_random_cherry(acc) end)
318 |   end
319 | 
320 |   def place_random_cherry(socket) do
321 |     place_cherry(socket, Enum.random(0..(@board_rows - 1)), Enum.random(0..(@board_cols - 1)))
322 |   end
323 | 
324 |   defp place_cherry(socket, row, col) do
325 |     case block(socket, row, col) do
326 |       :empty -> assign(socket, :cherries, [{row, col} | socket.assigns.cherries])
327 |       _ -> place_random_cherry(socket)
328 |     end
329 |   end
330 | 
331 |   defp compact([{row, col} | tail], width) do
332 |     {_, _, compacted} =
333 |       Enum.reduce(tail, {row, col, [{:horizontal, row, [col]}]}, fn
334 |         {row, new_col}, {row, _prev_col, [{:horizontal, row, cols} | acc]} ->
335 |           {row, new_col, [{:horizontal, row, [new_col | cols]} | acc]}
336 | 
337 |         {new_row, col}, {_prev_row, col, [{:vertical, rows, col} | acc]} ->
338 |           {new_row, col, [{:vertical, [new_row | rows], col} | acc]}
339 | 
340 |         {row, new_col}, {row, _prev_col, [{:vertical, _rows, _col} | _] = acc} ->
341 |           {row, new_col, [{:horizontal, row, [new_col]} | acc]}
342 | 
343 |         {new_row, col}, {_prev_row, col, [{:horizontal, _row, _cols} | _] = acc} ->
344 |           {new_row, col, [{:vertical, [new_row], col} | acc]}
345 |       end)
346 | 
347 |     Enum.map(compacted, fn
348 |       {:horizontal, row, [_ | _] = cols} ->
349 |         %{
350 |           x: x(Enum.min(cols), width),
351 |           y: y(row, width),
352 |           width: length(cols) * width,
353 |           height: width
354 |         }
355 | 
356 |       {:vertical, [_ | _] = rows, col} ->
357 |         %{
358 |           x: x(col, width),
359 |           y: y(Enum.min(rows), width),
360 |           height: length(rows) * width,
361 |           width: width
362 |         }
363 |     end)
364 |   end
365 | end
366 | 


--------------------------------------------------------------------------------