lewismoten / drop-kicking-babies Goto Github PK

Setup the objects to slide/rotate to next position rather than being choppy.

Change JSON objects to use a structure similar to Bower
http://bower.io/

Setup web page with the following:

• Picture of baby
• Picture of foot ball
• Pictures scaled to size
• Background behind baby is transparent
• Background behind football is transparent
• Button to fire off the following animations sequentially:
  • Animation of football dropping to babies foot
  • Animation of babies foot kicking
  • Animation of football moving off screen once it touches the babies foot
• Play sound when football is kicked

This project was created before I was aware of how most front-end development uses npm/node. Initialize node package manager.

• Setup controller for page
• Bind list of babies
• Bind list of objects
• Show drop-kick button when a baby and object is selected
• Wire up drop-kick button to controller
• Load JSON objects based off values selected

Data should be separated from the logic. Separate the following:

• Sound URL
• Baby URL
• Ball URL
• Paths:
  • Baby
  • Baby Foot
  • Football
  • Drop
• Pivot location/angle of foot kicking
• baby image width/size
• football image width/size

Create an editor to do the following

• Provide the URL to an image of a object to be kicked
• Allow a polygon to be setup to clip the object so the background is transparent
• Display source code data to integrate the data into a web page.
• Provide the URL to the sound of the object being kicked
• Add fields for meta data
  • Title
  • Image Width
  • Image Height
  • Image Name
  • Image Attribution Author Name
  • Image Attribution Author Url
  • Image Attribution License Name
  • Image Attribution License Url
  • Sound Name
  • Sound Attribution Author Name
  • Sound Attribution Author Url
  • Sound Attribution License Name
  • Sound Attribution License Url

Create an editor to do the following

• Provide the URL to an image of a baby
• Allow a polygon to be setup to clip the baby so the background is transparent
• Allow a polygon to be setup to identify the foot that is to kick the ball
• Draw the path for the ball to be kicked
• Define the frames to start and stop kicking
• Rotate/Position the foot in a kicking fashion
• Display source code data to integrate the data into a web page.
• Add fields for meta data
  • Title
  • Image Width
  • Image Height
  • Image Name
  • Image Author Name
  • Image Author Url
  • Image License Name
  • Image License Url

Allow end-user to choose a baby, object, and text

• Show a preview of the baby/object with a message after the object leaves the screen
• Provide a link that can be shared
• Use the link to load up the same baby/object/message

Note: this is static content. There needs to be a way to persist the data either though the URL that is shared, or an id in the url that acquires the data from an external resource.

Make website contributors easy to see.
http://humanstxt.org/

Setup a layout that makes the page look more professional.

Look into Travis CI, Coveralls, etc.

• Add silly baby
• Add grumpy baby
• Add soccer ball
• Add beach ball
• Add drop-down control to choose baby
• Add drop-down control to choose ball

Ensure multiple requests are not made for the same page.

• Cache audio, requested only once when the page loads
• Plays a sound when the ball is kicked
• Does not stop the previous sound that is still playing

Have the baby holding the ball before it drop kicks it.