Issue #11 - room illustration property

game/story.coffee

@@ -46,6 +46,7 @@ room "plaza",
 
 room "shop",
   title: "The Shop"
+  #pic: "http://loremflickr.com/640/300/room,shop"
   ways: ["plaza", "shop-inside", "lair"]
   dsc: """
     Being the only shop in town, this trendy establishment did not need a name.

lib/room.coffee

@@ -60,6 +60,17 @@ update_ways = (ways, name) ->
     for node in min_key
       addClass(document.getElementById("waylink-#{node}"), "destination")
 
+picture_tag = (picture) ->
+  extension = picture.substr((~-picture.lastIndexOf(".") >>> 0) + 2)
+  if (extension == "webm")
+    return """
+<video src="#{picture}" controls>
+  Your browser does not support the video tag for some reason.
+  You won't be able to view this video in this browser.
+</video>
+    """
+  return "<img class='img-responsive' src='#{picture}' alt='Room illustration'>"
+
 class SaletRoom extends undum.Situation
   constructor: (spec) ->
     undum.Situation.call(this, spec)
@@ -69,6 +80,11 @@ class SaletRoom extends undum.Situation
   visited: 0
   title: "Room"
   objects: {}
+  
+  # room illustration image, VN-style. Can be a GIF or WEBM. Can be a function.
+  pic: false
+
+  dsc: false # room description
   extendSection: false
   distance: Infinity # distance to the destination
   clear: true # clear the screen on entering the room?
@@ -148,6 +164,9 @@ class SaletRoom extends undum.Situation
     update_ways(@ways, @name)
     retval = ""
 
+    if @pic
+      retval += '<div class="pic">'+picture_tag(@pic.fcall(this, character, system, f))+'</div>'
+
     # Print the room description
     if @dsc
       retval += markdown(@dsc.fcall(this, character, system, f))

sass/main.scss

@@ -95,6 +95,10 @@ body {
   @media (min-width: breakpoint-min(sm)) {
     @include make-col-offset(1);
   }
+  .pic {
+    text-align: center;
+    margin-bottom: 1em;
+  }
   p {
     hyphens: auto;
   }