Challenge Overview
Project Overview
This project, the CSFV Community Gaming website project will provide the web site infrastructure and integration of the games. This will be a web site that is available on the Internet, and also will be delivered in a form where the server and the games can be installed and used behind a firewall.
The goal of this assembly challenge is to bring some fixes and improvement to CSFV notifications.
Competition Task Overview
The CSFV Notification Pop-ups are the three icons that appear at the header of each CSFV website for logged-in users (www.verigames.com, circuitbot.verigames.com, xylem.verigames.com, flowjam.verigames.com, ghostmap.verigames.com, and stormbound.verigames.com), this image tell you what it is as well (in case you did not find it) :
We have created a module that is specifically for rendering frontend notification popups, you will use this module to fix the client-side of the notification, and you will use csfv_frontend_module sockets to serve notification data to client side and process client-side, also it will serve user images.
You will address the following in this challenge :
- There should be exactly one client-side javascript for all notification related functions.
- Notifications css should be placed in notifications.css file. Each site should've it's own notifications.css file.
- The current functionalities of each popup :
- User friend :
- When page load, it firsts load current pending requests, if user does not have any pending requests, it load recommended friends, if user does not have any recommendation it will display empty notification popup.
- The client will listen to mainsite sockets, if new friend request was submitted, the user will receive emits about new friend request.
- Each friend request will have two options "ignore", "accept"
- When user click "ignore", the user will get a confirmation message "are you sure ? yes/no"
- When user click "accept", a request will be done to complete the process in backend. On success, "View Profile" button appears.
- Each friend recommendation will have "add as friend" button, user can submit friend request.
- The notification counter icon represents currently pending friend requests.
- Messages (represents user messages)
- This should be modified so it listen to chat sockets directly and don't rely on chat widget to load in order to listen to new messages.
- This will display list of conversations the user has :
- Entries are sorted from recent to oldest
- Each entry represents a unique conversation
- If the last message of the conversation was made by the current user, it shoudl show "me: {message}" otherwise it will show the "{message}" as indication that the other user is the one who made the last message.
- notification counter icon represents # of unread messages. The js shoudl listen to win user read the message and update the message counter.
- Unread messages entries will have different style than read messages.
- Data notifications (repreesnts the activities happend in the website other than user messages and friend requests)
- No action to be done in this list, it will display list of notifications and user can click on them to navigate to the activity source/origin.
- notification counter icon repersents # of unread notifications. It will convert to read when user open the notification popup and read the notifications. the client side also should listen as when the notifications was read and it should update the popup. User can have more than one session opened, so all instances should be in sync.
- User friend :
- All notifications, images, and user photos should be displayed properly. You must fix any problem exist in any theme.
- All logic will be done through web sockets. You will move the logic from regular controller endpoint to be part of csfv web sockets application. For messages it will be through chat sockets application.
- We have grouped all notification popups in csfv_notification_module, this module only showcase the notification popups and use csfv_frontend_module to serve user images and backend via http proxy. You will update this module to be used as testing your work.
- Javascript, css, images should be cleanedup in the module, all unrelated files/code should be eliminated.
- All URLs must be full URLs, including user photos, the http-proxy in csfv_notification_module must be removed. You can use allowed origin to fix cross-domain errors.
Github Code
The source code exists in private github repo http://www.github.com/topcoderinc , if you don't have access please request in challenge forums.
https://github.com/topcoderinc/csfv_frontend_module
https://github.com/topcoderinc/csfv_minisite_frontend_module
https://github.com/topcoderinc/csfv_notification_module
Final Submission Guidelines
Submission Deliverables
- All required files that address the requirements outlined above.
- Updated readme.
- It is prefered to submit a patch file for changes.
Final Submission
For each member, the final submission should be uploaded to the Online Review Tool.