Lots of updates :)

This commit is contained in:
🎷🐢 S. P. O. Clayton 2023-01-20 22:17:15 -05:00
parent 236a1b2eba
commit d1d3c11c6c
Signed by: sean
SSH Key Fingerprint: SHA256:zkuPrRvkEDiQQv1Y5yScWa6I4zhj+eiv7XnP8pxIxVU
9 changed files with 258 additions and 114 deletions

View File

@ -1,26 +1,40 @@
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
const plugin = require("tailwindcss/plugin")
const plugin = require("tailwindcss/plugin");
module.exports = {
content: [
"./js/**/*.js",
"../lib/*_web.ex",
"../lib/*_web/**/*.*ex"
],
content: ["./js/**/*.js", "../lib/*_web.ex", "../lib/*_web/**/*.*ex"],
theme: {
extend: {
colors: {
brand: "#FD4F00",
}
},
},
},
plugins: [
require("@tailwindcss/forms"),
plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
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 &"]))
]
}
require("@tailwindcss/typography"),
plugin(({ addVariant }) =>
addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])
),
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 &",
])
),
],
};

View File

@ -60,7 +60,7 @@ config :swornforged, SwornforgedWeb.Endpoint,
]
# 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
config :logger, :console, format: "[$level] $message\n"

View File

@ -401,31 +401,6 @@ defmodule SwornforgedWeb.CoreComponents do
"""
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"""
Renders a table with generic styling.

View File

@ -11,7 +11,7 @@
<script defer phx-track-static type="text/javascript" src={~p"/assets/app.js"}>
</script>
</head>
<body class="bg-gray-100 antialiased">
<body class="bg-gray-100 dark:bg-gray-900 antialiased">
<%= @inner_content %>
</body>
</html>

View File

@ -2,4 +2,106 @@ defmodule SwornforgedWeb.PageHTML do
use SwornforgedWeb, :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

View File

@ -1,76 +1,129 @@
<h1 class="text-4xl font-bold text-center my-4">Swornforged</h1>
<div class="flex flex-col gap-6 p-6 max-w-3xl mx-auto">
<div class="p-6 shadow-md rounded-lg bg-white flex flex-col gap-4">
<h2 class="text-3xl font-bold">Assets</h2>
<div :for={asset_type <- @dataforged["Asset Types"]} id={asset_type["$id"]}>
<h2 class="text-2xl font-bold rounded mb-2">
<a href={"#" <> asset_type["$id"]}><%= asset_type["Display"]["Title"] %></a>
</h2>
<ul class="flex flex-col gap-2">
<li :for={asset <- asset_type["Assets"]} id={asset["$id"]}>
<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>
<.srd_header title="Swornforged" />
<div>
<div class="p-4 grid gap-4 place-content-center
grid-cols-[repeat(2,180px)] grid-rows-[repeat(2,180px)]
md:grid-cols-[repeat(2,320px)] md:grid-rows-[repeat(2,128px)]
lg:grid-cols-[repeat(2,420px)] lg:grid-rows-[repeat(2,240px)]">
<.srd_category_card category={:asset_types} title="Asset Types" />
<.srd_category_card category={:oracle_categories} title="Oracle Categories" />
<.srd_category_card category={:move_categories} title="Move Categories" />
<.srd_category_card category={:encounters} title="Encounters" />
</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>