Initial commit
This commit is contained in:
23
src/RolemasterDb.App/Components/App.razor
Normal file
23
src/RolemasterDb.App/Components/App.razor
Normal file
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
<ResourcePreloader />
|
||||
<link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["app.css"]" />
|
||||
<link rel="stylesheet" href="@Assets["RolemasterDb.App.styles.css"]" />
|
||||
<ImportMap />
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<HeadOutlet />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<Routes />
|
||||
<ReconnectModal />
|
||||
<script src="@Assets["_framework/blazor.web.js"]"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
27
src/RolemasterDb.App/Components/Layout/MainLayout.razor
Normal file
27
src/RolemasterDb.App/Components/Layout/MainLayout.razor
Normal file
@@ -0,0 +1,27 @@
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div class="top-row">
|
||||
<div>
|
||||
<span class="eyebrow">Starter stack</span>
|
||||
<strong>.NET 10 + Blazor + Minimal API + EF Core + SQLite</strong>
|
||||
</div>
|
||||
<span class="status-pill">Seeded for attack and critical lookups</span>
|
||||
</div>
|
||||
|
||||
<article class="content-shell">
|
||||
@Body
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<div id="blazor-error-ui" data-nosnippet>
|
||||
An unhandled error has occurred.
|
||||
<a href="." class="reload">Reload</a>
|
||||
<span class="dismiss">🗙</span>
|
||||
</div>
|
||||
97
src/RolemasterDb.App/Components/Layout/MainLayout.razor.css
Normal file
97
src/RolemasterDb.App/Components/Layout/MainLayout.razor.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(196, 167, 107, 0.28), transparent 35%),
|
||||
linear-gradient(180deg, #24130d 0%, #3c2415 46%, #130d0b 100%);
|
||||
border-right: 1px solid rgba(196, 167, 107, 0.2);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
padding: 1.15rem 1.5rem;
|
||||
border-bottom: 1px solid rgba(111, 87, 59, 0.28);
|
||||
background: rgba(250, 245, 234, 0.84);
|
||||
backdrop-filter: blur(18px);
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: block;
|
||||
font-size: 0.72rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
color: #7c5b33;
|
||||
}
|
||||
|
||||
.status-pill {
|
||||
padding: 0.45rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(111, 87, 59, 0.2);
|
||||
background: rgba(255, 252, 246, 0.8);
|
||||
color: #5b4427;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.content-shell {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.top-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 290px;
|
||||
height: 100vh;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#blazor-error-ui {
|
||||
color-scheme: light only;
|
||||
background: #682e24;
|
||||
color: #fffaf2;
|
||||
bottom: 0;
|
||||
box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.22);
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
left: 0;
|
||||
padding: 0.7rem 1.25rem;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
#blazor-error-ui .dismiss {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 0.75rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
24
src/RolemasterDb.App/Components/Layout/NavMenu.razor
Normal file
24
src/RolemasterDb.App/Components/Layout/NavMenu.razor
Normal file
@@ -0,0 +1,24 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid brand-shell">
|
||||
<a class="navbar-brand" href="">RolemasterDB</a>
|
||||
<p class="brand-copy">Automatic attack and critical lookup for a SQLite-backed starter dataset.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
||||
|
||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler')?.click()">
|
||||
<nav class="nav flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Lookup Desk
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="api">
|
||||
<span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> API Surface
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
114
src/RolemasterDb.App/Components/Layout/NavMenu.razor.css
Normal file
114
src/RolemasterDb.App/Components/Layout/NavMenu.razor.css
Normal file
@@ -0,0 +1,114 @@
|
||||
.navbar-toggler {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
width: 3.5rem;
|
||||
height: 2.5rem;
|
||||
color: white;
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
right: 1rem;
|
||||
border: 1px solid rgba(226, 195, 128, 0.22);
|
||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 244, 218, 0.82%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.navbar-toggler:checked {
|
||||
background-color: rgba(226, 195, 128, 0.3);
|
||||
}
|
||||
|
||||
.top-row {
|
||||
min-height: 3.5rem;
|
||||
background-color: rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
font-size: 1.45rem;
|
||||
font-family: Cambria, Georgia, serif;
|
||||
letter-spacing: 0.04em;
|
||||
color: #fff1d2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.brand-shell {
|
||||
padding: 1.2rem 0.5rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
margin: 0.55rem 0 0;
|
||||
color: rgba(255, 241, 210, 0.72);
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
}
|
||||
|
||||
.bi {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
margin-right: 0.75rem;
|
||||
top: -1px;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.bi-house-door-fill-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fce7bc' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.bi-list-nested-nav-menu {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fce7bc' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-size: 0.98rem;
|
||||
padding-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.nav-item:first-of-type {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.nav-item:last-of-type {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link {
|
||||
color: #f3ddbc;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 3rem;
|
||||
width: 100%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.nav-item ::deep a.active {
|
||||
background: linear-gradient(135deg, rgba(230, 195, 126, 0.22), rgba(255, 245, 225, 0.1));
|
||||
color: #fff7e2;
|
||||
}
|
||||
|
||||
.nav-item ::deep .nav-link:hover {
|
||||
background-color: rgba(255, 248, 234, 0.08);
|
||||
color: #fff7e2;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-toggler:checked ~ .nav-scrollable {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
display: block;
|
||||
height: calc(100vh - 3.5rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
31
src/RolemasterDb.App/Components/Layout/ReconnectModal.razor
Normal file
31
src/RolemasterDb.App/Components/Layout/ReconnectModal.razor
Normal file
@@ -0,0 +1,31 @@
|
||||
<script type="module" src="@Assets["Components/Layout/ReconnectModal.razor.js"]"></script>
|
||||
|
||||
<dialog id="components-reconnect-modal" data-nosnippet>
|
||||
<div class="components-reconnect-container">
|
||||
<div class="components-rejoining-animation" aria-hidden="true">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<p class="components-reconnect-first-attempt-visible">
|
||||
Rejoining the server...
|
||||
</p>
|
||||
<p class="components-reconnect-repeated-attempt-visible">
|
||||
Rejoin failed... trying again in <span id="components-seconds-to-next-attempt"></span> seconds.
|
||||
</p>
|
||||
<p class="components-reconnect-failed-visible">
|
||||
Failed to rejoin.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-reconnect-button" class="components-reconnect-failed-visible">
|
||||
Retry
|
||||
</button>
|
||||
<p class="components-pause-visible">
|
||||
The session has been paused by the server.
|
||||
</p>
|
||||
<p class="components-resume-failed-visible">
|
||||
Failed to resume the session.<br />Please retry or reload the page.
|
||||
</p>
|
||||
<button id="components-resume-button" class="components-pause-visible components-resume-failed-visible">
|
||||
Resume
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
157
src/RolemasterDb.App/Components/Layout/ReconnectModal.razor.css
Normal file
157
src/RolemasterDb.App/Components/Layout/ReconnectModal.razor.css
Normal file
@@ -0,0 +1,157 @@
|
||||
.components-reconnect-first-attempt-visible,
|
||||
.components-reconnect-repeated-attempt-visible,
|
||||
.components-reconnect-failed-visible,
|
||||
.components-pause-visible,
|
||||
.components-resume-failed-visible,
|
||||
.components-rejoining-animation {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
|
||||
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
|
||||
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation,
|
||||
#components-reconnect-modal.components-reconnect-failed,
|
||||
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
#components-reconnect-modal {
|
||||
background-color: white;
|
||||
width: 20rem;
|
||||
margin: 20vh auto;
|
||||
padding: 2rem;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
|
||||
opacity: 0;
|
||||
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
|
||||
animation: components-reconnect-modal-fadeOutOpacity 0.5s both;
|
||||
&[open]
|
||||
|
||||
{
|
||||
animation: components-reconnect-modal-slideUp 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity 0.5s ease-in-out 0.3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#components-reconnect-modal::backdrop {
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
animation: components-reconnect-modal-fadeInOpacity 0.5s ease-in-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@keyframes components-reconnect-modal-slideUp {
|
||||
0% {
|
||||
transform: translateY(30px) scale(0.95);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes components-reconnect-modal-fadeInOpacity {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes components-reconnect-modal-fadeOutOpacity {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.components-reconnect-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
#components-reconnect-modal p {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#components-reconnect-modal button {
|
||||
border: 0;
|
||||
background-color: #6b9ed2;
|
||||
color: white;
|
||||
padding: 4px 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#components-reconnect-modal button:hover {
|
||||
background-color: #3b6ea2;
|
||||
}
|
||||
|
||||
#components-reconnect-modal button:active {
|
||||
background-color: #6b9ed2;
|
||||
}
|
||||
|
||||
.components-rejoining-animation {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.components-rejoining-animation div {
|
||||
position: absolute;
|
||||
border: 3px solid #0087ff;
|
||||
opacity: 1;
|
||||
border-radius: 50%;
|
||||
animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
|
||||
}
|
||||
|
||||
.components-rejoining-animation div:nth-child(2) {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
|
||||
@keyframes components-rejoining-animation {
|
||||
0% {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
4.9% {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
5% {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
// Set up event handlers
|
||||
const reconnectModal = document.getElementById("components-reconnect-modal");
|
||||
reconnectModal.addEventListener("components-reconnect-state-changed", handleReconnectStateChanged);
|
||||
|
||||
const retryButton = document.getElementById("components-reconnect-button");
|
||||
retryButton.addEventListener("click", retry);
|
||||
|
||||
const resumeButton = document.getElementById("components-resume-button");
|
||||
resumeButton.addEventListener("click", resume);
|
||||
|
||||
function handleReconnectStateChanged(event) {
|
||||
if (event.detail.state === "show") {
|
||||
reconnectModal.showModal();
|
||||
} else if (event.detail.state === "hide") {
|
||||
reconnectModal.close();
|
||||
} else if (event.detail.state === "failed") {
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
} else if (event.detail.state === "rejected") {
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
async function retry() {
|
||||
document.removeEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
|
||||
try {
|
||||
// Reconnect will asynchronously return:
|
||||
// - true to mean success
|
||||
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
|
||||
// - exception to mean we didn't reach the server (this can be sync or async)
|
||||
const successful = await Blazor.reconnect();
|
||||
if (!successful) {
|
||||
// We have been able to reach the server, but the circuit is no longer available.
|
||||
// We'll reload the page so the user can continue using the app as quickly as possible.
|
||||
const resumeSuccessful = await Blazor.resumeCircuit();
|
||||
if (!resumeSuccessful) {
|
||||
location.reload();
|
||||
} else {
|
||||
reconnectModal.close();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
// We got an exception, server is currently unavailable
|
||||
document.addEventListener("visibilitychange", retryWhenDocumentBecomesVisible);
|
||||
}
|
||||
}
|
||||
|
||||
async function resume() {
|
||||
try {
|
||||
const successful = await Blazor.resumeCircuit();
|
||||
if (!successful) {
|
||||
location.reload();
|
||||
}
|
||||
} catch {
|
||||
reconnectModal.classList.replace("components-reconnect-paused", "components-reconnect-resume-failed");
|
||||
}
|
||||
}
|
||||
|
||||
async function retryWhenDocumentBecomesVisible() {
|
||||
if (document.visibilityState === "visible") {
|
||||
await retry();
|
||||
}
|
||||
}
|
||||
43
src/RolemasterDb.App/Components/Pages/Api.razor
Normal file
43
src/RolemasterDb.App/Components/Pages/Api.razor
Normal file
@@ -0,0 +1,43 @@
|
||||
@page "/api"
|
||||
|
||||
<PageTitle>API Surface</PageTitle>
|
||||
|
||||
<section class="hero-panel">
|
||||
<span class="eyebrow">Minimal API</span>
|
||||
<h1 class="page-title">Endpoints for attack and critical lookups.</h1>
|
||||
<p class="lede">The Blazor UI uses the same lookup service that the API exposes, so this page doubles as the first integration contract.</p>
|
||||
</section>
|
||||
|
||||
<div class="api-grid">
|
||||
<section class="panel">
|
||||
<h2 class="panel-title">Reference data</h2>
|
||||
<p class="panel-copy"><code>GET /api/reference-data</code></p>
|
||||
<pre class="code-block">{
|
||||
"attackTables": [
|
||||
{ "key": "broadsword", "label": "Broadsword" }
|
||||
]
|
||||
}</pre>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2 class="panel-title">Attack lookup</h2>
|
||||
<p class="panel-copy"><code>POST /api/lookup/attack</code></p>
|
||||
<pre class="code-block">{
|
||||
"attackTable": "broadsword",
|
||||
"armorType": "AT10",
|
||||
"roll": 111,
|
||||
"criticalRoll": 72
|
||||
}</pre>
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2 class="panel-title">Critical lookup</h2>
|
||||
<p class="panel-copy"><code>POST /api/lookup/critical</code></p>
|
||||
<pre class="code-block">{
|
||||
"criticalType": "slash",
|
||||
"column": "B",
|
||||
"roll": 72,
|
||||
"group": null
|
||||
}</pre>
|
||||
</section>
|
||||
</div>
|
||||
36
src/RolemasterDb.App/Components/Pages/Error.razor
Normal file
36
src/RolemasterDb.App/Components/Pages/Error.razor
Normal file
@@ -0,0 +1,36 @@
|
||||
@page "/Error"
|
||||
@using System.Diagnostics
|
||||
|
||||
<PageTitle>Error</PageTitle>
|
||||
|
||||
<h1 class="text-danger">Error.</h1>
|
||||
<h2 class="text-danger">An error occurred while processing your request.</h2>
|
||||
|
||||
@if (ShowRequestId)
|
||||
{
|
||||
<p>
|
||||
<strong>Request ID:</strong> <code>@RequestId</code>
|
||||
</p>
|
||||
}
|
||||
|
||||
<h3>Development Mode</h3>
|
||||
<p>
|
||||
Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
|
||||
</p>
|
||||
<p>
|
||||
<strong>The Development environment shouldn't be enabled for deployed applications.</strong>
|
||||
It can result in displaying sensitive information from exceptions to end users.
|
||||
For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
|
||||
and restarting the app.
|
||||
</p>
|
||||
|
||||
@code{
|
||||
[CascadingParameter]
|
||||
private HttpContext? HttpContext { get; set; }
|
||||
|
||||
private string? RequestId { get; set; }
|
||||
private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
|
||||
|
||||
protected override void OnInitialized() =>
|
||||
RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
|
||||
}
|
||||
309
src/RolemasterDb.App/Components/Pages/Home.razor
Normal file
309
src/RolemasterDb.App/Components/Pages/Home.razor
Normal file
@@ -0,0 +1,309 @@
|
||||
@page "/"
|
||||
@rendermode InteractiveServer
|
||||
@inject LookupService LookupService
|
||||
|
||||
<PageTitle>Lookup Desk</PageTitle>
|
||||
|
||||
@if (referenceData is null)
|
||||
{
|
||||
<section class="hero-panel">
|
||||
<h1 class="page-title">Summoning tables...</h1>
|
||||
<p class="lede">Loading the starter attack and critical data from SQLite.</p>
|
||||
</section>
|
||||
}
|
||||
else
|
||||
{
|
||||
<section class="hero-panel">
|
||||
<span class="eyebrow">Rolemaster Lookup Desk</span>
|
||||
<h1 class="page-title">Resolve the attack roll, then the critical, from one place.</h1>
|
||||
<p class="lede">
|
||||
This starter app seeds a small SQLite dataset and exposes the same lookup flow through Blazor and minimal APIs.
|
||||
The current data is intentionally limited to a first pass so the import pipeline can grow from a working base.
|
||||
</p>
|
||||
<div class="tag-row">
|
||||
<span class="tag">@referenceData.AttackTables.Count attack tables</span>
|
||||
<span class="tag">@referenceData.CriticalTables.Count critical tables</span>
|
||||
<span class="tag">@referenceData.ArmorTypes.Count armor types</span>
|
||||
<span class="tag">SQLite file: <code>rolemaster.db</code></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<section class="panel">
|
||||
<h2 class="panel-title">Automatic Attack Lookup</h2>
|
||||
<p class="panel-copy">Choose an attack table, armor type, and attack roll. If the attack produces a critical and you provide the critical roll, the app resolves that follow-up automatically.</p>
|
||||
|
||||
<div class="lookup-form">
|
||||
<div class="form-grid">
|
||||
<div class="field-shell">
|
||||
<label for="attack-table">Attack table</label>
|
||||
<select id="attack-table" class="input-shell" @bind="attackInput.AttackTable">
|
||||
@foreach (var attackTable in referenceData.AttackTables)
|
||||
{
|
||||
<option value="@attackTable.Key">@attackTable.Label</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-shell">
|
||||
<label for="armor-type">Armor type</label>
|
||||
<select id="armor-type" class="input-shell" @bind="attackInput.ArmorType">
|
||||
@foreach (var armorType in referenceData.ArmorTypes)
|
||||
{
|
||||
<option value="@armorType.Key">@armorType.Label</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-shell">
|
||||
<label for="attack-roll">Attack roll</label>
|
||||
<input id="attack-roll" class="input-shell" type="number" min="1" max="300" @bind="attackInput.AttackRoll" />
|
||||
</div>
|
||||
|
||||
<div class="field-shell">
|
||||
<label for="critical-roll">Critical roll</label>
|
||||
<input id="critical-roll" class="input-shell" type="number" min="1" max="100" @bind="attackInput.CriticalRollText" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-ritual" @onclick="RunAttackLookupAsync">Resolve attack</button>
|
||||
<span class="muted">Leave critical roll blank to stop after the attack table result.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(attackError))
|
||||
{
|
||||
<p class="error-text">@attackError</p>
|
||||
}
|
||||
|
||||
@if (attackResult is not null)
|
||||
{
|
||||
<div class="result-shell">
|
||||
<div class="result-card">
|
||||
<h3>@attackResult.AttackTableName vs @attackResult.ArmorTypeLabel</h3>
|
||||
<div class="result-stats">
|
||||
<span class="stat-pill">Roll band: @attackResult.RollBand</span>
|
||||
<span class="stat-pill">Hits: @attackResult.Hits</span>
|
||||
@if (!string.IsNullOrWhiteSpace(attackResult.CriticalSeverity))
|
||||
{
|
||||
<span class="stat-pill">@attackResult.CriticalSeverity @attackResult.CriticalType critical</span>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="stat-pill">No critical</span>
|
||||
}
|
||||
</div>
|
||||
<p><strong>Table notation:</strong> @attackResult.RawNotation</p>
|
||||
@if (!string.IsNullOrWhiteSpace(attackResult.Notes))
|
||||
{
|
||||
<p class="muted">@attackResult.Notes</p>
|
||||
}
|
||||
|
||||
@if (attackResult.AutoCritical is not null)
|
||||
{
|
||||
<div class="callout">
|
||||
<h4>Automatic critical resolution</h4>
|
||||
<div class="result-stats">
|
||||
<span class="stat-pill">@attackResult.AutoCritical.CriticalTableName</span>
|
||||
<span class="stat-pill">Column: @attackResult.AutoCritical.Column</span>
|
||||
<span class="stat-pill">Band: @attackResult.AutoCritical.RollBand</span>
|
||||
</div>
|
||||
<p><strong>@attackResult.AutoCritical.Description</strong></p>
|
||||
@if (!string.IsNullOrWhiteSpace(attackResult.AutoCritical.AffixText))
|
||||
{
|
||||
<p class="muted">@attackResult.AutoCritical.AffixText</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else if (!string.IsNullOrWhiteSpace(attackResult.CriticalSeverity))
|
||||
{
|
||||
<div class="callout">The attack produced a critical. Add a critical roll to resolve it automatically.</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2 class="panel-title">Direct Critical Lookup</h2>
|
||||
<p class="panel-copy">Use this when you already know the critical table, column, and roll.</p>
|
||||
|
||||
<div class="lookup-form">
|
||||
<div class="form-grid">
|
||||
<div class="field-shell">
|
||||
<label for="critical-table">Critical table</label>
|
||||
<select id="critical-table" class="input-shell" value="@criticalInput.CriticalType" @onchange="HandleCriticalTableChanged">
|
||||
@foreach (var criticalTable in referenceData.CriticalTables)
|
||||
{
|
||||
<option value="@criticalTable.Key">@criticalTable.Label</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-shell">
|
||||
<label for="critical-column">Column</label>
|
||||
<select id="critical-column" class="input-shell" @bind="criticalInput.Column">
|
||||
@foreach (var column in SelectedCriticalTable?.Columns ?? [])
|
||||
{
|
||||
<option value="@column.Key">@column.Label</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="field-shell">
|
||||
<label for="critical-roll-direct">Critical roll</label>
|
||||
<input id="critical-roll-direct" class="input-shell" type="number" min="1" max="100" @bind="criticalInput.Roll" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="action-row">
|
||||
<button class="btn-ritual" @onclick="RunCriticalLookupAsync">Resolve critical</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrWhiteSpace(criticalError))
|
||||
{
|
||||
<p class="error-text">@criticalError</p>
|
||||
}
|
||||
|
||||
@if (criticalResult is not null)
|
||||
{
|
||||
<div class="result-shell">
|
||||
<div class="result-card">
|
||||
<h3>@criticalResult.CriticalTableName</h3>
|
||||
<div class="result-stats">
|
||||
<span class="stat-pill">Column: @criticalResult.Column</span>
|
||||
<span class="stat-pill">Band: @criticalResult.RollBand</span>
|
||||
<span class="stat-pill">Roll: @criticalResult.Roll</span>
|
||||
</div>
|
||||
<p><strong>@criticalResult.Description</strong></p>
|
||||
@if (!string.IsNullOrWhiteSpace(criticalResult.AffixText))
|
||||
{
|
||||
<p class="muted">@criticalResult.AffixText</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<h2 class="panel-title">Seeded Reference Data</h2>
|
||||
<p class="panel-copy">The schema supports much more than what is seeded today. These are the initial tables standing up the flow.</p>
|
||||
|
||||
<div class="table-list">
|
||||
@foreach (var attackTable in referenceData.AttackTables)
|
||||
{
|
||||
<div class="table-list-item">
|
||||
<strong>@attackTable.Label</strong>
|
||||
<span class="muted">Attack table key: <code>@attackTable.Key</code></span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@foreach (var criticalTable in referenceData.CriticalTables)
|
||||
{
|
||||
<div class="table-list-item">
|
||||
<strong>@criticalTable.Label</strong>
|
||||
<span class="muted">Critical key: <code>@criticalTable.Key</code>, columns: @string.Join(", ", criticalTable.Columns.Select(column => column.Label))</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
}
|
||||
|
||||
@code {
|
||||
private LookupReferenceData? referenceData;
|
||||
private AttackLookupForm attackInput = new();
|
||||
private CriticalLookupForm criticalInput = new();
|
||||
private AttackLookupResponse? attackResult;
|
||||
private CriticalLookupResponse? criticalResult;
|
||||
private string? attackError;
|
||||
private string? criticalError;
|
||||
|
||||
private CriticalTableReference? SelectedCriticalTable =>
|
||||
referenceData?.CriticalTables.FirstOrDefault(table => table.Key == criticalInput.CriticalType);
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
referenceData = await LookupService.GetReferenceDataAsync();
|
||||
|
||||
attackInput.AttackTable = referenceData.AttackTables.FirstOrDefault()?.Key ?? string.Empty;
|
||||
attackInput.ArmorType = referenceData.ArmorTypes.FirstOrDefault()?.Key ?? string.Empty;
|
||||
|
||||
var initialCriticalTable = referenceData.CriticalTables.FirstOrDefault();
|
||||
criticalInput.CriticalType = initialCriticalTable?.Key ?? string.Empty;
|
||||
criticalInput.Column = initialCriticalTable?.Columns.FirstOrDefault()?.Key ?? string.Empty;
|
||||
}
|
||||
|
||||
private async Task RunAttackLookupAsync()
|
||||
{
|
||||
attackError = null;
|
||||
attackResult = null;
|
||||
|
||||
if (!int.TryParse(attackInput.CriticalRollText, out var criticalRoll) && !string.IsNullOrWhiteSpace(attackInput.CriticalRollText))
|
||||
{
|
||||
attackError = "Critical roll must be empty or a whole number.";
|
||||
return;
|
||||
}
|
||||
|
||||
var response = await LookupService.LookupAttackAsync(new AttackLookupRequest(
|
||||
attackInput.AttackTable,
|
||||
attackInput.ArmorType,
|
||||
attackInput.AttackRoll,
|
||||
string.IsNullOrWhiteSpace(attackInput.CriticalRollText) ? null : criticalRoll));
|
||||
|
||||
if (response is null)
|
||||
{
|
||||
attackError = "No seeded attack result matched that table, armor type, and roll.";
|
||||
return;
|
||||
}
|
||||
|
||||
attackResult = response;
|
||||
}
|
||||
|
||||
private async Task RunCriticalLookupAsync()
|
||||
{
|
||||
criticalError = null;
|
||||
criticalResult = null;
|
||||
|
||||
var response = await LookupService.LookupCriticalAsync(new CriticalLookupRequest(
|
||||
criticalInput.CriticalType,
|
||||
criticalInput.Column,
|
||||
criticalInput.Roll,
|
||||
null));
|
||||
|
||||
if (response is null)
|
||||
{
|
||||
criticalError = "No seeded critical result matched that table, column, and roll.";
|
||||
return;
|
||||
}
|
||||
|
||||
criticalResult = response;
|
||||
}
|
||||
|
||||
private void HandleCriticalTableChanged(ChangeEventArgs args)
|
||||
{
|
||||
criticalInput.CriticalType = args.Value?.ToString() ?? string.Empty;
|
||||
|
||||
var table = referenceData?.CriticalTables.FirstOrDefault(item => item.Key == criticalInput.CriticalType);
|
||||
criticalInput.Column = table?.Columns.FirstOrDefault()?.Key ?? string.Empty;
|
||||
criticalResult = null;
|
||||
criticalError = null;
|
||||
}
|
||||
|
||||
private sealed class AttackLookupForm
|
||||
{
|
||||
public string AttackTable { get; set; } = string.Empty;
|
||||
public string ArmorType { get; set; } = string.Empty;
|
||||
public int AttackRoll { get; set; } = 66;
|
||||
public string? CriticalRollText { get; set; } = "72";
|
||||
}
|
||||
|
||||
private sealed class CriticalLookupForm
|
||||
{
|
||||
public string CriticalType { get; set; } = string.Empty;
|
||||
public string Column { get; set; } = string.Empty;
|
||||
public int Roll { get; set; } = 72;
|
||||
}
|
||||
}
|
||||
5
src/RolemasterDb.App/Components/Pages/NotFound.razor
Normal file
5
src/RolemasterDb.App/Components/Pages/NotFound.razor
Normal file
@@ -0,0 +1,5 @@
|
||||
@page "/not-found"
|
||||
@layout MainLayout
|
||||
|
||||
<h3>Not Found</h3>
|
||||
<p>Sorry, the content you are looking for does not exist.</p>
|
||||
6
src/RolemasterDb.App/Components/Routes.razor
Normal file
6
src/RolemasterDb.App/Components/Routes.razor
Normal file
@@ -0,0 +1,6 @@
|
||||
<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
|
||||
<Found Context="routeData">
|
||||
<RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
|
||||
<FocusOnNavigate RouteData="routeData" Selector="h1" />
|
||||
</Found>
|
||||
</Router>
|
||||
13
src/RolemasterDb.App/Components/_Imports.razor
Normal file
13
src/RolemasterDb.App/Components/_Imports.razor
Normal file
@@ -0,0 +1,13 @@
|
||||
@using System.Net.Http
|
||||
@using System.Net.Http.Json
|
||||
@using Microsoft.AspNetCore.Components.Forms
|
||||
@using Microsoft.AspNetCore.Components.Routing
|
||||
@using Microsoft.AspNetCore.Components.Web
|
||||
@using static Microsoft.AspNetCore.Components.Web.RenderMode
|
||||
@using Microsoft.AspNetCore.Components.Web.Virtualization
|
||||
@using Microsoft.JSInterop
|
||||
@using RolemasterDb.App.Data
|
||||
@using RolemasterDb.App.Features
|
||||
@using RolemasterDb.App
|
||||
@using RolemasterDb.App.Components
|
||||
@using RolemasterDb.App.Components.Layout
|
||||
Reference in New Issue
Block a user