Feature - Mobile action buttons and refactor some screens

client/src/App.tsx

@@ -16,6 +16,9 @@ const Backdrop = styled.div`
   position: absolute;
   height: 100%;
   width: 100%;
+  @media (max-height: 380px) {
+    overflow: scroll;
+  }
 `
 
 function App() {

client/src/characters/MyPlayer.ts

@@ -14,12 +14,14 @@ import { pushPlayerJoinedMessage } from '../stores/ChatStore'
 import { ItemType } from '../../../types/Items'
 import { NavKeys } from '../../../types/KeyboardState'
 import { JoystickMovement } from '../components/Joystick'
+import { setShowButtonE } from '../stores/JoystickStore'
 import { openURL } from '../utils/helpers'
 
 export default class MyPlayer extends Player {
   private playContainerBody: Phaser.Physics.Arcade.Body
   private chairOnSit?: Chair
   public joystickMovement?: JoystickMovement
+  private joystickKey?: string
   constructor(
     scene: Phaser.Scene,
     x: number,
@@ -30,6 +32,9 @@ export default class MyPlayer extends Player {
   ) {
     super(scene, x, y, texture, id, frame)
     this.playContainerBody = this.playerContainer.body as Phaser.Physics.Arcade.Body
+    phaserEvents.on(Event.JOYSTICK_KEY_DOWN, (key: string) => {
+      this.joystickKey = key
+    })
   }
 
   setPlayerName(name: string) {
@@ -59,7 +64,8 @@ export default class MyPlayer extends Player {
 
     const item = playerSelector.selectedItem
 
-    if (Phaser.Input.Keyboard.JustDown(keyR)) {
+    if (Phaser.Input.Keyboard.JustDown(keyR) || this.joystickKey === 'R') {
+      this.joystickKey = undefined
       switch (item?.itemType) {
         case ItemType.COMPUTER:
           const computer = item as Computer
@@ -80,7 +86,11 @@ export default class MyPlayer extends Player {
     switch (this.playerBehavior) {
       case PlayerBehavior.IDLE:
         // if press E in front of selected chair
-        if (Phaser.Input.Keyboard.JustDown(keyE) && item?.itemType === ItemType.CHAIR) {
+        if (
+          (Phaser.Input.Keyboard.JustDown(keyE) || this.joystickKey === 'E') &&
+          item?.itemType === ItemType.CHAIR
+        ) {
+          this.joystickKey = undefined
           const chairItem = item as Chair
           /**
            * move player to the chair and play sit animation
@@ -121,6 +131,7 @@ export default class MyPlayer extends Player {
           // set up new dialog as player sits down
           chairItem.clearDialogBox()
           chairItem.setDialogBox('Press E to leave')
+          store.dispatch(setShowButtonE(true))
           this.chairOnSit = chairItem
           this.playerBehavior = PlayerBehavior.SITTING
           return
@@ -184,7 +195,8 @@ export default class MyPlayer extends Player {
 
       case PlayerBehavior.SITTING:
         // back to idle if player press E while sitting
-        if (Phaser.Input.Keyboard.JustDown(keyE)) {
+        if (Phaser.Input.Keyboard.JustDown(keyE) || this.joystickKey === 'E') {
+          this.joystickKey = undefined
           const parts = this.anims.currentAnim.key.split('_')
           parts[1] = 'idle'
           this.play(parts.join('_'), true)
@@ -196,6 +208,7 @@ export default class MyPlayer extends Player {
         }
         break
     }
+    this.joystickKey = undefined
   }
 }
 

client/src/components/Chat.tsx

@@ -26,6 +26,7 @@ const Backdrop = styled.div`
   width: 500px;
   max-height: 50%;
   max-width: 100%;
+  z-index: 9999;
 `
 
 const Wrapper = styled.div`

client/src/components/ComputerDialog.tsx

@@ -10,13 +10,11 @@ import { closeComputerDialog } from '../stores/ComputerStore'
 import Video from './Video'
 
 const Backdrop = styled.div`
-  position: fixed;
+  position: relative;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  overflow: hidden;
-  padding: 16px 180px 16px 16px;
 `
 const Wrapper = styled.div`
   width: 100%;
@@ -28,23 +26,25 @@ const Wrapper = styled.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  box-shadow: 0px 0px 5px #0000006f;
+  min-width: max-content;
 
   .close {
     position: absolute;
     top: 0px;
     right: 0px;
+    z-index: 9999;
   }
 `
 
 const VideoGrid = styled.div`
   flex: 1;
-  min-height: 0;
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
+  border-radius: 25px;
+  overflow: hidden;
+  margin-right: 25px;
 
   .video-container {
+    width: 100%;
+    height: 100%;
     position: relative;
     background: black;
     border-radius: 8px;