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 appirio-tech/arena-web.

For this challenge, we'd like to enhance the web arena to allow deep links, so that a URL can take a user directly to a particular area of the arena.

If the user is not logged in, show the login page and then forward to the requested area.

Requirements

In a previous challenge we've already implemented 3 types of deep links, in this challenge we are going to add one more and make a few fixes to the code:

We need to support the follow 3 types of deep links:

• We would like this deep link to work: https://qa.arena.topcoder.com/#/u/coding/16383/12545/2. This is a deep link to a problem in a live srm. To get it, enter a live SRM and open a problem. This won't be as much for user sharing, but for browser refreshes. If the user is coding a problem and is forced to refresh the browser, we would like the user to land in the coding page they were. Today they land back in the dashboard.

• Right now there's no way to get / copy deep link for pop ups like user info, registration pop up, etc...To fix this we need to:

  • For user info, add a image button that will allow users to copy the link. You can use a dummy logo for now, we'll provide one that you can replace later. When copy is done show a notification message for 5 seconds saying "link is ready to be pasted". Please make sure this new button / links looks consistent with existing design.

  • For srm link we should have the button (same logo / image) in the active matches widget. Maybe just add another button to the "Invite Others" area where the twitter and Facebook logos are.When clicked it will copy the link to the dashboard and show a notification message for 5 seconds saying "Link is ready to be pasted". Just to be clear, the use case would be:

    • User 1 logs in;

    • User 1 Registers to an srm;

    • User 1 clicks a button or link to copy the link to the srm for which he just registered;

    • User 1 sends link to User 2;

    • User 2 opens link;

    • If not logged in already, user 2 is presented with the login screen;

    • User 2 is presented with the registration page of the SRM User 1 selected.

Code branch

For this challenge, you must fork the srm_problem_deep_link branch NOT the master branch. The winner will also need to submit pull request against the srm_problem_deep_link branch.

Timeline

Please note this challenge has shorter timeline (submission / review / appeals) so make sure you don't miss the deadlines.

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 preferred.

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

Winner Responsibility

Winner will be responsible to create pull request in final fix and help with 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.

Timeline

This challenge has shorter timeline, make sure you pay attention to this and meet all phase deadlines.

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 ithttp://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

PROTOTYPE GOALS:
- We need clean documentation of the code. Please create detailed comments for the different HTML5, CSS3 and JavaScript code.
- Please note, we are expecting the HTML5 prototype to work on mobiles.
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Remember, all pages should link where possible. Please help us show correct page flow.
- Please use Bootstrap 3 for css.
- Please use AngularJS framework for data binding.
- Please use angular-ui components:
1- ui-bootstrap
2- ui-router (for app structure as a state machine)
3- ui-ace or ui-codemirror (for the code editor)
4- other ui components as needed (date, calendar)

TECHNOLOGY GUIDELINES:
1. HTML5
- Provide comments on the page elements to give clear explanation of code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts
- Make sure all HTML files pass Validation without Error/Warning.

2. CSS3
- Provide comments on the CSS code, we need CSS comments to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so future developers can follow the code.
- All CSS naming should not have any conflicts
- Make sure all CSS files pass validation without Error/Warning.

3. JAVASCRIPT
- Provide comments on the JavaScript code to give clear explanation of the code usage. The goal is to help future developers understand the code and know what needs to be developer further.
- Please use clean INDENTATION for all JavaScript code so future developers can follow the code.

4. ANGULAR JS
- Angular models are plain old JavaScript objects. Use JSON objects for data binding with view.
- Data-binding is an automatic way of updating the view whenever the model changes, as well as updating the model whenever the view changes.
- Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form.
- Use AngularJS Framework (http://angularjs.org, http://docs.angularjs.org/guide) to populate JSON data.

5. IMAGES
- For mobile development, images should be properly compressed while still having good visual quality.
- If possible, using background color properties, instead of repetition usage of background based image.
- Use sprites technique for the image slicing. Page reference