mirror of
https://git.ngram.ca/OpenJam/rc-servers
synced 2026-08-23 23:08:52 +00:00
add factory web frontend (#77)
### Description This PR adds a web frontend for factory. Please let me know if you think the directory names or API endpoints should be changed. For example, I personally think there are better names than rc_factory_api, and there may be better API names than webui... ### Game Robocraft ### Please confirm - [x] I am the legal owner or represent the owner of all work submitted - [x] I consent to my submission being added to this FOSS project - [x] This PR used LLMs to generate some or all of the code changes Reviewed-on: https://git.ngram.ca/OpenJam/rc-servers/pulls/77 Reviewed-by: NGnius <ngniusness@gmail.com> Co-authored-by: MaxSignal <kastera58@gmail.com> Co-committed-by: MaxSignal <kastera58@gmail.com>
This commit is contained in:
MaxSignal
NGnius
220
assets/templates/rc_factory_web/app.js.html.hbs
Normal file
220
assets/templates/rc_factory_web/app.js.html.hbs
Normal file
@@ -0,0 +1,220 @@
|
||||
(function () {
|
||||
const $ = (id) => document.getElementById(id);
|
||||
|
||||
const TIER_MAX = {
|
||||
"1": 1000,
|
||||
"2": 6434,
|
||||
"3": 79999,
|
||||
"4": 1299999,
|
||||
"5": 20000000,
|
||||
"M": 100000000,
|
||||
};
|
||||
|
||||
const state = {
|
||||
page: 1,
|
||||
pageSize: 100,
|
||||
lastItemCount: 0,
|
||||
};
|
||||
|
||||
const basePayload = {
|
||||
page: 1,
|
||||
pageSize: 100,
|
||||
order: 0,
|
||||
playerFilter: false,
|
||||
movementFilter: "100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000,1100000,1200000",
|
||||
movementCategoryFilter: "100000,200000,300000,400000,500000,600000,700000,800000,900000,1000000,1100000,1200000",
|
||||
weaponFilter: "10000000,20000000,25000000,30000000,40000000,50000000,60000000,65000000,70100000,75000000",
|
||||
weaponCategoryFilter: "10000000,20000000,25000000,30000000,40000000,50000000,60000000,65000000,70100000,75000000",
|
||||
minimumCpu: -1,
|
||||
maximumCpu: -1,
|
||||
textFilter: "",
|
||||
textSearchField: 0, // ALL=0, PLAYER=1, NAME=2
|
||||
buyable: true,
|
||||
prependFeaturedRobot: false,
|
||||
featuredOnly: false,
|
||||
defaultPage: false
|
||||
};
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replaceAll("&", "&")
|
||||
.replaceAll("<", "<")
|
||||
.replaceAll(">", ">")
|
||||
.replaceAll('"', """)
|
||||
.replaceAll("'", "'");
|
||||
}
|
||||
|
||||
async function fetchJson(url, opts) {
|
||||
const r = await fetch(url, opts);
|
||||
const t = await r.text();
|
||||
if (!r.ok) throw new Error(`${r.status} ${r.statusText}: ${t}`);
|
||||
try { return JSON.parse(t); } catch { return t; }
|
||||
}
|
||||
|
||||
function buildPayload() {
|
||||
const q = ($("q").value || "").trim();
|
||||
const textSearchField = Number($("searchField").value || "0"); // ALL=0, PLAYER=1, NAME=2
|
||||
const order = Number($("order").value || "0");
|
||||
const tier = $("tier").value || ""; // "" or "1".."5" or "M"
|
||||
|
||||
const p = { ...basePayload };
|
||||
p.page = state.page;
|
||||
p.pageSize = state.pageSize;
|
||||
p.order = order;
|
||||
p.textFilter = q;
|
||||
p.textSearchField = textSearchField;
|
||||
|
||||
p.playerFilter = (textSearchField === 1);
|
||||
|
||||
if (tier !== "") {
|
||||
const mx = TIER_MAX[tier] ?? 0;
|
||||
if (mx > 0) {
|
||||
p.minimumRobotRanking = 0;
|
||||
p.maximumRobotRanking = mx;
|
||||
}
|
||||
}
|
||||
|
||||
return p;
|
||||
}
|
||||
|
||||
function setStatus(msg) {
|
||||
$("status").textContent = msg || "";
|
||||
}
|
||||
|
||||
function setPagerEnabled() {
|
||||
const prevDisabled = state.page <= 1;
|
||||
$("btnPrevTop").disabled = prevDisabled;
|
||||
$("btnPrevBottom").disabled = prevDisabled;
|
||||
|
||||
const nextDisabled = state.lastItemCount < state.pageSize;
|
||||
$("btnNextTop").disabled = nextDisabled;
|
||||
$("btnNextBottom").disabled = nextDisabled;
|
||||
}
|
||||
|
||||
function renderList(data) {
|
||||
const grid = $("grid");
|
||||
grid.innerHTML = "";
|
||||
|
||||
const items = data?.response?.roboShopItems ?? [];
|
||||
state.lastItemCount = items.length;
|
||||
|
||||
setStatus(`page: ${state.page} / items: ${items.length}`);
|
||||
|
||||
for (const it of items) {
|
||||
const id = it.itemId;
|
||||
const name = it.itemName;
|
||||
const thumb = it.thumbnail;
|
||||
const author = it.addedByDisplayName;
|
||||
|
||||
const card = document.createElement("div");
|
||||
card.className = "card";
|
||||
|
||||
const img = document.createElement("img");
|
||||
img.className = "thumb";
|
||||
img.loading = "lazy";
|
||||
if (thumb) img.src = thumb;
|
||||
card.appendChild(img);
|
||||
|
||||
const h = document.createElement("div");
|
||||
h.style.marginTop = "8px";
|
||||
h.innerHTML = `<strong>${escapeHtml(name)}</strong><div class="muted">id: ${escapeHtml(id ?? "?")}</div>`;
|
||||
card.appendChild(h);
|
||||
|
||||
const p = document.createElement("div");
|
||||
p.className = "muted";
|
||||
p.textContent = author ? `by: ${author}` : "";
|
||||
p.style.marginTop = "6px";
|
||||
card.appendChild(p);
|
||||
|
||||
const btn = document.createElement("button");
|
||||
btn.className = "btn";
|
||||
btn.textContent = "About";
|
||||
btn.addEventListener("click", async () => {
|
||||
if (id == null) return;
|
||||
try { await doGet(id); } catch (e) { showDialog(`id: ${id}`, String(e)); }
|
||||
});
|
||||
card.appendChild(btn);
|
||||
|
||||
grid.appendChild(card);
|
||||
}
|
||||
|
||||
setPagerEnabled();
|
||||
}
|
||||
|
||||
function showDialog(title, body) {
|
||||
$("dlgTitle").textContent = title || "";
|
||||
$("detail").textContent = body || "";
|
||||
const dlg = $("dlg");
|
||||
if (!dlg.open) dlg.showModal();
|
||||
}
|
||||
|
||||
async function doSearch(resetPage) {
|
||||
if (resetPage) state.page = 1;
|
||||
|
||||
setStatus("loading...");
|
||||
|
||||
const payload = buildPayload();
|
||||
const data = await fetchJson("/api/roboShopItems/list", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
renderList(data);
|
||||
}
|
||||
|
||||
async function doGet(id) {
|
||||
const data = await fetchJson(`/api/roboShopItems/get/${encodeURIComponent(id)}`, { method: "GET" });
|
||||
|
||||
if (typeof data === "string") {
|
||||
showDialog(`id: ${id}`, data);
|
||||
return;
|
||||
}
|
||||
|
||||
const resp = data?.response ?? data;
|
||||
|
||||
const title =
|
||||
resp?.name
|
||||
? `${resp.name} (id: ${resp.id ?? id})`
|
||||
: `id: ${id}`;
|
||||
|
||||
showDialog(title, JSON.stringify(resp, null, 2));
|
||||
}
|
||||
|
||||
$("btnSearch").addEventListener("click", async () => {
|
||||
try { await doSearch(true); } catch (e) { setStatus(String(e)); }
|
||||
});
|
||||
|
||||
$("btnPrevTop").addEventListener("click", async () => {
|
||||
if (state.page <= 1) return;
|
||||
state.page--;
|
||||
try { await doSearch(false); } catch (e) { setStatus(String(e)); }
|
||||
});
|
||||
$("btnPrevBottom").addEventListener("click", async () => {
|
||||
if (state.page <= 1) return;
|
||||
state.page--;
|
||||
try { await doSearch(false); } catch (e) { setStatus(String(e)); }
|
||||
});
|
||||
|
||||
$("btnNextTop").addEventListener("click", async () => {
|
||||
state.page++;
|
||||
try { await doSearch(false); } catch (e) { setStatus(String(e)); }
|
||||
});
|
||||
$("btnNextBottom").addEventListener("click", async () => {
|
||||
state.page++;
|
||||
try { await doSearch(false); } catch (e) { setStatus(String(e)); }
|
||||
});
|
||||
|
||||
$("q").addEventListener("keydown", async (ev) => {
|
||||
if (ev.key === "Enter") {
|
||||
ev.preventDefault();
|
||||
try { await doSearch(true); } catch (e) { setStatus(String(e)); }
|
||||
}
|
||||
});
|
||||
|
||||
$("dlgClose").addEventListener("click", () => {
|
||||
$("dlg").close();
|
||||
});
|
||||
|
||||
doSearch(true).catch((e) => setStatus(String(e)));
|
||||
})();
|
||||
Reference in New Issue
Block a user