diff --git a/js/IO.js b/js/IO.js index 657317c..54d7086 100644 --- a/js/IO.js +++ b/js/IO.js @@ -93,18 +93,22 @@ IO.prototype.makeObjects = function() { runtime.stage.attachPenLayer(runtime.scene); runtime.stage.loadSounds(); - // Create the sprites - $.each(this.data.children, function(index, obj) { + // Create the sprites and watchers + $.each(this.data.children.concat(this.data.lists), function i(index, obj) { var newSprite; - if(!obj.cmd) { + if(!obj.cmd && !obj.listName) { // sprite newSprite = new Sprite(obj); - } else { + if (obj.lists) $.each(obj.lists, i); + } else if (!obj.listName) { // watcher newSprite = new Reporter(obj); runtime.reporters.push(newSprite); + } else { // list + newSprite = new List(obj); + runtime.reporters.push(newSprite); } runtime.sprites.push(newSprite); newSprite.attach(runtime.scene); - if (!obj.cmd) + if (!obj.cmd && !obj.listName) newSprite.loadSounds(); }); } diff --git a/js/Reporter.js b/js/Reporter.js index 7658201..970fc3d 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -118,3 +118,51 @@ Reporter.prototype.changeSlider = function() { var variable = $(this).attr('data-var'); target.variables[variable] = newValue; } + +var List = function(data) { + this.contents = data.contents; + this.listName = data.listName; + + this.height = data.height; + this.width = data.width; + this.x = data.x; + this.y = data.y; + this.z = io.getCount(); + this.visible = data.visible; + +// this.isPersistent = data.isPersistent; + + this.el = null; // jQuery element for list + this.containerEl = null; +}; + +List.prototype.attach = function(scene) { + this.el = $('
'); + this.el.append('
'+this.listName); + this.containerEl = $('
').appendTo(this.el); + this.el.append('
+'); + this.el.append('
length: '+this.contents.length); + scene.append(this.el); + this.update(); + this.el.css('left', this.x); + this.el.css('top', this.y); + this.el.width(this.width); + this.el.height(this.height); + this.el.css('z-index', this.z); + this.el.css('display', this.visible ? 'inline-block' : 'none'); +} + +List.prototype.update = function(){ + this.el.css('display', this.visible ? 'inline-block' : 'none'); + if (!this.visible) return; + + var c = this.containerEl.html(''); // so that it can be used inside the forEach + this.contents.forEach(function(val,i){ + $('
').appendTo(c).append('
'+(i+1),'
'+val); + }); + this.el.find('.list-length').text('length: '+this.contents.length); +}; + +List.prototype.updateLayer = function() { + this.el.css('z-index', this.z); +} diff --git a/player.css b/player.css index b2f9174..57d3762 100644 --- a/player.css +++ b/player.css @@ -91,6 +91,74 @@ position: absolute; } +/* List watcher styles */ +.list { + float: left; + border-radius: 7px; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-style: solid; + border-color: gray; + border-width: 2px; + background-color: #C1C4C7; + padding-left: 3px; + font: bold 10px Verdana, sans-serif; + position: absolute; +} + +.list .list-title { + padding-top: 2px; + text-align: center; + color: black; + font-weight: bold; +} + +.list .list-index { + color: rgb(81, 81, 81); + float: left; + padding: 2px; + margin-top: 0px; + font: bold 10px Verdana,sans-serif; +} + +.list .list-item { + float: left; + width: 70%; + min-height: 18px; + margin-bottom: 0px; + margin-right: 2px; + padding-left: 5px; + border-color: white; + border-style: solid; + border-width: 1px; + border-radius: 4px; + background-color: #D94D11; + font-size: 10px; + color: white; + word-wrap: break-word; + font: bold 10px Verdana, sans-serif; +} + +.list .list-add { + clear: both; + background-color: #dedede; + width: 12px; + height: 12px; + border-radius: 12px; + margin-top: 12px; + color: #707070; + font: bold 10px Verdana, sans-serif; + text-align: center; +} + +.list .list-length { + font-size: 10px; + font-weight: normal; + margin-top: -12px; + text-align: center; + color: black; +} + /* Say/think bubble styles */ .bubble-container { position: absolute;