Enable the Enable max-len and max-lines eslint rules (#1842)

## Description:

Enable the Enable `max-len` and `max-lines` eslint rules.

Fixes #1785

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

src/client/graphics/layers/ChatDisplay.ts

@@ -125,9 +125,10 @@ export class ChatDisplay extends LitElement implements Layer {
     }
     return html`
       <div
-        class="${this._hidden
-          ? "w-fit px-[10px] py-[5px]"
-          : ""} rounded-md bg-black bg-opacity-60 relative max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-[30vw] lg:w-full lg:w-auto"
+        class="${this._hidden ? "w-fit px-[10px] py-[5px]" : ""} rounded-md
+        bg-black bg-opacity-60 relative max-h-[30vh] flex flex-col-reverse
+        overflow-y-auto w-full lg:bottom-2.5 lg:right-2.5 z-50 lg:max-w-[30vw]
+        lg:w-full lg:w-auto"
         style="pointer-events: auto"
       >
         <div>

src/client/graphics/layers/ControlPanel.ts

@@ -162,7 +162,8 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "w-full sm:max-w-[320px] text-sm sm:text-base bg-gray-800/70 p-2 pr-3 sm:p-4 shadow-lg sm:rounded-lg backdrop-blur"
+          ? "w-full sm:max-w-[320px] text-sm sm:text-base bg-gray-800/70 p-2 " +
+            "pr-3 sm:p-4 shadow-lg sm:rounded-lg backdrop-blur"
           : "hidden"}"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
       >

src/client/graphics/layers/EmojiTable.ts

@@ -64,16 +64,17 @@ export class EmojiTable extends LitElement {
 
     return html`
       <div
-        class="bg-slate-800 max-w-[95vw] max-h-[95vh] pt-[15px] pb-[15px] fixed flex flex-col -translate-x-1/2 -translate-y-1/2 
-                items-center rounded-[10px] z-[9999] top-[50%] left-[50%] justify-center"
+        class="bg-slate-800 max-w-[95vw] max-h-[95vh] pt-[15px] pb-[15px] fixed
+          flex flex-col -translate-x-1/2 -translate-y-1/2 items-center
+          rounded-[10px] z-[9999] top-[50%] left-[50%] justify-center"
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}
         @wheel=${(e: WheelEvent) => e.stopPropagation()}
       >
         <!-- Close button -->
         <button
-          class="absolute -top-2 -right-2 w-6 h-6 flex items-center justify-center
-                  bg-red-500 hover:bg-red-900 text-white rounded-full
-                  text-sm font-bold transition-colors"
+          class="absolute -top-2 -right-2 w-6 h-6 flex items-center
+            justify-center bg-red-500 hover:bg-red-900 text-white rounded-full
+            text-sm font-bold transition-colors"
           @click=${this.hideTable}
         >
           ✕
@@ -88,10 +89,14 @@ export class EmojiTable extends LitElement {
                 ${row.map(
                   (emoji) => html`
                     <button
-                      class="flex transition-transform duration-300 ease justify-center items-center cursor-pointer
-                              border border-solid border-slate-500 rounded-[12px] bg-slate-700 hover:bg-slate-600 active:bg-slate-500 
-                              md:m-[8px] md:text-[60px] md:w-[80px] md:h-[80px] hover:scale-[1.1] active:scale-[0.95]
-                              sm:w-[60px] sm:h-[60px] sm:text-[32px] sm:m-[5px] text-[28px] w-[50px] h-[50px] m-[3px]"
+                      class="flex transition-transform duration-300 ease
+                        justify-center items-center cursor-pointer border
+                        border-solid border-slate-500 rounded-[12px]
+                        bg-slate-700 hover:bg-slate-600 active:bg-slate-500
+                        md:m-[8px] md:text-[60px] md:w-[80px] md:h-[80px]
+                        hover:scale-[1.1] active:scale-[0.95] sm:w-[60px]
+                        sm:h-[60px] sm:text-[32px] sm:m-[5px] text-[28px]
+                        w-[50px] h-[50px] m-[3px]"
                       @click=${() => this.onEmojiClicked(emoji)}
                     >
                       ${emoji}

src/client/graphics/layers/EventsDisplay.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { DirectiveResult } from "lit/directive.js";
@@ -918,7 +919,8 @@ export class EventsDisplay extends LitElement implements Layer {
                 `,
                 onClick: this.toggleHidden,
                 className:
-                  "text-white cursor-pointer pointer-events-auto w-fit p-2 lg:p-3 rounded-md bg-gray-800/70 backdrop-blur",
+                  "text-white cursor-pointer pointer-events-auto w-fit p-2 " +
+                  "lg:p-3 rounded-md bg-gray-800/70 backdrop-blur",
               })}
             </div>
           `
@@ -1015,7 +1017,9 @@ export class EventsDisplay extends LitElement implements Layer {
 
               <!-- Content Area -->
               <div
-                class="rounded-b-none md:rounded-b-md bg-gray-800/70 max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full h-full"
+                class="rounded-b-none md:rounded-b-md bg-gray-800/70
+                  max-h-[30vh] flex flex-col-reverse overflow-y-auto w-full
+                  h-full"
               >
                 <div>
                   <table
@@ -1059,7 +1063,10 @@ export class EventsDisplay extends LitElement implements Layer {
                                       ${event.buttons.map(
                                         (btn) => html`
                                           <button
-                                            class="inline-block px-3 py-1 text-white rounded text-md md:text-sm cursor-pointer transition-colors duration-300
+                                            class="inline-block px-3 py-1
+                                              text-white rounded text-md
+                                              md:text-sm cursor-pointer
+                                              transition-colors duration-300
                             ${btn.className.includes("btn-info")
                               ? "bg-blue-500 hover:bg-blue-600"
                               : btn.className.includes(

src/client/graphics/layers/GameLeftSidebar.ts

@@ -87,9 +87,11 @@ export class GameLeftSidebar extends LitElement implements Layer {
   render() {
     return html`
       <aside
-        class=${`fixed top-[20px] left-0 z-[1000] flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40 backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg transition-transform duration-300 ease-out transform ${
-          this.isVisible ? "translate-x-0" : "-translate-x-full"
-        }`}
+        class=${`fixed top-[20px] left-0 z-[1000] flex flex-col
+          max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-slate-800/40
+          backdrop-blur-sm shadow-xs rounded-tr-lg rounded-br-lg
+          transition-transform duration-300 ease-out transform
+          ${this.isVisible ? "translate-x-0" : "-translate-x-full"}`}
       >
         ${this.isPlayerTeamLabelVisible
           ? html`

src/client/graphics/layers/GameRightSidebar.ts

@@ -109,9 +109,10 @@ export class GameRightSidebar extends LitElement implements Layer {
 
     return html`
       <aside
-        class=${`flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2 bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-tl-lg rounded-bl-lg transition-transform duration-300 ease-out transform ${
-          this._isVisible ? "translate-x-0" : "translate-x-full"
-        }`}
+        class=${`flex flex-col max-h-[calc(100vh-80px)] overflow-y-auto p-2
+          bg-gray-800/70 backdrop-blur-sm shadow-xs rounded-tl-lg rounded-bl-lg
+          transition-transform duration-300 ease-out transform
+          ${this._isVisible ? "translate-x-0" : "translate-x-full"}`}
         @contextmenu=${(e: Event) => e.preventDefault()}
       >
         <div
@@ -139,7 +140,9 @@ export class GameRightSidebar extends LitElement implements Layer {
         <!-- Timer display below buttons -->
         <div class="flex justify-center items-center mt-2">
           <div
-            class="w-[70px] h-8 lg:w-24 lg:h-10 border border-slate-400 p-0.5 text-xs md:text-sm lg:text-base flex items-center justify-center text-white px-1"
+            class="w-[70px] h-8 lg:w-24 lg:h-10 border border-slate-400 p-0.5
+            text-xs md:text-sm lg:text-base flex items-center justify-center
+            text-white px-1"
           >
             ${this.secondsToHms(this.timer)}
           </div>

src/client/graphics/layers/GutterAdModal.ts

@@ -136,7 +136,9 @@ export class GutterAdModal extends LitElement implements Layer {
     return html`
       <!-- Left Gutter Ad -->
       <div
-        class="hidden xl:flex fixed left-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center justify-center"
+        class="hidden xl:flex fixed left-0 top-1/2 transform -translate-y-1/2
+        w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center
+        justify-center"
         style="margin-left: ${this.margin};"
       >
         <div
@@ -147,7 +149,9 @@ export class GutterAdModal extends LitElement implements Layer {
 
       <!-- Right Gutter Ad -->
       <div
-        class="hidden xl:flex fixed right-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center justify-center"
+        class="hidden xl:flex fixed right-0 top-1/2 transform -translate-y-1/2
+        w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center
+        justify-center"
         style="margin-right: ${this.margin};"
       >
         <div

src/client/graphics/layers/Leaderboard.ts

@@ -255,7 +255,9 @@ export class Leaderboard extends LitElement implements Layer {
       </div>
 
       <button
-        class="mt-1 px-1.5 py-0.5 md:px-2 md:py-0.5 text-xs md:text-xs lg:text-sm border border-white/20 hover:bg-white/10 text-white mx-auto block"
+        class="mt-1 px-1.5 py-0.5 md:px-2 md:py-0.5 text-xs md:text-xs
+        lg:text-sm border border-white/20 hover:bg-white/10 text-white mx-auto
+        block"
         @click=${() => {
           this.showTopFive = !this.showTopFive;
           this.updateLeaderboard();

src/client/graphics/layers/MultiTabModal.ts

@@ -121,7 +121,8 @@ export class MultiTabModal extends LitElement implements Layer {
         class="fixed inset-0 z-50 overflow-auto bg-red-500/20 flex items-center justify-center"
       >
         <div
-          class="relative p-6 bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-md w-full m-4 transition-all transform"
+          class="relative p-6 bg-white dark:bg-gray-800 rounded-xl shadow-xl
+          max-w-md w-full m-4 transition-all transform"
         >
           <div class="flex items-center justify-between mb-4">
             <h2 class="text-2xl font-bold text-red-600 dark:text-red-400">

src/client/graphics/layers/NameLayer.ts

@@ -185,7 +185,9 @@ export class NameLayer implements Layer {
       screenPosOld.x - window.innerWidth / 2,
       screenPosOld.y - window.innerHeight / 2,
     );
-    this.container.style.transform = `translate(${screenPos.x}px, ${screenPos.y}px) scale(${this.transformHandler.scale})`;
+    this.container.style.transform =
+      `translate(${screenPos.x}px, ${screenPos.y}px) ` +
+      `scale(${this.transformHandler.scale})`;
 
     const now = Date.now();
     if (now > this.lastChecked + this.renderCheckRate) {
@@ -609,7 +611,8 @@ export class NameLayer implements Layer {
     // Position element with scale
     if (render.location && render.location !== oldLocation) {
       const scale = Math.min(baseSize * 0.25, 3);
-      render.element.style.transform = `translate(${render.location.x}px, ${render.location.y}px) translate(-50%, -50%) scale(${scale})`;
+      render.element.style.transform =
+        `translate(${render.location.x}px, ${render.location.y}px) translate(-50%, -50%) scale(${scale})`;
     }
   }
 

src/client/graphics/layers/OptionsMenu.ts

@@ -205,7 +205,9 @@ export class OptionsMenu extends LitElement implements Layer {
         </div>
 
         <div
-          class="options-menu flex flex-col justify-around gap-y-3 mt-2 bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md ${!this
+          class="options-menu flex flex-col justify-around gap-y-3 mt-2
+          bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md
+          ${!this
             .showSettings
             ? "hidden"
             : ""}"

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -356,7 +356,9 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         @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-sm 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) : ""}

src/client/graphics/layers/RadialMenu.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines */
 import * as d3 from "d3";
 import backIcon from "../../../../resources/images/BackIconWhite.svg";
 import { EventBus, GameEvent } from "../../../core/EventBus";
@@ -149,7 +150,9 @@ export class RadialMenu implements Layer {
       .style("position", "absolute")
       .style("top", "50%")
       .style("left", "50%")
-      .style("transition", `top ${this.config.menuTransitionDuration}ms ease, left ${this.config.menuTransitionDuration}ms ease`)
+      .style("transition", `top ${
+        this.config.menuTransitionDuration}ms ease, left ${
+        this.config.menuTransitionDuration}ms ease`)
       .style("transform", "translate(-50%, -50%)")
       .style("pointer-events", "all")
       .on("click", (event) => this.hideRadialMenu());

src/client/graphics/layers/SettingsModal.ts

@@ -188,7 +188,8 @@ export class SettingsModal extends LitElement implements Layer {
 
           <div class="p-4 space-y-3">
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onTerrainButtonClick}"
             >
               <img src=${treeIcon} alt="treeIcon" width="20" height="20" />
@@ -210,7 +211,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleEmojisButtonClick}"
             >
               <img src=${emojiIcon} alt="emojiIcon" width="20" height="20" />
@@ -232,7 +234,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleDarkModeButtonClick}"
             >
               <img
@@ -259,7 +262,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleSpecialEffectsButtonClick}"
             >
               <img
@@ -286,7 +290,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleStructureSpritesButtonClick}"
             >
               <img
@@ -313,7 +318,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleRandomNameModeButtonClick}"
             >
               <img src=${ninjaIcon} alt="ninjaIcon" width="20" height="20" />
@@ -335,7 +341,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onToggleLeftClickOpensMenu}"
             >
               <img src=${mouseIcon} alt="mouseIcon" width="20" height="20" />
@@ -357,7 +364,8 @@ export class SettingsModal extends LitElement implements Layer {
             </button>
 
             <button
-              class="flex gap-3 items-center w-full text-left p-3 hover:bg-slate-700 rounded text-white transition-colors"
+              class="flex gap-3 items-center w-full text-left p-3
+              hover:bg-slate-700 rounded text-white transition-colors"
               @click="${this.onTogglePerformanceOverlayButtonClick}"
             >
               <img
@@ -387,7 +395,8 @@ export class SettingsModal extends LitElement implements Layer {
 
             <div class="border-t border-slate-600 pt-3 mt-4">
               <button
-                class="flex gap-3 items-center w-full text-left p-3 hover:bg-red-600/20 rounded text-red-400 transition-colors"
+                class="flex gap-3 items-center w-full text-left p-3
+                hover:bg-red-600/20 rounded text-red-400 transition-colors"
                 @click="${this.onExitButtonClick}"
               >
                 <img src=${exitIcon} alt="exitIcon" width="20" height="20" />

src/client/graphics/layers/SpawnAd.ts

@@ -117,7 +117,8 @@ export class SpawnAd extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed bottom-0 left-0 w-full min-h-[100px] bg-gray-900 border border-gray-600 flex items-center justify-center z-50"
+        class="fixed bottom-0 left-0 w-full min-h-[100px] bg-gray-900 border
+        border-gray-600 flex items-center justify-center z-50"
       >
         <div
           id="${AD_CONTAINER_ID}"

src/client/graphics/layers/UnitDisplay.ts

@@ -104,7 +104,9 @@ export class UnitDisplay extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-[1100] bg-gray-800/70 backdrop-blur-sm border border-slate-400 rounded-lg p-2 hidden lg:block"
+        class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-[1100]
+        bg-gray-800/70 backdrop-blur-sm border border-slate-400 rounded-lg p-2
+        hidden lg:block"
       >
         <div class="grid grid-rows-1 auto-cols-max grid-flow-col gap-1">
           ${this.renderUnitItem(cityIcon, this._cities, UnitType.City, "city")}