Skip to content

Implemented a counter for players online #319

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Implemented a counter for players online #319

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
104 changes: 71 additions & 33 deletions apps/frontend/src/screens/Game.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export const GAME_ADDED = 'game_added';
export const USER_TIMEOUT = 'user_timeout';
export const GAME_TIME = 'game_time';
export const GAME_ENDED = 'game_ended';
export const LIVE_COUNTER = 'live_counter';
export enum Result {
WHITE_WINS = 'WHITE_WINS',
BLACK_WINS = 'BLACK_WINS',
Expand All @@ -33,7 +34,6 @@ export interface GameResult {
by: string;
}


const GAME_TIME_MS = 10 * 60 * 1000;

import { useRecoilValue, useSetRecoilState } from 'recoil';
Expand All @@ -60,13 +60,10 @@ export const Game = () => {
const [added, setAdded] = useState(false);
const [started, setStarted] = useState(false);
const [gameMetadata, setGameMetadata] = useState<Metadata | null>(null);
const [result, setResult] = useState<
GameResult
| null
>(null);
const [result, setResult] = useState<GameResult | null>(null);
const [player1TimeConsumed, setPlayer1TimeConsumed] = useState(0);
const [player2TimeConsumed, setPlayer2TimeConsumed] = useState(0);

const [counter, setCounter] = useState(0);
const setMoves = useSetRecoilState(movesAtom);
const userSelectedMoveIndex = useRecoilValue(userSelectedMoveIndexAtom);
const userSelectedMoveIndexRef = useRef(userSelectedMoveIndex);
Expand All @@ -85,12 +82,24 @@ export const Game = () => {
if (!socket) {
return;
}

socket.send(JSON.stringify({ type: LIVE_COUNTER }));
}, [socket]);

useEffect(() => {
if (!socket) {
return;
}

socket.onmessage = function (event) {
const message = JSON.parse(event.data);
switch (message.type) {
case GAME_ADDED:
setAdded(true);
break;
case LIVE_COUNTER:
setCounter(message.payload.counter);
break;
case INIT_GAME:
setBoard(chess.board());
setStarted(true);
Expand Down Expand Up @@ -130,8 +139,12 @@ export const Game = () => {
break;

case GAME_ENDED:
const wonBy = message.payload.status === 'COMPLETED' ?
message.payload.result !== 'DRAW' ? 'CheckMate' : 'Draw' : 'Timeout';
const wonBy =
message.payload.status === 'COMPLETED'
? message.payload.result !== 'DRAW'
? 'CheckMate'
: 'Draw'
: 'Timeout';
setResult({
result: message.payload.result,
by: wonBy,
Expand All @@ -147,8 +160,7 @@ export const Game = () => {
blackPlayer: message.payload.blackPlayer,
whitePlayer: message.payload.whitePlayer,
});



break;

case USER_TIMEOUT:
Expand Down Expand Up @@ -268,9 +280,9 @@ export const Game = () => {
</div>
)}
</div>
<div>
<div className="flex flex-col md:flex-row">
<div
className={`w-full flex justify-center text-white`}
className={`w-full flex justify-center text-white ml-2`}
>
<ChessBoard
started={started}
Expand All @@ -284,6 +296,53 @@ export const Game = () => {
board={board}
/>
</div>
{!started && (
<div className="flex justify-start flex-col items-center mt-4 p-3">
{counter - 1 !== 0 ? (
<>
<p className="text-3xl text-center font-bold text-white mb-4">
<span className="text-yellow-500 text-3xl drop-shadow-[0_1.5px_1.5px_rgba(0,0,0,0.8)] underline underline-offset-4">
{counter}
</span>
{counter == 1 ? ' Player is ' : " Player's are "}
currently online.
</p>
<p className="text-center text-gray-200">
Click on{' '}
<span className="text-green-500">Play</span> to
start a game.
</p>
</>
) : (
<p className="text-3xl text-center font-bold text-white ">
<span className="text-red-700 text-3xl drop-shadow-[0_1.5px_1.5px_rgba(0,0,0,0.8)]">
No
</span>{' '}
players are currently online :(
</p>
)}

<div className=" mt-4 flex">
{added ? (
<div className="text-white">Waiting</div>
) : (
gameId === 'random' && (
<Button
onClick={() => {
socket.send(
JSON.stringify({
type: INIT_GAME,
}),
);
}}
>
Play
</Button>
)
)}
</div>
</div>
)}
</div>
{started && (
<div className="mt-4 flex justify-between">
Expand All @@ -305,27 +364,6 @@ export const Game = () => {
</div>
</div>
<div className="rounded-md bg-brown-500 overflow-auto h-[90vh] mt-10">
{!started && (
<div className="pt-8 flex justify-center w-full">
{added ? (
<div className="text-white">Waiting</div>
) : (
gameId === 'random' && (
<Button
onClick={() => {
socket.send(
JSON.stringify({
type: INIT_GAME,
}),
);
}}
>
Play
</Button>
)
)}
</div>
)}
<div>
<MovesTable />
</div>
Expand Down
53 changes: 34 additions & 19 deletions apps/ws/src/GameManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
GAME_ALERT,
GAME_ADDED,
GAME_ENDED,
LIVE_COUNTER,
} from './messages';
import { Game, isPromoting } from './Game';
import { db } from './db';
Expand Down Expand Up @@ -87,12 +88,24 @@ export class GameManager {
}
}

if (message.type === LIVE_COUNTER) {
let counter = this.users.length;
user.socket.send(
JSON.stringify({
type: LIVE_COUNTER,
payload: {
counter: counter,
},
}),
);
}

if (message.type === MOVE) {
const gameId = message.payload.gameId;
const game = this.games.find((game) => game.gameId === gameId);
if (game) {
game.makeMove(user, message.payload.move);
if (game.result) {
if (game.result) {
this.removeGame(game.gameId);
}
}
Expand Down Expand Up @@ -127,23 +140,25 @@ export class GameManager {
return;
}

if(gameFromDb.status !== GameStatus.IN_PROGRESS) {
user.socket.send(JSON.stringify({
type: GAME_ENDED,
payload: {
result: gameFromDb.result,
status: gameFromDb.status,
moves: gameFromDb.moves,
blackPlayer: {
id: gameFromDb.blackPlayer.id,
name: gameFromDb.blackPlayer.name,
},
whitePlayer: {
id: gameFromDb.whitePlayer.id,
name: gameFromDb.whitePlayer.name,
if (gameFromDb.status !== GameStatus.IN_PROGRESS) {
user.socket.send(
JSON.stringify({
type: GAME_ENDED,
payload: {
result: gameFromDb.result,
status: gameFromDb.status,
moves: gameFromDb.moves,
blackPlayer: {
id: gameFromDb.blackPlayer.id,
name: gameFromDb.blackPlayer.name,
},
whitePlayer: {
id: gameFromDb.whitePlayer.id,
name: gameFromDb.whitePlayer.name,
},
},
}
}));
}),
);
return;
}

Expand All @@ -152,9 +167,9 @@ export class GameManager {
gameFromDb?.whitePlayerId!,
gameFromDb?.blackPlayerId!,
gameFromDb.id,
gameFromDb.startAt
gameFromDb.startAt,
);
game.seedMoves(gameFromDb?.moves || [])
game.seedMoves(gameFromDb?.moves || []);
this.games.push(game);
availableGame = game;
}
Expand Down
1 change: 1 addition & 0 deletions apps/ws/src/messages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ export const GAME_ENDED = 'game_ended';
export const GAME_ALERT = 'game_alert';
export const GAME_ADDED = 'game_added';
export const GAME_TIME = 'game_time';
export const LIVE_COUNTER = 'live_counter';