Create Lesson Menu Cards

[CodeRhymesLife]

Menu cards are generic rectangles that display information about an option within a particular context. For example, lesson cars should display simple information about available lessons. Something like this:

Here's a library you can use to add text in aframe: https://github.com/ngokevin/aframe-text-component. And here's an example of how I used it in the hackathon: https://github.com/drryanjames/MiniSeaVR-Anatomy-Explorer/blob/master/site/client/index.html. And here are the steps I took to use it:
1. Save aframe-text-component.js to our repo
2. Link aframe-text-component.js in index.html html <script src="path/to/js/aframe-text-component.js"></script>
3. Create an entity with text: html <a-entity text="text: some value" material="color: blue"></a-entity>

After you've created a simple card put multiple cards next to one another, like this:

When a card is hovered it should grow a little show show that it can be selected. To grow a card you can either increase it's scale or move it closer to the camera by modifying the z position.

Finally, when a user looks towards the red dotted boxes in the image above, the cards should scroll left or right depending on which box they look at. You should be able to do this by adding an invisible plane html <a-plane visible="false"> element, detect when the cursor hovers over it using jquery, and modify the position of the cards by setting their position using jquery ``javascript $("selector for cards").get(0).setAttribute("position", "x y z");`

These are just suggestions, BTW. Feel free to do everything your own way.