From d6b29a655cc65ab8ba9dfd338effe948fecd0630 Mon Sep 17 00:00:00 2001
From: ilan schemoul <ilanschemoul@gmail.com>
Date: Thu, 27 Feb 2025 22:45:33 +0100
Subject: [PATCH] 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                   | 12 ++++++++++--
 src/client/InputHandler.ts                | 11 ++++++++---
 src/client/graphics/layers/OptionsMenu.ts | 19 ++++++++++++++++---
 src/core/game/UserSettings.ts             |  8 ++++++++
 4 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/src/client/HelpModal.ts b/src/client/HelpModal.ts
index 591f9d724..3aa551995 100644
--- a/src/client/HelpModal.ts
+++ b/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>
diff --git a/src/client/InputHandler.ts b/src/client/InputHandler.ts
index fa727260a..d91aef410 100644
--- a/src/client/InputHandler.ts
+++ b/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));
       }
     }
   }
diff --git a/src/client/graphics/layers/OptionsMenu.ts b/src/client/graphics/layers/OptionsMenu.ts
index af105ce08..95775b779 100644
--- a/src/client/graphics/layers/OptionsMenu.ts
+++ b/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>
     `;
diff --git a/src/core/game/UserSettings.ts b/src/core/game/UserSettings.ts
index 6feb6db59..d6ab3a61b 100644
--- a/src/core/game/UserSettings.ts
+++ b/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());
   }