diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts index e54219ec4..920cab0f9 100644 --- a/src/client/graphics/layers/PlayerInfoOverlay.ts +++ b/src/client/graphics/layers/PlayerInfoOverlay.ts @@ -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` -
-
${this._playerName}
+
+
+ + +
+
+
${this._playerName}
+
`; } diff --git a/src/client/graphics/layers/UILayer.ts b/src/client/graphics/layers/UILayer.ts index 1fea8bfa2..601a2db27 100644 --- a/src/client/graphics/layers/UILayer.ts +++ b/src/client/graphics/layers/UILayer.ts @@ -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 = '✕'; // 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';