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

create exit button

Browse Source
This commit is contained in:
evanpelle
2024-09-02 11:00:17 -07:00
parent daaca23e5c
commit 866934db68
2 changed files with 49 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.txt
+3 -2
View File
@@ -78,7 +78,7 @@
* use better favicon DONE 9/1/2024
* make mediterranion ocean, fix panama canal DONE 9/1/2024
* remove tiny islands DONE 9/1/2024
* Create exit to menu button
* Create exit to menu button DONE 9/2/2024
* show next game in menu
* BUG: attacks starts slow but gets faster
* BUG: sometimes doesn't connect to lobby
@@ -86,10 +86,11 @@
--- v2 Release
* more random names for game id & client id
* Make fake humans
* directed expansion
* win condition & popup
* BUG: tiles get left behind during conquer
* BUG: tiles get left behind during conquer; still problem?
* Load terrain dataImage in background
* BUG: shore tiles left behind during conquer
* BUG: when sending boat to TerraNullius, only takes one tile
src/client/graphics/GameRenderer.ts
+46
View File
@@ -23,6 +23,9 @@ export class GameRenderer {
private theme: Theme
private exitButton: HTMLButtonElement;
constructor(private gs: Game, private terrainRenderer: TerrainRenderer) {
this.theme = gs.config().theme()
this.nameRenderer = new NameRenderer(gs, this.theme)
@@ -56,10 +59,53 @@ export class GameRenderer {
this.territoryContext = this.territoryCanvas.getContext('2d')
this.territoryContext.globalAlpha = 0.4;
this.createExitButton()
requestAnimationFrame(() => this.renderGame());
}
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);
}
onExitButtonClick() {
console.log('Button clicked!');
window.location.reload();
// Add your button action here
}
resizeCanvas() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;