Improve the alternate view by adding geopolitical colors for territories and hover-based highlighting (#1320)

## Description:

Improve existing alternate view (space bar).
It now displays territories in different colours based on their status
(enemy, allied, or your own).
Hovering over a territory highlights it. I tested several approaches,
and this one delivers excellent performance (on mobile too).
![VERT_OpenFront (ALPHA)
(6)](https://github.com/user-attachments/assets/40eeb4cd-e1dc-4daf-9165-b41f8693494c)


![image](https://github.com/user-attachments/assets/53a24369-698d-4213-9b4c-cb736feee22d)

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


Related issue:
https://github.com/openfrontio/OpenFrontIO/issues/900
https://github.com/openfrontio/OpenFrontIO/issues/484

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

devalnor
This commit is contained in:
maxime.io
2025-07-25 19:50:26 -04:00
committed by GitHub
parent 79c638c1ca
commit 71fe6a81a0
4 changed files with 227 additions and 21 deletions
+8
View File
@@ -11,6 +11,13 @@ export class MouseUpEvent implements GameEvent {
) {}
}
export class MouseOverEvent implements GameEvent {
constructor(
public readonly x: number,
public readonly y: number,
) {}
}
/**
* Event emitted when a unit is selected or deselected
*/
@@ -377,6 +384,7 @@ export class InputHandler {
this.pointers.set(event.pointerId, event);
if (!this.pointerDown) {
this.eventBus.emit(new MouseOverEvent(event.clientX, event.clientY));
return;
}