Lots of updates :)
This commit is contained in:
parent
236a1b2eba
commit
d1d3c11c6c
|
@ -1,26 +1,40 @@
|
||||||
// See the Tailwind configuration guide for advanced usage
|
// See the Tailwind configuration guide for advanced usage
|
||||||
// https://tailwindcss.com/docs/configuration
|
// https://tailwindcss.com/docs/configuration
|
||||||
|
|
||||||
const plugin = require("tailwindcss/plugin")
|
const plugin = require("tailwindcss/plugin");
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [
|
content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
|
||||||
"./js/**/*.js",
|
|
||||||
"../lib/*_web.ex",
|
|
||||||
"../lib/*_web/**/*.*ex"
|
|
||||||
],
|
|
||||||
theme: {
|
theme: {
|
||||||
extend: {
|
extend: {
|
||||||
colors: {
|
colors: {
|
||||||
brand: "#FD4F00",
|
brand: "#FD4F00",
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
require("@tailwindcss/forms"),
|
require("@tailwindcss/forms"),
|
||||||
plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
|
require("@tailwindcss/typography"),
|
||||||
plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
|
plugin(({ addVariant }) =>
|
||||||
plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
|
addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
|
||||||
plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"]))
|
),
|
||||||
]
|
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 &",
|
||||||
|
])
|
||||||
|
),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
|
@ -60,7 +60,7 @@ config :swornforged, SwornforgedWeb.Endpoint,
|
||||||
]
|
]
|
||||||
|
|
||||||
# Enable dev routes for dashboard and mailbox
|
# Enable dev routes for dashboard and mailbox
|
||||||
config :swornforged, dev_routes: true
|
config :swornforged, dev_routes: true, datasworn_debug: true
|
||||||
|
|
||||||
# Do not include metadata nor timestamps in development logs
|
# Do not include metadata nor timestamps in development logs
|
||||||
config :logger, :console, format: "[$level] $message\n"
|
config :logger, :console, format: "[$level] $message\n"
|
||||||
|
|
|
@ -401,31 +401,6 @@ defmodule SwornforgedWeb.CoreComponents do
|
||||||
"""
|
"""
|
||||||
end
|
end
|
||||||
|
|
||||||
@doc """
|
|
||||||
Renders a header with title.
|
|
||||||
"""
|
|
||||||
attr :class, :string, default: nil
|
|
||||||
|
|
||||||
slot :inner_block, required: true
|
|
||||||
slot :subtitle
|
|
||||||
slot :actions
|
|
||||||
|
|
||||||
def header(assigns) do
|
|
||||||
~H"""
|
|
||||||
<header class={[@actions != [] && "flex items-center justify-between gap-6", @class]}>
|
|
||||||
<div>
|
|
||||||
<h1 class="text-lg font-semibold leading-8 text-zinc-800">
|
|
||||||
<%= render_slot(@inner_block) %>
|
|
||||||
</h1>
|
|
||||||
<p :if={@subtitle != []} class="mt-2 text-sm leading-6 text-zinc-600">
|
|
||||||
<%= render_slot(@subtitle) %>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex-none"><%= render_slot(@actions) %></div>
|
|
||||||
</header>
|
|
||||||
"""
|
|
||||||
end
|
|
||||||
|
|
||||||
@doc ~S"""
|
@doc ~S"""
|
||||||
Renders a table with generic styling.
|
Renders a table with generic styling.
|
||||||
|
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body class="bg-gray-100 antialiased">
|
<body class="bg-gray-100 dark:bg-gray-900 antialiased">
|
||||||
<%= @inner_content %>
|
<%= @inner_content %>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -2,4 +2,106 @@ defmodule SwornforgedWeb.PageHTML do
|
||||||
use SwornforgedWeb, :html
|
use SwornforgedWeb, :html
|
||||||
|
|
||||||
embed_templates "page_html/*"
|
embed_templates "page_html/*"
|
||||||
|
|
||||||
|
def get_in(data, keys, default) do
|
||||||
|
case get_in(data, keys) do
|
||||||
|
nil -> default
|
||||||
|
result -> result
|
||||||
|
end
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_category_card(assigns) do
|
||||||
|
assigns =
|
||||||
|
assign(assigns,
|
||||||
|
card_colors: %{
|
||||||
|
:asset_types => "bg-blue-500",
|
||||||
|
:encounters => "bg-rose-500",
|
||||||
|
:move_categories => "bg-violet-500",
|
||||||
|
:oracle_categories => "bg-amber-500"
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
~H"""
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
class={[
|
||||||
|
"block grid place-items-center text-white text-xl text-center md:text-2xl lg:text-3xl text-white rounded shadow-xl focus:shadow-2xl hover:shadow-2xl transition-shadow border-2 border-solid border-black border-opacity-10",
|
||||||
|
@card_colors[@category]
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<%= @title %>
|
||||||
|
</a>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_header(assigns) do
|
||||||
|
~H"""
|
||||||
|
<header class="bg-white dark:bg-slate-700 shadow-md p-4">
|
||||||
|
<h1 class="text-4xl font-bold text-center dark:text-white"><%= @title %></h1>
|
||||||
|
</header>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_type_title(assigns) do
|
||||||
|
~H"""
|
||||||
|
<h2 class="text-3xl dark:text-white font-bold"><%= render_slot(@inner_block) %></h2>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_subtype_title(assigns) do
|
||||||
|
~H"""
|
||||||
|
<h3 class="text-2xl font-bold mb-2 dark:text-white"><%= render_slot(@inner_block) %></h3>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_type_container(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div class="flex flex-col gap-4">
|
||||||
|
<%= render_slot(@inner_block) %>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_item_inner_title(assigns) do
|
||||||
|
~H"""
|
||||||
|
<h4 class="font-bold dark:text-white"><%= render_slot(@inner_block) %></h4>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
def srd_item(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div class="max-w-prose shadow bg-white dark:bg-slate-700 rounded-b">
|
||||||
|
<h3
|
||||||
|
class="font-bold text-white px-4 py-2 rounded-t"
|
||||||
|
style={"background-color: #{get_in(@item, ["Display", "Color"], "rgb(100 116 139)")}"}
|
||||||
|
>
|
||||||
|
<a href={"#" <> @item["$id"]}><%= render_slot(@title) %></a>
|
||||||
|
</h3>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<div :if={@inner_block != nil} class="p-4 flex flex-col gap-2">
|
||||||
|
<%= render_slot(@inner_block) %>
|
||||||
|
<p class="text-right text-sm text-gray-400 dark:text-gray-500">
|
||||||
|
<strong>Source</strong>
|
||||||
|
<br />
|
||||||
|
<%= get_in(@item, ["Source", "Title"]) %>
|
||||||
|
<span :if={get_in(@item, ["Source", "Page"])}>
|
||||||
|
p.<%= get_in(@item, ["Source", "Page"]) %>
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:if={false && Application.get_env(:swornforged, :datasworn_debug, false)}
|
||||||
|
class="bg-red-500 rounded-b p-2 text-white"
|
||||||
|
>
|
||||||
|
<details class="hover:cursor-default">
|
||||||
|
<summary>Raw JSON</summary>
|
||||||
|
<div class="prose align-left">
|
||||||
|
<pre><code><%= Jason.encode!(@item, pretty: true, escape: :html_safe) %></code></pre>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
@ -1,76 +1,129 @@
|
||||||
<h1 class="text-4xl font-bold text-center my-4">Swornforged</h1>
|
<.srd_header title="Swornforged" />
|
||||||
<div class="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
|
<div>
|
||||||
<div class="p-6 shadow-md rounded-lg bg-white flex flex-col gap-4">
|
<div class="p-4 grid gap-4 place-content-center
|
||||||
<h2 class="text-3xl font-bold">Assets</h2>
|
grid-cols-[repeat(2,180px)] grid-rows-[repeat(2,180px)]
|
||||||
<div :for={asset_type <- @dataforged["Asset Types"]} id={asset_type["$id"]}>
|
md:grid-cols-[repeat(2,320px)] md:grid-rows-[repeat(2,128px)]
|
||||||
<h2 class="text-2xl font-bold rounded mb-2">
|
lg:grid-cols-[repeat(2,420px)] lg:grid-rows-[repeat(2,240px)]">
|
||||||
<a href={"#" <> asset_type["$id"]}><%= asset_type["Display"]["Title"] %></a>
|
<.srd_category_card category={:asset_types} title="Asset Types" />
|
||||||
</h2>
|
<.srd_category_card category={:oracle_categories} title="Oracle Categories" />
|
||||||
<ul class="flex flex-col gap-2">
|
<.srd_category_card category={:move_categories} title="Move Categories" />
|
||||||
<li :for={asset <- asset_type["Assets"]} id={asset["$id"]}>
|
<.srd_category_card category={:encounters} title="Encounters" />
|
||||||
<div>
|
|
||||||
<h3
|
|
||||||
class="font-bold text-white px-2 py-1 rounded-t"
|
|
||||||
style={"background-color: #{asset["Display"]["Color"]}"}
|
|
||||||
>
|
|
||||||
<a href={"#" <> asset["$id"]}><%= asset["Display"]["Title"] %></a>
|
|
||||||
</h3>
|
|
||||||
<ul class="p-2 flex flex-col gap-2">
|
|
||||||
<li :for={ability <- asset["Abilities"]} id={ability["$id"]}>
|
|
||||||
<%= raw(Earmark.as_html!(ability["Text"])) %>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 shadow-md rounded-lg bg-white flex flex-col gap-4">
|
|
||||||
<h2 class="text-2xl font-bold">Oracles</h2>
|
|
||||||
<div :for={oracle_category <- @dataforged["Oracle Categories"]} id={oracle_category["$id"]}>
|
|
||||||
<h2 class="text-lg font-bold text-white bg-gray-500 p-2 rounded mb-2">
|
|
||||||
<a href={"#" <> oracle_category["$id"]}>
|
|
||||||
<%= oracle_category["Display"]["Title"] %>
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<ul class="flex flex-col gap-2">
|
|
||||||
<li :for={oracle <- oracle_category["Oracles"]} id={oracle["$id"]}>
|
|
||||||
<div>
|
|
||||||
<h3 class="font-bold text-white px-2 py-1 bg-slate-400 rounded">
|
|
||||||
<a href={"#" <> oracle["$id"]}>
|
|
||||||
<%= oracle["Display"]["Title"] %>
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="p-6 shadow-md rounded-lg bg-white flex flex-col gap-4">
|
|
||||||
<h2 class="text-3xl font-bold">Moves</h2>
|
|
||||||
<div :for={move_category <- @dataforged["Move Categories"]} id={move_category["$id"]}>
|
|
||||||
<h2 class="text-2xl font-bold rounded mb-4">
|
|
||||||
<a href={"#" <> move_category["$id"]}>
|
|
||||||
<%= move_category["Display"]["Title"] %>
|
|
||||||
</a>
|
|
||||||
</h2>
|
|
||||||
<ul class="flex flex-col gap-6">
|
|
||||||
<li :for={move <- move_category["Moves"]} id={move["$id"]}>
|
|
||||||
<div class="flex flex-col gap-2">
|
|
||||||
<h3
|
|
||||||
class="font-bold text-white px-2 py-1 rounded-t"
|
|
||||||
style={"background-color: #{move["Display"]["Color"]}"}
|
|
||||||
>
|
|
||||||
<a href={"#" <> move["$id"]}>
|
|
||||||
<%= move["Display"]["Title"] %>
|
|
||||||
</a>
|
|
||||||
</h3>
|
|
||||||
<div class="p-2">
|
|
||||||
<%= raw(Earmark.as_html!(move["Text"], gfm: true, gfm_tables: true)) %>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex flex-col gap-6 p-6">
|
||||||
|
<.srd_type_container>
|
||||||
|
<.srd_type_title>Assets</.srd_type_title>
|
||||||
|
<div :for={asset_type <- @dataforged["Asset Types"]} id={asset_type["$id"]}>
|
||||||
|
<.srd_subtype_title>
|
||||||
|
<a href={"#" <> asset_type["$id"]}><%= get_in(asset_type, ["Display", "Title"]) %></a>
|
||||||
|
</.srd_subtype_title>
|
||||||
|
<ul class="flex flex-col gap-6">
|
||||||
|
<li :for={asset <- asset_type["Assets"]} id={asset["$id"]}>
|
||||||
|
<.srd_item item={asset}>
|
||||||
|
<:title><%= get_in(asset, ["Display", "Title"]) %></:title>
|
||||||
|
<ol class="flex flex-col gap-2">
|
||||||
|
<li :for={ability <- asset["Abilities"]} id={ability["$id"]}>
|
||||||
|
<div class="flex gap-6">
|
||||||
|
<input type="checkbox" disabled={true} checked={ability["Enabled"]} />
|
||||||
|
<div class="prose dark:prose-invert text-justify">
|
||||||
|
<%= raw(Earmark.as_html!(ability["Text"], compact_output: true)) %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</.srd_item>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</.srd_type_container>
|
||||||
|
<.srd_type_container>
|
||||||
|
<.srd_type_title>Oracles</.srd_type_title>
|
||||||
|
<div :for={oracle_category <- @dataforged["Oracle Categories"]} id={oracle_category["$id"]}>
|
||||||
|
<.srd_subtype_title>
|
||||||
|
<a href={"#" <> oracle_category["$id"]}>
|
||||||
|
<%= get_in(oracle_category, ["Display", "Title"]) %>
|
||||||
|
</a>
|
||||||
|
</.srd_subtype_title>
|
||||||
|
<ul class="flex flex-col gap-6">
|
||||||
|
<li :for={oracle <- oracle_category["Oracles"]} id={oracle["$id"]}>
|
||||||
|
<.srd_item item={oracle}>
|
||||||
|
<:title><%= get_in(oracle, ["Display", "Title"]) %></:title>
|
||||||
|
<div :if={oracle["Table"]} class="prose dark:prose-invert prose-p:m-0">
|
||||||
|
<div :if={str = oracle["Description"]} class="text-justify">
|
||||||
|
<%= raw(Earmark.as_html!(str, compact_output: true)) %>
|
||||||
|
</div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Roll</th>
|
||||||
|
<th>Result</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr :for={row <- get_in(oracle, ["Table"], [])} id={row["$id"]}>
|
||||||
|
<td style="text-align: left;"><%= row["Floor"] %>-<%= row["Ceiling"] %></td>
|
||||||
|
<td style="text-align: left;">
|
||||||
|
<%= raw(Earmark.as_html!(row["Result"], compact_output: true)) %>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div :if={oracle["Oracles"]}>
|
||||||
|
<div
|
||||||
|
:for={inner_oracle <- oracle["Oracles"]}
|
||||||
|
class="prose dark:prose-invert prose-p:m-0"
|
||||||
|
>
|
||||||
|
<.srd_item_inner_title>
|
||||||
|
<%= get_in(inner_oracle, ["Display", "Title"]) %>
|
||||||
|
</.srd_item_inner_title>
|
||||||
|
<hr class="h-px my-4 bg-slate-200 border-0 dark:bg-slate-600" />
|
||||||
|
<div :if={str = inner_oracle["Description"]} class="text-justify">
|
||||||
|
<%= raw(Earmark.as_html!(str, compact_output: true)) %>
|
||||||
|
</div>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Roll</th>
|
||||||
|
<th>Result</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr :for={row <- get_in(inner_oracle, ["Table"], [])} id={row["$id"]}>
|
||||||
|
<td style="text-align: left;"><%= row["Floor"] %>-<%= row["Ceiling"] %></td>
|
||||||
|
<td style="text-align: left;">
|
||||||
|
<%= raw(Earmark.as_html!(row["Result"], compact_output: true)) %>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</.srd_item>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</.srd_type_container>
|
||||||
|
<.srd_type_container>
|
||||||
|
<.srd_type_title>Moves</.srd_type_title>
|
||||||
|
<div :for={move_category <- @dataforged["Move Categories"]} id={move_category["$id"]}>
|
||||||
|
<.srd_subtype_title>
|
||||||
|
<a href={"#" <> move_category["$id"]}>
|
||||||
|
<%= get_in(move_category, ["Display", "Title"]) %>
|
||||||
|
</a>
|
||||||
|
</.srd_subtype_title>
|
||||||
|
<ul class="flex flex-col gap-6">
|
||||||
|
<li :for={move <- move_category["Moves"]} id={move["$id"]}>
|
||||||
|
<.srd_item item={move}>
|
||||||
|
<:title><%= get_in(move, ["Display", "Title"]) %></:title>
|
||||||
|
<div class="prose dark:prose-invert">
|
||||||
|
<%= raw(
|
||||||
|
Earmark.as_html!(move["Text"], gfm: true, gfm_tables: true, compact_output: true)
|
||||||
|
) %>
|
||||||
|
</div>
|
||||||
|
</.srd_item>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</.srd_type_container>
|
||||||
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue