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;