+ //
+ plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+ plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+ plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+
+ // Embeds Heroicons (https://heroicons.com) into your app.css bundle
+ // See your `CoreComponents.icon/1` for more information.
+ //
+ plugin(function({matchComponents, theme}) {
+ let iconsDir = path.join(__dirname, "../deps/heroicons/optimized")
+ let values = {}
+ let icons = [
+ ["", "/24/outline"],
+ ["-solid", "/24/solid"],
+ ["-mini", "/20/solid"],
+ ["-micro", "/16/solid"]
+ ]
+ icons.forEach(([suffix, dir]) => {
+ fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+ let name = path.basename(file, ".svg") + suffix
+ values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+ })
+ })
+ matchComponents({
+ "hero": ({name, fullPath}) => {
+ let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+ let size = theme("spacing.6")
+ if (name.endsWith("-mini")) {
+ size = theme("spacing.5")
+ } else if (name.endsWith("-micro")) {
+ size = theme("spacing.4")
+ }
+ return {
+ [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+ "-webkit-mask": `var(--hero-${name})`,
+ "mask": `var(--hero-${name})`,
+ "mask-repeat": "no-repeat",
+ "background-color": "currentColor",
+ "vertical-align": "middle",
+ "display": "inline-block",
+ "width": size,
+ "height": size
+ }
+ }
+ }, {values})
+ })
+ ]
+}
diff --git a/assets/vendor/topbar.js b/assets/vendor/topbar.js
new file mode 100644
index 0000000..4195727
--- /dev/null
+++ b/assets/vendor/topbar.js
@@ -0,0 +1,165 @@
+/**
+ * @license MIT
+ * topbar 2.0.0, 2023-02-04
+ * https://buunguyen.github.io/topbar
+ * Copyright (c) 2021 Buu Nguyen
+ */
+(function (window, document) {
+ "use strict";
+
+ // https://gist.github.com/paulirish/1579671
+ (function () {
+ var lastTime = 0;
+ var vendors = ["ms", "moz", "webkit", "o"];
+ for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame =
+ window[vendors[x] + "RequestAnimationFrame"];
+ window.cancelAnimationFrame =
+ window[vendors[x] + "CancelAnimationFrame"] ||
+ window[vendors[x] + "CancelRequestAnimationFrame"];
+ }
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function (callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function () {
+ callback(currTime + timeToCall);
+ }, timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function (id) {
+ clearTimeout(id);
+ };
+ })();
+
+ var canvas,
+ currentProgress,
+ showing,
+ progressTimerId = null,
+ fadeTimerId = null,
+ delayTimerId = null,
+ addEvent = function (elem, type, handler) {
+ if (elem.addEventListener) elem.addEventListener(type, handler, false);
+ else if (elem.attachEvent) elem.attachEvent("on" + type, handler);
+ else elem["on" + type] = handler;
+ },
+ options = {
+ autoRun: true,
+ barThickness: 3,
+ barColors: {
+ 0: "rgba(26, 188, 156, .9)",
+ ".25": "rgba(52, 152, 219, .9)",
+ ".50": "rgba(241, 196, 15, .9)",
+ ".75": "rgba(230, 126, 34, .9)",
+ "1.0": "rgba(211, 84, 0, .9)",
+ },
+ shadowBlur: 10,
+ shadowColor: "rgba(0, 0, 0, .6)",
+ className: null,
+ },
+ repaint = function () {
+ canvas.width = window.innerWidth;
+ canvas.height = options.barThickness * 5; // need space for shadow
+
+ var ctx = canvas.getContext("2d");
+ ctx.shadowBlur = options.shadowBlur;
+ ctx.shadowColor = options.shadowColor;
+
+ var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
+ for (var stop in options.barColors)
+ lineGradient.addColorStop(stop, options.barColors[stop]);
+ ctx.lineWidth = options.barThickness;
+ ctx.beginPath();
+ ctx.moveTo(0, options.barThickness / 2);
+ ctx.lineTo(
+ Math.ceil(currentProgress * canvas.width),
+ options.barThickness / 2
+ );
+ ctx.strokeStyle = lineGradient;
+ ctx.stroke();
+ },
+ createCanvas = function () {
+ canvas = document.createElement("canvas");
+ var style = canvas.style;
+ style.position = "fixed";
+ style.top = style.left = style.right = style.margin = style.padding = 0;
+ style.zIndex = 100001;
+ style.display = "none";
+ if (options.className) canvas.classList.add(options.className);
+ document.body.appendChild(canvas);
+ addEvent(window, "resize", repaint);
+ },
+ topbar = {
+ config: function (opts) {
+ for (var key in opts)
+ if (options.hasOwnProperty(key)) options[key] = opts[key];
+ },
+ show: function (delay) {
+ if (showing) return;
+ if (delay) {
+ if (delayTimerId) return;
+ delayTimerId = setTimeout(() => topbar.show(), delay);
+ } else {
+ showing = true;
+ if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId);
+ if (!canvas) createCanvas();
+ canvas.style.opacity = 1;
+ canvas.style.display = "block";
+ topbar.progress(0);
+ if (options.autoRun) {
+ (function loop() {
+ progressTimerId = window.requestAnimationFrame(loop);
+ topbar.progress(
+ "+" + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2)
+ );
+ })();
+ }
+ }
+ },
+ progress: function (to) {
+ if (typeof to === "undefined") return currentProgress;
+ if (typeof to === "string") {
+ to =
+ (to.indexOf("+") >= 0 || to.indexOf("-") >= 0
+ ? currentProgress
+ : 0) + parseFloat(to);
+ }
+ currentProgress = to > 1 ? 1 : to;
+ repaint();
+ return currentProgress;
+ },
+ hide: function () {
+ clearTimeout(delayTimerId);
+ delayTimerId = null;
+ if (!showing) return;
+ showing = false;
+ if (progressTimerId != null) {
+ window.cancelAnimationFrame(progressTimerId);
+ progressTimerId = null;
+ }
+ (function loop() {
+ if (topbar.progress("+.1") >= 1) {
+ canvas.style.opacity -= 0.05;
+ if (canvas.style.opacity <= 0.05) {
+ canvas.style.display = "none";
+ fadeTimerId = null;
+ return;
+ }
+ }
+ fadeTimerId = window.requestAnimationFrame(loop);
+ })();
+ },
+ };
+
+ if (typeof module === "object" && typeof module.exports === "object") {
+ module.exports = topbar;
+ } else if (typeof define === "function" && define.amd) {
+ define(function () {
+ return topbar;
+ });
+ } else {
+ this.topbar = topbar;
+ }
+}.call(this, window, document));
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
deleted file mode 100644
index dd77c3d..0000000
--- a/assets/webpack.config.js
+++ /dev/null
@@ -1,51 +0,0 @@
-const path = require('path');
-const glob = require('glob');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-
-module.exports = (env, options) => {
- const devMode = options.mode !== 'production';
-
- return {
- optimization: {
- minimizer: [
- new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
- new OptimizeCSSAssetsPlugin({})
- ]
- },
- entry: {
- 'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
- },
- output: {
- filename: '[name].js',
- path: path.resolve(__dirname, '../priv/static/js'),
- publicPath: '/js/'
- },
- devtool: devMode ? 'source-map' : undefined,
- module: {
- rules: [
- {
- test: /\.js$/,
- exclude: /node_modules/,
- use: {
- loader: 'babel-loader'
- }
- },
- {
- test: /\.[s]?css$/,
- use: [
- MiniCssExtractPlugin.loader,
- 'css-loader',
- 'sass-loader',
- ],
- }
- ]
- },
- plugins: [
- new MiniCssExtractPlugin({ filename: '../css/app.css' }),
- new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
- ]
- }
-};
diff --git a/config/config.exs b/config/config.exs
index ae0cc52..552694e 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -1,19 +1,47 @@
# This file is responsible for configuring your application
-# and its dependencies with the aid of the Mix.Config module.
+# and its dependencies with the aid of the Config module.
#
# This configuration file is loaded before any dependency and
# is restricted to this project.
# General application configuration
-use Mix.Config
+import Config
+
+config :game_of_life,
+ generators: [timestamp_type: :utc_datetime]
# Configures the endpoint
config :game_of_life, GameOfLifeWeb.Endpoint,
url: [host: "localhost"],
- secret_key_base: "Y/win5/HVeihTTzl0SxKWeFf1CcwuiNgQbN7jsCDaRNgT4kc5iScTthMe07ECoEd",
- render_errors: [view: GameOfLifeWeb.ErrorView, accepts: ~w(html json), layout: false],
+ adapter: Bandit.PhoenixAdapter,
+ render_errors: [
+ formats: [html: GameOfLifeWeb.ErrorHTML, json: GameOfLifeWeb.ErrorJSON],
+ layout: false
+ ],
pubsub_server: GameOfLife.PubSub,
- live_view: [signing_salt: "vjDI0RTZ"]
+ live_view: [signing_salt: "U/DcCViJ"]
+
+# Configure esbuild (the version is required)
+config :esbuild,
+ version: "0.17.11",
+ game_of_life: [
+ args:
+ ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+ cd: Path.expand("../assets", __DIR__),
+ env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+ ]
+
+# Configure tailwind (the version is required)
+config :tailwind,
+ version: "3.4.3",
+ game_of_life: [
+ args: ~w(
+ --config=tailwind.config.js
+ --input=css/app.css
+ --output=../priv/static/assets/app.css
+ ),
+ cd: Path.expand("../assets", __DIR__)
+ ]
# Configures Elixir's Logger
config :logger, :console,
@@ -25,4 +53,4 @@ config :phoenix, :json_library, Jason
# Import environment specific config. This must remain at the bottom
# of this file so it overrides the configuration defined above.
-import_config "#{Mix.env()}.exs"
+import_config "#{config_env()}.exs"
diff --git a/config/dev.exs b/config/dev.exs
index 56331d5..f4e5399 100644
--- a/config/dev.exs
+++ b/config/dev.exs
@@ -1,24 +1,22 @@
-use Mix.Config
+import Config
# For development, we disable any cache and enable
# debugging and code reloading.
#
# The watchers configuration can be used to run external
-# watchers to your application. For example, we use it
-# with webpack to recompile .js and .css sources.
+# watchers to your application. For example, we can use it
+# to bundle .js and .css sources.
config :game_of_life, GameOfLifeWeb.Endpoint,
- http: [port: 4000],
- debug_errors: true,
- code_reloader: true,
+ # Binding to loopback ipv4 address prevents access from other machines.
+ # Change to `ip: {0, 0, 0, 0}` to allow access from other machines.
+ http: [ip: {127, 0, 0, 1}, port: 4000],
check_origin: false,
+ code_reloader: true,
+ debug_errors: true,
+ secret_key_base: "UyH6Jw+pKOAULMoliESF9eLZGWNfHfnH7sH9w/x0Wbvbg3j92b1F6+3JIE/TWd+G",
watchers: [
- node: [
- "node_modules/webpack/bin/webpack.js",
- "--mode",
- "development",
- "--watch-stdin",
- cd: Path.expand("../assets", __DIR__)
- ]
+ esbuild: {Esbuild, :install_and_run, [:game_of_life, ~w(--sourcemap=inline --watch)]},
+ tailwind: {Tailwind, :install_and_run, [:game_of_life, ~w(--watch)]}
]
# ## SSL Support
@@ -29,7 +27,6 @@ config :game_of_life, GameOfLifeWeb.Endpoint,
#
# mix phx.gen.cert
#
-# Note that this task requires Erlang/OTP 20 or later.
# Run `mix help phx.gen.cert` for more information.
#
# The `http:` config above can be replaced with:
@@ -49,12 +46,14 @@ config :game_of_life, GameOfLifeWeb.Endpoint,
config :game_of_life, GameOfLifeWeb.Endpoint,
live_reload: [
patterns: [
- ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
- ~r"lib/game_of_life_web/(live|views)/.*(ex)$",
- ~r"lib/game_of_life_web/templates/.*(eex)$"
+ ~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
+ ~r"lib/game_of_life_web/(controllers|live|components)/.*(ex|heex)$"
]
]
+# Enable dev routes for dashboard and mailbox
+config :game_of_life, dev_routes: true
+
# Do not include metadata nor timestamps in development logs
config :logger, :console, format: "[$level] $message\n"
@@ -64,3 +63,9 @@ config :phoenix, :stacktrace_depth, 20
# Initialize plugs at runtime for faster development compilation
config :phoenix, :plug_init_mode, :runtime
+
+config :phoenix_live_view,
+ # Include HEEx debug annotations as HTML comments in rendered markup
+ debug_heex_annotations: true,
+ # Enable helpful, but potentially expensive runtime checks
+ enable_expensive_runtime_checks: true
diff --git a/config/prod.exs b/config/prod.exs
index 7fd9987..c8433fb 100644
--- a/config/prod.exs
+++ b/config/prod.exs
@@ -1,55 +1,15 @@
-use Mix.Config
+import Config
-# For production, don't forget to configure the url host
-# to something meaningful, Phoenix uses this information
-# when generating URLs.
-#
# Note we also include the path to a cache manifest
# containing the digested version of static files. This
-# manifest is generated by the `mix phx.digest` task,
+# manifest is generated by the `mix assets.deploy` task,
# which you should run after static files are built and
# before starting your production server.
config :game_of_life, GameOfLifeWeb.Endpoint,
- url: [host: "example.com", port: 80],
cache_static_manifest: "priv/static/cache_manifest.json"
# Do not print debug messages in production
config :logger, level: :info
-# ## SSL Support
-#
-# To get SSL working, you will need to add the `https` key
-# to the previous section and set your `:url` port to 443:
-#
-# config :game_of_life, GameOfLifeWeb.Endpoint,
-# ...
-# url: [host: "example.com", port: 443],
-# https: [
-# port: 443,
-# cipher_suite: :strong,
-# keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
-# certfile: System.get_env("SOME_APP_SSL_CERT_PATH"),
-# transport_options: [socket_opts: [:inet6]]
-# ]
-#
-# The `cipher_suite` is set to `:strong` to support only the
-# latest and more secure SSL ciphers. This means old browsers
-# and clients may not be supported. You can set it to
-# `:compatible` for wider support.
-#
-# `:keyfile` and `:certfile` expect an absolute path to the key
-# and cert in disk or a relative path inside priv, for example
-# "priv/ssl/server.key". For all supported SSL configuration
-# options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
-#
-# We also recommend setting `force_ssl` in your endpoint, ensuring
-# no data is ever sent via http, always redirecting to https:
-#
-# config :game_of_life, GameOfLifeWeb.Endpoint,
-# force_ssl: [hsts: true]
-#
-# Check `Plug.SSL` for all available options in `force_ssl`.
-
-# Finally import the config/prod.secret.exs which loads secrets
-# and configuration from environment variables.
-import_config "prod.secret.exs"
+# Runtime production configuration, including reading
+# of environment variables, is done on config/runtime.exs.
diff --git a/config/prod.secret.exs b/config/prod.secret.exs
deleted file mode 100644
index 5eaf50c..0000000
--- a/config/prod.secret.exs
+++ /dev/null
@@ -1,29 +0,0 @@
-# In this file, we load production configuration and secrets
-# from environment variables. You can also hardcode secrets,
-# although such is generally not recommended and you have to
-# remember to add this file to your .gitignore.
-use Mix.Config
-
-secret_key_base =
- System.get_env("SECRET_KEY_BASE") ||
- raise """
- environment variable SECRET_KEY_BASE is missing.
- You can generate one by calling: mix phx.gen.secret
- """
-
-config :game_of_life, GameOfLifeWeb.Endpoint,
- http: [
- port: String.to_integer(System.get_env("PORT") || "4000"),
- transport_options: [socket_opts: [:inet6]]
- ],
- secret_key_base: secret_key_base
-
-# ## Using releases (Elixir v1.9+)
-#
-# If you are doing OTP releases, you need to instruct Phoenix
-# to start each relevant endpoint:
-#
-# config :game_of_life, GameOfLifeWeb.Endpoint, server: true
-#
-# Then you can assemble a release by calling `mix release`.
-# See `mix help release` for more information.
diff --git a/config/runtime.exs b/config/runtime.exs
new file mode 100644
index 0000000..2bba1d6
--- /dev/null
+++ b/config/runtime.exs
@@ -0,0 +1,84 @@
+import Config
+
+# config/runtime.exs is executed for all environments, including
+# during releases. It is executed after compilation and before the
+# system starts, so it is typically used to load production configuration
+# and secrets from environment variables or elsewhere. Do not define
+# any compile-time configuration in here, as it won't be applied.
+# The block below contains prod specific runtime configuration.
+
+# ## Using releases
+#
+# If you use `mix release`, you need to explicitly enable the server
+# by passing the PHX_SERVER=true when you start it:
+#
+# PHX_SERVER=true bin/game_of_life start
+#
+# Alternatively, you can use `mix phx.gen.release` to generate a `bin/server`
+# script that automatically sets the env var above.
+if System.get_env("PHX_SERVER") do
+ config :game_of_life, GameOfLifeWeb.Endpoint, server: true
+end
+
+if config_env() == :prod do
+ # The secret key base is used to sign/encrypt cookies and other secrets.
+ # A default value is used in config/dev.exs and config/test.exs but you
+ # want to use a different value for prod and you most likely don't want
+ # to check this value into version control, so we use an environment
+ # variable instead.
+ secret_key_base =
+ System.get_env("SECRET_KEY_BASE") ||
+ raise """
+ environment variable SECRET_KEY_BASE is missing.
+ You can generate one by calling: mix phx.gen.secret
+ """
+
+ host = System.get_env("PHX_HOST") || "example.com"
+ port = String.to_integer(System.get_env("PORT") || "4000")
+
+ config :game_of_life, :dns_cluster_query, System.get_env("DNS_CLUSTER_QUERY")
+
+ config :game_of_life, GameOfLifeWeb.Endpoint,
+ url: [host: host, port: 443, scheme: "https"],
+ http: [
+ # Enable IPv6 and bind on all interfaces.
+ # Set it to {0, 0, 0, 0, 0, 0, 0, 1} for local network only access.
+ # See the documentation on https://hexdocs.pm/bandit/Bandit.html#t:options/0
+ # for details about using IPv6 vs IPv4 and loopback vs public addresses.
+ ip: {0, 0, 0, 0, 0, 0, 0, 0},
+ port: port
+ ],
+ secret_key_base: secret_key_base
+
+ # ## SSL Support
+ #
+ # To get SSL working, you will need to add the `https` key
+ # to your endpoint configuration:
+ #
+ # config :game_of_life, GameOfLifeWeb.Endpoint,
+ # https: [
+ # ...,
+ # port: 443,
+ # cipher_suite: :strong,
+ # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"),
+ # certfile: System.get_env("SOME_APP_SSL_CERT_PATH")
+ # ]
+ #
+ # The `cipher_suite` is set to `:strong` to support only the
+ # latest and more secure SSL ciphers. This means old browsers
+ # and clients may not be supported. You can set it to
+ # `:compatible` for wider support.
+ #
+ # `:keyfile` and `:certfile` expect an absolute path to the key
+ # and cert in disk or a relative path inside priv, for example
+ # "priv/ssl/server.key". For all supported SSL configuration
+ # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1
+ #
+ # We also recommend setting `force_ssl` in your config/prod.exs,
+ # ensuring no data is ever sent via http, always redirecting to https:
+ #
+ # config :game_of_life, GameOfLifeWeb.Endpoint,
+ # force_ssl: [hsts: true]
+ #
+ # Check `Plug.SSL` for all available options in `force_ssl`.
+end
diff --git a/config/test.exs b/config/test.exs
index a53567e..051eb22 100644
--- a/config/test.exs
+++ b/config/test.exs
@@ -1,10 +1,18 @@
-use Mix.Config
+import Config
# We don't run a server during test. If one is required,
# you can enable the server option below.
config :game_of_life, GameOfLifeWeb.Endpoint,
- http: [port: 4002],
+ http: [ip: {127, 0, 0, 1}, port: 4002],
+ secret_key_base: "VdkWsrDLl1LmdXGlCGoy8ndom8Jyz+fXEspVC/jHfVb0ZAsYA8IABtDwfv0Ihiz3",
server: false
# Print only warnings and errors during test
-config :logger, level: :warn
+config :logger, level: :warning
+
+# Initialize plugs at runtime for faster test compilation
+config :phoenix, :plug_init_mode, :runtime
+
+# Enable helpful, but potentially expensive runtime checks
+config :phoenix_live_view,
+ enable_expensive_runtime_checks: true
diff --git a/game_of_life b/game_of_life
new file mode 100755
index 0000000..99b5308
Binary files /dev/null and b/game_of_life differ
diff --git a/lib/game_of_life/application.ex b/lib/game_of_life/application.ex
index dc1e7eb..6da502b 100644
--- a/lib/game_of_life/application.ex
+++ b/lib/game_of_life/application.ex
@@ -5,16 +5,16 @@ defmodule GameOfLife.Application do
use Application
+ @impl true
def start(_type, _args) do
children = [
- # Start the Telemetry supervisor
GameOfLifeWeb.Telemetry,
- # Start the PubSub system
+ {DNSCluster, query: Application.get_env(:game_of_life, :dns_cluster_query) || :ignore},
{Phoenix.PubSub, name: GameOfLife.PubSub},
- # Start the Endpoint (http/https)
- GameOfLifeWeb.Endpoint
# Start a worker by calling: GameOfLife.Worker.start_link(arg)
- # {GameOfLife.Worker, arg}
+ # {GameOfLife.Worker, arg},
+ # Start to serve requests, typically the last entry
+ GameOfLifeWeb.Endpoint
]
# See https://hexdocs.pm/elixir/Supervisor.html
@@ -25,6 +25,7 @@ defmodule GameOfLife.Application do
# Tell Phoenix to update the endpoint configuration
# whenever the application is updated.
+ @impl true
def config_change(changed, _new, removed) do
GameOfLifeWeb.Endpoint.config_change(changed, removed)
:ok
diff --git a/lib/game_of_life_cli/cli.ex b/lib/game_of_life_cli/cli.ex
index 9ec6709..41f3397 100644
--- a/lib/game_of_life_cli/cli.ex
+++ b/lib/game_of_life_cli/cli.ex
@@ -26,12 +26,19 @@ defmodule GameOfLifeCLI.CLI do
end
defp start_game_of_life(%{generations: generations, grid_size: grid_size}) do
+ # IO.puts(IO.ANSI.blue_background())
+
Life.get_random_stream(grid_size)
|> Stream.take(generations)
|> Stream.map(&to_string/1)
|> Enum.each(fn grid_str ->
- IO.puts(grid_str)
- Process.sleep(500)
+ IO.write(grid_str)
+ Process.sleep(100)
+
+ for _i <- 1..grid_size + 2, do: IO.write(IO.ANSI.cursor_up(1) <> IO.ANSI.clear_line())
+ # IO.write(IO.ANSI.cursor_down(grid_size))
end)
+
+ IO.puts(IO.ANSI.reset())
end
end
diff --git a/lib/game_of_life_web.ex b/lib/game_of_life_web.ex
index 93f1296..3b3c959 100644
--- a/lib/game_of_life_web.ex
+++ b/lib/game_of_life_web.ex
@@ -1,51 +1,59 @@
defmodule GameOfLifeWeb do
@moduledoc """
The entrypoint for defining your web interface, such
- as controllers, views, channels and so on.
+ as controllers, components, channels, and so on.
This can be used in your application as:
use GameOfLifeWeb, :controller
- use GameOfLifeWeb, :view
+ use GameOfLifeWeb, :html
- The definitions below will be executed for every view,
- controller, etc, so keep them short and clean, focused
+ The definitions below will be executed for every controller,
+ component, etc, so keep them short and clean, focused
on imports, uses and aliases.
Do NOT define functions inside the quoted expressions
- below. Instead, define any helper function in modules
- and import those modules here.
+ below. Instead, define additional modules and import
+ those modules here.
"""
- def controller do
+ def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+
+ def router do
quote do
- use Phoenix.Controller, namespace: GameOfLifeWeb
+ use Phoenix.Router, helpers: false
+ # Import common connection and controller functions to use in pipelines
import Plug.Conn
- alias GameOfLifeWeb.Router.Helpers, as: Routes
+ import Phoenix.Controller
+ import Phoenix.LiveView.Router
+ end
+ end
+
+ def channel do
+ quote do
+ use Phoenix.Channel
end
end
- def view do
+ def controller do
quote do
- use Phoenix.View,
- root: "lib/game_of_life_web/templates",
- namespace: GameOfLifeWeb
+ use Phoenix.Controller,
+ formats: [:html, :json],
+ layouts: [html: GameOfLifeWeb.Layouts]
- # Import convenience functions from controllers
- import Phoenix.Controller, only: [get_flash: 1, get_flash: 2, view_module: 1]
+ import Plug.Conn
- # Include shared imports and aliases for views
- unquote(view_helpers())
+ unquote(verified_routes())
end
end
def live_view do
quote do
use Phoenix.LiveView,
- layout: {GameOfLifeWeb.LayoutView, "live.html"}
+ layout: {GameOfLifeWeb.Layouts, :app}
- unquote(view_helpers())
+ unquote(html_helpers())
end
end
@@ -53,44 +61,49 @@ defmodule GameOfLifeWeb do
quote do
use Phoenix.LiveComponent
- unquote(view_helpers())
+ unquote(html_helpers())
end
end
- def router do
+ def html do
quote do
- use Phoenix.Router
+ use Phoenix.Component
- import Plug.Conn
- import Phoenix.Controller
- import Phoenix.LiveView.Router
- end
- end
+ # Import convenience functions from controllers
+ import Phoenix.Controller,
+ only: [get_csrf_token: 0, view_module: 1, view_template: 1]
- def channel do
- quote do
- use Phoenix.Channel
+ # Include general helpers for rendering HTML
+ unquote(html_helpers())
end
end
- defp view_helpers do
+ defp html_helpers do
quote do
- # Use all HTML functionality (forms, tags, etc)
- use Phoenix.HTML
+ # HTML escaping functionality
+ import Phoenix.HTML
+ # Core UI components and translation
+ import GameOfLifeWeb.CoreComponents
- # Import LiveView helpers (live_render, live_component, live_patch, etc)
- import Phoenix.LiveView.Helpers
+ # Shortcut for generating JS commands
+ alias Phoenix.LiveView.JS
- # Import basic rendering functionality (render, render_layout, etc)
- import Phoenix.View
+ # Routes generation with the ~p sigil
+ unquote(verified_routes())
+ end
+ end
- import GameOfLifeWeb.ErrorHelpers
- alias GameOfLifeWeb.Router.Helpers, as: Routes
+ def verified_routes do
+ quote do
+ use Phoenix.VerifiedRoutes,
+ endpoint: GameOfLifeWeb.Endpoint,
+ router: GameOfLifeWeb.Router,
+ statics: GameOfLifeWeb.static_paths()
end
end
@doc """
- When used, dispatch to the appropriate controller/view/etc.
+ When used, dispatch to the appropriate controller/live_view/etc.
"""
defmacro __using__(which) when is_atom(which) do
apply(__MODULE__, which, [])
diff --git a/lib/game_of_life_web/channels/user_socket.ex b/lib/game_of_life_web/channels/user_socket.ex
deleted file mode 100644
index ee7485a..0000000
--- a/lib/game_of_life_web/channels/user_socket.ex
+++ /dev/null
@@ -1,35 +0,0 @@
-defmodule GameOfLifeWeb.UserSocket do
- use Phoenix.Socket
-
- ## Channels
- # channel "room:*", GameOfLifeWeb.RoomChannel
-
- # Socket params are passed from the client and can
- # be used to verify and authenticate a user. After
- # verification, you can put default assigns into
- # the socket that will be set for all channels, ie
- #
- # {:ok, assign(socket, :user_id, verified_user_id)}
- #
- # To deny connection, return `:error`.
- #
- # See `Phoenix.Token` documentation for examples in
- # performing token verification on connect.
- @impl true
- def connect(_params, socket, _connect_info) do
- {:ok, socket}
- end
-
- # Socket id's are topics that allow you to identify all sockets for a given user:
- #
- # def id(socket), do: "user_socket:#{socket.assigns.user_id}"
- #
- # Would allow you to broadcast a "disconnect" event and terminate
- # all active sockets and channels for a given user:
- #
- # GameOfLifeWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{})
- #
- # Returning `nil` makes this socket anonymous.
- @impl true
- def id(_socket), do: nil
-end
diff --git a/lib/game_of_life_web/components/core_components.ex b/lib/game_of_life_web/components/core_components.ex
new file mode 100644
index 0000000..0873374
--- /dev/null
+++ b/lib/game_of_life_web/components/core_components.ex
@@ -0,0 +1,672 @@
+defmodule GameOfLifeWeb.CoreComponents do
+ @moduledoc """
+ Provides core UI components.
+
+ At first glance, this module may seem daunting, but its goal is to provide
+ core building blocks for your application, such as modals, tables, and
+ forms. The components consist mostly of markup and are well-documented
+ with doc strings and declarative assigns. You may customize and style
+ them in any way you want, based on your application growth and needs.
+
+ The default components use Tailwind CSS, a utility-first CSS framework.
+ See the [Tailwind CSS documentation](https://tailwindcss.com) to learn
+ how to customize them or feel free to swap in another framework altogether.
+
+ Icons are provided by [heroicons](https://heroicons.com). See `icon/1` for usage.
+ """
+ use Phoenix.Component
+
+ alias Phoenix.LiveView.JS
+
+ @doc """
+ Renders a modal.
+
+ ## Examples
+
+ <.modal id="confirm-modal">
+ This is a modal.
+
+
+ JS commands may be passed to the `:on_cancel` to configure
+ the closing/cancel event, for example:
+
+ <.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
+ This is another modal.
+
+
+ """
+ attr :id, :string, required: true
+ attr :show, :boolean, default: false
+ attr :on_cancel, JS, default: %JS{}
+ slot :inner_block, required: true
+
+ def modal(assigns) do
+ ~H"""
+
+ """
+ end
+
+ @doc """
+ Shows the flash group with standard titles and content.
+
+ ## Examples
+
+ <.flash_group flash={@flash} />
+ """
+ attr :flash, :map, required: true, doc: "the map of flash messages"
+ attr :id, :string, default: "flash-group", doc: "the optional id of flash container"
+
+ def flash_group(assigns) do
+ ~H"""
+
+ <.flash kind={:info} title="Success!" flash={@flash} />
+ <.flash kind={:error} title="Error!" flash={@flash} />
+ <.flash
+ id="client-error"
+ kind={:error}
+ title="We can't find the internet"
+ phx-disconnected={show(".phx-client-error #client-error")}
+ phx-connected={hide("#client-error")}
+ hidden
+ >
+ Attempting to reconnect
+ <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+
+
+ <.flash
+ id="server-error"
+ kind={:error}
+ title="Something went wrong!"
+ phx-disconnected={show(".phx-server-error #server-error")}
+ phx-connected={hide("#server-error")}
+ hidden
+ >
+ Hang in there while we get back on track
+ <.icon name="hero-arrow-path" class="ml-1 h-3 w-3 animate-spin" />
+
+
+ """
+ end
+
+ @doc """
+ Renders a simple form.
+
+ ## Examples
+
+ <.simple_form for={@form} phx-change="validate" phx-submit="save">
+ <.input field={@form[:email]} label="Email"/>
+ <.input field={@form[:username]} label="Username" />
+ <:actions>
+ <.button>Save
+
+
+ """
+ attr :for, :any, required: true, doc: "the data structure for the form"
+ attr :as, :any, default: nil, doc: "the server side parameter to collect all input under"
+
+ attr :rest, :global,
+ include: ~w(autocomplete name rel action enctype method novalidate target multipart),
+ doc: "the arbitrary HTML attributes to apply to the form tag"
+
+ slot :inner_block, required: true
+ slot :actions, doc: "the slot for form actions, such as a submit button"
+
+ def simple_form(assigns) do
+ ~H"""
+ <.form :let={f} for={@for} as={@as} {@rest}>
+
+ <%= render_slot(@inner_block, f) %>
+
+ <%= render_slot(action, f) %>
+
+
+
+ """
+ end
+
+ @doc """
+ Renders a button.
+
+ ## Examples
+
+ <.button>Send!
+ <.button phx-click="go" class="ml-2">Send!
+ """
+ attr :type, :string, default: nil
+ attr :class, :string, default: nil
+ attr :rest, :global, include: ~w(disabled form name value)
+
+ slot :inner_block, required: true
+
+ def button(assigns) do
+ ~H"""
+
+ """
+ end
+
+ @doc """
+ Renders an input with label and error messages.
+
+ A `Phoenix.HTML.FormField` may be passed as argument,
+ which is used to retrieve the input name, id, and values.
+ Otherwise all attributes may be passed explicitly.
+
+ ## Types
+
+ This function accepts all HTML input types, considering that:
+
+ * You may also set `type="select"` to render a `