Release Assembly - CSFV Main Site Games Page Revamp

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.

Competition Task Overview

The goal of this challenge is to revamp games page, using provided HTML UI Prototype and outlined requirements below.

Requirements

• You are updating csfv_frontend_module in this challenge.

• This page will NOT replace /games page or affect it's functionality, it should be accessed via /games2 route.

• UI Pages : index.html and index-loggedin.html

• Routes : it is either /games2 or / (landing page)

• index.html :

  • The carousel top section should be retrieved from CMS :

  • The CMS Post used in /home page will be used here to populate carousel, the image is not same dimension as one we use in /home page, so you need to use a new meta attribute for the image (i.e. new_banner)
    

  • “More Info” is out of scope of this challenge so hide “More Info” button :

    • Remove the anchor of that button.

    • Don’t include the More Info expand panel html in your submission.

    • Don’t include the JS related to more info in your submission.

  • “What’s Hot ?”

    • This widget will load latest news via ajax. Retrieve news items sorted by latest post date (create date NOT update date).

    • View more will load more items via ajax.

    • You must use same date format as in prototype.

    • Comments/Likes/Share stats should be implemented

      • we are going to implement sharing soon, so you can hardcode the value for now.

      • Comment count comes from disqus

      • Likes comes from our liking system/backend

    • News item Image : this comes from a meta attribute, it might not be set so don’t display image if it does not exist

    • News item Title : this is title of the CMS post.

    • Clicking on title or image will take to news details page.

  • “Recent Forums Post”

    • This post will retrieve latest forum posts sorted by update date.

    • Clicking on post title will take user to thread post page.

    • View more will load more items with same sorting

    • We will display the whole post retrieved, don’t truncate.

  • “#Verigames Twitter”

    • This widget is same as the one we have in /home but different styling.

    • You will need to add “Follow” button at header, and replace “view more” with “Tweet to @account-name” at bottom.

• Index-loggedin.html

  • This page show widgets that will appear for logged in users :

    • “Recent Activity” is out of scope.

    • “My Games”

      • This will show games the user played with basic stats that can be retrieved from gaming api.

      • For friends you can retrieve the logged in user’s friends and use the usernames to search the game scoring level to see if they played the game or not. In frontend display only 5 friends who played the game, we wont’ implement the ‘...’ for now.

      • Clicking on game name or game image will open the game play page.

        • game name, image and play link should be retrieved from the same CMS Post we use in carousel items at top of the page.

    • “Top Leaderboard” and “Top Awards” are self explanatory - you retrieve it from PlayerScoring and PlayerAchievement respectively.

      • View More button will load more rows.

    • For the “Carousel”, “My Games”, “Top Leaderboards”, and “Top Awards” widgets :

      • Demonstrate with more than 10 games. Arrow navigation should work perfectly.

      • Each game has a separate db on separate VM, you need to create  configuration map between game name/id and it’s db connection. provide the most flexible solution.

      • They all should be loaded via ajax call.

• Use Angular.js to implement this page

Documentation Provided

• UI Prototype provided in challenge forums.
• The deployemnt guide of the CSFV websites can be found in the github private repo, in README file. Ask questions in challenge forums. if you have troubles deploying the websites.

Source Code

Source code exists in private github repo https://github.com/topcoderinc/

If you get 404 then you need permission to access it. Request it in challenge forums, copilot will add you to the repository and you should receive email about you being added to github. Post your *github* account name when requesting access.

• csfv_frontend_module
• csfv_gaming_api_module (this is the module that contains code related to games scoring and achievements, every game will have seperate installation of this module)

Final Submission Guidelines

Submission Deliverables

Below is an overview of the deliverables:

• Patch file of changes.
• Detailed document about structure of CMS posts and metadata, and configuration needed by the page.
• Deployment document with verification screens for reviewers.
• Updated csfv_test_data_generator module if needed.

Final Submission

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