Tutorial (#271)

* Added a tutorial button

* Fixing the code that broke from adding the button

* Pressing the tutorial button routes to a tutorial link with the tutorial in it, theres a bug where a new tutorial deck wont be built but a regular deck will

* Fixed the previous bug, the tutorial now has its own deck

* Added specific deck formation functionality, wrote some documentation, and refactored a bit of code

* Attempting to figure out how the tutorial should run in a linear fashion and how to best present it. Committing the rest of todays work.

* Got the states correctly configured and the next instruction is played after a card has been entered

* Added a Game Objectives button in the tutorial mode to give the user a more concise description of what they should be doing

* Added more in depth programming fundamental descriptions to each cards description(may need to be changed, moved, or modified. Changed \'Tutorial Player\' to \'You\', and made the first card to be selected have a yellow glow

* Got the Game Objectives modal to display as soon as the page is loaded

* Added a potential path for the user to take that teaches them how to use every card and build up both paths

* Added highlighting to all cards to be chosen, modified the path that the user will take, added improved instructions, fixed a problem with group cards not working with the state management, and other small fixes

* Added a blinking animation to the highlighted cards with a delay

* Added animate.css to our package dependencies and commiting for easy backup before updating packages again

* Changed blinking animation to a breathing like animation for smoothness and changed to CDNJS for animate.css because the direct download wasnt working. Also updated a critical vulnerability in our packages

* Fixed a package dependency that wasnt allowing us to run the dev server

* Added a finite bouncing animation for the tipbox to be more in your face

* Changed the tip box animation so its infinite and the animation pauses when the tipbox is hovered over. The animation is removed when a button in the tipbox is clicked

* Made a new modal appear before entering the game that instructs the user to look at the tipBox, made the tipbox animation pause instead of reset so the delay doesnt reset (this may be to be changed to have a better UX)

* Fixed the UI such that the bouncing animation doesnt happen until the modals are executed. Fixes #272

* Update RulesModal.vue

Changed some wording about how the game concepts relate to computer programming and the Python tutorial.

* Update RulesModal.vue

Fixed <i> tag

* Updating Tutorial text

* Changing font size

* Implementing various fixes from pull request. Fixes #277, Fixes #274, Fixes #273

* Minor bug fixes and removing unneeded comments/debugging statements

Author: JaceRiehl

index.html

@@ -7,6 +7,8 @@
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <!--Paper theme-->
     <link rel="stylesheet" href="https://bootswatch.com/3/paper/bootstrap.min.css">
+    <link rel="stylesheet"
+          href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
     <!-- Latest compiled and minified JavaScript -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <style>