Visual effects (fading)

game/game.coffee

@@ -2,11 +2,19 @@ inkjs = require("inkjs")
 
 continueToNextChoice = (s) ->
   while (s.canContinue)
-    $("#content").append("<p>#{s.Continue()}</p>")
+    paragraphs = s.Continue().split("\n")
+    delay = 1000
+    for i in paragraphs
+      if i != ""
+        html = $.parseHTML(i)
+        $("#content").append($('<p>').hide().html(html).fadeIn(delay))
+        delay += 500
+  scrollTo = $('#options').offset().top
   if (s.currentChoices.length > 0)
-    $("#options").html("")
+    $("#options").html("").hide()
     for choice in s.currentChoices
       $("#options").append("<li><a href='#' id='choice-#{choice.index}' data-index=#{choice.index}>#{choice.text}</a></li>")
+    $("#options").fadeIn(800)
     $("#options li a").click(() ->
       s.ChooseChoiceIndex($(this).data("index"))
       continueToNextChoice(s)
@@ -15,6 +23,9 @@ continueToNextChoice = (s) ->
   else
     $("#content").append("<p>THE END</p>")
     $("#options").html("")
+  $('html, body').animate({
+    scrollTop: scrollTo
+  }, 800)
 
 fetch('fogg.ink.json')
   .then((response) ->