Commit Graph

40 Commits

Author SHA1 Message Date
bijx 6887ae598f Radial menu instructions updated with new Troop/Gold donation icons (#2769)
## Description:

Updates the instructions Help Menu to update the ally radial menu
screenshot to show the new gold and troop donation icons, as well as
what they do. Related to #2708

<img width="1656" height="974" alt="image"
src="https://github.com/user-attachments/assets/365e0fe5-6854-4cac-8288-039a05cf4905"
/>


## 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

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

bijx
2026-01-02 20:28:12 +00:00
Ryan f1561df470 Bomb Direction (#2435)
Resolves #2434 

## Description:

Allows bomb direction to be inverted by pressing a hotkey - currently
"U".

**Check the issue for screenshots / videos.**

## 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

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

w.o.n

---------

Co-authored-by: Evan <evanpelle@gmail.com>
Co-authored-by: iamlewis <lewismmmm@gmail.com>
2025-12-29 09:03:46 -08:00
bijx c77ed5f8b1 Feat: Keybind user settings directly update instruction page hotkeys (#2669)
## Description:

Currently the instructions page not only has hardcoded keybinds for the
hotkeys section, but they're also not updated (`1` and `2` are written
as decreasing and increasing attack ratio instead of `T` and `Y`). This
fix introduces a function in the `HelpModal` to get the keybinds from
the local storage and render the keys in the instructions section
dynamically. Special keys (like Arrow keys and Shift) are handled, as
well as support for the keys on a Mac computer (i.e. `⌘`).

### Video Demo


https://github.com/user-attachments/assets/2d6c6ee9-5e5d-4c7e-83df-363a345afe4d



## 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

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

bijx
2025-12-24 14:36:58 +00:00
Mark 0c9149e5b7 Add missing factory description in instructions (fixes #1974) (#2005)
## Description:

Added missing factory description to instructions and improved some
instruction texts. Fixes #1974.

![Screenshot 2025-09-04
222654](https://github.com/user-attachments/assets/8a33dee6-86d4-4ffe-b5f6-695be28d580f)

## 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

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

---------

Co-authored-by: izub <3972940+izub@users.noreply.github.com>
2025-09-05 19:56:43 +00:00
Kipstz c3576a50b9 Add auto-upgrade buildings feature with middle mouse click (#1597)
## Description:

This PR implements a new feature allowing automatic upgrade of the
nearest building using the middle mouse button. This feature greatly
simplifies the upgrade process that previously required a right-click +
building recreation.

## 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 have read and accepted the CLA agreement (only required once).

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

Kipstzz

---------

Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>
2025-09-03 16:00:22 -07:00
Tyler Hanavan 15d0fd5b64 Allow main menu modals to be closed by clicking escape (#1617)
## Description:



Allow the main menu modals to be closed by clicking the Escape key. The
manner by which this change achieves this is by adding a
connectedCallback to add a keydown EventListener, which closes the modal
on clicking Escape.

Relevant issue: #1586 

My earlier PR was only for the in-game modals, as they can access the
Event Bus and receive the CloseViewEvent.
https://github.com/openfrontio/OpenFrontIO/pull/1604

As mentioned, this PR differs in that it does not use the Event Bus
because these are not in-game modals. The main menu modals do not have
access to the event bus.

Affected modals for this PR.
- UserSettingModal.ts
- TerritoryPatternsModal.ts
- SingePlayerModal.ts
- NewsModal.ts
- LanguageModal.ts
- JoinPrivateLobbyModal.ts
- HostLobbyModal.ts
- HelpModal.ts
- FlatInput.ts








## 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 have read and accepted the CLA agreement (only required once).

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

slyty

---------

Co-authored-by: Antoine <antoine.gannat@gmail.com>
2025-08-02 04:36:03 -04:00
evanpelle 3b8a36166a Remove workers & troop ratio bar, only have troops (#1676)
## Description:

The troop/worker ratio bar is almost never changed. so remove it and the
entire concept of workers. Now there is just troops.

Now players get a consistent 1k/s gold.

## 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 have read and accepted the CLA agreement (only required once).

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

evan
2025-08-01 16:06:59 -07:00
falc 15a895c724 lazy loading and current data var (#988)
## Description:
Improved loading perfomance a little bit
## 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

## Please put your Discord username so you can be contacted if a bug or
regression is found:
![Screenshot from 2025-06-01
01-58-58](https://github.com/user-attachments/assets/6d74edc8-4de3-4b1f-ab9e-a61afb449a08)

@qqkedsi
2025-06-11 02:26:40 +00:00
Christopher Mesona 063574c224 fix: correct mac modifier and emoji key detection in input handler (#1118)
## Description:

Fixes Command and Option Keys for Mac. Shows this modification in help


![image](https://github.com/user-attachments/assets/81f884c2-6929-48cf-a8e5-3fde6290df34)

## 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

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

George

Co-authored-by: cmesona <christopher.mesona@ubisoft.com>
2025-06-09 14:41:47 -07:00
Erwan Huon 2c31d99521 Fix text overflow in instructions for longer translations (#971)
## Description:

This pull request addresses a layout issue where text in instructions
(player icon) would overflow or be cut off, especially when translated
into languages with longer word structures (e.g., Dutch, German, French,
...)


![image](https://github.com/user-attachments/assets/8fe77f1c-91e1-44ad-91b4-2dbec720fee3)
_Before_ (web app view)



![image](https://github.com/user-attachments/assets/5c867453-4b3c-49e2-b45d-a3ec5af8c2ab)
_After_ (mobile layout)

### 🔧 Changes made:
Removed fixed height classes h-8 and md:h-10 from description
containers.

Allowed natural text wrapping and height growth by relying on min-h only
where needed.

Added text-center for better alignment and break-words to handle long
words gracefully.

### 🧪 Tested in:

Dutch 

German

French

English

Responsive layouts (mobile and desktop)

## 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 -> UI only
- [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:

RTHOne
2025-06-02 10:43:57 -07:00
VariableVince 866ff7c487 Rename helpModal images so CDN cache is refreshed on commit (#810)
## Description:

Overwritten images (same file name) from PR
https://github.com/openfrontio/OpenFrontIO/pull/785 took more than a day
to all be shown in Instructions (helpModal) on .dev. Prevent this from
happening on commit to prod by renaming them.

There's talk about cache busting but that isn't implemented (yet) for
now.

Two of the 7 renamed ones:

![afbeelding](https://github.com/user-attachments/assets/71f95659-71ce-4504-9b21-bd02e67c0786)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [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:

tryout33
2025-05-18 14:13:25 -07:00
VariableVince 01ef525e11 Update Instructions and text in Build menu/Player panel (#785)
## Description:

New images in Instructions where needed for:
- event panel: wasn't mentioned yet
- infopanel changed: quick chat, donate gold, stop/start trading etc
- player icons: traitor, embargo, requesting alliance
- radial menu: now differs between enemy/ally
- leaderboard: was changed
- options: time display was changed, cookie preferences button is now
visible so kept that in the new image

Some justifcations of part of the textual changes:
- Trade: info was already behind and now updated to include changes from
PR https://github.com/openfrontio/OpenFrontIO/pull/707
- Retreats: weren't yet mentioned. Added this to new info about Event
panel. Including https://github.com/openfrontio/OpenFrontIO/pull/699,
and not-yet-but-soon merged PR
https://github.com/openfrontio/OpenFrontIO/pull/740 and
https://github.com/openfrontio/OpenFrontIO/pull/705
- Radial Menu: close button has been replaced, explain that
right-clicking closes it now.
- Traitor: being a traitor and its consequences, like the changed
defense debuff and effects on trade.
- SAM: launcher hit chanches % changed.
- Port: Battleships > Warships and other changes.
- Warship: made more clear that only enemy trade ships/warships/boats
are captured/destroyed. Made 'attack-click' more clear.
- Boat: the word Boat was used, not Transport ship. While on server and
in code it is called a Transport (ship) too. Tried to clear this up.
Since it is now explained n Instructions, it doesn't have to be
clarified per se elsewhere. Like in Build menu for Warship it says
"Captures trade ships, destroys ships and boats" which can stay this way
as it is now assumed knowledge that boat = transport.
- More uniform capitalisation for 'Openfront' terms: capitalization was
used differently across terms like Info panel and build menu, Alternate
view and Alternate View. Other instances are more ambiguous like "Small
explosive bomb that destroys territory, buildings, ships and boats"
which i kept as is.
- Embargo: the word 'embargo' was deliberately removed earlier, because
it wasn't always understood by target audience
(https://github.com/openfrontio/OpenFrontIO/pull/147). But some remnants
were left. Using 'stop trading' in all but one spot now: it's used as
one-word explanation for the Dollar stop sign player icon, just like
other icons also have short 'Ally' 'Traitor' etc. So the players who do
use the word embargo still have one reference left.

- Build menu: left Warship description as is (see 'Boat:' above).
Updated Port description from "Sends trade ships to allies to generate
gold" to "Sends trade ships to generate gold". Trade is not only with
allies anymore. And there's more details that are in Instructions like
the effects stop/start trading, that don't have to be in the Build menu.
This lessens the chances of having to change the Port description in
Build menu again.

- Player info: changed "Embargo against you" to "Stopped trade with you"
(see 'Embargo:' above).

Keys that need to be (re)translated in MLS:
- NEW keys: info_chat, info_trade, ally_donate_gold, build_menu_desc,
icon_embargo, icon_request, ui_playeroverlay, ui_playeroverlay_desc,
ui_events, ui_events_desc, ui_events_alliance, ui_events_attack,
ui_events_quickchat
- UPDATED keys: info_enemy_desc, ally_betray, build_port_desc,
build_warship_desc, build_sam_desc, icon_crown, icon_traitor,
radial_boat, radial_build, build_menu.desc.port, embargo,
option_settings, build_defense_desc, radial_desc, ui_leaderboard_desc

Font looks weird in screenshots because of zoom 40% in browser to
capture it all:
![Instructions
1](https://github.com/user-attachments/assets/d349bb12-f0ec-407d-b29f-68b25cf98dc1)
![Instructions
2](https://github.com/user-attachments/assets/0d7753b7-99a6-41f3-99d7-182cf1ef57f3)
![Instructions
3](https://github.com/user-attachments/assets/9087f2e3-8e8e-4c77-8ec4-a2410e15d3d3)
![Instructions
4](https://github.com/user-attachments/assets/132c5b61-d211-4fbe-82a9-508feef1ad37)
![Instructions
5](https://github.com/user-attachments/assets/decde07b-9c63-4520-a845-109810c106a4)


![afbeelding](https://github.com/user-attachments/assets/10d12b20-48e9-406e-b3a3-01dbf5a76642)

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [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:

tryout33

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Summary by CodeRabbit

- **New Features**
- Added new UI elements and icons for alliance requests, embargo status,
and gold donation in the help modal and player info panels.
- Introduced detailed sections in the help modal for events, player
overlays, and expanded build menu explanations.

- **Improvements**
- Enhanced and clarified descriptions for leaderboard, event panels,
player overlays, ally betrayal, and build menu items.
- Improved visual grouping, layout, and styling consistency in the help
modal and across UI icons.

- **Style**
- Updated and unified image and icon styles for consistent appearance in
the help modal.
- Added new CSS classes for modal images and icons; removed fixed-size
radial menu image style.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2025-05-17 21:04:33 -07:00
Aotumuri 4c777412b6 Improve Key Interaction Visibility (#428)
## Description:
Enhanced the visual clarity of key inputs using custom CSS.
Keyboard keys now appear more distinct and intuitive, making the help
modal easier to understand at a glance.
Keys can be changed easily.

Fixes #477 

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [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:

<DISCORD USERNAME>
aotumuri(.w. / (๑-̀ㅂ-́)و✧)
2025-04-12 09:34:15 -07:00
kanekane0448 a97a608dce Add Alt + Click hotkey for sending emotes (#408)
## Description:

Allows the player to Alt + Click to send emotes to other players or
themself in order to ease communication.
Of course, the hotkey can be something different. Alt + Click is just a
suggestion.


![image](https://github.com/user-attachments/assets/9762c4f0-f62d-4c39-ba35-468ac3f5ddaa)

## Please complete the following:

- [ x ] I have added screenshots for all UI updates
- [ 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:

kanekane0448

PS: The new emoji table looks really good!

---------

Co-authored-by: kanekane0448 <no@mail.pls>
2025-04-04 10:15:59 -07:00
Aotumuri 607e5b5ff0 MLS-PACK (#355)
## Please complete the following:

- [x] I have added screenshots for all UI updates
- [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

This is commit pack
This PR refactors and improves the language selection experience:
• Centralizes all language-related logic in LangSelector.ts &
LanguageModal.ts
	•	Redesigns the language selection UI for better UX across devices
	•	Adds new translations and supports more languages
Changes .w.
• Language selection is now handled entirely inside LangSelector.ts &
LanguageModal.ts
	•	Prevents background scrolling when open
	•	Highlights the current language at the top
	•	Always shows English second
	•	Shows browser language third (if different from current)
	•	All other languages are sorted alphabetically by English name
	•	Debug option is shown at the end when pressing D
	•	The language list is scrollable when it exceeds screen height
	
Supported Languages
["en", "ja", "fr", "bg", "nl", "ru", "ua", "de"]

Added Translation Keys
```
"lang": {
  "en": "English",
  "native": "English",
  "svg": "xx"
},
"map": {
  "map": "Map"
},
"game_starting_modal": {
  "title": "Game is Starting...",
  "desc": "Preparing for the lobby to start. Please wait."
},
"difficulty": {
  "difficulty": "Difficulty"
}
```

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

Translation collaborator
- Nikola123 (He was a very big help from setting up the translation site
to adding the json. Thank you so much!)
I don't have permission from my collaborators to display their names
here, so I'll put the discord link here

https://discord.com/channels/1284581928254701718/1352553113612980224/1352553113612980224
- tryout33

Collaborators from other servers.
- CCC Group (This is not Culture Convenience Club. Think of it like a
server where developers of various games are playing.)
- People who fixed the UI and found bugs.
meow02952 (discord id) <- This person also gave me a code suggestion.
Thanks!
moon_spear (discord id)
ww_what_ww (discord id)
Azuna (he doesn't have discord account)
- People who corrected translations, etc.
_kyoyume_ (discord id)
_ultrasuper_ (discord id)
grueg (he doesn't have discord account)

# If I forgot to include your name, or if you’d like your name to be
added, please let me know via Gmail or Discord.

---------

Co-authored-by: Duwibi <86431918+Duwibi@users.noreply.github.com>
2025-04-02 20:37:36 -07:00
Mittanicz 6678d6e36e Image optimalization (#343)
I have minify images and convert them to webp format that reduce size
and keep quality.
Reduce size of bg image since its already blured by css so no need to
have it that big.

Reduce size of thumbs and helper images in helper modals should be fine
since they will not exceed the container size. Even that make them
larger than containter just to be safe
2025-03-26 10:05:45 -07:00
Mittanicz 166ef92970 Create base components button, modal .. (#331)
Create base components with shared styles, as start of make ui better.
For now shoul look same but underhood new copoments are used.

This should be first PR that handle this and many more comes. I am in
rush due conflict with other ppl, but should work as i tested.

Testing again and look at structure

Main goal i have global css not scope in component die loading times and
size of elements. (Modal due nature of lit and shadow dom is exception,
maybe later find better way).

Documenting the components will happen later as base components
establish their usage.
2025-03-24 10:34:27 -07:00
Aotumuri c4614fe0ba Add multi-language support to the start screen and help-modal (#305)
This pull request adds multi-language support to the start screen.
Languages are managed via JSON files, making it easy to add new
languages in the future.

I added a basic language selection button for switching between
languages.
However, I believe it would benefit from a better design — my design
skills are limited, so I apologize in advance.

Looking forward to your feedback and possible design improvements.
2025-03-21 13:51:04 -07:00
PilkeySEK ebc2b74049 Add instructions for SAM Launcher (#293)
In need of a SAM icon 🙏
2025-03-19 09:03:40 -07:00
Hristiyan Simeonov 65dd485646 FIX: Removed duplicate hotkey instruction (#277) 2025-03-18 12:17:38 -07:00
Maeght Loan a3b5652cf2 remove duplicated instruction 2025-03-07 22:05:23 +00:00
Evan 4c8eeb0cc1 merge branch v0.17.3 2025-03-06 15:46:57 -08:00
evanpelle c31a33a04c Merge pull request #154 from nwcubeok/close-button-sticky-modal
Close button sticky in every modal #150
2025-03-06 09:04:40 -08:00
nwcubeok 5c9d266623 Close button sticky in every modal 2025-03-06 17:25:28 +01:00
ilan schemoul 264bfa0c2c feat: rename embargo to start/stop trading 2025-03-06 01:04:25 +01:00
evanpelle db3f62d0b1 Merge pull request #88 from ilan-schemoul/click
Left click now open menu (double click or shift+click to attack)
2025-03-02 13:38:09 -08:00
NewHappyRabbit 9b85651ad8 Fixed dark mode class being added in different places (body and html elements).
Fixed flag "None" (xx.svg) being able to be set and used ingame.

All menu modals will now close if you click outside of them.

Fixed info icon in instructions.

Added an icon to show the number of new events that happened while the events panel is hidden.

Removed opacity from the svg icons files and added it to the player-icons div, making them have the same opacity and being more visible.
2025-03-02 09:39:36 -08:00
NewHappyRabbit 5d163a765c Added CTRL+CLICK hotkey to instructions 2025-03-02 09:29:10 -08:00
NewHappyRabbit d29438ae69 Added hotkey 'C' to center camera on player 2025-03-02 09:29:10 -08:00
ilan schemoul d6b29a655c feat: left click now opens menu (to avoid misclicks), shift+left click is attack
It happens very frequently that I misclick (meant to click on neighbor,
mean to click modal, sensitive touchpad and many others) and ruin my
game (and another player's). So by default left click opens the menu. As
the attack button is in the middle you can just double click to attack.
You can also shift+click to attack.
I have updated the Help modal to document all that + the existing (just
discovered in the code) ctrl+click to open build menu.
2025-03-02 17:56:14 +01:00
Andreas Rey Malissein b1eb375c52 add shift + scroll command in HelpModal hotkeys table 2025-03-02 13:12:18 +01:00
NewHappyRabbit c7c38dabfc Added CTRL+CLICK hotkey to instructions 2025-02-27 00:19:31 +02:00
NewHappyRabbit c724d4af58 Added hotkey 'C' to center camera on player 2025-02-25 22:53:48 +02:00
evanpelle dd78fd70de Merge pull request #77 from NewHappyRabbit/fix-modals-mobile
Reduced modals height on mobile, fixed public lobby button bug
2025-02-24 13:25:46 -08:00
NewHappyRabbit d9beeb8c60 Reduced modals height on mobile, fixed public lobby button bug 2025-02-24 20:52:06 +02:00
PilkeySEK 43c2c502be fix radial menu image dimensions 2025-02-24 19:01:01 +01:00
NewHappyRabbit aa24d317c8 Added PWA and mobile improvements to the UI 2025-02-24 11:49:58 +02:00
NewHappyRabbit 952c6844c2 Fix: Modal was set to auto open 2025-02-21 01:25:42 +02:00
NewHappyRabbit ba3b5600da Fixed css for mobile 2025-02-21 01:10:56 +02:00
NewHappyRabbit 1e38e5565c Added instructions in modal in main menu 2025-02-21 00:58:07 +02:00