EIE4432 Web Systems and Technologies Project Report s e Project Name: Draw & Guess GROUP 21 SHEN Xialin (Spark) 12131888D Introduction XUE Peng (Raymond) 12134614D This is a multi-player draw and guess game. During the game, one player will draw a picture according to the question and the other players will guess based on the hint provided. Our project has the following features, User platform, friend system and online chatting are supported for this game. Different techniques and tools like AJAX, SQL, Bootstrap, JQuery, Node.js are used. Sitemap enxi
How to run [0] Get codes for this project: Method 1 (Recommended): Clone or download the latest version from GitHub (https://github.com/spark-xl/drawandguess) Method 2: Copy the codes from the CD s e [1] Install dependency Node.js (https://nodejs.org/en/download/) [2] Import database Import the necessary database by using the following MySQL command: mysql> source DrawAndGuess/database/drawandguess.sql; A database called drawandguess will be imported, it should contain the following tables. mysql> use drawandguess; mysql> show tables; +------------------------+ Tables_in_drawandguess +------------------------+ gamequestions gameroom gameuser relationship roomquestion users +------------------------+ [3] Move project to localhost folder Move whole project to localhost folder (xmapp/htdocs/) [4] Start localhost server Make sure Apache localhost is working [4] Start socket.io server Start the socket.io server by executing the following code: node DrawAndGuess/socket/server.js (KEEP THE SERVER RUNNING AND DO NOT CLOSE THE TERMINAL WINDOW) [5] Visit http://localhost/drawandguess/loginui/login.php and enjoy the game!!! 2 NOTE: You may need to create a mysql user: Account name: drawandguess Password: 123456 enxi
User Platform The main display page for user platform is called /home/home.php. There are three major functional units at the home page, game room status, room creation and side bar. The side bar contains two elements, messages and add friends. s e Navigation Bar: 3 Fig. 1 Home Page A navigation bar at top of this page is used for displaying the user name and providing link to functions like update account information and sign out. If the user clicks the Manage Account at the navigation bar, a pop-up modal will show to change the properties like user name and password. The email account for the user will also be shown, however this attribute cannot be changed. Fid. 2 Manage Account enxi
Game Room Game room shows available rooms for the user. This part is automatically refreshed when user enters the home page. User can also click on the refresh button to get the latest availability of each game room. Every game room object is formed by three attributes, an icon, room name and availability message. Available room will have green status message and can be clicked. Not available room will have red status message cannot be clicked. The status of the room will be changed to available every time the game is not started or each round of the game is ended. s e Create Room A game room can be created by two steps: select friends and name the room. The user can select his friends by clicking on the multi-select bar, which is also served as a friend list. At the top of the contents of the select bar, there is a search button to provide convenience for users with lots of friends. The friend online status will also be displayed so that user can select the online players in order to start game immediately. After selecting friends and picking a name, user can click the create button to start the game. There is also a refresh button for user to get the latest friend list if he just added any friends. Message 4 Fig. 3 Create Game Room Message element at the side bar serves as an inbox to display friend requests and any friend request history like sent requests and denied requests. The inbox is also a pop-up window. By clicking the message bar, the received friend requests will be automatically refreshed. There is also a refresh button for every attribute in order to get the latest information. Sent requests field displays every requests sent by the user. If the request has been responded, then it will not appear. Declined requests are the requests denied by the user. For sent requests and denied requests, hide button are provided since these two messages are not very important and may contain too many contents. The online status of the user will be displayed at the sent requests. If the user finds the friend he wants to add is online, he can urge the friend to act to the request. To distinguish online and offline status, different backgrounds are used to display different status. enxi
s e Add Friends 5 Fig. 4 Messages Two searching methods are supported at this function, search by email and search by name. Since email account is a unique attribute for each user, search by email will provide more precise results. If the user clicks the add button, a message will show to remind the user that the request has been sent. If the user clicks the button again, then a message will alert the user that the request is still pending. If the user is already friend with the searched user, message will remind the user that they are already friends. Fig. 5 Add Friends enxi
Technical Details Database s e 6 Fig. 6 ER Diagram The table users record the basic information of every user, including the user ID, name, email, password, online status and game history information. The entity password is of length 256 because the real password is hashed. Table relationship records the information about the friend system. Here entity user_one_id should always be smaller than user_two_id to avoid repetition. user_one_id and user_two_id combined together is the primary key. Table gameuser records all the information about the permitted users to the game room. If a user enters the game room, his status will be changed to T. Table gameroom records the basic information about the game room. Entity status shows whether the game room is currently available or not. Entity currentuserid records the current drawing player and the entity questionid records the current question. Table roomquestion records all the questions shown in an particular room to avoid repetition of game questions and each question is picked from the table gamequestions. enxi
PHP PHP techniques are used for two main purpose in this game application. One is the connection between the web pages and database. The other is session tracking to pass the user information among different sites. The information fetched by PHP from database is used for many different purposes, like AJAX and Node.JS server. Different functions like get the next player or next question, condition of the game room and many checking functions. PHP mainly is used with SQL to fetch useful information from the database and process the information to feed the Node.JS server to release some load from the JavaScript programs. For example, the information about the next player and next question in the s e game is directly fed by PHP to the JavaScript instead of let JavaScript to select the next player and question. AJAX AJAX is used nearly throughout the whole project, from the login page to the home page and game room page. In the login page, AJAX is used to check whether an email address has existed in the database. In the home page, AJAX is used to fetch the latest game room information and friend lists. The message box and search friend function is also implemented with AJAX. Because for these kinds of information, the whole page need not to be refreshed in order to get the newest data. The AJAX will response with the latest information from the database only at the designated part and can be triggered by many events like loading, clicking and blur. For example, the friend system. The friend system includes the functions like adding friends, getting friend requests and response to the request. Our system used numbers to represent the different status of the request. 7 States Status 0 Friend relation established 1 Request is pending 2 Request is denied Table.1 Request Status When the user searches a name through the add friends function. AJAX will bring the search result from all the users. When the user clicks on the add button, AJAX will update the request in the database and check the new status of the request. If the request has already been created, AJAX will bring back the response to remind the user. If the status is successfully created, a message will also be displayed for the user. If the user clicks the add button twice, then the expected output should be an error message alerts the user that the request has already been sent. AJAX perfectly fulfills this enxi
expectation. For many other instant information update like answering a request or checking a request and real-time game room status, AJAX is also used. JQuery JQuery is used for only one purpose in this project, the friend list. The friend list should be a multiselect field and should be easily manipulated by the user since user will create a game room based on this selection. The original multi-select bar provided by HTML is hard to use because the user has to hold Ctrl to select more than one friends. Several self-study has been done about JQuery in order to s e implement a better multi-select bar. Finally, a plug-in works with Bootstrap is used. The original sample about this plug-in is hard coded with options inside the multi-select bar. Since the friend list should be able to updated according to the latest database information, the options inside the multi-select bar should be dynamically inserted. Hence JQuery functions and PHP are used to update the friend list. PHP will fetch the latest information from the database and then return the data to JQuery function and JQuery will then push the data into the select bar. The selected options inside the multi-select bar can be inserted into an array for further processing at the server side. Bootstrap 8 Fig.7 PHP fetch data sample Bootstrap is a front-side development kit implemented with JQuery, CSS frames JavaScript, and many other extensions. It supports nearly all the major browsers like Chrome, Firefox, IE and Safari. This project implements many styles and frames supported by Bootstrap, includes the buttons, fonts and webpage templates. These are the fundamental parts of a web page. There is another important feature attracts us to use Bootstrap, the responsive tags. For example, the navigation bar. When the webpage is shrunk to a certain size, the dropdown menu at the right side will become a button. enxi
9 Fig. 8 Responsive Tags s e The pop-up windows like register page, add friend page and message box page are also realized by responsive tags of Bootstrap. Fig. 9 Responsive Tag Code enxi
Functionalities # GAME Here is the full list of functions related to the game User could see current online users in this room and could start 10 the game once there are more than 1 online user. Once the game start, one of the user will be assigned the rule s e as drawer and the others will be guesser. The drawer could see the question content and try to convey the message by drawing before the time running out. Many options are provided for drawer: Different colors and stroke width, erase, undo, clear and save image to disk Meanwhile, the guessers could see the drawer s real-time drawing and also the hint about the question. They could input and send their guess. Everybody in the game room could also do real-time chatting The game will move to next round and a new player will become the drawer, once the guesser make a correct guess or the time running out. If the current drawer choses to quit game, server will automatically assign a new drawer and make the game continue. Game will end when everyone has played as the drawer. enxi
Technical Explanation # GAME Here is the list of main features related to the game. # Support multiple games running at the same time # All messages will only be sent to a specific game room # Real-time drawing, editing, chatting, updating online player list s e # Real-time game running: start, guess, change player, end, quit [1] How our project achieves real-time operating? The usage of socket.io provides a streaming between server and client. All the player in a game room could be notified instantly and then they will send an AJAX request for fetching the latest data stored in the database. [2] How to support multiple games running simultaneously? Socket.io provides the function that each client could join a room by specifying a [room identification string] and each room will have an unique connection to the server. In this case, server could send the message only to a specific room. [3] How to implement real-time drawing and chatting Data flow: User A start drawing -> Socket.io client of User A will send mouse location data to server -> Server will broadcast the location data to all connected users in this room. Here is the data received by the Node.js server (example) 11 ROOM C ROO M B ROOM A Join a room: Send message to a room: enxi
JS Class - StrokeManager: This class is designed for drawing content on canvas. It can work in two modes. (1) When the user is drawer, the mouse events such as mousedown, mouseup, mousemove will be listened and the position data will be directly passed to StrokeManager for drawing. (2) When the user is guesser, StrokeManager could still perform drawing by using the mouse point data broadcasted by the server mentioned above. JS Class - StrokeUnit: This class is the basic stroke element used by StrokeManager. A new stroke object will be created between the user press down the mouse (start drawing) and release the mouse (end drawing). All the points traversed by mouse during this time period will be push into an array and stored in the stroke object. s e [4] How to implement real-time gaming As mentioned before, the Node.js server could broadcast messages to all players in a game room. Let s see one example to understand how real-time game is implemented. UserA made a correct guess so the game should enter the next round -> UserA send a message to Node.js server and then everyone in the room receive the message and know it is the time to display the loading page until further notification -> Meanwhile, usera also send an AJAX request to Apache server to notify the server that the game should enter a new round and a new question and drawer should be assigned -> Then the server will prepare and update the playerid and questionid in DB. Later on, when Apache server update the data in DB successfully, it will return a success response to the AJAX request and the UserA will notice that response. 12 enxi
s e Then usera will send another message to Node.js server and make a broadcast to all the players that the data has been updated. Then all the players will send AJAX requests to fetch the latest player and question data from the server and hide the loading page. In this way, game entered the next round. JS Class - GameRoomManager: This class handles all game flow in the room. It could decode the GAME_STATUS broadcasted by the server and instruct game room to do the proper action. JS Class - GameRoom: This class actually control the appearance of game room and it also listen to the user action and make response. JS Class - NetworkManager: This class s duty is to control the network, emit the message from client and receive from the server. 13 enxi
Collaboration and Work Division Although our group only has two members, we still believe version control and collaboration is very important. We use GitHub to manage codes. A new branch will be created for a new feature and when the 14 development is finished and verified, this branch will be merged into the master branch. s e We use Waffle to manage tasks. Each task card will be labeled with Ready, In Progress, Pending Review or Done in the development circle so everybody will know what others are currently doing. enxi
MEMBER Together Raymond 15 Contribution Designing the game flow, data model and database structure Testing and debugging Create and maintain database s e Spark Grade Conclusion Build all PHP files for database query and update All functions and UI related to user platform Login/out, registration Friend request, accept & deny, check history requests and search friends Manage account, friend list, check game rooms and create game room Pre-test and confirm the usage of external library Version control and task management on GitHub Build socket.io server All functions and UI related to game Real time drawing, editing, chatting, updating online user list Real time game running (start, guess, change player, end, quit) Raymond: A (Graded by Spark) Spark: A (Graded by Raymond) Although our group only has two members, we still believe version control and collaboration is very important. This project provided us a great opportunity to practice the web technologies learnt in the lecture. We have become very familiar with the techniques like HTML, CSS, JavaScript, PHP and MySQL. At the same time, our task management and team working skills are also enhanced. In the end, We could like to sincerely thank Dr. Bonnie, Dr. Pauli and Ms Doris for providing great help to us. enxi
Future Development 1. Game history display at home page including number of wins and lose, like and dislike. 2. Game room icon assign should be consistent for different users. Now the icons are randomly assigned 16 and it is difficult for users to find a certain room. This feature can be realized by recording the icon information for each game room at the database. s e 3. Display number of messages at the message bar located at side bar with badge. 4. Add remember me function at the login page. 5. We may could finish the like & dislike function in the future. It is an interesting function and will be not difficult to implement. Reference: [1] Bunyan and Kar, lbuild an HTML5 game : a developer's guide with CSS and JavaScript, 2015 [2] Luke Welling and Laura Thomson, PHP and MySQL Web Development (4th Edition), 2009 [3] Ryan Stephens, Ron Plew, Arie D. Jones, Sams Teach Yourself SQL in 24 Hours (5th Edition), 2014 [4] Bootstrap www.bootcss.com/ [5] Bootstrap Template http://getbootstrap.com/ [6] Node.js https://nodejs.org/en/ [7] socket.io http://socket.io/ [8] Bootstrap Multi-select https://github.com/davidstutz/bootstrap-multiselect [9] JQuery https://ajax.googleapis.com/ajax/libs/jquery/2.0.3 enxi