alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-21 09:30:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

* update leaderboard align (#1189)

Browse Source 
## Description:
This fix issue of leaderboard overlaping other elements. 
Also give option to dispaly ads below leaderboard since on desktop they
are next to each other

## Please complete the following:

- [ ] 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
- [ ] 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
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:

Diessel

![image](https://github.com/user-attachments/assets/28d1a952-b9b1-4990-9a2a-59d221f5c007)

![image](https://github.com/user-attachmen
![Snímek obrazovky 2025-06-17 v 18 28
12](https://github.com/user-attachments/assets/f00bd060-361a-4c2f-98dd-1849f7d705ff)
ts/assets/5886ceb2-2d15-4b0e-9c30-8c61b0255f48)
![Snímek obrazovky 2025-06-17 v 18 28
36](https://github.com/user-attachments/assets/a60943ef-7865-43fa-a400-a7bd381b6ea3)
![Snímek obrazovky 2025-06-17 v 18 28
19](https://github.com/user-attachments/assets/7a328e7a-5a97-4b71-bb7a-40adac2d45c3)

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
This commit is contained in:
DiesselOne
2025-06-17 22:32:27 +02:00
committed by GitHub
parent ab48a320ed
commit b7ee1caa52
8 changed files with 50 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/GameRenderer.ts
-10
View File
@@ -22,7 +22,6 @@ import { NameLayer } from "./layers/NameLayer";
import { OptionsMenu } from "./layers/OptionsMenu";
import { PlayerInfoOverlay } from "./layers/PlayerInfoOverlay";
import { PlayerPanel } from "./layers/PlayerPanel";
import { PlayerTeamLabel } from "./layers/PlayerTeamLabel";
import { ReplayPanel } from "./layers/ReplayPanel";
import { SpawnTimer } from "./layers/SpawnTimer";
import { StructureLayer } from "./layers/StructureLayer";
@@ -174,14 +173,6 @@ export function createRenderer(
}
multiTabModal.game = game;
const playerTeamLabel = document.querySelector(
"player-team-label",
) as PlayerTeamLabel;
if (!(playerTeamLabel instanceof PlayerTeamLabel)) {
console.error("player team label not found");
}
playerTeamLabel.game = game;
const headsUpMessage = document.querySelector(
"heads-up-message",
) as HeadsUpMessage;
@@ -246,7 +237,6 @@ export function createRenderer(
teamStats,
topBar,
playerPanel,
playerTeamLabel,
headsUpMessage,
unitInfoModal,
multiTabModal,
src/client/graphics/layers/ControlPanel.ts
+1 -1
View File
@@ -204,7 +204,7 @@ export class ControlPanel extends LitElement implements Layer {
</style>
<div
class="${this._isVisible
? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
? "w-full text-sm lg:text-m lg:w-72 bg-slate-800/40 backdrop-blur-sm shadow-xs p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg"
: "hidden"}"
@contextmenu=${(e) => e.preventDefault()}
>
src/client/graphics/layers/GameLeftSidebar.ts
+46 -7
View File
@@ -1,4 +1,5 @@
import { LitElement, html } from "lit";
import { Colord } from "colord";
import { html, LitElement } from "lit";
import { customElement, state } from "lit/decorators.js";
import { GameMode } from "../../../core/game/Game";
import { GameView } from "../../../core/game/GameView";
@@ -15,6 +16,10 @@ export class GameLeftSidebar extends LitElement implements Layer {
@state()
private isTeamLeaderboardShow = false;
private isVisible = false;
private isPlayerTeamLabelVisible = false;
private playerTeam: string | null = null;
private playerColor: Colord = new Colord("#FFFFFF");
public game: GameView;
createRenderRoot() {
@@ -23,9 +28,32 @@ export class GameLeftSidebar extends LitElement implements Layer {
init() {
this.isVisible = true;
if (this.isTeamGame) {
this.isPlayerTeamLabelVisible = true;
}
this.requestUpdate();
}
tick() {
if (!this.isPlayerTeamLabelVisible) return;
if (!this.playerTeam && this.game.myPlayer()?.team()) {
this.playerTeam = this.game.myPlayer()!.team();
if (this.playerTeam) {
this.playerColor = this.game
.config()
.theme()
.teamColor(this.playerTeam);
this.requestUpdate();
}
}
if (!this.game.inSpawnPhase()) {
this.isPlayerTeamLabelVisible = false;
this.requestUpdate();
}
}
private toggleLeaderboard(): void {
this.isLeaderboardShow = !this.isLeaderboardShow;
}
@@ -41,10 +69,23 @@ export class GameLeftSidebar extends LitElement implements Layer {
render() {
return html`
<aside
class=${`fixed top-[70px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
class=${`fixed top-[50px] lg:top-[10px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
this.isVisible ? "translate-x-0" : "-translate-x-full"
}`}
>
${this.isPlayerTeamLabelVisible
? html`
<div
class="flex items-center w-full h-8 lg:h-10 text-white py-1 lg:p-2"
@contextmenu=${(e: Event) => e.preventDefault()}
>
Your team:
<span style="color: ${this.playerColor.toRgbString()}">
${this.playerTeam} &#10687;
</span>
</div>
`
: null}
<div class="flex items-center gap-2 space-x-2 text-white mb-2">
<div class="w-6 h-6 cursor-pointer" @click=${this.toggleLeaderboard}>
${this.isLeaderboardShow
@@ -64,12 +105,10 @@ export class GameLeftSidebar extends LitElement implements Layer {
`
: null}
</div>
<div>
<leader-board
class="block mb-2"
.visible=${this.isLeaderboardShow}
></leader-board>
<div class="block lg:flex flex-wrap gap-2">
<leader-board .visible=${this.isLeaderboardShow}></leader-board>
<team-stats
class=${`flex-1 ${this.isTeamLeaderboardShow ? "sm:mt-4 lg:mt-12" : ""}`}
.visible=${this.isTeamLeaderboardShow && this.isTeamGame}
></team-stats>
</div>
src/client/graphics/layers/Leaderboard.ts
+1 -1
View File
@@ -181,7 +181,7 @@ export class Leaderboard extends LitElement implements Layer {
@contextmenu=${(e: Event) => e.preventDefault()}
>
<button
class="mb-2 px-2 py-1 md:px-3 md:py-1.5 text-xs md:text-sm lg:text-base border border-white/20 hover:bg-white/10"
class="mb-2 px-2 py-1 md:px-2.5 md:py-1.5 text-xs md:text-sm lg:text-base border border-white/20 hover:bg-white/10"
@click=${() => {
this.showTopFive = !this.showTopFive;
this.updateLeaderboard();
src/client/graphics/layers/PlayerInfoOverlay.ts
+1 -1
View File
@@ -343,7 +343,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
@contextmenu=${(e) => e.preventDefault()}
>
<div
class="bg-opacity-60 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 text-white text-lg md:text-base ${containerClasses}"
class="bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 text-white text-lg md:text-base ${containerClasses}"
>
${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
src/client/graphics/layers/PlayerTeamLabel.ts
-74
View File
@@ -1,74 +0,0 @@
import { Colord } from "colord";
import { LitElement, html } from "lit";
import { customElement, state } from "lit/decorators.js";
import { GameMode } from "../../../core/game/Game";
import { GameView } from "../../../core/game/GameView";
import { Layer } from "./Layer";
@customElement("player-team-label")
export class PlayerTeamLabel extends LitElement implements Layer {
public game: GameView;
@state()
private isTeamsGameMode: boolean = false;
private isVisible = false;
private playerTeam: string | null = null;
private playerColor: Colord = new Colord("#FFFFFF");
createRenderRoot() {
return this;
}
init() {
this.isTeamsGameMode =
this.game.config().gameConfig().gameMode === GameMode.Team;
if (this.isTeamsGameMode) {
this.isVisible = true;
this.requestUpdate();
}
}
tick() {
if (
this.isTeamsGameMode &&
!this.playerTeam &&
this.game.myPlayer()?.team()
) {
this.playerTeam = this.game.myPlayer()!.team();
if (this.playerTeam) {
this.playerColor = this.game
.config()
.theme()
.teamColor(this.playerTeam);
this.requestUpdate();
}
}
if (!this.game.inSpawnPhase() && this.isVisible) {
this.isVisible = false;
this.requestUpdate();
}
}
render() {
if (!this.isVisible) {
return html``;
}
return html`
<div
class="flex items-center w-full justify-evenly h-8 lg:h-10 top-0 lg:top-4 left-0 lg:left-4 bg-opacity-60 bg-gray-900 rounded-es-sm lg:rounded-lg backdrop-blur-md text-white py-1 lg:p-2"
@contextmenu=${(e) => e.preventDefault()}
>
Your team:
<span style="color: ${this.playerColor?.toRgbString()}"
>${this.playerTeam} &#10687;</span
>
</div>
`;
}
}
src/client/graphics/layers/TopBar.ts
+1 -1
View File
@@ -54,7 +54,7 @@ export class TopBar extends LitElement implements Layer {
return html`
<div
class="fixed top-0 z-50 bg-gray-800/70 text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden backdrop-blur"
class="fixed top-0 z-50 bg-slate-800/40 backdrop-blur-sm shadow-xs text-white text-sm p-1 rounded-ee-sm lg:rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
>
<!-- Pop section (takes 2 columns on desktop) -->
<div
src/client/index.html
-3
View File
@@ -266,9 +266,6 @@
>
<heads-up-message></heads-up-message>
</div>
<div class="fixed left-[10px] top-[10px] z-50 w-36 lg:w-48 items-center">
<player-team-label></player-team-label>
</div>
<div
class="bottom-0 w-full flex-col-reverse sm:flex-row z-50"