From 8934e1e577fdd57307803c410bf6e9bb6ef3c3ab Mon Sep 17 00:00:00 2001 From: Scimonster Date: Wed, 30 Oct 2013 21:16:15 +0200 Subject: [PATCH 1/6] Start work on List class. I'm not quite sure what i'm doing here, but it seems to work. --- js/IO.js | 14 +++++++---- js/Reporter.js | 48 +++++++++++++++++++++++++++++++++++ player.css | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 125 insertions(+), 5 deletions(-) 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; From 78220904e26a565cfad40202830924719579a932 Mon Sep 17 00:00:00 2001 From: Scimonster Date: Wed, 30 Oct 2013 21:47:46 +0200 Subject: [PATCH 2/6] List watchers will now scroll. --- js/Reporter.js | 3 ++- player.css | 25 +++++++++++++++---------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index 970fc3d..0fa3a81 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -139,7 +139,7 @@ var List = function(data) { List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+this.listName); - this.containerEl = $('
').appendTo(this.el); + this.containerEl = $('
').appendTo(this.el); this.el.append('
+'); this.el.append('
length: '+this.contents.length); scene.append(this.el); @@ -160,6 +160,7 @@ List.prototype.update = function(){ this.contents.forEach(function(val,i){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); + c.height(this.height-26); this.el.find('.list-length').text('length: '+this.contents.length); }; diff --git a/player.css b/player.css index 57d3762..8402a3e 100644 --- a/player.css +++ b/player.css @@ -140,23 +140,28 @@ } .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; + clear: both; + background-color: #dedede; + width: 12px; + height: 12px; + border-radius: 12px; + color: #707070; + font: bold 10px Verdana, sans-serif; + text-align: center; + position: absolute; + bottom: 2px; + left: 2px; } .list .list-length { font-size: 10px; font-weight: normal; - margin-top: -12px; text-align: center; color: black; + position: absolute; + bottom: 2px; + left: 0px; + right: 0px; } /* Say/think bubble styles */ From 896f3c643ded37567b4dafa44c32da7efa962ef4 Mon Sep 17 00:00:00 2001 From: Scimonster Date: Thu, 31 Oct 2013 10:24:34 +0200 Subject: [PATCH 3/6] Worked more on list watchers - they now scroll mostly, and with a Scratch-style scrollbar. --- js/Reporter.js | 23 +++++++++++++++++++++-- player.css | 14 ++++++++++++++ 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index 0fa3a81..e149658 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -134,13 +134,30 @@ var List = function(data) { this.el = null; // jQuery element for list this.containerEl = null; + this.scrollbar = null; }; List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+this.listName); - this.containerEl = $('
').appendTo(this.el); - this.el.append('
+'); + var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); + var s = this.scrollbar = $('
').appendTo(this.el); + var sb = s.children('.list-scrollbar'); + sb.mousedown(function(e){ + if (e.which===1) $(this).data({scrolling:true,startY:e.pageY}); // left button + }); + $('body').mousemove(function(e){ + if (sb.data('scrolling')) { + var offset = e.pageY-sb.data('startY'); + if (offset > -1 && offset < c.height()-sb.height()) { + sb.css('top',offset); + c.scrollTop(offset); + } + } + }).mouseup(function(){ + if ($.hasData(sb[0],'scrolling')) sb.removeData(['scrolling','startY']); + }); +// this.el.append('
+'); // disabled because it doesn't do anything even in the original this.el.append('
length: '+this.contents.length); scene.append(this.el); this.update(); @@ -161,6 +178,8 @@ List.prototype.update = function(){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); c.height(this.height-26); + var s = this.scrollbar.height(this.height-26); + s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); }; diff --git a/player.css b/player.css index 8402a3e..61573de 100644 --- a/player.css +++ b/player.css @@ -113,6 +113,20 @@ font-weight: bold; } +.list .list-scrollbar-container { + float: right; + width: 10px; + position: relative; +} + +.list .list-scrollbar { + position: absolute; + top: 0px; + width: 10px; + background-color: #a8aaad; + border-radius: 10px; +} + .list .list-index { color: rgb(81, 81, 81); float: left; From 2d07f95c55526061d5ffd8b429a652ae973f2edd Mon Sep 17 00:00:00 2001 From: Scimonster Date: Sun, 3 Nov 2013 17:47:32 +0200 Subject: [PATCH 4/6] Fixed scrolling. --- js/Reporter.js | 14 ++++++++++---- player.css | 5 +++-- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index e149658..a068d03 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -148,11 +148,15 @@ List.prototype.attach = function(scene) { }); $('body').mousemove(function(e){ if (sb.data('scrolling')) { - var offset = e.pageY-sb.data('startY'); - if (offset > -1 && offset < c.height()-sb.height()) { - sb.css('top',offset); - c.scrollTop(offset); + var offset = parseInt(sb.css('top'))+e.pageY-sb.data('startY'); + if (offset < 0) { + offset = 0; } + if (offset > c.height()-sb.height()) { + offset = c.height()-sb.height(); + } + sb.css('top',offset); + c.scrollTop(c.height()/sb.height()*offset); } }).mouseup(function(){ if ($.hasData(sb[0],'scrolling')) sb.removeData(['scrolling','startY']); @@ -178,6 +182,8 @@ List.prototype.update = function(){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); c.height(this.height-26); + c.find('.list-index').width(c.find('.list-index').last().width()); + c.find('.list-item').width(c.width()-c.find('.list-index').width()-15) var s = this.scrollbar.height(this.height-26); s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); diff --git a/player.css b/player.css index 61573de..a0ee51d 100644 --- a/player.css +++ b/player.css @@ -132,13 +132,14 @@ float: left; padding: 2px; margin-top: 0px; - font: bold 10px Verdana,sans-serif; + font: bold 10px monospace; } .list .list-item { float: left; width: 70%; - min-height: 18px; + height: 16px; + overflow: hidden; margin-bottom: 0px; margin-right: 2px; padding-left: 5px; From 01c35969d0d1914ea832a3ff9e0d62a7bc208957 Mon Sep 17 00:00:00 2001 From: Scimonster Date: Mon, 4 Nov 2013 22:28:23 +0200 Subject: [PATCH 5/6] Add show/hide list blocks, fix list reporters, and fix show/hide var (issue was with multiple sprites having same local variable name). --- js/IO.js | 50 +++++++++++++++++++++++++---------- js/Reporter.js | 8 ++++-- js/primitives/VarListPrims.js | 34 +++++++++++++++++++----- 3 files changed, 70 insertions(+), 22 deletions(-) diff --git a/js/IO.js b/js/IO.js index 1bc2f48..5671e2f 100644 --- a/js/IO.js +++ b/js/IO.js @@ -91,22 +91,44 @@ IO.prototype.makeObjects = function() { runtime.stage.attachPenLayer(runtime.scene); runtime.stage.loadSounds(); // Create the sprites and watchers - $.each(this.data.children.concat(this.data.lists), function i(index, obj) { + function createObj(obj, sprite) { var newSprite; - if(!obj.cmd && !obj.listName) { // sprite - newSprite = new Sprite(obj); - 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 && !obj.listName) + function createSprite(obj) { + var newSprite = new Sprite(obj); newSprite.loadSounds(); + return newSprite; + } + function createReporter(obj, sprite) { + var newSprite; + if (obj.listName) { // list + if (!(sprite===runtime.stage && !runtime.stage.lists[obj.listName])) { // for local lists, only if in sprite + newSprite = new List(obj, sprite.objName); + runtime.reporters.push(newSprite); + } + } else { + newSprite = new Reporter(obj); + runtime.reporters.push(newSprite); + } + return newSprite; + } + if (obj.objName) { // sprite + newSprite = createSprite(obj); + sprite = newSprite; + } else { + newSprite = createReporter(obj, sprite); + } + if (newSprite) { + runtime.sprites.push(newSprite); + newSprite.attach(runtime.scene); + } + } + $.each(this.data.children, function(index, obj) { + createObj(obj, runtime.stage); // create children of stage - sprites, watchers, and stage's lists + }); + $.each(runtime.sprites.filter(function(sprite){return sprite instanceof Sprite}), function(index, sprite) { // list of sprites + $.each(sprite.lists, function(index, list){ + createObj(list, sprite); // create local lists + }); }); }; diff --git a/js/Reporter.js b/js/Reporter.js index b284df5..5456766 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -120,7 +120,7 @@ Reporter.prototype.changeSlider = function() { target.variables[variable] = newValue; }; -var List = function(data) { +var List = function(data, sprite) { this.contents = data.contents; this.listName = data.listName; @@ -131,6 +131,8 @@ var List = function(data) { this.z = io.getCount(); this.visible = data.visible; + this.target = sprite; + // this.isPersistent = data.isPersistent; this.el = null; // jQuery element for list @@ -140,7 +142,7 @@ var List = function(data) { List.prototype.attach = function(scene) { this.el = $('
'); - this.el.append('
'+this.listName); + this.el.append('
'+(this.target==='Stage'?'':this.target+' ')+this.listName); var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); var s = this.scrollbar = $('
').appendTo(this.el); var sb = s.children('.list-scrollbar'); @@ -175,6 +177,8 @@ List.prototype.attach = function(scene) { }; List.prototype.update = function(){ + this.contents = findList(runtime.spriteNamed(this.target),this.listName); + this.el.css('display', this.visible ? 'inline-block' : 'none'); if (!this.visible) return; diff --git a/js/primitives/VarListPrims.js b/js/primitives/VarListPrims.js index 065be7d..a8f734a 100644 --- a/js/primitives/VarListPrims.js +++ b/js/primitives/VarListPrims.js @@ -34,6 +34,8 @@ VarListPrims.prototype.addPrimsTo = function(primTable) { primTable['lineCountOfList:'] = this.primListLength; primTable['getLine:ofList:'] = this.primListGetLine; primTable['list:contains:'] = this.primListContains; + primTable['hideList:'] = this.primHideList; + primTable['showList:'] = this.primShowList; }; // Variable primitive implementations @@ -74,9 +76,9 @@ VarListPrims.prototype.primChangeVar = function(b) { }; VarListPrims.prototype.primHideVar = function(b) { - var targetVar = interp.arg(b, 0); + var targetVar = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; for (var r = 0; r < runtime.reporters.length; r++) { - if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar) { + if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { runtime.reporters[r].visible = false; return; } @@ -84,9 +86,9 @@ VarListPrims.prototype.primHideVar = function(b) { }; VarListPrims.prototype.primShowVar = function(b) { - var targetVar = interp.arg(b, 0); + var targetVar = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; for (var r = 0; r < runtime.reporters.length; r++) { - if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar) { + if (runtime.reporters[r].cmd == 'getVar:' && runtime.reporters[r].param == targetVar && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { runtime.reporters[r].visible = true; return; } @@ -96,7 +98,7 @@ VarListPrims.prototype.primShowVar = function(b) { // List primitive implementations // Take a list name and target sprite and return the JS list itself -var findList = function(targetSprite, listName) { +function findList(targetSprite, listName) { if (targetSprite == null) targetSprite = runtime.stage; if (listName in targetSprite.lists) { return targetSprite.lists[listName].contents; @@ -104,7 +106,7 @@ var findList = function(targetSprite, listName) { return runtime.stage.lists[listName].contents; } return null; -}; +} VarListPrims.prototype.primReadList = function(b) { var list = findList(interp.targetSprite(), interp.arg(b, 0)); @@ -181,3 +183,23 @@ VarListPrims.prototype.primListContains = function(b) { if (parseFloat(searchItem) == searchItem) searchItem = parseFloat(searchItem); return $.inArray(searchItem, list) > -1; }; + +VarListPrims.prototype.primHideList = function(b) { + var targetList = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; + for (var r = 0; r < runtime.reporters.length; r++) { + if (runtime.reporters[r] instanceof List && runtime.reporters[r].listName == targetList && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { + runtime.reporters[r].visible = false; + return; + } + } +}; + +VarListPrims.prototype.primShowList = function(b) { + var targetList = interp.arg(b, 0), targetSprite = interp.targetSprite().objName; + for (var r = 0; r < runtime.reporters.length; r++) { + if (runtime.reporters[r] instanceof List && runtime.reporters[r].listName == targetList && (runtime.reporters[r].target == targetSprite || runtime.reporters[r].target == 'Stage')) { + runtime.reporters[r].visible = true; + return; + } + } +}; From d0b9f61494834dc97edc0f622ad0889ee3377b1c Mon Sep 17 00:00:00 2001 From: Scimonster Date: Mon, 4 Nov 2013 23:06:54 +0200 Subject: [PATCH 6/6] Some list watcher style changes. --- js/Reporter.js | 8 ++++---- player.css | 18 ++++++++++-------- 2 files changed, 14 insertions(+), 12 deletions(-) diff --git a/js/Reporter.js b/js/Reporter.js index 5456766..79a83f1 100644 --- a/js/Reporter.js +++ b/js/Reporter.js @@ -143,7 +143,7 @@ var List = function(data, sprite) { List.prototype.attach = function(scene) { this.el = $('
'); this.el.append('
'+(this.target==='Stage'?'':this.target+' ')+this.listName); - var c = this.containerEl = $('
').appendTo(this.el).width(this.width-19); + var c = this.containerEl = $('
').appendTo(this.el).width(this.width-13).height(this.height-34); var s = this.scrollbar = $('
').appendTo(this.el); var sb = s.children('.list-scrollbar'); sb.mousedown(function(e){ @@ -186,10 +186,9 @@ List.prototype.update = function(){ this.contents.forEach(function(val,i){ $('
').appendTo(c).append('
'+(i+1),'
'+val); }); - c.height(this.height-26); c.find('.list-index').width(c.find('.list-index').last().width()); - c.find('.list-item').width(c.width()-c.find('.list-index').width()-15) - var s = this.scrollbar.height(this.height-26); + c.find('.list-item').width(c.width()-c.find('.list-index').width()-15); + var s = this.scrollbar.height(c.height()); s.children('.list-scrollbar').height(s.height()/c[0].scrollHeight*s.height()).css('display', s.children('.list-scrollbar').height()===c.height() ? 'none' : 'inline-block'); this.el.find('.list-length').text('length: '+this.contents.length); }; @@ -197,3 +196,4 @@ List.prototype.update = function(){ List.prototype.updateLayer = function() { this.el.css('z-index', this.z); }; + diff --git a/player.css b/player.css index a0ee51d..3aa17b3 100644 --- a/player.css +++ b/player.css @@ -102,7 +102,7 @@ border-width: 2px; background-color: #C1C4C7; padding-left: 3px; - font: bold 10px Verdana, sans-serif; + font: bold 11px sans-serif; position: absolute; } @@ -111,6 +111,7 @@ text-align: center; color: black; font-weight: bold; + margin-bottom: 4px; } .list .list-scrollbar-container { @@ -132,26 +133,26 @@ float: left; padding: 2px; margin-top: 0px; - font: bold 10px monospace; + text-align: right; + font: bold 11px; } .list .list-item { - float: left; - width: 70%; + float: right; height: 16px; overflow: hidden; margin-bottom: 0px; margin-right: 2px; + padding-top: 2px; padding-left: 5px; border-color: white; border-style: solid; border-width: 1px; border-radius: 4px; - background-color: #D94D11; - font-size: 10px; + background-color: #cc5b22; color: white; word-wrap: break-word; - font: bold 10px Verdana, sans-serif; + font: bolder 11px sans-serif; } .list .list-add { @@ -161,7 +162,7 @@ height: 12px; border-radius: 12px; color: #707070; - font: bold 10px Verdana, sans-serif; + font: bold 10px sans-serif; text-align: center; position: absolute; bottom: 2px; @@ -225,3 +226,4 @@ background: url(img/think-bottom.png) transparent no-repeat; } +