Release Assembly - CSFV Chat Frontend Revamp and Improvement Part 1

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 challenge is to revamp the chat frontend widgets and implement all it's functionality as expected.

Competition Task Overview

You will be provided with a new UI Prototype that addresses 6 themes, you will address the following in this challenge :

• Rewrite the chat jade files from scratch using the provided prototype.
• Use the CSS provided by the chat UI prototype (you are not allowed to use any existing css from csfv_chat_frontend_app module)
• Use angularjs or knockoutjs in the javascript code to manipulate functionality in the widgets (you are not allowed to hardcode HTML code in the javascript files)
  • Javascript code already implemented the functionality, you only need to make sure that everything works as expected with the revamped jade.
  • Create new JS file call it revamped-chat.js, it should only contains the JS code that will be used by widgets implemented in this challenge, the existing frontend chat js files should not be referenced from the views, leave it as it is.
  • Provide proper documentation for each method, and inline comments within the method implementation, this is important for future maintenance.
  • Cleanup useless code that is not used by the widgets. For Expaneded widgets JS code you can leave it there as we will have future challenge to implement it's jade views.
• For user photos or any other dynamic urls, update csfv_chat_module config (NOT csfv_chat_frontend_app) to pass the URL that will be called to render user photos)
• Expaneded Widgets are OUT OF SCOPE.
• All functionality in the chat widgets must be implemented, here a some notes about it that are not clear from the prototype :
  • Both admin and non-admin functionality must work.
  • The main chat widget should load all Friends of a user (disregard if they are online or offline)
  • For placeholder text (i.e. Search Users placeholder in search box of main widget), it is currently use JS functionality for that, replace it with placeholder attribute.
  • Searching users in user widget should be auto complete.
  • "Turn Off" and "Block this person" we don't have support for it in backend, so they will be dead links for now.
  • In Main widget there is user photo, "My Name" and "What are you doing?", these should be dynamically populated, it should pull user photo, username of that user, and the quote of that user.
  • All user photos across all widgets should be implemented properly.
• The widgets that you are implementing are :
  • main widget for admin and non admin with all functionality you see in the prototype pages. with all in-line panels.
  • room widget (both community and common rooms), user widgets. with all in-line panels.
  • Extra widgets - this is the last (forth) square widget appear only if # of active widgets are more than two.
  • Chat History Widget is OUT OF SCOPE
• The pages in scope from prototype are :
  • Chat_For_Admin.html
  • Chat_For_Non_Admin.html
  • Chat_New_Message.html
• To switch between themes, refer to the readme.txt file in the attached UI Prototype. All themes styling must look like the provided prototype.
• Tracing panels must be kept in the csfv_chat_frontend_app module.

Chat Code

csfv_chat_module contains the chat server-side code.

csfv_chat_frontend_app contains the frontend application that host the views and run the chat application.

Testing Current Logic

If you need to test how the chat backend work with frontend, you can deploy csfv_chat_frontend_app in different directory, chat ports, and launch it as playground, you can refer to it while developing the new revamped frontend.

Github Code

The code is located in private github repository, http://github.com/topcoderinc please request access to get the code (if you don't already have it)

csfv_utilities_module
csfv_core_module
csfv_chat_module
csfv_chat_frontend_app