{% 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"><div id="serverStatus">Asking the UGC server…</div>
			<div data-ugc-settings="UGC processing" data-title="Processing settings"></div>
			<div data-ugc-settings="UGC models" data-title="How models are made"></div>
			<div data-ugc-settings="UGC serving" data-title="Serving settings"></div></div>
	</div>

	<details class="card mb-3" id="presetsCard">
		<summary class="card-header py-2 small fw-semibold">Icon presets per type</summary>
		<div class="card-body py-2 small">
			<p class="text-body-secondary mb-2">Each type of icon (player models, and each car or rocket build type in the client's data) has a preset over the
				default settings. Open one to set its camera, the model's turn, the light and the border on an example.</p>
			<div class="d-flex flex-wrap gap-2" id="presetsList">Loading…</div>
			<div data-ugc-settings="UGC icons" data-title="Icon defaults (under every preset)"></div>
		</div>
	</details>

	<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 data-ugc-settings="UGC storage" data-title="Storage settings"></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>
		<input type="search" class="form-control form-control-sm" style="max-width: 22rem" id="search" placeholder="Search: text, owner:, account:, property:, name:, lot:, id:, state:, kind:"
			aria-label="Search" title="Plain text matches names, owners and ids. Prefixes search one field: owner:, account:, property:, name:, lot: or module:, id:, state: (pending, done, failed, empty), kind: (a car or rocket type)">
		<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><option value="empty">Empty (no bricks)</option>
		</select>
		<select class="form-select form-select-sm w-auto d-none" id="typeFilter" aria-label="Type"><option value="">Every type</option></select>
		<select class="form-select form-select-sm w-auto" id="sortSelect" aria-label="Sort"></select>
		<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"><div class="card-body p-2">
		<div id="modelTableBox"><table class="table table-sm align-middle mb-0 w-100 table-stack" id="ugcModelTable">
			<thead><tr><th>Icon</th><th>ID</th><th>Owner</th><th>State</th><th>Made</th><th>Size</th><th>File</th><th></th></tr></thead></table></div>
		<div id="assemblyTableBox" class="d-none"><table class="table table-sm align-middle mb-0 w-100 table-stack" id="ugcAssemblyTable">
			<thead><tr><th>Icon</th><th>Newest build</th><th>Type</th><th>Modules</th><th>State</th><th>Builds</th><th>Owners</th><th></th></tr></thead></table></div>
	</div></div>
	<div class="d-flex flex-wrap gap-2 align-items-center mt-2" id="pagerBar">
		<nav aria-label="Pages"><ul class="pagination pagination-sm mb-0" id="pager"></ul></nav>
		<label class="d-flex align-items-center gap-1 small">Page <input type="number" min="1" class="form-control form-control-sm" style="width:5rem" id="jumpPage" aria-label="Go to page"></label>
		<label class="d-flex align-items-center gap-1 small">Show <select class="form-select form-select-sm w-auto" id="pageSize" aria-label="Per page">
			<option>24</option><option>48</option><option>96</option><option>200</option></select> per page</label>
		<span class="small text-body-secondary ms-auto" id="totalText"></span>
	</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 flex-wrap align-items-center gap-2">Icon editor
						<span class="text-body-secondary fw-normal" id="framingKind"></span>
						<span class="ms-auto text-body-secondary fw-normal" id="framingState">Preview drawn by the UGC server, not stored.</span></div>
					<div class="card-body py-2 small">
						<div class="row g-3">
							<div class="col-lg-8">
								<div class="d-flex flex-wrap gap-2 align-items-center mb-1">
									<div class="btn-group btn-group-sm" role="group" aria-label="What dragging changes" id="poseModes">
										<button type="button" class="btn btn-outline-secondary active" data-mode="camera" title="Drag: the camera around the model">Camera</button>
										<button type="button" class="btn btn-outline-secondary" data-mode="model" title="Drag: turn the model (Ctrl+drag in any mode; Alt+wheel rolls it)">Turn model</button>
										<button type="button" class="btn btn-outline-secondary" data-mode="sun" title="Drag: the sun's direction (Alt+drag in any mode)">Sun</button>
										<button type="button" class="btn btn-outline-secondary" data-mode="shift" title="Drag: move the model in the icon (Shift+drag or right drag in any mode)">Shift</button>
									</div>
									<div class="form-check form-switch mb-0"><input class="form-check-input" type="checkbox" id="sunArrowSwitch" checked><label class="form-check-label" for="sunArrowSwitch">Sun arrow</label></div>
									<span class="text-body-secondary">Wheel: border. The dashed square is the icon.</span>
								</div>
								<div id="poseView" class="rounded border" style="height: 420px"></div>
								<div class="text-body-secondary mt-1" id="poseStats"></div>
							</div>
							<div class="col-lg-4 text-center">
								<div class="d-flex justify-content-center gap-2 flex-wrap">
									<figure class="mb-0"><img id="framingPreview" alt="Icon preview" class="border rounded ugc-checker" width="256" height="256" style="image-rendering: pixelated">
										<figcaption class="text-body-secondary">Preview</figcaption></figure>
								</div>
								<div class="d-flex flex-column gap-1 mt-2">
									<button type="button" class="btn btn-sm btn-outline-secondary" id="framingPreviewButton">Draw the preview again</button>
									<button type="button" class="btn btn-sm btn-outline-primary ugc-manage" id="framingSaveType">Save as the preset for this type</button>
									<button type="button" class="btn btn-sm btn-outline-primary ugc-manage" id="framingSaveCombo">Save for this item</button>
									<button type="button" class="btn btn-sm btn-outline-secondary" id="framingResetType">Back to the type's preset</button>
									<button type="button" class="btn btn-sm btn-outline-secondary" id="framingResetDefaults">Back to the default settings</button>
									<button type="button" class="btn btn-sm btn-outline-danger ugc-manage" id="framingReset">Remove this item's own values</button>
									<button type="button" class="btn btn-sm btn-outline-warning ugc-manage" id="framingRegenerate">Draw all icons of this type again</button>
								</div>
							</div>
						</div>
						<div class="row g-2 mt-1" id="framingControls"></div>
					</div>
				</div>
				<div class="card mt-3 d-none" id="referencesCard">
					<div class="card-header py-2 small fw-semibold d-flex flex-wrap align-items-center gap-2">References <span class="text-body-secondary fw-normal">the builds that use these modules</span>
						<input type="search" class="form-control form-control-sm ms-auto" style="max-width: 16rem" id="refSearch" placeholder="Owner, account, property or id" aria-label="Search the builds"></div>
					<div class="card-body p-2"><table class="table table-sm small align-middle mb-0 w-100" id="refTable">
						<thead><tr><th>Build (blueprint id)</th><th>Owner</th><th>Account</th><th>State</th><th>Made</th><th>Where it is</th><th></th></tr></thead></table></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; }
	.ugc-modules img { width: 32px; height: 32px; }
	tr.ugc-highlight > td { background-color: var(--bs-warning-bg-subtle); }
</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="/api/bricks/materials.js"></script>
<script src="/js/ugc-settings.js"></script>
<script src="/js/ugc-icon-editor.js"></script>
<script src="/js/ugc.js"></script>
{% endblock %}