feat: finish v2

DavidKk · Mar 16, 2024 · 6374d87 · 6374d87
1 parent 4864c18
commit 6374d87
Show file tree

Hide file tree

Showing 39 changed files with 537 additions and 345 deletions.
diff --git a/app/components/App.ts b/app/components/App.ts
@@ -1,10 +1,12 @@
-import { define, Component } from '@/libs/Component'
 import Game from '@/components/Game'
 import Gallery from '@/components/Gallery'
 import Notification from '@/components/Notification'
 import Menu from '@/controls/Menu'
 import PointerEvent from '@/constants/event'
+import { define, Component } from '@/libs/Component'
+import jQuery from '@/services/jQuery'
 import { deprecated } from '@/utils'
+import DosBox from '@/libs/DosBox'
 
 @define('app')
 export default class App extends Component {
@@ -20,30 +22,45 @@ export default class App extends Component {
     this.notification = this.appendElement(Notification)
 
     this.gallery.onSelected((id) => this.play(id))
-    this.game.onExit(() => {
-      this.gallery.toggle(true)
-      this.menu.dispatchEvent(new Menu.Events.GamePlay({ gameplay: false }))
-    })
-
-    deprecated(
-      (() => {
-        const onPreventScroll = (event: Event) => {
-          event.preventDefault()
-          event.stopPropagation()
+    return deprecated(
+      DosBox.Events.Exit.listen(() => {
+        this.gallery.toggle(true)
+        Menu.Events.GamePlay.dispatch({ gameplay: false })
+      }),
+      jQuery(document.body).addEventsListener('keydown', (event: KeyboardEvent) => {
+        // 全屏
+        if (document.fullscreenEnabled && (event.metaKey || event.ctrlKey) && event.key === 'Enter') {
+          this.requestPointerLock()
+          this.requestFullscreen()
+          return
         }
 
-        document.body.addEventListener(PointerEvent.Move, onPreventScroll, { passive: false })
+        // 刷新
+        if (event.metaKey && event.key.toLowerCase() === 'r') {
+          window.location.reload()
+          return
+        }
 
-        return () => {
-          document.body.removeEventListener(PointerEvent.Move, onPreventScroll)
+        // 退出
+        if (event.ctrlKey && event.key.toLowerCase() === 'c') {
+          this.game.stop()
+          return
         }
-      })()
+      }),
+      jQuery(document.body).addEventsListener(
+        PointerEvent.Move,
+        (event: Event) => {
+          event.preventDefault()
+          event.stopPropagation()
+        },
+        { passive: false }
+      )
     )
   }
 
   public async play(gameId: string) {
     this.gallery.toggle(false)
     await this.game.start(gameId)
-    this.menu.dispatchEvent(new Menu.Events.GamePlay({ gameplay: true }))
+    Menu.Events.GamePlay.dispatch({ gameplay: true })
   }
 }
diff --git a/app/components/DOSBoxCanvas.ts b/app/components/DOSBoxCanvas.ts
@@ -1,4 +1,6 @@
 import { Component, define } from '@/libs/Component'
+import { deprecated, requestFullscreen } from '@/utils'
+import { PointerEvent } from '@/constants/event'
 
 @define('dosbox-canvas')
 export default class DOSBoxCanvas extends Component {
@@ -7,5 +9,11 @@ export default class DOSBoxCanvas extends Component {
   public bindings() {
     this.canvas = document.createElement('canvas')
     this.appendChild(this.canvas)
+
+    return deprecated(
+      this.addEventsListener(PointerEvent.Start, () => {
+        requestFullscreen()
+      })
+    )
   }
 }
diff --git a/app/components/Gallery.ts b/app/components/Gallery.ts
@@ -3,12 +3,14 @@ import { fetchGames } from '@/store/game'
 import PointerEvent from '@/constants/event'
 import SimEvent from '@/libs/SimEvent'
 import { ACTIVE_CLASSNAME } from '@/constants/definations'
-import type { Game, GalleryPlayEventDetail } from '@/types'
+import type { Game, GalleryPlayEventPayload } from '@/types'
+import { deprecated, requestFullscreen } from '@/utils'
+import jQuery from '@/services/jQuery'
 
 @define('gallery')
 export default class Gallery extends Component {
   static Events = {
-    Play: SimEvent.create<GalleryPlayEventDetail>('GALLERY_PLAY'),
+    Play: SimEvent.create<GalleryPlayEventPayload>('GALLERY_PLAY'),
   }
 
   protected selected = 0
@@ -40,75 +42,70 @@ export default class Gallery extends Component {
   }
 
   protected bindings() {
-    const onKeyChoosed = (event: KeyboardEvent) => {
-      switch (event.key) {
-        case 'ArrowUp': {
-          const num = this.selected - this.numberInRow
-          if (num >= 0) {
-            this.selected = num
+    return deprecated(
+      jQuery(document.body).addEventsListener('keyup', (event: KeyboardEvent) => {
+        switch (event.key) {
+          case 'ArrowUp': {
+            const num = this.selected - this.numberInRow
+            if (num >= 0) {
+              this.selected = num
+            }
+
+            break
           }
 
-          break
-        }
+          case 'ArrowRight': {
+            const num = this.selected + 1
+            if (num < this.games.length) {
+              this.selected = num
+            }
 
-        case 'ArrowRight': {
-          const num = this.selected + 1
-          if (num < this.games.length) {
-            this.selected = num
+            break
           }
 
-          break
-        }
+          case 'ArrowDown': {
+            const num = this.selected + this.numberInRow
+            if (num < this.games.length) {
+              this.selected = num
+            }
 
-        case 'ArrowDown': {
-          const num = this.selected + this.numberInRow
-          if (num < this.games.length) {
-            this.selected = num
+            break
           }
 
-          break
-        }
+          case 'ArrowLeft': {
+            const num = this.selected - 1
+            if (num >= 0) {
+              this.selected = num
+            }
 
-        case 'ArrowLeft': {
-          const num = this.selected - 1
-          if (num >= 0) {
-            this.selected = num
+            break
           }
-
-          break
         }
-      }
-
-      this.games.forEach((game) => game.removeClass('active'))
 
-      const node = this.games[this.selected]
-      node && node.addClass(ACTIVE_CLASSNAME)
-    }
+        this.games.forEach((game) => game.removeClass('active'))
 
-    const onKeySelected = (event: KeyboardEvent) => {
-      if (event.key === 'Enter') {
         const node = this.games[this.selected]
-        const gameId = node.getAttr('game')
-        gameId && this.dispatchEvent(new Gallery.Events.Play({ gameId }))
-      }
-    }
-
-    document.body.addEventListener('keyup', onKeyChoosed)
-    document.body.addEventListener('keypress', onKeySelected)
-
-    return () => {
-      document.body.removeEventListener('keyup', onKeyChoosed)
-      document.body.removeEventListener('keypress', onKeySelected)
-    }
+        node && node.addClass(ACTIVE_CLASSNAME)
+      }),
+      jQuery(document.body).addEventsListener('keypress', (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+          const node = this.games[this.selected]
+          const gameId = node.getAttr('game')
+          gameId && this.dispatchEvent(new Gallery.Events.Play({ gameId }))
+          requestFullscreen()
+        }
+      })
+    )
   }
 
   protected mapTouchSelectToElmement(target: Component) {
-    target.addEventsListener(PointerEvent.Start, (event) => {
+    jQuery(target).addEventsListener(PointerEvent.Start, (event) => {
       event.preventDefault()
       event.stopPropagation()
 
       const gameId = target.getAttribute('game')
       gameId && this.dispatchEvent(new Gallery.Events.Play({ gameId }))
+      requestFullscreen()
     })
   }