Project Overview

TopCoder is implementing a Web-based Arena by using Web Socket protocol, AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started).

The frontend application is using AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) and Bootstrap 3 (http://getbootstrap.com/getting-started), and using web socket protocol to exchange data with backend web socket listener.

The backend web socket listener is ready for exchanging messages over web socket protocol.

Competition Task Overview

We are in the process of implementing and improving the web arena, the code can be found at cloudspokes/arena-web, please use the dev branch for your development.

For this contest, we are going to implement Chat Widget.

Current Implementation

• the chat today is  showing system messages, chat messages, room changes, etc. all in one huge feed, which dramatically impacts user experience.
• We are limiting the chat length to only 400 messages, but if the user scrolls all the way to the top we need a control (like a button for instance) to allow the user to load more to see earlier messages.

Expected Improvement

We'd like to filter out system messages, the first one to figure out is user entering and leaving messages.

Instead of showing entering and leaving messages, we will show icons after the user handle, the entering and leaving system messages should not be shown in the messages list anymore.

When user entering,  the user handle will be added to Who's here section, and the entering icon will be shown after the user handle, the entering icon is not showing always, it will be shown with a predefined interval (through environment variable).

When user leaving, the leaving icon will be showing after the user handle with a predefined time interval, after that, the user handle will be removed from the Who's here list.

Please also properly handle the case, that user is entering and leaving consequently.

If the user is left, and entering again, just show the entering icon.  if the user is entering then leaving, just show the leaving icon.

for case that the user has a long handle, we will truncat truncate the handle and add "..." when the entering/leaving icon is displaying.

For instance, let's say that we can only fit 15 characters, and the handle is mauriciodesiderio, we should show: mauriciodesi...

Just make sure the title (tooltip that shows when hovering the mouse over the handle) shows the full handle.

Themes

for this challenge, you are not expected to support all Themes, but please tweek the UI a little to fit the Dark theme, like background etc.

Configuration

Please make the domain related information configurable as others, see dev-local.sh. So we can easily switch for different environment.

Where to setup the Arena Web

You are expected to have your own environment to setup web arena, Linux environment is perferred.

for backend, an Arena VM will be allocated to each competitor, to setup SRM contests datas.

Winner Responsibility

Winner will be responsible to create a pull request in final fix phase for final review, and be responsible to update the pull request to auto merge.

About Code Base

For the code under /home/apps/dev directory, some are hosted in internal svn repositories, some are hosted in private repositories in github.

You can check Source Code Management For TopCoder Competition Engine - TopCoder Wiki

For SVN Access, please send request to support@topcoder.com, For github access, please post your github account in forum to ask PM to grant you access.

Arena VM

Before asking your own VM, you need to have a public key on your profile before asking for the VM.

You can find more details on how to generate a key http://apps.topcoder.com/wiki/display/projects/Generate+SSH+Key and how to connect using it http://apps.topcoder.com/wiki/display/projects/Connect+Using+SSH+Key.

To use the Arena VM, please follow http://apps.topcoder.com/wiki/display/docs/Competition+Engine+VM+Setup

Specific HTML/CSS/JavaScript Requirements:
HTML/CSS Requirements:
- Your HTML code must be valid HTML5 and follow best practices
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to layout your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external style-sheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Label all CSS, JavaScript, or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

JavaScript Requirements:
- jQuery
- AngularJS
- All custom javascript (written by the competitors) must pass jslint checks

Browsers Requirements:
- IE10
- IE11
- Latest Safari
- Latest Firefox
- Latest Chrome