alois/OpenFrontIO
1
0
Fork 0
mirror of https://github.com/openfrontio/OpenFrontIO.git synced 2026-08-19 02:04:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): migrate tailwindcss v3 to v4 (#2735)

Browse Source 
## Description:

migrate tailwindcss v3 to v4

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

wraith4081

---------

Co-authored-by: iamlewis <lewismmmm@gmail.com>
Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
This commit is contained in:
Wraith
2026-01-06 14:21:52 -08:00
committed by GitHub
co-authored by iamlewis Ryan
parent 24716f848d
commit e79c805804
56 changed files with 999 additions and 1201 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/client/graphics/layers/PlayerInfoOverlay.ts
+7 -7
View File
@@ -203,7 +203,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
width="20"
height="20"
alt="${translateText(description)}"
style="vertical-align: middle;"
class="align-middle"
/>
<span class="w-full text-right p-1"
>${player.totalUnitLevels(type)}</span
@@ -285,7 +285,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
alt=${translateText("player_info_overlay.alliance_timeout")}
width="20"
height="20"
style="vertical-align: middle;"
class="align-middle"
/>
${this.allianceExpirationText(alliance)}
</span>`;
@@ -318,7 +318,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
${player.cosmetics.flag
? player.cosmetics.flag!.startsWith("!")
? html`<div
class="h-8 mr-1 aspect-[3/4] player-flag"
class="h-8 mr-1 aspect-3/4 player-flag"
${ref((el) => {
if (el instanceof HTMLElement) {
requestAnimationFrame(() => {
@@ -328,7 +328,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
})}
></div>`
: html`<img
class="h-8 mr-1 aspect-[3/4]"
class="h-8 mr-1 aspect-3/4"
src=${"/flags/" + player.cosmetics.flag! + ".svg"}
/>`
: html``}
@@ -390,7 +390,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
alt=${translateText("player_info_overlay.gold")}
width="15"
height="15"
style="vertical-align: middle;"
class="align-middle"
/>
<span class="w-full text-center"
>${renderNumber(player.gold())}</span
@@ -514,11 +514,11 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
return html`
<div
class="block lg:flex fixed top-[150px] right-4 w-full z-50 flex-col max-w-[180px]"
class="block lg:flex fixed top-37.5 right-4 w-full z-50 flex-col max-w-45"
@contextmenu=${(e: MouseEvent) => e.preventDefault()}
>
<div
class="bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-lg shadow-lg transition-all duration-300 text-white text-lg md:text-base ${containerClasses}"
class="bg-gray-800/70 backdrop-blur-xs shadow-xs rounded-lg shadow-lg transition-all duration-300 text-white text-lg md:text-base ${containerClasses}"
>
${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}