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.

src/client/HelpModal.ts

@@ -222,7 +222,15 @@ export class HelpModal extends LitElement {
               <tbody class="text-left">
                 <tr>
                   <td>Space</td>
-                  <td>Alternate view</td>
+                  <td>Alternate view (terrain/countries)</td>
+                </tr>
+                <tr>
+                  <td>Shift + left click</td>
+                  <td>Attack (when left click is set to open menu)</td>
+                </tr>
+                <tr>
+                  <td>Ctrl + left click</td>
+                  <td>Open build menu</td>
                 </tr>
                 <tr>
                   <td>Q / E</td>
@@ -292,7 +300,7 @@ export class HelpModal extends LitElement {
                 <li class="mb-4">Pause/Unpause the game - Only available in single player mode.</li>
                 <li class="mb-4">Timer - Time passed since the start of the game.</li>
                 <li class="mb-4">Exit button.</li>
-                <li class="mb-4">Settings - Open the settings menu. Inside you can toggle the Alternate View, Dark Mode, and Emojis.</li>
+                <li class="mb-4">Settings - Open the settings menu. Inside you can toggle the Alternate View, Dark Mode, Emojis and action on left click.</li>
               </ul>
             </div>
           </div>

src/client/InputHandler.ts

@@ -1,4 +1,5 @@
 import { EventBus, GameEvent } from "../core/EventBus";
+import { UserSettings } from "../core/game/UserSettings";
 
 export class MouseUpEvent implements GameEvent {
   constructor(
@@ -83,6 +84,8 @@ export class InputHandler {
   private readonly PAN_SPEED = 5;
   private readonly ZOOM_SPEED = 10;
 
+  private userSettings: UserSettings = new UserSettings();
+
   constructor(
     private canvas: HTMLCanvasElement,
     private eventBus: EventBus,
@@ -265,10 +268,12 @@ export class InputHandler {
     if (dist < 10) {
       if (event.pointerType == "touch") {
         event.preventDefault();
-        console.log("firing context menu event");
-        this.eventBus.emit(new ContextMenuEvent(event.clientX, event.clientY));
-      } else {
+      }
+
+      if (!this.userSettings.leftClickOpensMenu() || event.shiftKey) {
         this.eventBus.emit(new MouseUpEvent(event.x, event.y));
+      } else {
+        this.eventBus.emit(new ContextMenuEvent(event.clientX, event.clientY));
       }
     }
   }

src/client/graphics/layers/OptionsMenu.ts

@@ -16,7 +16,7 @@ const button = ({
   children,
 }) => html`
   <button
-    class="flex items-center justify-center p-1 
+    class="flex items-center justify-center p-1
                                bg-opacity-70 bg-gray-700 text-opacity-90 text-white
                                border-none rounded cursor-pointer
                                hover:bg-opacity-60 hover:bg-gray-600
@@ -96,6 +96,10 @@ export class OptionsMenu extends LitElement implements Layer {
     this.eventBus.emit(new RefreshGraphicsEvent());
   }
 
+  private onToggleLeftClickOpensMenu() {
+    this.userSettings.toggleLeftClickOpenMenu();
+  }
+
   init() {
     console.log("init called from OptionsMenu");
     this.showPauseButton =
@@ -137,8 +141,8 @@ export class OptionsMenu extends LitElement implements Layer {
               children: this.isPaused ? "▶️" : "⏸",
             })}
             <div
-              class="w-14 h-8 lg:w-20 lg:h-10 flex items-center justify-center 
-                              bg-opacity-50 bg-gray-700 text-opacity-90 text-white 
+              class="w-14 h-8 lg:w-20 lg:h-10 flex items-center justify-center
+                              bg-opacity-50 bg-gray-700 text-opacity-90 text-white
                               rounded text-sm lg:text-xl"
             >
               ${this.timer}
@@ -177,6 +181,15 @@ export class OptionsMenu extends LitElement implements Layer {
             title: "Dark Mode",
             children: "🌙: " + (this.userSettings.darkMode() ? "On" : "Off"),
           })}
+          ${button({
+            onClick: this.onToggleLeftClickOpensMenu,
+            title: "Left click",
+            children:
+              "🖱️: " +
+              (this.userSettings.leftClickOpensMenu()
+                ? "Opens menu"
+                : "Attack"),
+          })}
         </div>
       </div>
     `;

src/core/game/UserSettings.ts

@@ -21,6 +21,14 @@ export class UserSettings {
     return this.get("settings.darkMode", false);
   }
 
+  leftClickOpensMenu() {
+    return this.get("settings.leftClickOpensMenu", false);
+  }
+
+  toggleLeftClickOpenMenu() {
+    this.set("settings.leftClickOpensMenu", !this.leftClickOpensMenu());
+  }
+
   toggleEmojis() {
     this.set("settings.emojis", !this.emojis());
   }