Refactor Game Bar actions

This commit is contained in:
redphx
2024-10-13 19:15:29 +07:00
parent f2bc98229f
commit 6d2e04aff1
8 changed files with 90 additions and 84 deletions

View File

@@ -1,6 +1,12 @@
import { BxEvent } from "@/utils/bx-event";
export abstract class BaseGameBarAction {
constructor() {}
reset() {}
onClick(e: Event) {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
};
abstract render(): HTMLElement;
}

View File

@@ -13,24 +13,17 @@ export class MicrophoneAction extends BaseGameBarAction {
constructor() {
super();
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const enabled = MicrophoneShortcut.toggle(false);
this.$content.dataset.activated = enabled.toString();
};
const $btnDefault = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.MICROPHONE,
onClick: onClick,
onClick: this.onClick.bind(this),
classes: ['bx-activated'],
});
const $btnMuted = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.MICROPHONE_MUTED,
onClick: onClick,
onClick: this.onClick.bind(this),
});
this.$content = CE('div', {},
@@ -50,6 +43,12 @@ export class MicrophoneAction extends BaseGameBarAction {
});
}
onClick(e: Event) {
super.onClick(e);
const enabled = MicrophoneShortcut.toggle(false);
this.$content.dataset.activated = enabled.toString();
}
render(): HTMLElement {
return this.$content;
}

View File

@@ -1,4 +1,3 @@
import { BxEvent } from "@utils/bx-event";
import { BxIcon } from "@utils/bx-icon";
import { createButton, ButtonStyle, CE } from "@utils/html";
import { BaseGameBarAction } from "./action-base";
@@ -11,22 +10,16 @@ export class RendererAction extends BaseGameBarAction {
constructor() {
super();
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const isVisible = RendererShortcut.toggleVisibility();
this.$content.dataset.activated = (!isVisible).toString();
};
const $btnDefault = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.EYE,
onClick: onClick,
onClick: this.onClick.bind(this),
});
const $btnActivated = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.EYE_SLASH,
onClick: onClick,
onClick: this.onClick.bind(this),
classes: ['bx-activated'],
});
@@ -38,6 +31,12 @@ export class RendererAction extends BaseGameBarAction {
this.reset();
}
onClick(e: Event) {
super.onClick(e);
const isVisible = RendererShortcut.toggleVisibility();
this.$content.dataset.activated = (!isVisible).toString();
}
render(): HTMLElement {
return this.$content;
}

View File

@@ -1,4 +1,3 @@
import { BxEvent } from "@utils/bx-event";
import { BxIcon } from "@utils/bx-icon";
import { createButton, ButtonStyle } from "@utils/html";
import { BaseGameBarAction } from "./action-base";
@@ -11,19 +10,19 @@ export class ScreenshotAction extends BaseGameBarAction {
constructor() {
super();
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
Screenshot.takeScreenshot();
};
this.$content = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.SCREENSHOT,
title: t('take-screenshot'),
onClick: onClick,
onClick: this.onClick.bind(this),
});
}
onClick(e: Event): void {
super.onClick(e);
Screenshot.takeScreenshot();
}
render(): HTMLElement {
return this.$content;
}

View File

@@ -11,21 +11,16 @@ export class SpeakerAction extends BaseGameBarAction {
constructor() {
super();
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
SoundShortcut.muteUnmute();
};
const $btnEnable = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.AUDIO,
onClick: onClick,
onClick: this.onClick.bind(this),
});
const $btnMuted = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.SPEAKER_MUTED,
onClick: onClick,
onClick: this.onClick.bind(this),
classes: ['bx-activated'],
});
@@ -44,6 +39,11 @@ export class SpeakerAction extends BaseGameBarAction {
});
}
onClick(e: Event) {
super.onClick(e);
SoundShortcut.muteUnmute();
}
render(): HTMLElement {
return this.$content;
}

View File

@@ -1,4 +1,3 @@
import { BxEvent } from "@utils/bx-event";
import { BxIcon } from "@utils/bx-icon";
import { createButton, ButtonStyle, CE } from "@utils/html";
import { TouchController } from "@modules/touch-controller";
@@ -11,26 +10,18 @@ export class TouchControlAction extends BaseGameBarAction {
constructor() {
super();
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
const $parent = (e as any).target.closest('div[data-activated]');
const isVisible = TouchController.toggleVisibility();
$parent.dataset.activated = (!isVisible).toString();
};
const $btnEnable = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.TOUCH_CONTROL_ENABLE,
title: t('show-touch-controller'),
onClick: onClick,
onClick: this.onClick.bind(this),
});
const $btnDisable = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.TOUCH_CONTROL_DISABLE,
title: t('hide-touch-controller'),
onClick: onClick,
onClick: this.onClick.bind(this),
classes: ['bx-activated'],
});
@@ -42,6 +33,12 @@ export class TouchControlAction extends BaseGameBarAction {
this.reset();
}
onClick(e: Event) {
super.onClick(e);
const isVisible = TouchController.toggleVisibility();
this.$content.dataset.activated = (!isVisible).toString();
}
render(): HTMLElement {
return this.$content;
}

View File

@@ -1,4 +1,3 @@
import { BxEvent } from "@/utils/bx-event";
import { BxIcon } from "@/utils/bx-icon";
import { createButton, ButtonStyle } from "@/utils/html";
import { t } from "@/utils/translation";
@@ -11,19 +10,19 @@ export class TrueAchievementsAction extends BaseGameBarAction {
constructor() {
super();
const onClick = (e: Event) => {
BxEvent.dispatch(window, BxEvent.GAME_BAR_ACTION_ACTIVATED);
TrueAchievements.open(false);
};
this.$content = createButton({
style: ButtonStyle.GHOST,
icon: BxIcon.TRUE_ACHIEVEMENTS,
title: t('true-achievements'),
onClick: onClick,
onClick: this.onClick.bind(this),
});
}
onClick(e: Event) {
super.onClick(e);
TrueAchievements.open(false);
}
render(): HTMLElement {
return this.$content;
}