Merge pull request #88 from ilan-schemoul/click

Left click now open menu (double click or shift+click to attack)

src/client/HelpModal.ts

@@ -232,7 +232,15 @@ export class HelpModal extends LitElement {
                 </tr>
                 <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>C</td>
@@ -306,7 +314,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(
@@ -87,6 +88,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,
@@ -276,10 +279,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

@@ -20,6 +20,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());
   }