Professional Documents
Culture Documents
Synopsis/Project Report
On
Vineet Goswami
Under the Guidance of
Dr. Shilpa Jain
Assistant Professor
Department of CSE
1
STUDENT’S DECLARATION
We, Vineet Goswami here by declare the work, which is being presented in the project, entitled
“Multiplayer Chess website with FaceTime” in partial fulfillment of the requirement for the
award of the degree B.Tech in the session 2022-2023, is an authentic record of my own work
carried out under the supervision of “Dr. Shilpa Jain”, Assistant Professor, Department of CSE,
The matter embodied in this project has not been submitted by us for the award of any other degree.
Date:
Vineet Goswami
2
CERTIFICATE
The project report entitled “Multiplayer Chess website with FaceTime” being submitted by
Vineet Goswami to Graphic Era Hill University Bhimtal Campus for the award of bonafide
work carried out by them. They have worked under my guidance and supervision and
3
ACKNOWLEDGEMENT
Professor, CSE, GEHU Bhimtal Campus) to permit me and carry out this project work with his
excellent and optimistic supervision. This has all been possible due to his novel inspiration, able
guidance and useful suggestions that helped me to develop as a creative researcher and complete
Words are inadequate in offering my thanks to GOD for providing me everything that we
need. We again want to extend thanks to our President “Prof. (Dr.) Kamal Ghanshala” for
providing us all infrastructure and facilities to work in need without which this work could not be
possible.
Many thanks to Professor “Dr. Manoj Chandra Lohani” (Director Gehu Bhimtal),
other faculties for their insightful comments, constructive suggestions, valuable advice, and time
Finally, yet importantly, we would like to express my heartiest thanks to our beloved parents,
for their moral support, affection and blessings. We would also like to pay our sincere thanks to
all our friends and well-wishers for their help and wishes for the successful completion of this
research.
Vineet Goswami
4
TABLE OF CONTENTS
CHAPTER 1: INTRODUCTION……………………………………………6
1.1 Objective………………………………………………………6
2.1 History………………………………………………………...
CHAPTER 4: ER DIAGRAM……………………………………………………….18
4.1 ER Diagram…………………………………………………………...18
CHAPTER 6: WORKING……………………………………………………………29
CHAPTER 8: CONCLUSION………………………………………………………….31
REFERENCES………………………………………………………...32
5
I. INTRODUCTION
Chess, known for its strategic depth and intellectual challenge, has
captivated players for centuries. However, the traditional face-to-face nature
of the game has evolved into a digital landscape where players seek not only
the thrill of competition but also the social connections that enhance their
gaming experience. This project seeks to address this evolution,
acknowledging the importance of real-time communication in the realm of
online gaming.
The journey begins with a seamless onboarding process, where users are
greeted with an inviting interface prompting them to enter their name.
Instantaneously, a shareable link is generated, becoming the key to
unlocking a virtual chess battleground. This link becomes the bridge
between players, allowing them to connect and engage in exhilarating chess
matches in real-time. The choice of React for the frontend ensures a
responsive and intuitive user interface, providing players with an immersive
and enjoyable experience from the outset.
6
transcending the mere execution of moves to include the human element of
connection and interaction.
7
PROJECT ABSTRACT
The multiplayer chess website project is a sophisticated web application that seamlessly
blends the timeless game of chess with cutting-edge technologies, offering users a unique
and interactive gaming experience. Developed using React for the frontend, Socket.IO for
real-time communication, WebRTC for video call integration, and Node.js for backend
support, the platform enables users to engage in chess matches with friends or opponents
while enjoying real-time video communication.
The application begins with a user-friendly onboarding process. Upon entering the
website, a player is prompted to enter their name and is swiftly provided with a shareable
link. This link serves as an invitation for an opponent to join a game. The opponent, upon
clicking the link, enters their name, connecting them to the game lobby. Here, players can
engage in chess matches, with moves being updated in real-time through the power of
Socket.IO.
A standout feature of the project is the incorporation of WebRTC to facilitate video calls
during gameplay. Users have the option to initiate or accept video calls, enhancing the
social aspect of the gaming experience. This dynamic interaction enables players to
strategize, discuss moves, or simply enjoy a virtual face-to-face experience while engaging
in a game of chess.
The project's primary objective is to create a platform that not only offers a robust chess-
playing experience but also fosters real-time communication, adding a layer of social
connectivity to the gaming environment. This multifaceted approach addresses the
challenge of balancing real-time interaction with the responsiveness required for a
smooth gaming experience.
8
with real-time video communication, the platform offers users a dynamic and engaging
space to connect, strategize, and enjoy the timeless game in a virtual setting. The
successful integration of React, Socket.IO, WebRTC, and Node.js results in a feature-rich
application that redefines the online chess gaming experience.
9
OBJECTIVE
The multiplayer chess website project is driven by a comprehensive set of objectives
aimed at delivering a rich, interactive, and socially engaging gaming experience. The
primary goals include:
10
• Foster a sense of community among players by providing features that
encourage interaction, such as chat functionalities and video calls.
• Recognize the importance of the human element in online gaming, going
beyond the strategic aspects of chess to create a socially engaging
environment.
8. Adapting to Evolving Gaming Culture:
• Position the project at the forefront of an evolving gaming culture by
embracing modern technologies and trends.
• Stay agile and responsive to user feedback, incorporating updates and
improvements to align with the dynamic expectations of the gaming
community.
Through the achievement of these objectives, the multiplayer chess website project
aspires to redefine the online gaming experience, bridging the gap between traditional
board games and contemporary digital connectivity.
11
PROBLEM STATEMENT
Security Concerns: With user data being exchanged during gameplay and
video calls, implementing stringent security measures is essential. Ensuring the
privacy and integrity of user information is crucial to building trust within the
gaming community. The challenge lies in implementing security protocols that
safeguard against potential vulnerabilities and threats.
Social Interaction Dynamics: While the project aims to enhance the social
aspect of gaming through video calls, striking the right balance is challenging.
Providing features for chat and video calls should augment, not overshadow,
the core chess-playing experience. Managing the integration of real-time
12
communication to foster a sense of community without detracting from the
strategic focus of chess poses a nuanced challenge.
13
Proposed System
The proposed multiplayer chess website system envisions a comprehensive and
innovative platform that seamlessly integrates traditional chess gameplay with
cutting-edge real-time communication technologies, promising an immersive and
socially engaging experience. The system is designed to overcome the challenges
identified in the problem statement while providing a feature-rich environment for
players.
14
Adaptive and Agile Development: Acknowledging the dynamic nature of gaming
culture, the proposed system adopts an adaptive development approach. Regular
updates and improvements are prioritized based on user feedback and emerging
trends, ensuring the platform remains at the forefront of evolving gaming
expectations.
In summary, the proposed system envisions a multiplayer chess website that not only
overcomes the challenges identified in the problem statement but also sets new
standards for online chess gaming. By combining real-time interaction, user-friendly
design, scalability, security, social integration, and adaptability, the system aims to
redefine the gaming experience, creating a platform where players can connect,
compete, and communicate in a seamlessly integrated virtual environment.
15
Software and Hardware Requirements
Software Requirements:
1. Frontend Development:
• React: Utilized for creating a responsive and interactive user interface.
React facilitates the development of a dynamic frontend that enhances the
overall user experience.
2. Backend Development:
• Node.js: Chosen as the backend runtime environment to build a scalable
and high-performance server. Node.js allows for efficient handling of
concurrent connections, contributing to the responsiveness of the
application.
3. Real-Time Communication:
• Socket.IO: Employed to establish real-time bidirectional communication
between the server and clients. Socket.IO ensures instant updates on the
chessboard during gameplay, enhancing the interactive nature of the
platform.
4. Video Communication:
• WebRTC: Integrated to enable real-time video communication between
players during gameplay. WebRTC facilitates peer-to-peer communication,
enhancing the social aspect of the chess-playing experience.
5. Package Management:
• npm (Node Package Manager): Used for managing and installing project
dependencies. npm streamlines the process of incorporating external
libraries and tools into the project.
6. Version Control:
• Git: Implemented for version control, allowing for collaboration, code
management, and tracking changes throughout the development lifecycle.
Hardware Requirements:
1. Server Infrastructure:
• Cloud Hosting :Leveraged for hosting the backend server, providing
scalability, reliability, and performance optimization. Cloud hosting ensures
the application can handle an increasing number of users and concurrent
game sessions.
2. Client Devices:
16
• Desktops, Laptops, Tablets, and Smartphones: The frontend is designed
to be accessible across various devices, allowing users to play chess and
engage in video calls seamlessly on a range of platforms.
3. Web Cameras and Microphones:
• For Video Communication: Users require devices equipped with web
cameras and microphones to participate in real-time video calls during
gameplay.
4. Internet Connectivity:
• High-Speed Internet: Essential for a smooth gaming experience, high-
speed internet connectivity is crucial for real-time communication and
responsive gameplay.
Development Environment:
1. Code Editors:
• Visual Studio Code, Atom, or Sublime Text: Preferred code editors for
development, providing features like syntax highlighting, code completion,
and debugging tools.
2. Operating Systems:
• Windows, macOS, or Linux: The project is designed to be compatible
with multiple operating systems to ensure broad accessibility.
3. Browser Compatibility:
• Google Chrome, Mozilla Firefox, Safari, Microsoft Edge: The frontend
is optimized for compatibility with popular web browsers, ensuring a
consistent experience for users.
In conclusion, the software and hardware requirements outlined above provide the
foundation for developing and deploying the multiplayer chess website. The chosen
technologies and infrastructure aim to deliver a robust, scalable, and user-friendly
platform that seamlessly integrates traditional chess gameplay with modern real-time
communication features.
17
III. E-R Diagram
18
IV. Coding
import Chess from 'chess.js'
class Game {
constructor(thisPlayersColorIsWhite) {
this.chessBoard = this.makeStartingBoard()
this.toCoord = thisPlayersColorIsWhite ? {
0:8, 1:7, 2: 6, 3: 5, 4: 4, 5: 3, 6: 2, 7: 1
}:{
0:1, 1:2, 2: 3, 3: 4, 4: 5, 5: 6, 6: 7, 7: 8
this.toAlphabet = thisPlayersColorIsWhite ? {
}:{
this.toCoord2 = thisPlayersColorIsWhite ? {
8:0, 7:1, 6: 2, 5: 3, 4: 4, 3: 5, 2: 6, 1: 7
19
}:{
1:0, 2:1, 3: 2, 4: 3, 5: 4, 6: 5, 7: 6, 8: 7
this.toAlphabet2 = thisPlayersColorIsWhite ? {
}:{
this.nQueens = 1
getBoard() {
return this.chessBoard
setBoard(newBoard) {
this.chessBoard = newBoard
}:{
20
var currentBoard = this.getBoard()
if (!pieceCoordinates) {
return
const y = pieceCoordinates[1]
const x = pieceCoordinates[0]
piece: pieceId[1]})
this.chess.move({
21
from: this.toChessMove([x, y], to2D),
piece: pieceId[1],
promotion: 'q'
})
console.log(moveAttempt)
// console.log(isPromotion)
const x = this.toAlphabet2[move[0]]
let y
y = parseInt(move[1], 10) - 1
} else {
y = parseInt(move[1], 10) + 1
currentBoard[this.toCoord2[y]][x].setPiece(null)
22
// Check castling
if (castle.didCastle) {
currentBoard[castle.to_y][castle.to_x].setPiece(originalRook)
currentBoard[castle.y][castle.x].setPiece(null)
new ChessPiece(
'queen',
false,
: currentBoard[to_y][to_x].setPiece(originalPiece)
currentBoard[y][x].setPiece(null)
} else {
return reassign
console.log(this.chess.turn() + checkMate)
23
return this.chess.turn() + checkMate
console.log(this.chess.turn() + check)
console.log(currentBoard)
this.setBoard(currentBoard)
isCastle(moveAttempt) {
const isBlackCastle = ((move.from === 'e1' && move.to === 'g1') || (move.from
=== 'e1' && move.to === 'c1'))
const isWhiteCastle = (move.from === 'e8' && move.to === 'g8') || (move.from
=== 'e8' && move.to === 'c8')
return {
didCastle: false
24
let originalPositionOfRook
let newPositionOfRook
originalPositionOfRook = 'h1'
newPositionOfRook = 'f1'
originalPositionOfRook = 'a1'
newPositionOfRook = 'd1'
originalPositionOfRook = 'h8'
newPositionOfRook = 'f8'
} else { // e8 to c8
originalPositionOfRook = 'a8'
newPositionOfRook = 'd8'
return {
didCastle: true,
x: this.toAlphabet2[originalPositionOfRook[0]],
y: this.toCoord2[originalPositionOfRook[1]],
to_x: this.toAlphabet2[newPositionOfRook[0]],
to_y: this.toCoord2[newPositionOfRook[1]]
isPawnPromotion(to, piece) {
25
const res = piece === 'p' && (to[1] === 105 || to[1] === 735)
if (res) {
this.nQueens += 1
return res
toChessMove(finalPosition, to2D) {
let move
move = this.toAlphabet[to2D[finalPosition[0]]] +
this.toCoord[to2D[finalPosition[1]]]
} else {
return move
findPiece(board, pieceId) {
return [j, i]
26
}
makeStartingBoard() {
var startingChessBoard = []
startingChessBoard.push([])
startingChessBoard[i].push(emptySquare)
if (j == 0) {
startingChessBoard[j][this.thisPlayersColorIsWhite ? i : 7 -
i].setPiece(new ChessPiece(backRank[i], false, this.thisPlayersColorIsWhite ? "black"
27
: "white", this.thisPlayersColorIsWhite ? blackBackRankId[i] : whiteBackRankId[i]))
startingChessBoard[j + 1][this.thisPlayersColorIsWhite ? i : 7 -
i].setPiece(new ChessPiece("pawn", false, this.thisPlayersColorIsWhite ? "black" :
"white", this.thisPlayersColorIsWhite ? "bp" + i : "wp" + i))
} else {
startingChessBoard[j - 1][this.thisPlayersColorIsWhite ? i : 7 -
i].setPiece(new ChessPiece("pawn", false, this.thisPlayersColorIsWhite ? "white" :
"black", this.thisPlayersColorIsWhite ? "wp" + i : "bp" + i))
startingChessBoard[j][this.thisPlayersColorIsWhite ? i : 7 - i].setPiece(new
ChessPiece(backRank[i], false, this.thisPlayersColorIsWhite ? "white" : "black",
this.thisPlayersColorIsWhite ? whiteBackRankId[i] : blackBackRankId[i]))
return startingChessBoard
28
Working
29
LIMITATIONS
While the multiplayer chess website project represents a significant leap in the
integration of traditional gaming and modern technology, it is essential to acknowledge
certain limitations:
30
CONCLUSION
The project, despite its limitations, stands as a testament to the potential of technology
to redefine classic experiences. By combining the intellectual challenges of chess with
the interactive elements of real-time video communication, the multiplayer chess
website not only provides entertainment but also contributes to the evolving culture of
online gaming. As the platform evolves, it is poised to shape and be shaped by the
preferences and expectations of a vibrant and engaged gaming community.
31
References
1. React Documentation:
• Facebook. (Year). React - A JavaScript library for building user interfaces.
2. Socket.IO Documentation:
• Socket.IO. (Year). Socket.IO - Real-time web applications.
3. WebRTC Documentation:
• WebRTC Project. (Year). WebRTC - Open framework for the web.
4. Node.js Documentation:
• Node.js Foundation. (Year). Node.js - JavaScript runtime.
5. Chess.com (Inspiration for Chess Gameplay):
• Chess.com. (Year). Play Chess Online
32