Overlay visar bara launch-/copy-knappar
OBS-inställningarna ligger i Inställningar dropdown-problemet för OBS-config är kvar löst där också
This commit is contained in:
larssand
@@ -10,7 +10,7 @@
|
||||
href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&family=Orbitron:wght@500;700;800&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="./src/styles.css" />
|
||||
<link rel="stylesheet" href="/src/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="app-shell">
|
||||
@@ -66,6 +66,6 @@
|
||||
</table>
|
||||
</template>
|
||||
|
||||
<script type="module" src="./src/app.js"></script>
|
||||
<script type="module" src="/src/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
153
src/app.js
153
src/app.js
@@ -3006,7 +3006,7 @@ function tickClock() {
|
||||
if (currentView === "dashboard" && timerState.changed) {
|
||||
renderView();
|
||||
}
|
||||
if (currentView === "overlay" && active) {
|
||||
if (overlayMode && currentView === "overlay" && active) {
|
||||
renderView();
|
||||
}
|
||||
if (timerState.changed) {
|
||||
@@ -6464,42 +6464,6 @@ function renderOverlay() {
|
||||
<button id="overlayLaunchObs" class="btn" type="button">${t("timing.open_obs_overlay")}</button>
|
||||
<button id="overlayCopyObsUrl" class="btn" type="button">${t("overlay.obs_copy_url")}</button>
|
||||
</div>
|
||||
<div class="overlay-obs-config">
|
||||
<div class="panel-header-inline">
|
||||
<strong>${t("overlay.obs_config")}</strong>
|
||||
<span>${t("overlay.obs_public_hint")}</span>
|
||||
</div>
|
||||
<div class="form-grid cols-4">
|
||||
<label>
|
||||
${t("overlay.obs_rows")}
|
||||
<input id="obsRows" type="number" min="3" max="12" value="${normalizeObsOverlaySettings(state.settings.obsOverlay).rows}" />
|
||||
</label>
|
||||
<label>
|
||||
${t("overlay.obs_layout")}
|
||||
<select id="obsLayout">
|
||||
${OBS_LAYOUTS.map((layout) => `<option value="${layout}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).layout === layout ? "selected" : ""}>${t(`overlay.obs_layout_${layout}`)}</option>`).join("")}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
${t("overlay.obs_theme")}
|
||||
<select id="obsTheme">
|
||||
${OBS_THEMES.map((theme) => `<option value="${theme}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).theme === theme ? "selected" : ""}>${t(`overlay.obs_theme_${theme}`)}</option>`).join("")}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
${t("overlay.obs_public_token")}
|
||||
<input id="obsPublicToken" value="${escapeHtml(normalizeObsOverlaySettings(state.settings.obsOverlay).publicToken)}" placeholder="optional" />
|
||||
<small>${t("overlay.obs_public_token_hint")}</small>
|
||||
</label>
|
||||
<label class="toggle"><input id="obsShowClock" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showClock ? "checked" : ""} /><span>${t("overlay.obs_show_clock")}</span></label>
|
||||
<label class="toggle"><input id="obsShowFastest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showFastest ? "checked" : ""} /><span>${t("overlay.obs_show_fastest")}</span></label>
|
||||
<label class="toggle"><input id="obsShowGrid" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGrid ? "checked" : ""} /><span>${t("overlay.obs_show_grid")}</span></label>
|
||||
<label class="toggle"><input id="obsShowLaps" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showLaps ? "checked" : ""} /><span>${t("overlay.obs_show_laps")}</span></label>
|
||||
<label class="toggle"><input id="obsShowResult" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showResult ? "checked" : ""} /><span>${t("overlay.obs_show_result")}</span></label>
|
||||
<label class="toggle"><input id="obsShowBest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showBest ? "checked" : ""} /><span>${t("overlay.obs_show_best")}</span></label>
|
||||
<label class="toggle"><input id="obsShowGap" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGap ? "checked" : ""} /><span>${t("overlay.obs_show_gap")}</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
`
|
||||
@@ -6674,37 +6638,6 @@ function renderOverlay() {
|
||||
}
|
||||
window.prompt("Copy OBS URL", url);
|
||||
});
|
||||
|
||||
[
|
||||
["obsRows", "rows", (value) => Math.max(3, Math.min(12, Number(value) || DEFAULT_OBS_OVERLAY_SETTINGS.rows))],
|
||||
["obsLayout", "layout", (value) => OBS_LAYOUTS.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.layout],
|
||||
["obsTheme", "theme", (value) => OBS_THEMES.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.theme],
|
||||
["obsPublicToken", "publicToken", (value) => String(value || "").trim()],
|
||||
["obsShowClock", "showClock", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowFastest", "showFastest", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowGrid", "showGrid", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowLaps", "showLaps", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowResult", "showResult", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowBest", "showBest", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowGap", "showGap", (value, el) => Boolean(el?.checked)],
|
||||
].forEach(([id, key, mapper]) => {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
const handler = () => {
|
||||
const next = normalizeObsOverlaySettings({
|
||||
...state.settings.obsOverlay,
|
||||
[key]: mapper(el.value, el),
|
||||
});
|
||||
state.settings.obsOverlay = next;
|
||||
saveState();
|
||||
};
|
||||
el.addEventListener("change", handler);
|
||||
if (el instanceof HTMLInputElement && (el.type === "number" || el.type === "text")) {
|
||||
el.addEventListener("input", handler);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function renderObsOverlay(active, leaderboard, result, sessionTiming, branding) {
|
||||
@@ -7350,6 +7283,49 @@ function renderSettings() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel mt-16">
|
||||
<div class="panel-header"><h3>${t("overlay.obs_config")}</h3></div>
|
||||
<div class="panel-body">
|
||||
<p class="hint">${t("overlay.obs_public_hint")}</p>
|
||||
<div class="actions">
|
||||
<button id="settingsLaunchObs" class="btn" type="button">${t("timing.open_obs_overlay")}</button>
|
||||
<button id="settingsCopyObsUrl" class="btn" type="button">${t("overlay.obs_copy_url")}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body overlay-obs-config">
|
||||
<div class="form-grid cols-4">
|
||||
<label>
|
||||
${t("overlay.obs_rows")}
|
||||
<input id="obsRows" type="number" min="3" max="12" value="${normalizeObsOverlaySettings(state.settings.obsOverlay).rows}" />
|
||||
</label>
|
||||
<label>
|
||||
${t("overlay.obs_layout")}
|
||||
<select id="obsLayout">
|
||||
${OBS_LAYOUTS.map((layout) => `<option value="${layout}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).layout === layout ? "selected" : ""}>${t(`overlay.obs_layout_${layout}`)}</option>`).join("")}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
${t("overlay.obs_theme")}
|
||||
<select id="obsTheme">
|
||||
${OBS_THEMES.map((theme) => `<option value="${theme}" ${normalizeObsOverlaySettings(state.settings.obsOverlay).theme === theme ? "selected" : ""}>${t(`overlay.obs_theme_${theme}`)}</option>`).join("")}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
${t("overlay.obs_public_token")}
|
||||
<input id="obsPublicToken" value="${escapeHtml(normalizeObsOverlaySettings(state.settings.obsOverlay).publicToken)}" placeholder="optional" />
|
||||
<small>${t("overlay.obs_public_token_hint")}</small>
|
||||
</label>
|
||||
<label class="toggle"><input id="obsShowClock" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showClock ? "checked" : ""} /><span>${t("overlay.obs_show_clock")}</span></label>
|
||||
<label class="toggle"><input id="obsShowFastest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showFastest ? "checked" : ""} /><span>${t("overlay.obs_show_fastest")}</span></label>
|
||||
<label class="toggle"><input id="obsShowGrid" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGrid ? "checked" : ""} /><span>${t("overlay.obs_show_grid")}</span></label>
|
||||
<label class="toggle"><input id="obsShowLaps" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showLaps ? "checked" : ""} /><span>${t("overlay.obs_show_laps")}</span></label>
|
||||
<label class="toggle"><input id="obsShowResult" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showResult ? "checked" : ""} /><span>${t("overlay.obs_show_result")}</span></label>
|
||||
<label class="toggle"><input id="obsShowBest" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showBest ? "checked" : ""} /><span>${t("overlay.obs_show_best")}</span></label>
|
||||
<label class="toggle"><input id="obsShowGap" type="checkbox" ${normalizeObsOverlaySettings(state.settings.obsOverlay).showGap ? "checked" : ""} /><span>${t("overlay.obs_show_gap")}</span></label>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel mt-16">
|
||||
<div class="panel-header"><h3>${t("settings.managed_ammc")}</h3></div>
|
||||
<form id="ammcForm" class="panel-body form-grid cols-2 settings-grid">
|
||||
@@ -7480,6 +7456,47 @@ function renderSettings() {
|
||||
}
|
||||
}, 180);
|
||||
});
|
||||
document.getElementById("settingsLaunchObs")?.addEventListener("click", () => openOverlayWindow("obs", { public: true }));
|
||||
document.getElementById("settingsCopyObsUrl")?.addEventListener("click", async () => {
|
||||
const url = buildOverlayUrl("obs", { public: true });
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(url).catch(() => {});
|
||||
return;
|
||||
}
|
||||
window.prompt("Copy OBS URL", url);
|
||||
});
|
||||
|
||||
[
|
||||
["obsRows", "rows", (value) => Math.max(3, Math.min(12, Number(value) || DEFAULT_OBS_OVERLAY_SETTINGS.rows))],
|
||||
["obsLayout", "layout", (value) => OBS_LAYOUTS.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.layout],
|
||||
["obsTheme", "theme", (value) => OBS_THEMES.includes(String(value || "").toLowerCase()) ? String(value).toLowerCase() : DEFAULT_OBS_OVERLAY_SETTINGS.theme],
|
||||
["obsPublicToken", "publicToken", (value) => String(value || "").trim()],
|
||||
["obsShowClock", "showClock", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowFastest", "showFastest", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowGrid", "showGrid", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowLaps", "showLaps", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowResult", "showResult", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowBest", "showBest", (value, el) => Boolean(el?.checked)],
|
||||
["obsShowGap", "showGap", (value, el) => Boolean(el?.checked)],
|
||||
].forEach(([id, key, mapper]) => {
|
||||
const el = document.getElementById(id);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
const handler = () => {
|
||||
const next = normalizeObsOverlaySettings({
|
||||
...state.settings.obsOverlay,
|
||||
[key]: mapper(el.value, el),
|
||||
});
|
||||
state.settings.obsOverlay = next;
|
||||
saveState();
|
||||
};
|
||||
el.addEventListener("change", handler);
|
||||
if (el instanceof HTMLInputElement && (el.type === "number" || el.type === "text")) {
|
||||
el.addEventListener("input", handler);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("settingsTestBackend")?.addEventListener("click", async () => {
|
||||
await pingBackend();
|
||||
renderView();
|
||||
|
||||
Reference in New Issue
Block a user