mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-30 15:52:14 +00:00
Cleanup redundant code win tad performance back (#2194)
## Description: Cleanup code & small perf improvement Gave it v26 milestone because it gives a little perf bump at no cost, all the removed code isn't used anywhere so can be safely deleted. Triple checked. - Remove 'setFocusedPlayer' and 'checkTileUnderCursor' (not to be confused by still in use 'getTileUnderCursor') from ClientGameRunner, '_focusedPlayer' and 'setFocusedPlayer' (not to be confused with still-in-use 'focusedPlayer') from GameView, and 'setFocusedPlayer' from TransformHander. These are remnants of PR #304, the first one that added highlighting territory. The remants are still ran for every mouse-move, costing some performance for no reason. _focusedPlayer is never used anywhere anymore, only calculated and set. It was later adapted from #387. But ultimately almost completely disabled because it was too performance-costly, from commits15c2cc1and thenec895af. The thing that remained was permanent highlight of the player's own border. For that, function 'focusedPlayer' in GameView is still used by 'drawFocusedPlayerHighlight' in TerritoryLayer. But it simply returns myPlayer instead of the obsolete _focusedPlayer that it returned earlier. Function 'focusedPlayer' still had the annotation "// TODO: renable when performance issues are fixed." which i removed. Because another PR for highlighting other's territory already followed it up with its own functions, so chances of needing to change 'focusedPlayer' back are very slim. Later PR #1320 introduced a new attempt for highlighting territory in the alternate view. It used its own equivalent functions in TerritoryLayer for MouseOver and updateHighlightedTerritory (the latter being the equivalent of the old checkTileUnderCursor in ClientGameRunner). That was also disabled in part due to perfomance cost, and now only shows border color changes. All this to say: the remnants of PR 320 and 387 have long been redundant. - Main: removed uncommented chatModal code, which was never used and leftover from tests during development probably. - PlayerActionHandler: removed handleQuickChat and the sendQuickChatEvent import it needed. It was added in PR Multi-level radial menu #1018. But the new Radial menu in the meantime moved to using ChatIntegration.ts to send the chat event, or from there opened the original Chat Modal which then sent the chat event. Later on, chat was even removed from the Radial menu. 'handleQuickChat' is used nowhere anymore and isn't needed. This is maybe also the case for ChatIntegration, but i didn't remove it because it may still be enabled again in the future for UI changes or something. - OptionsMenu: removed, also from index.html (options-menu). This menu has been succeeded by GameRightSidebar (game-right-sidebar for index.html) for awhile now. ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: tryout33
This commit is contained in:
VariableVince
@@ -426,13 +426,6 @@ export class ClientGameRunner {
|
||||
} else if (this.canBoatAttack(actions, tile)) {
|
||||
this.sendBoatAttackIntent(tile);
|
||||
}
|
||||
|
||||
const owner = this.gameView.owner(tile);
|
||||
if (owner.isPlayer()) {
|
||||
this.gameView.setFocusedPlayer(owner as PlayerView);
|
||||
} else {
|
||||
this.gameView.setFocusedPlayer(null);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -612,45 +605,6 @@ export class ClientGameRunner {
|
||||
|
||||
private onMouseMove(event: MouseMoveEvent) {
|
||||
this.lastMousePosition = { x: event.x, y: event.y };
|
||||
this.checkTileUnderCursor();
|
||||
}
|
||||
|
||||
private checkTileUnderCursor() {
|
||||
if (!this.lastMousePosition || !this.renderer.transformHandler) return;
|
||||
|
||||
const cell = this.renderer.transformHandler.screenToWorldCoordinates(
|
||||
this.lastMousePosition.x,
|
||||
this.lastMousePosition.y,
|
||||
);
|
||||
|
||||
if (!cell || !this.gameView.isValidCoord(cell.x, cell.y)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tile = this.gameView.ref(cell.x, cell.y);
|
||||
|
||||
if (this.gameView.isLand(tile)) {
|
||||
const owner = this.gameView.owner(tile);
|
||||
if (owner.isPlayer()) {
|
||||
this.gameView.setFocusedPlayer(owner as PlayerView);
|
||||
} else {
|
||||
this.gameView.setFocusedPlayer(null);
|
||||
}
|
||||
} else {
|
||||
const units = this.gameView
|
||||
.nearbyUnits(tile, 50, [
|
||||
UnitType.Warship,
|
||||
UnitType.TradeShip,
|
||||
UnitType.TransportShip,
|
||||
])
|
||||
.sort((a, b) => a.distSquared - b.distSquared);
|
||||
|
||||
if (units.length > 0) {
|
||||
this.gameView.setFocusedPlayer(units[0].unit.owner() as PlayerView);
|
||||
} else {
|
||||
this.gameView.setFocusedPlayer(null);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private onConnectionCheck() {
|
||||
|
||||
@@ -179,12 +179,6 @@ class Client {
|
||||
}
|
||||
});
|
||||
|
||||
// const ctModal = document.querySelector("chat-modal") as ChatModal;
|
||||
// ctModal instanceof ChatModal;
|
||||
// document.getElementById("chat-button").addEventListener("click", () => {
|
||||
// ctModal.open();
|
||||
// });
|
||||
|
||||
const hlpModal = document.querySelector("help-modal") as HelpModal;
|
||||
if (!hlpModal || !(hlpModal instanceof HelpModal)) {
|
||||
console.warn("Help modal element not found");
|
||||
|
||||
@@ -158,7 +158,6 @@ export class TransformHandler {
|
||||
}
|
||||
|
||||
onGoToPlayer(event: GoToPlayerEvent) {
|
||||
this.game.setFocusedPlayer(event.player);
|
||||
this.clearTarget();
|
||||
const nameLocation = event.player.nameLocation();
|
||||
if (!nameLocation) {
|
||||
|
||||
@@ -1,278 +0,0 @@
|
||||
import { html, LitElement } from "lit";
|
||||
import { customElement, state } from "lit/decorators.js";
|
||||
import { EventBus } from "../../../core/EventBus";
|
||||
import { GameType } from "../../../core/game/Game";
|
||||
import { GameUpdateType } from "../../../core/game/GameUpdates";
|
||||
import { GameView } from "../../../core/game/GameView";
|
||||
import { UserSettings } from "../../../core/game/UserSettings";
|
||||
import { AlternateViewEvent, RefreshGraphicsEvent } from "../../InputHandler";
|
||||
import { PauseGameEvent } from "../../Transport";
|
||||
import { translateText } from "../../Utils";
|
||||
import { Layer } from "./Layer";
|
||||
|
||||
const button = ({
|
||||
classes = "",
|
||||
onClick = () => {},
|
||||
title = "",
|
||||
children = "",
|
||||
}) => html`
|
||||
<button
|
||||
class="flex items-center justify-center p-1
|
||||
bg-opacity-70 bg-gray-700 text-opacity-90 text-white
|
||||
border-none rounded cursor-pointer
|
||||
hover:bg-opacity-60 hover:bg-gray-600
|
||||
transition-colors duration-200
|
||||
text-sm lg:text-xl ${classes}"
|
||||
@click=${onClick}
|
||||
aria-label=${title}
|
||||
title=${title}
|
||||
>
|
||||
${children}
|
||||
</button>
|
||||
`;
|
||||
|
||||
const secondsToHms = (d: number): string => {
|
||||
const h = Math.floor(d / 3600);
|
||||
const m = Math.floor((d % 3600) / 60);
|
||||
const s = Math.floor((d % 3600) % 60);
|
||||
let time = d === 0 ? "-" : `${s}s`;
|
||||
if (m > 0) time = `${m}m` + time;
|
||||
if (h > 0) time = `${h}h` + time;
|
||||
return time;
|
||||
};
|
||||
|
||||
@customElement("options-menu")
|
||||
export class OptionsMenu extends LitElement implements Layer {
|
||||
public game: GameView;
|
||||
public eventBus: EventBus;
|
||||
private userSettings: UserSettings = new UserSettings();
|
||||
|
||||
@state()
|
||||
private showPauseButton: boolean = true;
|
||||
|
||||
@state()
|
||||
private isPaused: boolean = false;
|
||||
|
||||
@state()
|
||||
private timer: number = 0;
|
||||
|
||||
@state()
|
||||
private showSettings: boolean = false;
|
||||
|
||||
private isVisible = false;
|
||||
|
||||
private hasWinner = false;
|
||||
|
||||
@state()
|
||||
private alternateView: boolean = false;
|
||||
|
||||
private onTerrainButtonClick() {
|
||||
this.alternateView = !this.alternateView;
|
||||
this.eventBus.emit(new AlternateViewEvent(this.alternateView));
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onExitButtonClick() {
|
||||
const isAlive = this.game.myPlayer()?.isAlive();
|
||||
if (isAlive) {
|
||||
const isConfirmed = confirm(
|
||||
translateText("help_modal.exit_confirmation"),
|
||||
);
|
||||
if (!isConfirmed) return;
|
||||
}
|
||||
// redirect to the home page
|
||||
window.location.href = "/";
|
||||
}
|
||||
|
||||
createRenderRoot() {
|
||||
return this;
|
||||
}
|
||||
|
||||
private onSettingsButtonClick() {
|
||||
this.showSettings = !this.showSettings;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onPauseButtonClick() {
|
||||
this.isPaused = !this.isPaused;
|
||||
this.eventBus.emit(new PauseGameEvent(this.isPaused));
|
||||
}
|
||||
|
||||
private onToggleEmojisButtonClick() {
|
||||
this.userSettings.toggleEmojis();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onToggleAlertFrameButtonClick() {
|
||||
this.userSettings.toggleAlertFrame();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onToggleSpecialEffectsButtonClick() {
|
||||
this.userSettings.toggleFxLayer();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onToggleDarkModeButtonClick() {
|
||||
this.userSettings.toggleDarkMode();
|
||||
this.requestUpdate();
|
||||
this.eventBus.emit(new RefreshGraphicsEvent());
|
||||
}
|
||||
|
||||
private onToggleRandomNameModeButtonClick() {
|
||||
this.userSettings.toggleRandomName();
|
||||
}
|
||||
|
||||
private onToggleFocusLockedButtonClick() {
|
||||
this.userSettings.toggleFocusLocked();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onToggleLeftClickOpensMenu() {
|
||||
this.userSettings.toggleLeftClickOpenMenu();
|
||||
}
|
||||
|
||||
private onToggleTerritoryPatterns() {
|
||||
this.userSettings.toggleTerritoryPatterns();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
private onTogglePerformanceOverlayButtonClick() {
|
||||
this.userSettings.togglePerformanceOverlay();
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
init() {
|
||||
console.log("init called from OptionsMenu");
|
||||
this.showPauseButton =
|
||||
this.game.config().gameConfig().gameType === GameType.Singleplayer ||
|
||||
this.game.config().isReplay();
|
||||
this.isVisible = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
tick() {
|
||||
const updates = this.game.updatesSinceLastTick();
|
||||
if (updates) {
|
||||
this.hasWinner = this.hasWinner || updates[GameUpdateType.Win].length > 0;
|
||||
}
|
||||
if (this.game.inSpawnPhase()) {
|
||||
this.timer = 0;
|
||||
} else if (!this.hasWinner && this.game.ticks() % 10 === 0) {
|
||||
this.timer++;
|
||||
}
|
||||
this.isVisible = true;
|
||||
this.requestUpdate();
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.isVisible) {
|
||||
return html``;
|
||||
}
|
||||
return html`
|
||||
<div
|
||||
class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto"
|
||||
@contextmenu=${(e: MouseEvent) => e.preventDefault()}
|
||||
>
|
||||
<div
|
||||
class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-es-sm lg:rounded-lg backdrop-blur-md"
|
||||
>
|
||||
<div class="flex items-stretch gap-1 lg:gap-2">
|
||||
${button({
|
||||
classes: !this.showPauseButton ? "hidden" : "",
|
||||
onClick: this.onPauseButtonClick,
|
||||
title: this.isPaused ? "Resume game" : "Pause game",
|
||||
children: this.isPaused ? "▶️" : "⏸",
|
||||
})}
|
||||
<div
|
||||
class="w-[55px] h-8 lg:w-24 lg:h-10 flex items-center justify-center
|
||||
bg-opacity-50 bg-gray-700 text-opacity-90 text-white
|
||||
rounded text-sm lg:text-xl"
|
||||
>
|
||||
${secondsToHms(this.timer)}
|
||||
</div>
|
||||
${button({
|
||||
onClick: this.onExitButtonClick,
|
||||
title: "Exit game",
|
||||
children: "❌",
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onSettingsButtonClick,
|
||||
title: "Settings",
|
||||
children: "⚙️",
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="options-menu flex flex-col justify-around gap-y-3 mt-2 bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md ${!this
|
||||
.showSettings
|
||||
? "hidden"
|
||||
: ""}"
|
||||
>
|
||||
${button({
|
||||
onClick: this.onTerrainButtonClick,
|
||||
title: "Toggle Terrain",
|
||||
children: "🌲: " + (this.alternateView ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleEmojisButtonClick,
|
||||
title: "Toggle Emojis",
|
||||
children: "🙂: " + (this.userSettings.emojis() ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleAlertFrameButtonClick,
|
||||
title: "Toggle Alert frame",
|
||||
children: "🚨: " + (this.userSettings.alertFrame() ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleSpecialEffectsButtonClick,
|
||||
title: "Toggle Special effects",
|
||||
children: "💥: " + (this.userSettings.fxLayer() ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleTerritoryPatterns,
|
||||
title: "Territory Patterns",
|
||||
children:
|
||||
"🏳️: " + (this.userSettings.territoryPatterns() ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleDarkModeButtonClick,
|
||||
title: "Dark Mode",
|
||||
children: "🌙: " + (this.userSettings.darkMode() ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleRandomNameModeButtonClick,
|
||||
title: "Random name mode",
|
||||
children:
|
||||
"🥷: " + (this.userSettings.anonymousNames() ? "On" : "Off"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onToggleLeftClickOpensMenu,
|
||||
title: "Left click",
|
||||
children:
|
||||
"🖱️: " +
|
||||
(this.userSettings.leftClickOpensMenu()
|
||||
? "Opens menu"
|
||||
: "Attack"),
|
||||
})}
|
||||
${button({
|
||||
onClick: this.onTogglePerformanceOverlayButtonClick,
|
||||
title: "Performance Overlay",
|
||||
children:
|
||||
"🚀: " + (this.userSettings.performanceOverlay() ? "On" : "Off"),
|
||||
})}
|
||||
<!-- ${button({
|
||||
onClick: this.onToggleFocusLockedButtonClick,
|
||||
title: "Lock Focus",
|
||||
children:
|
||||
"🗺: " +
|
||||
(this.userSettings.focusLocked()
|
||||
? "Focus locked"
|
||||
: "Hover focus"),
|
||||
})} -->
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,6 @@ import {
|
||||
SendDonateTroopsIntentEvent,
|
||||
SendEmbargoIntentEvent,
|
||||
SendEmojiIntentEvent,
|
||||
SendQuickChatEvent,
|
||||
SendSpawnIntentEvent,
|
||||
SendTargetPlayerIntentEvent,
|
||||
} from "../../Transport";
|
||||
@@ -97,10 +96,6 @@ export class PlayerActionHandler {
|
||||
this.eventBus.emit(new SendEmojiIntentEvent(targetPlayer, emojiIndex));
|
||||
}
|
||||
|
||||
handleQuickChat(recipient: PlayerView, chatKey: string, params: any = {}) {
|
||||
this.eventBus.emit(new SendQuickChatEvent(recipient, chatKey, params));
|
||||
}
|
||||
|
||||
handleDeleteUnit(unitId: number) {
|
||||
this.eventBus.emit(new SendDeleteUnitIntentEvent(unitId));
|
||||
}
|
||||
|
||||
@@ -286,7 +286,6 @@
|
||||
<div id="app"></div>
|
||||
<div id="radialMenu" class="radial-menu"></div>
|
||||
<div class="flex gap-2 fixed right-[10px] top-[10px] z-50 flex-col">
|
||||
<options-menu></options-menu>
|
||||
<player-info-overlay></player-info-overlay>
|
||||
</div>
|
||||
<div
|
||||
|
||||
@@ -439,7 +439,6 @@ export class GameView implements GameMap {
|
||||
private updatedTiles: TileRef[] = [];
|
||||
|
||||
private _myPlayer: PlayerView | null = null;
|
||||
private _focusedPlayer: PlayerView | null = null;
|
||||
|
||||
private unitGrid: UnitGrid;
|
||||
|
||||
@@ -756,10 +755,6 @@ export class GameView implements GameMap {
|
||||
}
|
||||
|
||||
focusedPlayer(): PlayerView | null {
|
||||
// TODO: renable when performance issues are fixed.
|
||||
return this.myPlayer();
|
||||
}
|
||||
setFocusedPlayer(player: PlayerView | null): void {
|
||||
this._focusedPlayer = player;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user