From 34252ecdd24cfd11a9167d7932c71ded1d03ae70 Mon Sep 17 00:00:00 2001 From: Takumi Hara <69781798+takumihara@users.noreply.github.com> Date: Mon, 4 Mar 2024 23:53:55 -0600 Subject: [PATCH] Change snake case to camel case (#297) --- frontend/app/lib/hooks/game/useGame.ts | 2 +- frontend/app/lib/hooks/game/useGameTheme.ts | 2 +- frontend/app/pong/[id]/Ball.ts | 14 ++-- frontend/app/pong/[id]/Paddle.ts | 6 +- frontend/app/pong/[id]/PongGame.ts | 76 ++++++++++----------- 5 files changed, 50 insertions(+), 50 deletions(-) diff --git a/frontend/app/lib/hooks/game/useGame.ts b/frontend/app/lib/hooks/game/useGame.ts index 306210f9..f8224705 100644 --- a/frontend/app/lib/hooks/game/useGame.ts +++ b/frontend/app/lib/hooks/game/useGame.ts @@ -38,7 +38,7 @@ export default function useGame( useEffect(() => { const game = getGame(); - game.draw_canvas(); + game.drawCanvas(); const intervalId = setInterval(game.update, TARGET_FRAME_MS); return () => clearInterval(intervalId); diff --git a/frontend/app/lib/hooks/game/useGameTheme.ts b/frontend/app/lib/hooks/game/useGameTheme.ts index 52772936..03c1999b 100644 --- a/frontend/app/lib/hooks/game/useGameTheme.ts +++ b/frontend/app/lib/hooks/game/useGameTheme.ts @@ -12,6 +12,6 @@ export default function useGameTheme( const color = resolvedTheme === "dark" ? "hsl(0, 0%, 100%)" : "hsl(0, 0%, 0%)"; game.setColor(color); - game.draw_canvas(); + game.drawCanvas(); }, [resolvedTheme, getGame]); } diff --git a/frontend/app/pong/[id]/Ball.ts b/frontend/app/pong/[id]/Ball.ts index 51525dfd..9e961bcb 100644 --- a/frontend/app/pong/[id]/Ball.ts +++ b/frontend/app/pong/[id]/Ball.ts @@ -49,7 +49,7 @@ export class Ball { }; // 0.4 ~ 2.5 - generate_random_scale = () => { + generateRandomScale = () => { // 0.2 ~ 1.0 let scale = 0.4 + Math.random() * 0.6; // 50% chance to be 1 / scale @@ -60,7 +60,7 @@ export class Ball { } }; - fluctuate_velocity_vector = () => { + fluctuateVelocityVector = () => { let radian = Math.atan2(this.vy, this.vx); // Add random fluctuation (5 degree) radian += ((Math.random() - 0.5) * 5 * Math.PI) / 180; @@ -75,7 +75,7 @@ export class Ball { let speed = this.speed(); speed = clamp( - speed * this.generate_random_scale(), + speed * this.generateRandomScale(), this.canvasWidth / 100, this.canvasWidth / 10, ); @@ -90,21 +90,21 @@ export class Ball { this.vy = 0; }; - bounce_off_paddle = (paddle: Paddle) => { + bounceOffPaddle = (paddle: Paddle) => { this.x = clamp( this.x, paddle.width, this.canvasWidth - paddle.width - this.radius * 2, ); this.vx = -this.vx; - // this.fluctuate_velocity_vector(); + // this.fluctuateVelocityVector(); }; - collide_with_top_bottom = () => { + collideWithTopBottom = () => { return this.y < 0 || this.y + this.radius * 2 > this.canvasHeight; }; - bounce_off_top_bottom = () => { + bounceOffTopBottom = () => { this.y = clamp(this.y, 0, this.canvasHeight - this.radius * 2); this.vy = -this.vy; }; diff --git a/frontend/app/pong/[id]/Paddle.ts b/frontend/app/pong/[id]/Paddle.ts index db399304..83034761 100644 --- a/frontend/app/pong/[id]/Paddle.ts +++ b/frontend/app/pong/[id]/Paddle.ts @@ -33,19 +33,19 @@ export class Paddle { ctx.fillRect(this.x, this.y, this.width, this.height); }; - move_top = () => { + moveTop = () => { this.y -= (CANVAS_HEIGHT / 100) * 3; this.y = Math.round(this.y); this.y = clamp(this.y, 0, CANVAS_HEIGHT - this.height); }; - move_down = () => { + moveDown = () => { this.y += (CANVAS_HEIGHT / 100) * 3; this.y = Math.round(this.y); this.y = clamp(this.y, 0, CANVAS_HEIGHT - this.height); }; - collide_with = (ball: Ball) => { + collideWith = (ball: Ball) => { // Ball is in the same y-axis if (ball.y >= this.y && ball.y + ball.radius * 2 <= this.y + this.height) { // Ball is actually colliding with paddle diff --git a/frontend/app/pong/[id]/PongGame.ts b/frontend/app/pong/[id]/PongGame.ts index 62f20b87..baf2caf8 100644 --- a/frontend/app/pong/[id]/PongGame.ts +++ b/frontend/app/pong/[id]/PongGame.ts @@ -21,11 +21,11 @@ export class PongGame { private player2: Paddle; private ball: Ball; private score: { player1: number; player2: number }; - private updated_at: number; - private fps_updated_at: number; + private updatedAt: number; + private fpsUpdatedAt: number; private elapsed: number; - private frame_count: number; - private is_playing: boolean; + private frameCount: number; + private isPlaying: boolean; private movingDirection: movingDirectionType = "none"; onAction: onActionType | undefined; @@ -58,38 +58,38 @@ export class PongGame { player1: 0, player2: 0, }; - this.updated_at = Date.now(); - this.fps_updated_at = Date.now(); + this.updatedAt = Date.now(); + this.fpsUpdatedAt = Date.now(); this.elapsed = 0; - this.frame_count = 0; - this.is_playing = false; + this.frameCount = 0; + this.isPlaying = false; this.userMode = userMode; } - update_fps = () => { - this.frame_count++; - if (this.fps_updated_at === undefined) { - this.fps_updated_at = this.updated_at; + updateFps = () => { + this.frameCount++; + if (this.fpsUpdatedAt === undefined) { + this.fpsUpdatedAt = this.updatedAt; } - const elapsed_since_last_update = this.updated_at - this.fps_updated_at; + const elapsed_since_last_update = this.updatedAt - this.fpsUpdatedAt; if (elapsed_since_last_update > 500) { const fps = Math.round( - this.frame_count / (elapsed_since_last_update / 1000), + this.frameCount / (elapsed_since_last_update / 1000), ); - this.frame_count = 0; - this.fps_updated_at = this.updated_at; + this.frameCount = 0; + this.fpsUpdatedAt = this.updatedAt; } }; - draw_canvas = () => { + drawCanvas = () => { // Clear objects this.ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); // Draw objects this.ball.move(this.elapsed); - if (this.player1.collide_with(this.ball)) { + if (this.player1.collideWith(this.ball)) { if (this.userMode === "player") { - this.ball.bounce_off_paddle(this.player1); + this.ball.bounceOffPaddle(this.player1); this.onAction && this.onAction("bounce"); } } else if (this.ball.x <= 0) { @@ -98,8 +98,8 @@ export class PongGame { this.score.player2++; this.onAction && this.onAction("collide"); } - } else if (this.ball.collide_with_top_bottom()) { - this.ball.bounce_off_top_bottom(); + } else if (this.ball.collideWithTopBottom()) { + this.ball.bounceOffTopBottom(); } this.ball.draw(this.ctx); this.player1.draw(this.ctx); @@ -118,28 +118,28 @@ export class PongGame { update = () => { const now = Date.now(); - this.elapsed = this.updated_at === undefined ? 0 : now - this.updated_at; - this.updated_at = now; + this.elapsed = this.updatedAt === undefined ? 0 : now - this.updatedAt; + this.updatedAt = now; if (this.userMode === "player") { if (this.movingDirection === "left") { this.player1.clear(this.ctx); - this.player1.move_top(); + this.player1.moveTop(); this.player1.draw(this.ctx); this.onAction && this.onAction("left"); } else if (this.movingDirection === "right") { this.player1.clear(this.ctx); - this.player1.move_down(); + this.player1.moveDown(); this.player1.draw(this.ctx); this.onAction && this.onAction("right"); } } - if (this.is_playing) { - this.draw_canvas(); + if (this.isPlaying) { + this.drawCanvas(); } }; start = ({ vx, vy }: { vx: number | undefined; vy: number | undefined }) => { - this.is_playing = true; + this.isPlaying = true; if (vx && vy) { this.ball.vx = vx; this.ball.vy = vy; @@ -161,17 +161,17 @@ export class PongGame { }; stop = () => { - this.updated_at = Date.now(); + this.updatedAt = Date.now(); this.ball.vx = 0; this.ball.vy = 0; - this.is_playing = false; + this.isPlaying = false; }; resetPlayerPosition = () => { const color = this.player1.color; this.player1 = this.initPlayer1(color); this.player2 = this.initPlayer2(color); - this.draw_canvas(); + this.drawCanvas(); }; initPlayer1 = (paddleColor: string) => @@ -193,34 +193,34 @@ export class PongGame { ); bounceOffPaddlePlayer1 = () => { - return this.ball.bounce_off_paddle(this.player1); + return this.ball.bounceOffPaddle(this.player1); }; bounceOffPaddlePlayer2 = () => { - return this.ball.bounce_off_paddle(this.player2); + return this.ball.bounceOffPaddle(this.player2); }; movePlayer1Left = () => { this.player1.clear(this.ctx); - this.player1.move_top(); + this.player1.moveTop(); this.player1.draw(this.ctx); }; movePlayer1Right = () => { this.player1.clear(this.ctx); - this.player1.move_down(); + this.player1.moveDown(); this.player1.draw(this.ctx); }; movePlayer2Left = () => { this.player2.clear(this.ctx); - this.player2.move_top(); + this.player2.moveTop(); this.player2.draw(this.ctx); }; movePlayer2Right = () => { this.player2.clear(this.ctx); - this.player2.move_down(); + this.player2.moveDown(); this.player2.draw(this.ctx); }; @@ -234,7 +234,7 @@ export class PongGame { endRound = () => { this.ball.reset(); - this.draw_canvas(); + this.drawCanvas(); }; setMovingDirection = (direction: movingDirectionType) => {