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 the web arena, the code can be found at cloudspokes/arena-web.

Certain events cause the content of the chat area to be erased and a blank chat is shown.

This challenge is to remediate that, allowing chat messages to be stored in a short term persistence mechanism so chat messages are retained.

Functional Requirements

We would like the chat to retain its messages in the following scenarios:

• The browser window is refreshed;
• The user moves from one chat room to another and back. For example: going from the lobby chat area, to a round room, and back to the lobby;

The user should see the chat window as it was when the events above take place, no more, no less. For instance messages that were delivered to the lobby chat while the user was in the round room chat should not be displayed.

Full message characteristics should be retained. Note that messages have styling (color, font, etc.) depending on the type of message, and there are several types of messages such as system events, whispers, user messages, etc. There should be no difference in the messages and their styles in the chat if we compare the contents before and after the events in the scenarios above take place.

Technical Requirements

We will call the mechanism that persists the chat messages: chat message cache.

This only applies to the Web Arena, changes to the applet arena, or the arena engine are not required nor expected. If the need make such changes arises, clear justification should be documented.

We suggest the usage of the browser local storage to persist messages, however different ideas for other options are welcome. Pros and cons should be clearly documented. The implementation of this functionality doesn't have to support browsers or browser versions that do not have local storage capabilities, however the implementation should not break the support on them.

Note that in the near future the arena web will support usage of multiple browser tabs. The solutions should be considerate of that.

Chat messages only have to be persisted in a specific browser session. If the user opens another browser, or a incognito / private view, in which the persistence mechanism is not shared with the original browser, no chat history needs to be loaded.

We want to avoid loading stale (old) data. We want the cache expiration to be a positive integer environment variables representing the seconds of how long the cache is considered valid. This variable should be applied as part of the build process of arena web. The chat message cache should keep track of the date and time in which the latest message was added to the cache. When loading messages from the cache, if the time in which the latest message was added plus the cache expiration is less (earlier) than the current date time, the cache is considered invalid and should not be used, in this case the chat widget should be loaded blank, with no message history, and the cache should be cleared. For this submission the cache expiration should be 30 minutes (1800 seconds).

Arena has multiple chat rooms, and we don't want the messages from one chat room to be shown in another. A specific chat message cache should be created for each separate chat room a user visits, and the specific cache should be loaded if the user returns to that specific room.

We want to be considerate of how much browser memory we use, and so the size of the chat message cache should be limited by number of messages. The maximum number of messages should be configured as an environment variable and applied as part of the build process of arena web. If the chat message cache reaches the maximum number of messages, before adding the next new message, the oldest message should be removed as to not go over the limit. For this submission set the maximum number of messages to 100. This limit should be applied individually for each chat message cache, it is not a "shared" limit, if the user visits multiple chats in one session, each one of the created caches will have its own limit of 100 messages.

There is no need to monitor chat feeds in the background, only messages delivered to the currently displayed chat room should go to the cache. If the user moves from room 1 to room 2, spends 5 minutes in room 2 and then returns to room 1, the room 1 chat should display the messages it had 5 minutes ago, at the moment when the user moved from room 1 to room 2. Note, however, that this should be specific to one browser tab, and in the near future the user will be able to have multiple browser tabs open in the same browser, and have a chat widget active in each one of those tabs, in which case each chat room should be recorded in its own cache, and if there are multiple tabs showing the same chat room, they should be able to share the same underlying cache.

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:

1. Merge with the UI, it will be ready in final fix phase.

2. Create pull request in final fix phase for merging.

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