Issue #1 fix - proper sectioning

game/story.coffee

@@ -58,8 +58,6 @@ dialogue "Dialogue functions", "question2", "world", """
 room "world",
   tags: ["world"],
   optionText: "Enter the world",
-  before: () ->
-    cls()
   ways: ["university"]
   content: """
     ### Rhinestone Room

lib/room.coffee

@@ -15,9 +15,8 @@ print = (content) ->
   block = document.getElementById("current-situation")
   if block
     block.innerHTML = block.innerHTML + markdown(content)
-  else #the game is not initialized yet. This is dangerous and will not augment any links.
-    block = document.getElementById("content")
-    block.innerHTML = markdown(content)
+  else
+    console.error("No current situation found.")
 
 Array::remove = (e) -> @[t..t] = [] if (t = @indexOf(e)) > -1
 
@@ -73,8 +72,11 @@ class SaletRoom extends RaconteurSituation
       @clear = spec.clear
     if spec.writers?
       @writers = spec.writers
+    if spec.extendSection?
+      @extendSection = spec.extendSection
     return this
   objects: []
+  extendSection: false
   distance: Infinity # distance to the destination
   clear: true # clear the screen on entering the room?
 
@@ -107,8 +109,9 @@ class SaletRoom extends RaconteurSituation
     Also if f == this.name (we're in the same location) the `before` and `after` callbacks are ignored.
   ###
   entering: (character, system, f) ->
-    if @clear
+    if @clear and f?
       system.clearContent()
+      system.clearContent("#intro")
 
     if f != @name and f?
       @visited++
@@ -118,41 +121,46 @@ class SaletRoom extends RaconteurSituation
     if @enter
       @enter character, system, f
 
+    current_situation = ""
     if not @extendSection
       classes = if @classes then ' ' + @classes.join(' ') else ''
       situation = document.getElementById('current-situation')
       if situation?
-        situation.setAttribute('id', undefined)
-      system.write("<section id='current-situation' data-situation='#{@name}' class='situation-#{@name}#{classes}'>")
+        situation.removeAttribute('id')
+      # Javascript DOM manipulation functions like jQuery's append() or document.createElement
+      # don't work like a typical printLn - they create *DOM nodes*.
+      # You can't leave an unclosed tag just like that. So we have to buffer the output.
+      current_situation = "<section id='current-situation' data-situation='#{@name}' class='situation-#{@name}#{classes}'>"
 
     if f != @name and @before?
-      content = @before.fcall(this, character, system, f)
-      if content
-        print(content)
+      current_situation += @before.fcall(this, character, system, f)
 
     if @look
-      @look character, system, f
+      current_situation += @look character, system, f
 
     if f != @name and @after?
-      content = @after.fcall(this, character, system, f)
-      if content
-        print(content)
+      current_situation += @after.fcall(this, character, system, f)
 
     if not @extendSection
-      system.write("</section>")
+      current_situation += "</section>"
+
+    system.write(current_situation)
 
     if @choices
       system.writeChoices(system.getSituationIdChoices(@choices, @minChoices, @maxChoices))
 
   look: (character, system, f) ->
     update_ways(@ways)
+    retval = ""
 
     # Print the room description
     if @content
-      system.write(markdown(@content.fcall(this, character, system, f)))
+      retval += markdown(@content.fcall(this, character, system, f))
 
     if @objects? then for thing in @objects
-      system.write thing.look()
+      retval += thing.look()
+
+    return retval
 
   ###
     Object action. A function or a string which comes when you click on the object link.

lib/situation.coffee

@@ -27,9 +27,10 @@ markdown = require('./markdown.coffee')
 Function.prototype.fcall = Function.prototype.call;
 String.prototype.fcall = () -> return this
 
-#Adds the "fade" class to a htmlString.
+#Adds the "fadeIn" class to a htmlString.
+#The class "fade" is redefined by Bootstrap, so it's not the best choice.
 String.prototype.fade = () ->
-  return '<div class="fade">'+this+'</div>'
+  return '<div class="fadeIn">'+this+'</div>'
 
 ###
   The prototype RaconteurSituation is the basic spec for situations

lib/undum.js

@@ -1153,7 +1153,9 @@ var parseFn = function(str) {
 var doWrite = function(content, selector, addMethod, appendMethod) {
     var output = augmentLinks(content).addClass('new');
     var element;
-    if (selector) element = $(selector);
+    if (selector) {
+        element = $(selector);
+    }
     if (!element) {
         $('#content')[addMethod](output);
     }

sass/main.scss

@@ -199,3 +199,17 @@ hr {
   width: 50%;
   border-color: $body-color;
 }
+
+// fade-in animation
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+}