Release Assembly - CSFV Notifications Web Widget

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.

Project Requirements

The goal of this challenge is to build a web widget of the CSFV Notifications header/popups that can be embedded in any frontend page or csfv main site and minisites.

You will address the following in this challenge :

• Implement the web widget in csfv_frontend_app.

• Update csfv_frontend_module and csfv_minisite_frontend_module (the 5 minisites) to host the web widget.    

  • You will need to cleanup all frontend code, remove existing notification static files, code and dependencies so it won't affect rendering the web widget.

• Single Sign On must work between the frontend application and the web widget. But if a request to load web widget was made and user was not logged in, then we need a clear message to frontend page that user is not logged in. Meaning that you cannot load the chat web widget unless there is a valid session.

• Take the following into consideration :    

  • Ensure the widget’s code doesn’t accidentally mess up with the rest of the page js functionality and css styling.

  • Dynamically load external CSS and JavaScript files.

  • We need a clear and working solution to clear the web widget JS file in case we have a new version to load.

  • Most of the websites will be within the CSFV subdomains but we need to bypass browsers’ single-origin policy using JSONP.

 

UI Requirements

Provided in the challenge forums the UI prototype you will use to create the web widget, note the following :

• The black header in notification icons background is just a placeholder, it is not part of web widget.

• The notification icons and pop ups are part of the web widget.

• Use angular.js to create the template for popups and loading content.

• Document and implement a clear mechanism to force clearing of caching the web widget js used to load the web widget in case we have newer versions.

• To load specific theme use a number parameter (themeId), i.e. themeId=1. In the JS in web widget backend you will use it to set the theme (i.e. notif_themeX where X is the themeId), if the parameter not passed then we are using the default theme which is the main website.

• We separated the css of the custom themes, the css should only be included in the web widget loading if the user set the themeId. This to reduce statics needed to be loaded at user side.

• Mapping between the notif_themeX and our current website applications :

  • Default theme is the csfv_frontend_module

  • notif_theme1 is circuitbot which exists in minisite1 branch.

  • notif_theme2 is xylem which exists in minisite2 branch.

  • notif_theme3 is flowjam which exists in minisite3 branch.

  • notif_theme4 is ghostmap which exists in minisite4 branch.

  • notif_theme5 is stormbound which exists in minisite5 branch.

References

• What is a Web Widget

• Here is a tutorial explanining how to build a web widget.

• Refer to csfv_chat_module as have implemented web widget there for chat using node.js, and jquery.

Github Code

• csfv_frontend_module - the csfv main website.

• csfv_minisite_frontend_module - csfv minisites websites, we host 5 websites (branches to use are minisite1, minisite2, minisite3, minisit4 and minisite5).

• csfv_chat_module - csfv chat backend code.

Submission Deliverables

Below is an overview of the deliverables:

• Patch file of the changes, include the hash commit used as basis for the work.

• A complete and detailed deployment document explaining how to deploy the application including configuration information.

Final Submission

For each member, the final submission should be uploaded to the Online Review Tool.

 

Final Submission Guidelines

.