Disabled right-clicks on all in-game UI elements

.gitignore

@@ -4,4 +4,5 @@ out/
 TODO.txt
 resources/images/.DS_Store
 resources/.DS_Store
-.env
+.env
+.prettierrc

src/client/graphics/layers/BuildMenu.ts

@@ -205,7 +205,10 @@ export class BuildMenu extends LitElement {
 
   render() {
     return html`
-      <div class="build-menu ${this._hidden ? "hidden" : ""}">
+      <div
+        class="build-menu ${this._hidden ? "hidden" : ""}"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
         ${buildTable.map(
           (row) => html`
             <div class="build-row">

src/client/graphics/layers/ControlPanel.ts

@@ -116,6 +116,7 @@ export class ControlPanel extends LitElement implements Layer {
         class="${this._isVisible
           ? "w-full text-sm lg:text-m lg:w-72 bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg rounded-lg backdrop-blur"
           : "hidden"}"
+        @contextmenu=${(e) => e.preventDefault()}
       >
         <div class="hidden lg:block bg-black/30 text-white mb-4 p-2 rounded">
           <div class="flex justify-between mb-1">

src/client/graphics/layers/Leaderboard.ts

@@ -80,7 +80,7 @@ export class Leaderboard extends LitElement implements Layer {
         name: myPlayer.displayName(),
         position: place,
         score: formatPercentage(
-          myPlayer.numTilesOwned() / this.game.numLandTiles(),
+          myPlayer.numTilesOwned() / this.game.numLandTiles()
         ),
         gold: renderNumber(myPlayer.gold()),
         isMyPlayer: true,
@@ -180,7 +180,10 @@ export class Leaderboard extends LitElement implements Layer {
     //   </div>
     // `;
     return html`
-      <div class="leaderboard ${this._hidden ? "hidden" : ""}">
+      <div
+        class="leaderboard ${this._hidden ? "hidden" : ""}"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
         <table>
           <thead>
             <tr>
@@ -202,7 +205,7 @@ export class Leaderboard extends LitElement implements Layer {
                   <td>${player.score}</td>
                   <td>${player.gold}</td>
                 </tr>
-              `,
+              `
             )}
           </tbody>
         </table>

src/client/graphics/layers/OptionsMenu.ts

@@ -64,7 +64,10 @@ export class OptionsMenu extends LitElement implements Layer {
       return html``;
     }
     return html`
-      <div class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto">
+      <div
+        class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
         <div
           class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md"
         >

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -232,7 +232,10 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
       : "opacity-0 invisible pointer-events-none";
 
     return html`
-      <div class="flex w-full  z-50 flex flex-col">
+      <div
+        class="flex w-full  z-50 flex flex-col"
+        @contextmenu=${(e) => e.preventDefault()}
+      >
         <div
           class="bg-opacity-70 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
         >

src/client/graphics/layers/RadialMenu.ts

@@ -132,7 +132,10 @@ export class RadialMenu implements Layer {
       .style("position", "fixed")
       .style("display", "none")
       .style("z-index", "9999")
-      .style("touch-action", "none");
+      .style("touch-action", "none")
+      .on("contextmenu", (e) => {
+        e.preventDefault();
+      });
 
     const svg = this.menuElement
       .append("svg")