From 409bcafac874efd1e4a3bebdac0bf64c23f17a6b Mon Sep 17 00:00:00 2001 From: Milmon Date: Fri, 7 Jun 2024 15:20:42 +0800 Subject: [PATCH] feat(ui): support digit key 1~3,9,0 --- frontend/component/game_table.ts | 104 +++++++++++++++++-------------- frontend/lib/game.ts | 11 ++++ frontend/pages/game_play.ts | 3 - frontend/pages/game_replay.ts | 4 +- 4 files changed, 70 insertions(+), 52 deletions(-) diff --git a/frontend/component/game_table.ts b/frontend/component/game_table.ts index c66999d..08e360e 100644 --- a/frontend/component/game_table.ts +++ b/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() -} \ No newline at end of file + 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() + } +} diff --git a/frontend/lib/game.ts b/frontend/lib/game.ts index ee31d21..cf0caaa 100644 --- a/frontend/lib/game.ts +++ b/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> = [] $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}"]`)) diff --git a/frontend/pages/game_play.ts b/frontend/pages/game_play.ts index 5707770..7da4510 100644 --- a/frontend/pages/game_play.ts +++ b/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) } diff --git a/frontend/pages/game_replay.ts b/frontend/pages/game_replay.ts index f05219b..02cca0c 100644 --- a/frontend/pages/game_replay.ts +++ b/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) }