alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-06-25 08:24:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

have exit button render on top of player info panel

Browse Source
This commit is contained in:
evanpelle
2024-12-18 14:32:29 -08:00
parent 03acaa1ffc
commit d8258f3694
2 changed files with 72 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/PlayerInfoOverlay.ts
+72 -32
View File
@@ -13,48 +13,49 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
private game: Game;
public clientID: ClientID;
public eventBus: EventBus;
public transform: TransformHandler
public transform: TransformHandler;
@state()
private _playerName: string = '';
@state()
private _isAlly: boolean = false
private _isAlly: boolean = false;
@state()
private _isVisible: boolean = false;
init(game: Game) {
this.game = game;
this.eventBus.on(MouseMoveEvent, e => this.onMouseEvent(e))
this.eventBus.on(MouseMoveEvent, e => this.onMouseEvent(e));
}
private onMouseEvent(event: MouseMoveEvent) {
this._isVisible = false
const worldCoord = this.transform.screenToWorldCoordinates(event.x, event.y)
this._isVisible = false;
const worldCoord = this.transform.screenToWorldCoordinates(event.x, event.y);
if (!this.game.isOnMap(worldCoord)) {
return
return;
}
const tile = this.game.tile(worldCoord)
let owner = tile.owner()
const tile = this.game.tile(worldCoord);
let owner = tile.owner();
if (!owner.isPlayer()) {
if (tile.isLand()) {
return
return;
}
const units = this.game.units().filter(u => euclideanDist(worldCoord, u.tile().cell()) < 50).sort(distSortUnit(tile))
const units = this.game.units().filter(u => euclideanDist(worldCoord, u.tile().cell()) < 50).sort(distSortUnit(tile));
if (units.length == 0) {
return
return;
}
owner = units[0].owner()
owner = units[0].owner();
}
const myPlayer = this.game.playerByClientID(this.clientID);
if (myPlayer == null) {
return;
}
this._isVisible = true
this._isAlly = owner == myPlayer || myPlayer.isAlliedWith(owner)
this._playerName = owner.name()
this._isVisible = true;
this._isAlly = owner == myPlayer || myPlayer.isAlliedWith(owner);
this._playerName = owner.name();
}
private onExitButtonClick() {
window.location.reload();
}
tick() {
@@ -77,12 +78,44 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
:host {
display: block;
}
.player-info {
.overlay-container {
position: fixed;
top: 10px;
right: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.controls {
position: relative;
display: flex;
justify-content: flex-end;
width: 40px; /* Same as button width */
margin-bottom: 10px;
}
.exit-button {
width: 40px;
height: 40px;
font-size: 20px;
font-weight: bold;
background-color: rgba(255, 0, 0, 0.4);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
}
.exit-button:hover {
background-color: rgba(255, 0, 0, 0.5);
}
.exit-button:active {
background-color: rgba(255, 0, 0, 0.6);
}
.player-info {
background-color: rgba(30, 30, 30, 0.7);
padding: 8px 12px;
border-radius: 6px;
@@ -90,46 +123,53 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
backdrop-filter: blur(5px);
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
color: white;
font-size: 14px;
min-width: 120px;
text-align: left;
font-size: 18px;
}
.hidden {
opacity: 0;
visibility: hidden;
display: none;
}
.player-name {
font-weight: bold;
margin-bottom: 4px;
}
.player-name.ally {
color: #4CAF50;
}
@media (max-width: 768px) {
.player-info {
.overlay-container {
top: 5px;
right: 5px;
}
.controls {
width: 30px;
}
.player-info {
padding: 6px 10px;
font-size: 12px;
min-width: 100px;
}
.status {
font-size: 10px;
.exit-button {
width: 30px;
height: 30px;
font-size: 16px;
}
}
`;
render() {
return html`
<div class="player-info ${this._isVisible ? '' : 'hidden'}">
<div class="player-name ${this._isAlly ? 'ally' : ''}">${this._playerName}</div>
<div class="overlay-container">
<div class="controls">
<button class="exit-button" @click=${this.onExitButtonClick}>×</button>
<!-- Future buttons can be added here -->
</div>
<div class="player-info ${this._isVisible ? '' : 'hidden'}">
<div class="player-name ${this._isAlly ? 'ally' : ''}">${this._playerName}</div>
</div>
</div>
`;
}
src/client/graphics/layers/UILayer.ts
-39
View File
@@ -57,7 +57,6 @@ export class UILayer implements Layer {
}
init(game: Game) {
this.createExitButton()
this.createWinModal()
this.initRightClickMenu()
this.eventBus.on(WinEvent, (e) => this.onWinEvent(e))
@@ -152,39 +151,6 @@ export class UILayer implements Layer {
button.onmouseout = () => button.style.backgroundColor = '#4A90E2';
}
createExitButton() {
this.exitButton = document.createElement('button');
this.exitButton.innerHTML = '&#10005;'; // HTML entity for "×" (multiplication sign)
this.exitButton.style.position = 'fixed';
this.exitButton.style.top = '20px';
this.exitButton.style.right = '20px';
this.exitButton.style.zIndex = '1000';
this.exitButton.style.width = '40px';
this.exitButton.style.height = '40px';
this.exitButton.style.fontSize = '20px';
this.exitButton.style.fontWeight = 'bold';
this.exitButton.style.backgroundColor = 'rgba(255, 0, 0, 0.4)'; // More translucent red
this.exitButton.style.color = 'white';
this.exitButton.style.border = 'none';
this.exitButton.style.borderRadius = '50%';
this.exitButton.style.cursor = 'pointer';
this.exitButton.style.display = 'flex';
this.exitButton.style.justifyContent = 'center';
this.exitButton.style.alignItems = 'center';
this.exitButton.style.transition = 'background-color 0.3s';
this.exitButton.addEventListener('mouseover', () => {
this.exitButton.style.backgroundColor = 'rgba(255, 0, 0, 0.5)'; // Less translucent on hover
});
this.exitButton.addEventListener('mouseout', () => {
this.exitButton.style.backgroundColor = 'rgba(255, 0, 0, 0.3)'; // Back to more translucent
});
this.exitButton.addEventListener('click', () => this.onExitButtonClick());
document.body.appendChild(this.exitButton);
}
onWinEvent(event: WinEvent) {
consolex.log(`${event.winner.name()} won the game!!}`)
this.showWinModal(event.winner)
@@ -206,11 +172,6 @@ export class UILayer implements Layer {
}
}
onExitButtonClick() {
consolex.log('Button clicked!');
window.location.reload();
}
closeWinModal() {
if (this.winModal) {
this.winModal.style.display = 'none';