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.

For this contest, we are going to fix a few issues identified in the current functionality.

TC Time Widget

Time by time, there is a SynchTimeResponse from the backend to get the client sync with backend time. This is very important for backend.

We'd like to update the TC Time Widget can be easily updated for this sync.

and please format the time as EST timezone, and fix the layout issue like https://apps.topcoder.com/bugs/browse/WEBBASEDARENA-12

Connection Status Widget

The Connection Status widget is used to indicate a stable connection from the backend, the current implementation is based on a mock connection-status.json.

We'd like to update it to base on the real signal - the socket.io connection.

You should demonstrate that the network is down, the connection status should be properly reflect that.

Please fix the layout issue like https://apps.topcoder.com/bugs/browse/WEBBASEDARENA-12

User Profile Widget

Currently, the user profile is retrieved and persisted in session, see

https://github.com/cloudspokes/arena-web/blob/master/app/js/resolvers.js#L84-L88

Please update the Profile Overview & Important Messages section in Dashboard page to show the properly informations.

Force Logout

We'd like to implement the Force Logout functionality.

If a user login with arena web first, then the same account is login with arena applet or arena web, and ForceLogoutResponse will be sent out, we'd like to arena web can properly handle this case.

It will logout the user automatically back to Home page.

Enter button visibility Fix

The Enter button is used to enter into specific active SRM, it sometime works, somtimes not. see https://apps.topcoder.com/bugs/browse/BUGHUNTS4WEBBASEDARENA-15 and https://apps.topcoder.com/bugs/browse/BUGHUNTS4WEBBASEDARENA-32

We'd like to make it completely working, even after the completion of the SRM, but the SRM is not unloaded (still show active in arena applet).

Registration Terms Display Issue

Please check https://apps.topcoder.com/bugs/browse/BUGHUNTS4WEBBASEDARENA-18 for reproduce steps.

Active Contest Title Display Change

"Single Round Match TCO14 Algorithm" doesn't look good. It doesn't also say which round of TCO it is. Frankly even "Single Round Match Single Round Match 622" doesn't look good, what's the point of saying it twice.

Possible fix: check round type, for "Single Round Match" show just contest name (e.g. "Single Round Match 622"), for "Tournament Round" show contest name + round name (e.g. "TCO14 Algorithm Round 2A").

Verification

Please check the SRM Problem Guide (attached in forum) to properly setup the SRM. Notes, one Test SRM is already setup, you just need to change the times.

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

Final Submission Guidelines