Commit Graph

45 Commits

Author SHA1 Message Date
Vivacious Box 77dddbf3ee New icons (#1287)
## Description:

Add a new pixi layer for rendering structure icons
Add new sprites for structures

![image](https://github.com/user-attachments/assets/d5171b31-c83b-431a-a0f6-87b85b460a3f)

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

Vivacious Box

---------

Co-authored-by: evanpelle <evanpelle@gmail.com>
2025-06-27 17:00:01 -07:00
Aotumuri f905e29ec6 custom flag (1) (#1257)
## Description:
This PR separates only the rendering logic.

The settings and other related parts will be handled when updating the
UI.

The remaining work will be split into two separate PRs.
Once this is done, I’ll move on to the next one.
## 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
2025-06-27 19:44:23 +00:00
VariableVince 8950816b3e Error modal can't be closed on some screens: scale it better (#861)
## Description:

ShowErrorModal doesn't scale on smaller screens. Resulting in the text,
and copy and close buttons being partly or fully out of view. Users
can't read the instructions nor error message, and not even close the
modal so they need to close off their game. This PR brings better
scaling for the modal and text-wrapping to fix this.

Examples with the desync error below.

BEFORE on 1920x1200:


![before](https://github.com/user-attachments/assets/e6a62370-f634-4b90-a561-22d549636284)


AFTER on 1920x1200:

![AFTER on 1920x1200 16 inch
laptop](https://github.com/user-attachments/assets/f62b6c1a-e597-40de-ba0d-a02c9421f8f5)

on mobile:

![AFTER on
mobile](https://github.com/user-attachments/assets/7ef0013d-aef9-4bf3-b4e8-68743c7d5555)

on big tablet:

![AFTER on
tablet](https://github.com/user-attachments/assets/5e061738-55fd-46f3-bec5-91c933920c87)

on mini tablet:

![AFTER on tablet
mini](https://github.com/user-attachments/assets/f15eba6a-fe1f-490b-bc04-63d404950e15)


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

---------

Co-authored-by: tnhnblgl <51187395+tnhnblgl@users.noreply.github.com>
2025-05-24 14:04:12 -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 5ddc25897f Add quick chat (#412)
## Description:

Fixes #480 

## Please complete the following:

- [ ] I have added screenshots for all UI updates
- [ ] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [ ] 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>
2025-05-08 09:00:25 -07:00
Tom 42b6a649ce Use monospace font for private lobby code input (#566)
## Description:
Changes private lobby code input font to be monospace. Parity with lobby
creation screen (#438).

**Before:**

![image](https://github.com/user-attachments/assets/da25cf2c-a8df-4d62-86ae-1eb575ad7bac)

**After:**

![image](https://github.com/user-attachments/assets/a65a0ff8-d48e-4c38-a949-8cc0fc82d383)


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

imdarktom
2025-04-27 17:10:56 -07:00
Aotumuri 3eccbaa982 Added User Settings Modal (#379)
## Description:

This PR adds a **User Settings** modal accessible from the main UI.

Currently available settings include:
- Toggle for Dark Mode
- Writing Speed Multiplier (slider)
- Bug Count (number input)
-  Troop and Worker Ratio (slider)
-  Left Click to Open Menu
-  Emoji toggle

Settings are saved via `localStorage` and persist across sessions.
There's also a hidden Easter Egg...

https://discord.com/channels/1284581928254701718/1286741605310533653/1355900228712009908
<img width="787" alt="スクリーンショット 2025-03-31 8 40 08"
src="https://github.com/user-attachments/assets/a9943834-cf40-4fa6-b828-06a8476172da"
/>

Fixes #482 

## 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
2025-04-14 11:47:50 -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
Tom 608f57b2a9 Improve private lobby code readability (#438)
## Description:
Use mono font for code generated for private lobbies, making it easier
to distinguish some letters (lowercase L's vs. capital I's).
Fixes #391.
Fixes #462 

Before:

![image](https://github.com/user-attachments/assets/0b6f6f15-5e7c-4c31-abed-3301a3f508e9)

After:

![image](https://github.com/user-attachments/assets/abd7b6f7-75e6-4461-85fa-528ebf92cc14)


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

imdarktom
2025-04-12 08:57:04 -07:00
Evan 1435be00c5 bugfix: bots slider invisible on firefox 2025-04-04 16:56:13 -07:00
Evan e1a299c8c5 center hostlobbymodal start button 2025-04-03 17:13:16 -07:00
Aotumuri c314984fbf Fixed SAM Icon in help modal (#398)
## Description:
The SAM launcher icon is missing again, fixed.
## 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:

aotumuri
2025-04-02 10:23:04 -07:00
Aotumuri 745017aee2 Added Gold & Troop donate button (#373)
## 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

Changed the icon for the troop donation button, as it looked like it was
donating gold.
I replaced it with a soldier icon to better reflect its function.
Additionally, I updated the icon below it to clearly represent gold
donation instead.

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

The cat is because of an extension I have put in. Please ignore it.
<img width="345" alt="スクリーンショット 2025-03-30 10 13 06"
src="https://github.com/user-attachments/assets/9088be1a-57b4-4d10-9507-ca8dc0fcc68c"
/>
<img width="396" alt="スクリーンショット 2025-03-30 10 18 10"
src="https://github.com/user-attachments/assets/2555fd24-0bbc-4b40-8f80-ccf43a1e9a75"
/>

---------

Co-authored-by: Evan <evanpelle@gmail.com>
2025-03-31 10:51:05 -07:00
Mittanicz 839835f958 Input fix (#367)
## 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:

<Diessel>

[Image](https://github.com/user-attachments/assets/e5106fbb-59b2-4d86-8ed8-c899adfa20b1)
2025-03-29 13:56:53 -07:00
Mittanicz b20a10564b Range fix (#362)
## 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:

Diessel
![Snímek obrazovky 2025-03-28 v 10 28
49](https://github.com/user-attachments/assets/f514484a-7a2f-443c-b42b-39a0d4694673)
![Snímek obrazovky 2025-03-28 v 10 29
09](https://github.com/user-attachments/assets/f7514d84-b9ca-4d9b-bca5-f6ad587d3793)
2025-03-28 14:40:12 -07:00
Mittanicz ebe142a62a Layout setup (#338)
Create css strucure, clean up the index html and use proper tags.
Visualy minor changes, but this allow us maint better visuals and start
the css standards that will help us future
2025-03-25 08:11:58 -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
NewHappyRabbit aa24d317c8 Added PWA and mobile improvements to the UI 2025-02-24 11:49:58 +02:00
NewHappyRabbit e9eb006cea Added dark mode 2025-02-20 00:48:45 +02:00
evanpelle 633e93f21b use tailwind for frontpage 2025-02-01 12:05:11 -08:00
Evan 348a4a611a add tailwind 2025-02-01 12:05:11 -08:00
Evan 3aeff1df29 improve front page 2025-02-01 12:05:11 -08:00
Evan 95aa222f8e improve front page 2025-02-01 12:05:11 -08:00
evanpelle eb261fe103 make front page mobile friendly 2024-12-31 12:44:31 -08:00
Evan 915359feca updated EventsDisplay to be lit component 2024-11-01 20:12:26 -07:00
evanpelle da3e726b4d make front page mobile friendly, disable leaderboard on mobile 2024-10-17 07:51:12 -07:00
evanpelle 6eaa14da73 create usernameinput lit element 2024-10-12 09:11:29 -07:00
evanpelle d85370dc19 Use vue, migrate emoji table to vue 2024-10-11 17:47:35 -07:00
evanpelle 64d956bda4 new front page UI 2024-10-10 17:27:00 -07:00
evanpelle ee6824de13 disable select and double-tap zoom on mobile 2024-10-06 13:21:32 -07:00
evanpelle 5ca7a146c6 create emoji table (only sends hearts) 2024-10-04 20:06:24 -07:00
evanpelle f121c1d649 make event box mobile friendly, look better 2024-09-30 19:43:55 -07:00
evanpelle 851e12613a create basic radial menu 2024-09-26 16:24:58 -07:00
evanpelle a0353066c9 create EventsDisplay file 2024-09-20 13:14:46 -07:00
evanpelle 7c5ebaf456 created right click handler, refacter renderers 2024-09-16 17:09:01 -07:00
evanpelle f3f3868062 remove unused images, front page mobile-friendly 2024-09-15 19:36:51 -07:00
evanpelle 7b4e54365c added discord link 2024-09-14 21:00:38 -07:00
evanpelle 8f56fea0cd store name, anon has random suffix, color a hash of name 2024-09-11 20:06:55 -07:00
evanpelle f24a4b894a fixed pacing bug, improved expansion 2024-09-09 20:31:45 -07:00
evanpelle adac26a44f Add next game to menu 2024-09-02 11:22:16 -07:00
evanpelle f03542f1d7 switched to pastel theme, improved it 2024-08-26 21:05:10 -07:00
evanpelle 8c902a70b8 added spawn timer bar 2024-08-26 09:13:05 -07:00
evanpelle 1d7c4c996f improved lobby button 2024-08-25 09:57:19 -07:00
evanpelle 453935176e fixed MIME error, wait for css to load 2024-08-25 09:52:40 -07:00
evanpelle f1bddc7eef use overpass font 2024-08-18 20:38:25 -07:00