Files
DarkflameServer/dDashboardServer/templates/ugc.jinja2
Aaron Kimbrell 1a2758feab feat(ugc): icon light matched to the game, debounce, shared car icons, purge, icon editor
Brighter icons: a world light, a fill from the camera, a highlight, exposure
and contrast; with the defaults the icons' mean luminance matches the game's
own model icons (118 against 120 on a scratch set). Every icon parameter is
listed once (UgcIconParams: key, setting, range, default); the settings,
the dashboard's settings entries and the icon editor come from that list.
Presets per kind (player models, each car or rocket build type from
ModularBuildComponent) and overrides per model or module combination are in
ugc_icon_settings.

Saved models wait ugc_debounce_seconds (sharedconfig) after the owner's last
save before they're made (ugc.process_after); a client asking for one, the
owner leaving the world or a reset ends the wait.

Cars and rockets: one icon per combination of modules (sorted LOTs), shared
by every build of it; builds of a combination made already are marked made
right away, the client's per-blueprint downloads serve the shared files.

The dashboard can delete one item's files, purge by filter or all, preview
icons with any values on the UGC server (/admin routes, master password),
save presets and overrides, and draw a kind's icons again (icons only).

Migrations dlu/mysql/86 and dlu/sqlite/69. Not done yet: the dashboard
editor's lighting controls in the page script (routes are there), docs for
it, the empty-model state, /ugc?item= links, the shared fetch helper; the
storage size and property loading bugs are next.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-09-28 22:31:09 -05:00

163 lines
10 KiB
Django/Jinja

{% extends "base.jinja2" %}
{% block title %}UGC Server - DarkflameServer{% endblock %}
{% block content %}
<div id="ugcPage">
<div class="mb-3">
<h2 class="mb-1">UGC Server</h2>
<p class="text-body-secondary mb-0">The UGC server makes a mesh and an icon for every model players build, and icons for their cars and rockets,
and serves them to the game client. New and changed models are picked up by themselves; a model that fails is tried a few times, then left
as failed until it's made again from here. See <code>docs/UgcServer.md</code>.</p>
</div>
<div class="row g-2 mb-3" id="counts"></div>
<div class="card mb-3">
<div class="card-body py-2 small" id="serverStatus">Asking the UGC server…</div>
</div>
<details class="card mb-3 d-none" id="cacheCard">
<summary class="card-header py-2 small fw-semibold">Stored files: delete and purge</summary>
<div class="card-body py-2 small">
<p class="text-body-secondary mb-2">Deletes files the UGC server made, of the kind picked below. Afterwards they are made again when a game client
asks for them, queued to be made now, or left deleted. A car or rocket's icon is shared by every build of the same modules.</p>
<div class="d-flex flex-wrap gap-2 align-items-end">
<label>State<select class="form-select form-select-sm" id="purgeState"><option value="">Any</option><option value="done">Made</option><option value="failed">Failed</option><option value="pending">Waiting</option></select></label>
<label>Owner<input class="form-control form-control-sm" id="purgeOwner" placeholder="Name (part of it)"></label>
<label>Made more than<div class="input-group input-group-sm"><input type="number" min="0" class="form-control" id="purgeOlder" value="0" style="width:5rem"><span class="input-group-text">days ago</span></div></label>
<label>Not asked for in<div class="input-group input-group-sm"><input type="number" min="0" class="form-control" id="purgeUnused" value="0" style="width:5rem"><span class="input-group-text">days</span></div></label>
<label>Then<select class="form-select form-select-sm" id="purgeAfter"><option value="on_demand">Make again when asked for</option><option value="now">Make again now</option><option value="gone">Leave deleted</option></select></label>
<button type="button" class="btn btn-sm btn-outline-warning" id="purgeButton">Purge matching</button>
<button type="button" class="btn btn-sm btn-outline-danger" id="purgeAllButton">Purge all…</button>
</div>
<div class="mt-2" id="purgeResult"></div>
</div>
</details>
<div class="d-flex flex-wrap gap-2 align-items-center mb-2">
<div class="btn-group btn-group-sm" role="group" id="kindButtons">
<button type="button" class="btn btn-outline-primary active" data-kind="model">Models</button>
<button type="button" class="btn btn-outline-primary" data-kind="modular">Cars and rockets</button>
</div>
<select class="form-select form-select-sm w-auto" id="stateFilter" aria-label="State">
<option value="">Every state</option><option value="pending">Waiting</option><option value="done">Made</option><option value="failed">Failed</option>
</select>
<input type="search" class="form-control form-control-sm w-auto" id="search" placeholder="ID or owner" aria-label="Search by ID or owner">
<div class="btn-group btn-group-sm" role="group" id="viewButtons">
<button type="button" class="btn btn-outline-secondary active" data-view="gallery">Icons</button>
<button type="button" class="btn btn-outline-secondary" data-view="list">List</button>
</div>
<div class="ms-auto d-none" id="manageButtons">
<button type="button" class="btn btn-sm btn-outline-warning" id="retryFailed">Try the failed ones again</button>
<button type="button" class="btn btn-sm btn-outline-danger" id="remakeAll">Make everything again</button>
</div>
</div>
<div id="gallery" class="ugc-gallery mb-2"></div>
<div class="card d-none" id="listCard">
<table class="table table-sm align-middle mb-0 table-stack">
<thead><tr><th>Icon</th><th>ID</th><th>Owner</th><th>State</th><th>Last attempt</th><th>Details</th><th></th></tr></thead>
<tbody id="rows"></tbody>
</table>
</div>
<div class="d-flex gap-2 mt-2">
<button type="button" class="btn btn-sm btn-outline-secondary" id="prevPage">Newer</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="nextPage">Older</button>
</div>
<div class="modal fade" id="previewModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-xl modal-fullscreen-lg-down"><div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="previewTitle">Model</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="d-flex flex-wrap gap-2 align-items-center mb-2 small" id="meshControls">
<label class="d-flex align-items-center gap-1">Detail
<select class="form-select form-select-sm w-auto" id="lodSelect"></select></label>
<label class="d-flex align-items-center gap-1">Version
<select class="form-select form-select-sm w-auto" id="versionSelect">
<option value="current">Now</option><option value="previous">Before it was made again</option>
</select></label>
<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="wireframeSwitch"><label class="form-check-label" for="wireframeSwitch">Wireframe</label></div>
<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="colorsSwitch" checked><label class="form-check-label" for="colorsSwitch">Vertex colors</label></div>
<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="aoSwitch" checked><label class="form-check-label" for="aoSwitch">Baked lighting</label></div>
<button type="button" class="btn btn-sm btn-outline-secondary" id="reframeButton">Reset view</button>
</div>
<div class="row g-3">
<div class="col-lg-5" id="nifColumn">
<div class="small fw-semibold mb-1">Generated mesh (.nif)</div>
<div id="nifViewer" class="rounded border" style="height: 420px"></div>
<div class="small text-body-secondary mt-1" id="nifStats"></div>
</div>
<div class="col-lg-4" id="lxfmlColumn">
<div class="small fw-semibold mb-1">As built (LXFML)</div>
<div id="lxfmlViewer" class="rounded border" style="height: 420px"></div>
<div class="small text-body-secondary mt-1">Every brick, before hidden faces are removed.</div>
</div>
<div class="col-lg-3">
<div class="small fw-semibold mb-1">Icon</div>
<div class="d-flex gap-2 flex-wrap">
<figure class="text-center mb-0"><img id="previewIcon" alt="Icon" class="border rounded bg-body-tertiary ugc-checker" width="128" height="128">
<figcaption class="small text-body-secondary">Now</figcaption></figure>
<figure class="text-center mb-0 d-none" id="previousIconBox"><img id="previousIcon" alt="Icon before" class="border rounded bg-body-tertiary ugc-checker" width="128" height="128">
<figcaption class="small text-body-secondary">Before</figcaption></figure>
</div>
<div class="small mt-2" id="previewLinks"></div>
</div>
</div>
<div class="mt-3" id="statsBox"></div>
<div class="card mt-3 d-none" id="framingCard">
<div class="card-header py-2 small fw-semibold d-flex align-items-center gap-2">Icon framing
<select class="form-select form-select-sm w-auto ms-auto" id="framingType" aria-label="Build type"><option value="6">Car</option><option value="3">Rocket</option></select></div>
<div class="card-body py-2 small">
<div class="row g-3">
<div class="col-md-8"><div class="row g-2" id="framingControls"></div></div>
<div class="col-md-4 text-center"><img id="framingPreview" alt="Preview" class="border rounded ugc-checker" width="128" height="128">
<div class="text-body-secondary" id="framingState">Preview drawn by the UGC server, not stored.</div></div>
</div>
<div class="d-flex flex-wrap gap-2 mt-2">
<button type="button" class="btn btn-sm btn-outline-secondary" id="framingPreviewButton">Preview</button>
<button type="button" class="btn btn-sm btn-outline-primary" id="framingSaveType">Save as default for this type</button>
<button type="button" class="btn btn-sm btn-outline-primary" id="framingSaveCombo">Save for this combination</button>
<button type="button" class="btn btn-sm btn-outline-secondary" id="framingReset">Reset</button>
<button type="button" class="btn btn-sm btn-outline-warning ms-auto" id="framingRegenerate">Draw all icons of this type again</button>
</div>
</div>
</div>
</div>
</div></div>
</div>
</div>
<style>
.ugc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.ugc-tile { cursor: pointer; text-align: center; }
.ugc-tile:hover, .ugc-tile:focus-visible { border-color: var(--bs-primary); }
.ugc-tile img, .ugc-tile .ugc-noicon { width: 128px; height: 128px; }
.ugc-noicon { display: inline-flex; align-items: center; justify-content: center; }
.ugc-checker { background-image: linear-gradient(45deg, rgba(128,128,128,.15) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.15) 75%),
linear-gradient(45deg, rgba(128,128,128,.15) 25%, transparent 25%, transparent 75%, rgba(128,128,128,.15) 75%);
background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.ugc-meter { height: .4rem; }
</style>
{% endblock %}
{% block scripts %}
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js",
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/"
},
"integrity": {
"https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.min.js": "sha384-IDC7sAMAIMB/TZ6dgKKPPAKZ2bXXXP8+FBMBC8cU319eBhKITx+PaalhfDkDNH28",
"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/controls/OrbitControls.js": "sha384-aJoe4qqS/DgF2jh9njAuvA6QIveJYoCuYOfYjdFY8P3eawzmc9bEQ40jq2TvOyuP",
"https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/environments/RoomEnvironment.js": "sha384-9ItPPH2vgKbkvgrqTKq7ptGYe+WuAnqlZtlqleJW4/CJjnM5R7C+efD6iS7ADPJ9"
}
}
</script>
<script src="/js/ldd-materials.js"></script>
<script src="/js/ugc.js"></script>
{% endblock %}