Overall Organization

Our website is organized into three main views:  the browsing view, the combo input view, and the individual combo view.  Within the browsing view, we display the contents of the database in a table, and filter the combos displayed there via a search bar feature, an advanced filter feature, a sidebar with character filtering, and enabling the table to be filtered by the columns themselves.  Within the combo input view, there's a form for combo metadata, the combo moves input, and the confirmation page, which is just the individual combo view without the discussion section.  The individual combo view pulls from the database to display all combo metadata and the combo itself, along with the discussion section.  Throughout all of these views, there is a top bar that displays the ability to sign up/into the site, and the Combopedia logo, which redirects the user to the browsing view.

Frontend Implementation

Browsing View

The default view populates the table with all the combos in the database.  Searching was implemented via simple string matching:  if the query is a substring of either the combo name or the character's name, that combo is displayed in the table.  The advanced filters respond dynamically to every key input into a text field or with every mouse click in the drop down or star menus.  Every time an input is detected it updates the combos in the database by first filtering by other fields that aren't actively being edited and then by the field that is.  The sidebar is even simpler:  clicking on a character highlights that character in the menu and then filters all of the combos in the table by that character. The ability to sort by column header was via a javascript plugin called tablesorter.  All of the dynamic updating was done via various jquery/javascript functionality, and much of the general layout was taken care of by twitter bootstrap.

Combo Input View

The combo input view uses a simple form for data in the first metadata tab. The second joystick tab uses a custom joystick javascript widget. Dragging the knob was made possible with jquery draggable plugin. Keypress listeners were used in the input view to update the combo view for immediate feedback. The user can also simply just click on the numbers. As a third option, users may enter in the input field the traditional text input. If the user enters in an invalid input then the text input (eg. "E") will not accept it and the invalid input will be deleted from the view instantly. Numbers that have been added to the preview will show up blue. Clicking on the buttons will add the appropriate button to the combo. The inputs are added to the preview, and clicking "add move" will add the move to the move list. Each individual move can be dragged around or deleted, implemented with jquery sortable. The last page is just a confirmation page with all the previous information, made to look like the individual view page. The progress bar at the top indicates whether each page has been completed. If a section is incomplete then clicking "submit" will do nothing. The form is submitted using AJAX calls.

Individual View

The comment section was supplied via the Disqus plugin.

Backend Implementation

The backend was implemented with Django. The framework uses object relational mapping to create relations between python objects and database objects, so use of SQL statements to populate the database was not necessary. The application was pushed to heroku for final deployment. For compatibility with heroku, a Postgresql database was used. All forms are also validated server side.