mirror of
https://github.com/DarkflameUniverse/DarkflameServer.git
synced 2026-10-18 18:52:48 +00:00
The /ugc page no longer needs the browser to reach the UGC server: the dashboard fetches its status (/api/ugc/server/status), the files it made (/api/ugc/files/<kind>/<id>/<file>) and its NIFs converted for the 3D view (/api/ugc/mesh/<id>, NifFile like the scenery) from ugc_internal_url (default http://127.0.0.1:2008) with libcurl on the worker threads, keeping small answers briefly. ugc_public_url is only an "open on the UGC server" link now. The page gets an icon gallery beside the list, filtered by kind, state and a search by id or owner (GetUgcProcessList/GetModularBuildProcessList take a search), and a viewer: the generated NIF in 3D at any LOD, now or before it was made again, with wireframe, vertex color and baked lighting switches, the LXFML beside it, the icon now and before, and the stats with triangles before and after hidden faces were removed. The status box shows CPU, memory, the jobs' memory estimate with their limits, and throttling. The settings page lists the UGC server's new settings. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
127 lines
7.0 KiB
Django/Jinja
127 lines
7.0 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>
|
|
|
|
<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>
|
|
</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 %}
|