fix for Change arrow control to wasd kevinshen56714#43

client/src/characters/MyPlayer.ts

@@ -12,6 +12,7 @@ import { phaserEvents, Event } from '../events/EventCenter'
 import store from '../stores'
 import { pushPlayerJoinedMessage } from '../stores/ChatStore'
 import { ItemType } from '../../../types/Items'
+import { NavKeys } from '../../../types/KeyboardState'
 
 export default class MyPlayer extends Player {
   private playContainerBody: Phaser.Physics.Arcade.Body
@@ -42,7 +43,7 @@ export default class MyPlayer extends Player {
 
   update(
     playerSelector: PlayerSelector,
-    cursors: Phaser.Types.Input.Keyboard.CursorKeys,
+    cursors: NavKeys,
     keyE: Phaser.Input.Keyboard.Key,
     keyR: Phaser.Input.Keyboard.Key,
     network: Network
@@ -120,13 +121,13 @@ export default class MyPlayer extends Player {
         const speed = 200
         let vx = 0
         let vy = 0
-        if (cursors.left?.isDown) vx -= speed
-        if (cursors.right?.isDown) vx += speed
-        if (cursors.up?.isDown) {
+        if (cursors.left?.isDown || cursors.A?.isDown) vx -= speed
+        if (cursors.right?.isDown || cursors.D?.isDown) vx += speed
+        if (cursors.up?.isDown || cursors.W?.isDown) {
           vy -= speed
           this.setDepth(this.y) //change player.depth if player.y changes
         }
-        if (cursors.down?.isDown) {
+        if (cursors.down?.isDown || cursors.S?.isDown) {
           vy += speed
           this.setDepth(this.y) //change player.depth if player.y changes
         }

client/src/characters/PlayerSelector.ts

@@ -2,7 +2,7 @@ import Phaser from 'phaser'
 import MyPlayer from './MyPlayer'
 import { PlayerBehavior } from '../../../types/PlayerBehavior'
 import Item from '../items/Item'
-
+import { NavKeys } from '../../../types/KeyboardState'
 export default class PlayerSelector extends Phaser.GameObjects.Zone {
   selectedItem?: Item
 
@@ -12,7 +12,7 @@ export default class PlayerSelector extends Phaser.GameObjects.Zone {
     scene.physics.add.existing(this)
   }
 
-  update(player: MyPlayer, cursors: Phaser.Types.Input.Keyboard.CursorKeys) {
+  update(player: MyPlayer, cursors: NavKeys) {
     if (!cursors) {
       return
     }

client/src/scenes/Game.ts

@@ -20,10 +20,11 @@ import { ItemType } from '../../../types/Items'
 
 import store from '../stores'
 import { setFocused, setShowChat } from '../stores/ChatStore'
+import { NavKeys, Keyboard } from '../../../types/KeyboardState'
 
 export default class Game extends Phaser.Scene {
   network!: Network
-  private cursors!: Phaser.Types.Input.Keyboard.CursorKeys
+  private cursors!: NavKeys
   private keyE!: Phaser.Input.Keyboard.Key
   private keyR!: Phaser.Input.Keyboard.Key
   private map!: Phaser.Tilemaps.Tilemap
@@ -39,7 +40,11 @@ export default class Game extends Phaser.Scene {
   }
 
   registerKeys() {
-    this.cursors = this.input.keyboard.createCursorKeys()
+    this.cursors = {
+      ...this.input.keyboard.createCursorKeys(),
+      ...(this.input.keyboard.addKeys('W,S,A,D') as Keyboard),
+    }
+
     // maybe we can have a dedicated method for adding keys if more keys are needed in the future
     this.keyE = this.input.keyboard.addKey('E')
     this.keyR = this.input.keyboard.addKey('R')

types/KeyboardState.ts

@@ -0,0 +1,10 @@
+import Phaser from 'phaser'
+
+export type Keyboard = {
+  W: Phaser.Input.Keyboard.Key
+  S: Phaser.Input.Keyboard.Key
+  A: Phaser.Input.Keyboard.Key
+  D: Phaser.Input.Keyboard.Key
+}
+
+export type NavKeys = Keyboard & Phaser.Types.Input.Keyboard.CursorKeys