50 lines
1.8 KiB
JavaScript
50 lines
1.8 KiB
JavaScript
// The graphics compatibility report. Shown when the GPU map renderer could not
|
|
// be used, so the player sees exactly which WebGL (and WebAssembly) features
|
|
// this client is missing rather than a silent downgrade to the DOM renderer.
|
|
// The report itself is built by `client/js/capabilities.js`.
|
|
|
|
import { capabilityStatus, summarizeCapabilityReport } from "../capabilities.js";
|
|
|
|
export class CapabilityModal {
|
|
constructor() {
|
|
this.$modal = $("#modal-capabilities");
|
|
this.$summary = $("#capabilities-summary");
|
|
this.$list = $("#capabilities-list");
|
|
this.$min = $("#capabilities-min");
|
|
this.$modal.find(".modal-close").on("click", () => this.close());
|
|
this.$modal.find("#capabilities-ok").on("click", () => this.close());
|
|
}
|
|
|
|
isShowing() {
|
|
return !this.$modal.hasClass("hidden");
|
|
}
|
|
|
|
show(report) {
|
|
this.$summary.text(summarizeCapabilityReport(report));
|
|
this.$list.empty();
|
|
for (const entry of report.checks) this.$list.append(this._row(entry));
|
|
this.$min.empty();
|
|
for (const requirement of report.minRequirements) {
|
|
this.$min.append($("<li></li>").text(requirement));
|
|
}
|
|
this.$modal.removeClass("hidden");
|
|
}
|
|
|
|
close() {
|
|
this.$modal.addClass("hidden");
|
|
}
|
|
|
|
_row(entry) {
|
|
const status = capabilityStatus(entry);
|
|
let detail = `Need ${entry.need}; have ${entry.value}`;
|
|
if (entry.detail) detail += ` — ${entry.detail}`;
|
|
const $row = $("<div></div>").addClass(`capability-row capability-${status.toLowerCase()}`);
|
|
$row.append($("<span></span>").addClass("capability-status").text(status));
|
|
const $text = $("<div></div>").addClass("capability-text");
|
|
$text.append($("<div></div>").addClass("capability-label").text(entry.label));
|
|
$text.append($("<div></div>").addClass("capability-detail").text(detail));
|
|
$row.append($text);
|
|
return $row;
|
|
}
|
|
}
|