Skip to content

Offloaded chat bubble logic to a chatbubble class #14

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Merged
merged 1 commit into from
Apr 19, 2022
Merged

Offloaded chat bubble logic to a chatbubble class #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion frontend/src/classes/Player.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import ChatBubble from "../components/world/PhaserObjects/ChatBubble";

export default class Player {
public location?: UserLocation;

Expand All @@ -9,7 +11,7 @@ export default class Player {

public label?: Phaser.GameObjects.Text;

public chatBubble?: Phaser.GameObjects.Text;
public chatBubble?: ChatBubble;

constructor(id: string, userName: string, location: UserLocation) {
this._id = id;
Expand Down
72 changes: 72 additions & 0 deletions frontend/src/components/world/PhaserObjects/ChatBubble.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import { ChatMessage } from "../../../classes/TextConversation"

const CHAT_BUBBLE_DURATION = 5000;
const TEXT_SCROLL_DELAY = 50;
const MAX_MESSAGE_LENGTH = 20;

export default class ChatBubble {
bubbleText: Phaser.GameObjects.Text;

timer: NodeJS.Timeout | undefined;

interval: NodeJS.Timeout | undefined;

scene: Phaser.Scene;

setMessage(value: ChatMessage) {
if (this.timer) {
clearTimeout(this.timer)
}

if (this.interval) {
clearInterval(this.interval)
}

if(value.isGif) {
this.setText('Sent a GIF');
}
else {
this.setText(value.body);
}
}


setText(value: string) {
if (value.length > MAX_MESSAGE_LENGTH) {
value = `${value.substring(0, MAX_MESSAGE_LENGTH)}...`;
}

this.bubbleText.setVisible(true);
let i = 0;
this.interval = setInterval(() => {
this.bubbleText.setText(value.substring(0, i));
i += 1;
if(i === value.length + 1) {
this.timer = setTimeout(() => (this.bubbleText.setVisible(false)), CHAT_BUBBLE_DURATION);
if(this.interval) {
clearInterval(this.interval);
}
}
}, TEXT_SCROLL_DELAY);
}

setX(value: number) {
this.bubbleText.setX(value)
}

setY(value: number) {
this.bubbleText.setY(value)
}

constructor(scene: Phaser.Scene, x: number, y: number) {
const bubbleText = scene.add.text(x, y, '', {
fontFamily: 'monospace',
fontSize: '18px',
color: '#000000',
backgroundColor: '#ffffff',
});
this.bubbleText = bubbleText;
this.bubbleText.setVisible(false);
this.scene = scene;
}
}
49 changes: 13 additions & 36 deletions frontend/src/components/world/WorldMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import SocialSidebar from '../SocialSidebar/SocialSidebar';
import useChatContext from '../VideoCall/VideoFrontend/hooks/useChatContext/useChatContext';
import { Callback } from '../VideoCall/VideoFrontend/types';
import NewConversationModal from './NewCoversationModal';
import ChatBubble from './PhaserObjects/ChatBubble';

// Original inspiration and code from:
// https://medium.com/@michaelwesthadley/modular-game-worlds-in-phaser-3-tilemaps-1-958fc7e6bbd6
Expand All @@ -29,7 +30,7 @@ class CoveyGameScene extends Phaser.Scene {
private player?: {
sprite: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
label: Phaser.GameObjects.Text;
chatBubble: Phaser.GameObjects.Text;
chatBubble: ChatBubble;
};

private myPlayerID: string;
Expand Down Expand Up @@ -63,9 +64,7 @@ class CoveyGameScene extends Phaser.Scene {

private setNewConversation: (conv: ConversationArea) => void;

private _onGameReadyListeners: Callback[] = [];

private messages: ChatMessage[] = [];
private _onGameReadyListeners: Callback[] = [];

constructor(
video: Video,
Expand All @@ -80,6 +79,7 @@ class CoveyGameScene extends Phaser.Scene {
this.setNewConversation = setNewConversation;
}


preload() {
// this.load.image("logo", logoImg);
this.load.image('Room_Builder_32x32', '/assets/tilesets/Room_Builder_32x32.png');
Expand Down Expand Up @@ -200,18 +200,7 @@ class CoveyGameScene extends Phaser.Scene {
color: '#000000',
backgroundColor: '#ffffff',
});
const chatBubble = this.add.text(0, 0, '', {
font: '18px monospace',
color: '#000000',
backgroundColor: '#ffffff',
});
const playerMessage = this.messages.find(message => myPlayer && (message.sid === myPlayer.id));
if (playerMessage) {
chatBubble.text = playerMessage.body;
}
else {
chatBubble.setVisible(false);
}
const chatBubble = new ChatBubble(this, 0, 0);
myPlayer.label = label;
myPlayer.sprite = sprite;
myPlayer.chatBubble = chatBubble;
Expand All @@ -220,9 +209,9 @@ class CoveyGameScene extends Phaser.Scene {
sprite.setX(player.location.x);
sprite.setY(player.location.y);
myPlayer.label?.setX(player.location.x);
myPlayer.label?.setY(player.location.y - 20);
myPlayer.label?.setY(player.location.y + 30);
myPlayer.chatBubble?.setX(player.location.x);
myPlayer.chatBubble?.setY(player.location.y + 20);
myPlayer.chatBubble?.setY(player.location.y - 20);


if (player.location.moving) {
Expand All @@ -239,18 +228,12 @@ class CoveyGameScene extends Phaser.Scene {
return;
}
if (newMessage.senderID === this.myPlayerID) {
this.player?.chatBubble.setText(newMessage.body);
this.player?.chatBubble.setVisible(true);
this.messages = this.messages.filter(m => m.senderID === this.myPlayerID);
this.messages.push(newMessage);

this.player?.chatBubble.setMessage(newMessage);
}
else {
const messagePlayer = this.players.find(p => p.id === newMessage.senderID);
if (messagePlayer) {
messagePlayer.chatBubble?.setText(newMessage.body);
messagePlayer.chatBubble?.setVisible(true);
this.messages = this.messages.filter(m => m.senderID === messagePlayer.id);
messagePlayer.chatBubble?.setMessage(newMessage);
}
}

Expand Down Expand Up @@ -322,9 +305,9 @@ class CoveyGameScene extends Phaser.Scene {

const isMoving = primaryDirection !== undefined;
this.player.label.setX(body.x);
this.player.label.setY(body.y - 20);
this.player.label.setY(body.y + 30);
this.player.chatBubble.setX(body.x);
this.player.chatBubble.setY(body.y + 20);
this.player.chatBubble.setY(body.y - 20);
if (
!this.lastLocation ||
this.lastLocation.x !== body.x ||
Expand Down Expand Up @@ -513,19 +496,13 @@ class CoveyGameScene extends Phaser.Scene {
.sprite(spawnPoint.x, spawnPoint.y, 'atlas', 'misa-front')
.setSize(30, 40)
.setOffset(0, 24);
const label = this.add.text(spawnPoint.x, spawnPoint.y - 20, '(You)', {
font: '18px monospace',
color: '#000000',
// padding: {x: 20, y: 10},
backgroundColor: '#ffffff',
});
const chatBubble = this.add.text(spawnPoint.x, spawnPoint.y + 20, '', {
const label = this.add.text(spawnPoint.x, spawnPoint.y + 30, '(You)', {
font: '18px monospace',
color: '#000000',
// padding: {x: 20, y: 10},
backgroundColor: '#ffffff',
});
chatBubble.setVisible(false);
const chatBubble = new ChatBubble(this, spawnPoint.x, spawnPoint.y - 20);
this.player = {
sprite,
label,
Expand Down