feat(ui): support digit key 1~3,9,0

frontend/component/game_table.ts

@@ -1,56 +1,68 @@
 import { GeneralsGame } from '../lib/game'
 
-export function registerGameTableComponent(game: GeneralsGame) {
-  let nowSize = 32
-  let nowLeft = 30, nowTop = 30
-  function updateTableStyle() {
+export class GameTable {
+  nowSize = 32
+  nowLeft = 30
+  nowTop = 30
+
+  isDown = false
+  fromX = 0
+  fromY = 0
+  lastLeft = 0
+  lastTop = 0
+
+  constructor(
+    public game: GeneralsGame,
+  ) {
+    this.updateTableStyle()
+    $(document).on('wheel', (ev) => this.handleWheelEvent((ev.originalEvent as Event)['deltaY']))
+    $(document).on('mousedown', (ev) => this.handleMouseDown(ev))
+    $(document).on('mouseup', (ev) => this.handleMouseUp(ev))
+    $(document).on('mousemove', (ev) => this.handleMouseMove(ev))
+  }
+
+  updateSize(size: number) {
+    this.nowSize = size
+    this.updateTableStyle()
+  }
+
+  updateTableStyle() {
     $('.game-table-container').attr('style', [
-      `top: ${nowTop}px;`,
-      `left: ${nowLeft}px;`,
+      `top: ${this.nowTop}px;`,
+      `left: ${this.nowLeft}px;`,
     ].join(' '))
-    game.$table.attr('style', [
-      `--cell-size: ${nowSize}px;`,
-      `--bg-size: ${nowSize / 32 * 25}px;`,
-      `--number-size: ${nowSize / 32 * 3 + 9}px;`,
+    this.game.$table.attr('style', [
+      `--cell-size: ${this.nowSize}px;`,
+      `--bg-size: ${this.nowSize / 32 * 25}px;`,
+      `--number-size: ${this.nowSize / 32 * 3 + 9}px;`,
     ].join(' '))
   }
 
-  function registerWheelEvent() {
-    $(document).on('wheel', (ev) => {
-      const deltaY = (ev.originalEvent as Event)['deltaY']
-      if (deltaY < 0 && nowSize < 100) nowSize += 6
-      if (deltaY > 0 && nowSize > 11) nowSize -= 6
-      updateTableStyle()
-    })
+  handleWheelEvent(deltaY: number) {
+    if (Math.abs(deltaY) < 1) return
+    this.nowSize += (Math.abs(deltaY) / deltaY) * Math.log(Math.abs(deltaY))
+    this.nowSize = Math.min(Math.max(this.nowSize, 16), 100)
+    this.updateTableStyle()
   }
 
-  function registerMouseEvent() {
-    let isDown = false
-    let fromX = 0, fromY = 0
-    let lastLeft = 0, lastTop = 0
-    $(document).on('mousedown', (ev) => {
-      lastLeft = nowLeft
-      lastTop = nowTop
-      fromX = ev.clientX
-      fromY = ev.clientY
-      isDown = true
-    })
-    $(document).on('mouseup', (ev) => {
-      if (!isDown) return
-      isDown = false
-      nowLeft = lastLeft + ev.clientX - fromX
-      nowTop = lastTop + ev.clientY - fromY
-      updateTableStyle()
-    })
-    $(document).on('mousemove', (ev) => {
-      if (!isDown) return
-      nowLeft = lastLeft + ev.clientX - fromX
-      nowTop = lastTop + ev.clientY - fromY
-      updateTableStyle()
-    })
+  handleMouseDown(ev: JQuery.MouseDownEvent) {
+    this.lastLeft = this.nowLeft
+    this.lastTop = this.nowTop
+    this.fromX = ev.clientX
+    this.fromY = ev.clientY
+    this.isDown = true
   }
-
-  registerWheelEvent()
-  registerMouseEvent()
-  updateTableStyle()
-}
+  handleMouseUp(ev: JQuery.MouseUpEvent) {
+    if (!this.isDown) return
+    this.isDown = false
+    this.nowLeft = this.lastLeft + ev.clientX - this.fromX
+    this.nowTop = this.lastTop + ev.clientY - this.fromY
+    this.updateTableStyle()
+  }
+  handleMouseMove(ev: JQuery.MouseMoveEvent) {
+    if (!this.isDown) return
+    this.nowLeft = this.lastLeft + ev.clientX - this.fromX
+    this.nowTop = this.lastTop + ev.clientY - this.fromY
+    this.updateTableStyle()
+  }
+}

frontend/lib/game.ts

@@ -1,6 +1,7 @@
 import { Socket } from 'socket.io-client'
 import { } from './jquery'
 import { UserService } from './user'
+import { GameTable } from '../component'
 
 export interface PlayerInfo {
   id: number
@@ -42,6 +43,7 @@ export class GeneralsGame {
   isReplay = false
   now: Array<Array<Cell>> = []
   $table = $('.page--game_play .game-table')
+  game_table: GameTable
   width = 0
   height = 0
   me = 0
@@ -54,6 +56,10 @@ export class GeneralsGame {
   nowSelectY = -1
   nowSelectStatus = SELECT_STATUS.NOT_SELECTED
 
+  constructor() {
+    this.game_table = new GameTable(this)
+  }
+
   endGame() {
     this.gameEnded = true
   }
@@ -220,6 +226,11 @@ export class GeneralsGame {
   }
 
   handleKeydown(ev: JQuery.KeyDownEvent) {
+    if (ev.code === 'Digit9') return this.game_table.handleWheelEvent(-20)
+    if (ev.code === 'Digit0') return this.game_table.handleWheelEvent(20)
+    if (ev.code === 'Digit1') return this.game_table.updateSize(35)
+    if (ev.code === 'Digit2') return this.game_table.updateSize(38)
+    if (ev.code === 'Digit3') return this.game_table.updateSize(42)
     if (this.gameEnded || this.isReplay) return
     if (this.nowSelectStatus === SELECT_STATUS.NOT_SELECTED) return
     if (['ArrowUp', 'KeyW'].includes(ev.code)) return this.handleClick(this.$table.find(`td[data-x="${this.nowSelectX - 1}"][data-y="${this.nowSelectY}"]`))

frontend/pages/game_play.ts

@@ -5,7 +5,6 @@ import { UserService } from '../lib/user'
 import { GeneralsGame, PlayerInfo } from '../lib/game'
 import { Alert, LeaderBoard } from '../component'
 import { getPathName, redirectTo } from '../lib/path'
-import { registerGameTableComponent } from '../component/game_table'
 
 async function getInfo() {
   const id = +getPathName().split('/')[2]
@@ -94,6 +93,4 @@ export async function init() {
   })
 
   setInterval(() => socket.emit('ping'), 15000)
-
-  registerGameTableComponent(game)
 }

frontend/pages/game_replay.ts

@@ -3,7 +3,7 @@ import { } from '../lib/jquery'
 import { UserService } from '../lib/user'
 import { GeneralsGameReplay, GeneralsReplay } from '../lib/replay'
 import { getPathName, redirectTo } from '../lib/path'
-import { registerGameTableComponent } from '../component'
+import { GameTable } from '../component'
 
 async function getReplay() {
   if (window['site_prefix'] !== '') {
@@ -34,6 +34,4 @@ export async function init() {
     if (game.isHalf) game.gotoTurn(game.nowTurn + 1, false)
     else game.gotoTurn(game.nowTurn, true)
   }, 500)
-
-  registerGameTableComponent(game)
 }