From cfe2e8efd23324214a8b31d8d920bd2aaefd8c83 Mon Sep 17 00:00:00 2001 From: pap-24 <71824952+pap-24@users.noreply.github.com> Date: Sat, 1 Jun 2024 17:21:04 +0300 Subject: [PATCH] Darker/dimmed backdrop on teams menu (#321) * Bug fix on inputManager.ts (keyboard events) Added some extra conditions to ensure that the key value reading is correct regardless of user's keyboard language. With the use of event.code. * Update inputManager.ts * Bug fix on inputManager.ts (keyboard events) Added some extra code to the getKeyFromInputEvent function so keyboard events are read correctly and regardless of user's keyboard language. * Update inputManager.ts * Added halloween light and dark pumpkin svgs * Wrong branch lol * Wrong branch lol * Team menu now has blurry backdrop and blocks interaction * Changed blurring to brightness (darker). * Fixed the little lag with the backdrop filter change --------- Co-authored-by: papas24 <71824952+papas24@users.noreply.github.com> --- client/src/scripts/ui.ts | 47 +++++++++++++++++++++++++++++----------- 1 file changed, 34 insertions(+), 13 deletions(-) diff --git a/client/src/scripts/ui.ts b/client/src/scripts/ui.ts index ab7df4877..ce720f46e 100644 --- a/client/src/scripts/ui.ts +++ b/client/src/scripts/ui.ts @@ -207,7 +207,7 @@ export async function setUpUI(game: Game): Promise { updateServerSelectors(); // eslint-disable-next-line @typescript-eslint/no-misused-promises - serverList.children("li.server-list-item").on("click", async function(this: HTMLLIElement) { + serverList.children("li.server-list-item").on("click", async function (this: HTMLLIElement) { const region = this.getAttribute("data-region"); if (region === null) return; @@ -312,7 +312,7 @@ export async function setUpUI(game: Game): Promise { }); const createTeamMenu = $("#create-team-menu"); - $("#btn-create-team, #btn-join-team").on("click", function() { + $("#btn-create-team, #btn-join-team").on("click", function () { const now = Date.now(); if (now - lastPlayButtonClickTime < 1500 || teamSocket) return; lastPlayButtonClickTime = now; @@ -438,6 +438,13 @@ export async function setUpUI(game: Game): Promise { $("#splash-server-message").show(); resetPlayButtons(); createTeamMenu.fadeOut(250); + + // --------------------------------------------------------- + // Dimmed backdrop on team menu. (Probably not needed here) + // --------------------------------------------------------- + $("#splash-ui").css("filter", ""); + $("#splash-ui").css("pointer-events", ""); + // --------------------------------------------------------- }; teamSocket.onclose = (): void => { @@ -457,9 +464,23 @@ export async function setUpUI(game: Game): Promise { joinedTeam = false; window.location.hash = ""; createTeamMenu.fadeOut(250); + + // ---------------------------------------------- + // Dimmed Backdrop on team menu. + // ---------------------------------------------- + $("#splash-ui").css("filter", ""); + $("#splash-ui").css("pointer-events", ""); + // ---------------------------------------------- }; createTeamMenu.fadeIn(250); + + // ---------------------------------------------- + // Dimmed Backdrop on team menu. + // ---------------------------------------------- + $("#splash-ui").css("filter", "brightness(0.6)"); + $("#splash-ui").css("pointer-events", "none"); + // ---------------------------------------------- }); $("#close-create-team").on("click", () => { @@ -500,7 +521,7 @@ export async function setUpUI(game: Game): Promise { .css("color", "#FFFFFF00"); }); - $("#create-team-toggle-auto-fill").on("click", function() { + $("#create-team-toggle-auto-fill").on("click", function () { autoFill = $(this).prop("checked"); teamSocket?.send(JSON.stringify({ type: CustomTeamMessages.Settings, @@ -508,7 +529,7 @@ export async function setUpUI(game: Game): Promise { })); }); - $("#create-team-toggle-lock").on("click", function() { + $("#create-team-toggle-lock").on("click", function () { teamSocket?.send(JSON.stringify({ type: CustomTeamMessages.Settings, locked: $(this).prop("checked") @@ -664,7 +685,7 @@ export async function setUpUI(game: Game): Promise { void game.endGame(); }); // eslint-disable-next-line @typescript-eslint/no-misused-promises - $("#btn-play-again, #btn-spectate-replay").on("click", async() => { + $("#btn-play-again, #btn-spectate-replay").on("click", async () => { await game.endGame(); if (teamSocket) teamSocket.send(JSON.stringify({ type: CustomTeamMessages.Start })); // TODO Check if player is team leader else joinGame(); @@ -775,7 +796,7 @@ Video evidence is required.`)) { ${skin.name} `); - skinItem.on("click", function() { + skinItem.on("click", function () { game.console.setBuiltInCVar("cv_loadout_skin", skin.idString); $(this).addClass("selected").siblings().removeClass("selected"); updateSplashCustomize(skin.idString); @@ -801,7 +822,7 @@ Video evidence is required.`)) { ${emote.name} `); - emoteItem.on("click", function() { + emoteItem.on("click", function () { if (selectedEmoteSlot === undefined) return; game.console.setBuiltInCVar(`cv_loadout_${selectedEmoteSlot}_emote`, emote.idString); @@ -903,7 +924,7 @@ Video evidence is required.`)) { "background-repeat": "no-repeat" }); - crosshairItem.on("click", function() { + crosshairItem.on("click", function () { game.console.setBuiltInCVar("cv_loadout_crosshair", crosshairIndex); loadCrosshair(); $(this).addClass("selected").siblings().removeClass("selected"); @@ -954,7 +975,7 @@ Video evidence is required.`)) { ` ); - noBadgeItem.on("click", function() { + noBadgeItem.on("click", function () { game.console.setBuiltInCVar("cv_loadout_badge", ""); $(this).addClass("selected").siblings().removeClass("selected"); }); @@ -971,7 +992,7 @@ Video evidence is required.`)) { ` ); - badgeItem.on("click", function() { + badgeItem.on("click", function () { game.console.setBuiltInCVar("cv_loadout_badge", badge.idString); $(this).addClass("selected").siblings().removeClass("selected"); }); @@ -1182,7 +1203,7 @@ Video evidence is required.`)) { }); renderSelect.value = game.console.getBuiltInCVar("cv_renderer"); - void (async() => { + void (async () => { $("#webgpu-option").toggle(await isWebGPUSupported()); })(); @@ -1549,7 +1570,7 @@ Video evidence is required.`)) { $("#btn-toggle-ping") .show() - .on("click", function() { + .on("click", function () { game.inputManager.pingWheelActive = !game.inputManager.pingWheelActive; const { pingWheelActive } = game.inputManager; $(this) @@ -1609,7 +1630,7 @@ Video evidence is required.`)) { tabContent.show(); }); - $("#warning-modal-agree-checkbox").on("click", function() { + $("#warning-modal-agree-checkbox").on("click", function () { $("#warning-btn-play-solo, #btn-play-solo").toggleClass("btn-disabled", !$(this).prop("checked")); });