From 7f0bd1c0aff05a9e1f5c8b2fbea94383173c3749 Mon Sep 17 00:00:00 2001 From: dsc Date: Mon, 13 Dec 2010 00:20:20 -0800 Subject: [PATCH] Animations work! --- src/Y/core.cjs | 7 +-- src/Y/modules/y.event.cjs | 2 +- src/Y/types/array.cjs | 15 ++++++- src/ezl/layer.cjs | 83 +++++++++++++++++++++++++--------------- src/ezl/loop/fx.cjs | 83 ++++++++++++++++++++++++++++++---------- src/future.js | 3 +- src/tanks/fx/explosion.cjs | 54 ++++++++++++++++++++++++++ src/tanks/fx/index.cjs | 5 ++ src/tanks/game.cjs | 35 ++++++---------- src/tanks/map/level.cjs | 1 + src/tanks/thing/bullet.cjs | 44 +++++++++++++++++---- src/tanks/thing/player.cjs | 2 +- src/tanks/thing/tank.cjs | 8 ---- src/tanks/ui/grid.cjs | 2 +- src/tanks/ui/main.cjs | 6 ++- www/css/lttl.css | 2 +- www/debug.html | 11 +++-- www/deps.html | 3 +- www/test/shapes/test-shapes.js | 1 + 19 files changed, 256 insertions(+), 111 deletions(-) create mode 100644 src/tanks/fx/explosion.cjs create mode 100644 src/tanks/fx/index.cjs diff --git a/src/Y/core.cjs b/src/Y/core.cjs index ded75cc..b13737c 100644 --- a/src/Y/core.cjs +++ b/src/Y/core.cjs @@ -76,11 +76,8 @@ function filter(o, fn){ } function set(o, key, value, def){ - if ( o && key !== undefined ){ - if (def === undefined) - def = o[key]; + if ( o && key !== undefined && (value !== undefined || def !== undefined) ) o[key] = (value !== undefined ? value : def); - } return o; } @@ -143,4 +140,4 @@ exports['attr'] = attr; exports['extend'] = extend; exports['accessors'] = accessors; -exports['slice'] = slice; +exports['slice'] = slice; \ No newline at end of file diff --git a/src/Y/modules/y.event.cjs b/src/Y/modules/y.event.cjs index aa39688..10068f8 100644 --- a/src/Y/modules/y.event.cjs +++ b/src/Y/modules/y.event.cjs @@ -79,7 +79,7 @@ Y.YObject.subclass('Emitter', this.target = target || this; if (parent && parent !== target) - self.parent = parent; + this.parent = parent; this.decorate(this); // i be so tricky tricky (it binds all methods) if (target) this.decorate(target); diff --git a/src/Y/types/array.cjs b/src/Y/types/array.cjs index 375d78e..f0af263 100644 --- a/src/Y/types/array.cjs +++ b/src/Y/types/array.cjs @@ -1,4 +1,4 @@ -var Y = require('Y/y').Y // I *think* this is safe +var Y = require('Y/y').Y , del = require('Y/delegate') , type = require('Y/type') , op = require('Y/op') @@ -94,9 +94,20 @@ YCollection.subclass('YArray', function(YArray){ if (acc.indexOf(v) === -1) acc.push(v); return acc; - }, new YArray(), this ); + }, new YArray(), this); }; + YArray.flatten = flatten; + this['flatten'] = Y(flatten).methodize(); + function flatten(A){ + return A.reduce(function(flat, v){ + if ( type.isArray(v) ) + return flat.extend( flatten(v) ); + else + return flat.push(v); + }, new YArray(), this); + } + this['zip'] = function zip(){ var sequences = new YArray(slice.call(arguments)).unshift(this._o) diff --git a/src/ezl/layer.cjs b/src/ezl/layer.cjs index 1f75fd9..bda0d81 100644 --- a/src/ezl/layer.cjs +++ b/src/ezl/layer.cjs @@ -8,14 +8,13 @@ var undefined , BoundingBox = loc.BoundingBox , Animation = require('ezl/loop/fx').Animation , -CONTEXT_ATTRS = Y([ - 'globalAlpha', 'globalCompositeOperation', - 'strokeStyle', 'fillStyle', - 'lineWidth', 'lineCap', 'lineJoin', 'miterLimit', - 'shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'shadowColor' -]) +CONTEXT_ATTRS = Y('globalAlpha globalCompositeOperation strokeStyle fillStyle lineWidth lineCap lineJoin miterLimit shadowOffsetX shadowOffsetY shadowBlur shadowColor'.split(' ')), +FAUX_ACCESSORS = Y('width height position stroke fill origin rotate scale translate title'.split(' ')) +,_X = 0, _Y = 1 , + + Layer = exports['Layer'] = Y.subclass('Layer', { @@ -150,6 +149,19 @@ Y.subclass('Layer', { /// Attributes /// + // set : function set(key, value, def){ + // if ( key === undefined || (value === undefined && def === undefined) ) + // return this; + // + // value = (value !== undefined ? value : def); + // if ( FAUX_ACCESSORS.has(key) ) + // this[key](value); + // else + // this[key] = value; + // + // return this; + // }, + attr : Y.attr.methodize(), size : function size(w,h){ @@ -259,8 +271,11 @@ Y.subclass('Layer', { if (x === undefined && y === undefined) return this.layer.position(); - if ( Y.isPlainObject(x) ){ - y = x.y; x = x.x; + if ( x instanceof Array ) { + y = x[_Y]; x = x[_X]; + } else if ( Y.isPlainObject(x) ){ + y = ('top' in x ? x.top : x.y); + x = ('left' in x ? x.left : x.x); } var bbox = this.boundingBox.relocate(x,y); @@ -314,6 +329,9 @@ Y.subclass('Layer', { if (arguments.length === 0) return o.absolute(this.layerWidth, this.layerHeight); + if ( x instanceof Array ) { + y = x[_Y]; x = x[_X]; + } o.x = x; o.y = y; return this._applyTransforms(); @@ -340,6 +358,9 @@ Y.subclass('Layer', { if (arguments.length === 0) return ts; + if ( sx instanceof Array ) { + sy = sx[_Y]; sx = sx[_X]; + } ts.x = sx; ts.y = sy; this.dirty = true; @@ -348,19 +369,25 @@ Y.subclass('Layer', { /** * Translates draw calls by (x,y) within this layer only. This allows you to - * functionally move the coordinate system of the layer. + * functionally move the origin of the coordinate system for this layer. */ translate : function translate(tx,ty){ var tt = this.transform.translate; if (arguments.length === 0) return tt; + if ( tx instanceof Array ) { + ty = tx[_Y]; tx = tx[_X]; + } tt.x = tx; tt.y = ty; this.dirty = true; return this; }, + /** + * @private + */ _applyTransforms : function _applyTransforms(){ var t = this.transform, tfns = []; @@ -414,22 +441,20 @@ Y.subclass('Layer', { * Reduce "up", across this and parents, inner to outer: * acc = fn.call(context || node, acc, node) */ - reduceup : function reduceup(acc, fn, context){ - // if ( Y.isFunction(fn) ) - // acc = fn.call(context || this, acc, this); - // else - // acc = this[fn].call(context || this, acc, this); + reduceup : function reduceup(fn, acc, context){ acc = fn.call(context || this, acc, this); - return ( this.parent ? this.parent.reduceup(acc, fn, context) : acc ); + return ( this.parent ? this.parent.reduceup(fn, acc, context) : acc ); }, /** * Reduce "down", across this and children, depth-first: * acc = fn.call(context || node, acc, node) */ - reduce : function reduce(acc, fn, context){ + reduce : function reduce(fn, acc, context){ acc = fn.call(context || this, acc, this); - return this.children.reduce(acc, fn, context); + return this.children.reduce(function(acc, child){ + return child.reduce(fn, acc, context); + }, acc); }, @@ -524,21 +549,12 @@ Y.subclass('Layer', { * * {String|Function|Object} [easing='linear'] Name of easing function * used to calculate each step value, or a function, or a map of * properties to either of the above. + * * {Function} [complete] Function called on animation completion. + * * {Function} [step] Function called after each step of the animation. */ animate : function animate(duration, props, options) { - options = Y.extend({ - 'delay' : 0, - 'queue' : undefined, - 'easing' : 'linear', - 'complete' : null, - 'step' : null - }, options); - - if ( options.queue === undefined ) - options.queue = !options.delay; - var A = new Animation(this, duration, props, options); - if ( options.queue && this.animActive.length ) + if ( A.options.queue && this.animActive.length ) this.animQueue.push(A); else this.animActive.push(A.start(NOW)); // XXX: Need another way to pass NOW in @@ -551,12 +567,17 @@ Y.subclass('Layer', { now = d.now; elapsed = d.elapsed; } + this.animActive = this.animActive.filter(function(anim){ return anim.tick(elapsed, now); }); - if ( !this.animActive.length && this.animQueue.length ) + + var childrenRunning = this.children.invoke('tick', elapsed, now).some(Y.op.I) + , running = !!this.animActive.length; + if ( !running && this.animQueue.length ) this.animActive.push( this.animQueue.shift().start(now) ); + return childrenRunning || running; }, /// Debuggging /// @@ -589,7 +610,7 @@ Y.subclass('Layer', { /// Misc /// toString : function toString(){ - var pos = (this.layer ? this.position() : {top:NaN, left:NaN}); + var pos = ((this.layer && this.layer.parent()[0]) ? this.position() : {top:NaN, left:NaN}); return this.className+'['+pos.left+','+pos.top+']( children='+this.children.size()+' )'; } }); diff --git a/src/ezl/loop/fx.cjs b/src/ezl/loop/fx.cjs index 8cfa22b..493e983 100644 --- a/src/ezl/loop/fx.cjs +++ b/src/ezl/loop/fx.cjs @@ -1,5 +1,6 @@ var Y = require('Y').Y , evt = require('evt') +, math = require('ezl/math') , /** @@ -23,11 +24,11 @@ exports['Easing'] = { return lookupEasing(name[prop]); }, - 'linear' : function linearEasing( p, elapsed, start, span, duration ) { + 'linear' : function linearEasing( p, start, span, elapsed, duration ) { return start + span * p; }, - 'swing' : function swingEasing( p, elapsed, start, span, duration ) { + 'swing' : function swingEasing( p, start, span, elapsed, duration ) { return ((-Math.cos(p*Math.PI)/2) + 0.5) * span + start; } } @@ -36,7 +37,7 @@ exports['Easing'] = { Fx = exports['Fx'] = -Y.subclass('Fx', function setupFx(Fx){ +new Y.Class('Fx', null, function setupFx(Fx){ var VAL_PATTERN = /^([+\-]=)?([\d+.\-]+)(.*)$/; this['init'] = @@ -51,18 +52,36 @@ Y.subclass('Fx', function setupFx(Fx){ this.duration = duration; this.prop = prop; this.unit = unit; - this.easing = Easing[easing]; + this.easing = easing; - this.start = this.cur = Y.attr(obj, prop); + this.startVal = this.cur = this.getVal(); if (rel) { - this.span = val*(rel === '-=' ? -1 : 1); - this.finish = this.start + this.span; + this.spanVal = val*(rel === '-=' ? -1 : 1); + this.finishVal = this.startVal + this.spanVal; } else { - this.span = val - this.start; - this.finish = val; + this.spanVal = val - this.startVal; + this.finishVal = val; } }; + this['getVal'] = + function getVal(){ + var attr = Y.attr(this.obj, this.prop); + if ( Y.isFunction(attr) ) + attr = attr.call(this.obj); + return attr; + }; + + this['setVal'] = + function setVal(v){ + var attr = Y.attr(this.obj, this.prop); + if ( Y.isFunction(attr) ) + attr.call(this.obj, v); + else + Y.attr(this.obj, this.prop, v); + return v; + }; + this['start'] = function start(now){ if (this.running) return this; @@ -82,9 +101,9 @@ Y.subclass('Fx', function setupFx(Fx){ if (!this.running) return false; - var p = Math.max(1, (now - this.startTime) / this.duration) - , v = this.cur = this.start + this.easing(p, 0, this.span, this.duration) ; - Y.attr(this.obj, this.prop, ( this.unit !== null ? v+this.unit : v )); + var p = math.clamp((now - this.startTime) / this.duration, 0, 1) + , v = this.cur = this.startVal + this.easing(p, 0, this.spanVal, elapsed, this.duration) ; + this.setVal( this.unit !== null ? v+this.unit : v ); if (p === 1) { this.running = false; @@ -98,7 +117,7 @@ Y.subclass('Fx', function setupFx(Fx){ Animation = exports['Animation'] = -new evt.Class('Animation', function setupAnimation(Animation){ +new evt.Class('Animation', null, function setupAnimation(Animation){ Y.extend(this, { 'started': 0, 'running': false @@ -130,20 +149,26 @@ new evt.Class('Animation', function setupAnimation(Animation){ * * {String|Function|Object} [easing='linear'] Name of easing function * used to calculate each step value, or a function, or a map of * properties to either of the above. + * * {Function} [complete] Function called on animation completion. + * * {Function} [step] Function called after each step of the animation. */ this['init'] = - function initAnimation(obj, duration, props, options){ + function initAnimation(obj, duration, props, opt){ this.obj = obj; this.duration = duration; this.props = props; - this.options = options = Y.extend({}, defOptions, options); - if ( !('queue' in options) ) - options.queue = !options.delay; + this.options = opt = Y.extend({}, defOptions, opt); + if ( opt.queue === undefined ) + opt.queue = !opt.delay; + if ( !Y.isFunction(opt.step) ) + delete opt.step; + if ( !Y.isFunction(opt.complete) ) + delete opt.complete; this.fx = Y(this.props) .reduce(function(fx, val, prop){ - var easing = Easing.lookup(options.easing, prop); + var easing = Easing.lookup(opt.easing, prop); return fx.push(new Fx(obj, duration, prop, val, easing)); }, Y([]) ); @@ -156,6 +181,7 @@ new evt.Class('Animation', function setupAnimation(Animation){ this.started = now || new Date().getTime(); this.running = true; this.waiting = !!this.options.delay; + if (!this.waiting) this.fx.invoke('start', now); return this; }; @@ -172,16 +198,31 @@ new evt.Class('Animation', function setupAnimation(Animation){ this['tick'] = function tick(elapsed, now){ + var obj = this.obj + , opt = this.options + , step = opt.step + , complete = opt.complete + ; this.now = now; this.elapsed = elapsed; - if (this.waiting && (now < this.started+this.options.delay)) - return true; + if (this.waiting) + if (now < this.started+opt.delay) + return true; + else + this.fx.invoke('start', now); this.waiting = false; this.fx = this.fx.filter(tickFx, this); + if ( step ) step.call(obj, obj, this); + + var moreToDo = !!this.fx.length; + if (!moreToDo) { + this.running = false; + if ( complete ) complete.call(obj, obj, this); + } - return !!this.fx.length; + return moreToDo; }; }); diff --git a/src/future.js b/src/future.js index f30db9d..c3270d1 100644 --- a/src/future.js +++ b/src/future.js @@ -196,7 +196,8 @@ if ( !_Object.defineProperty ) { _Object['getOwnPropertyDescriptor'] = function getOwnPropertyDescriptor(o, prop){ - if (typeof o !== "object" || o === null) + var t = typeof o; + if (o === null || !(t === "object" || t === "function")) throw new TypeError("Object.getOwnPropertyDescriptor called on non-object: "+o); if ( !hasOwn.call(o,prop) ) diff --git a/src/tanks/fx/explosion.cjs b/src/tanks/fx/explosion.cjs new file mode 100644 index 0000000..7f806aa --- /dev/null +++ b/src/tanks/fx/explosion.cjs @@ -0,0 +1,54 @@ +var Y = require('Y').Y +, Circle = require('ezl/shape').Circle +, + +Explosion = +exports['Explosion'] = +Circle.subclass('Explosion', { + _cssClasses : 'ezl layer circle explosion', + fillStyle : '#980011', + + ringSizes : [ 0.6, 0.3 ], + ringColors : ["#EC5B38", "#F1D950"], + + /** + * @param {Number} start Starting diameter value. + * @param {Number} end Ending diameter value. + * @param {Number} duration Duration (ms) of the animation. + */ + init : function initExplosion(start, end, duration){ + start = 0.5 * start; + end = 0.5 * end; + + Circle.init.call(this, start); + this.animate(duration, {'radius':end}, { 'complete':this.remove.bind(this) }); + + var prev = this + , options = { 'step':this.updateRing } + , sizes = (end < 10 ? this.ringSizes.slice(0,1) : this.ringSizes) + ; + + sizes.forEach(function(p, idx){ + var ringStart = p * start + , ringEnd = p * end + , color = this.ringColors[idx] + ; + prev = new Circle(ringStart) + .fill(color) + .animate(duration, { 'radius':ringEnd }, options) + .appendTo(prev); + // prev.layer.css({ 'top':'50%', 'left':'50%' }); + }, this); + }, + + updateRing : function updateRing(shape, anim){ + var el = shape.layer; + el.css({ + 'top' : '50%', + 'left' : '50%', + 'margin-top' : -0.5 * el.height(), + 'margin-left' : -0.5 * el.width() + }); + } + +}); diff --git a/src/tanks/fx/index.cjs b/src/tanks/fx/index.cjs new file mode 100644 index 0000000..aa388b6 --- /dev/null +++ b/src/tanks/fx/index.cjs @@ -0,0 +1,5 @@ +var Y = require('Y').Y; + +Y.extend(exports, { + 'Explosion' : require('tanks/fx/explosion').Explosion +}); \ No newline at end of file diff --git a/src/tanks/game.cjs b/src/tanks/game.cjs index af5cc82..88e558b 100644 --- a/src/tanks/game.cjs +++ b/src/tanks/game.cjs @@ -47,7 +47,7 @@ Y.subclass('Game', { Thing.addEventListener('create', this.addUnit); - Thing.addEventListener('destroy', this.explodeUnit); + Thing.addEventListener('destroy', this.killUnit); this.addEventListener('tick', this.tick); @@ -108,7 +108,16 @@ Y.subclass('Game', { }, tickAnimations : function tickAnimations(animation){ - return animation.tick(ELAPSED, NOW); + var running = animation.tick(ELAPSED, NOW); + if (!running) + animation.remove(); + return running; + }, + + addAnimation : function addAnimation(animation){ + this.animations.push(animation); + this.level.append(animation); + return animation; }, @@ -117,7 +126,7 @@ Y.subclass('Game', { addUnit : function addUnit(unit, col,row){ if (unit instanceof Event) - unit = unit.instance; + unit = unit.trigger; unit.game = this; @@ -149,7 +158,7 @@ Y.subclass('Game', { killUnit : function killUnit(unit){ if (unit instanceof Event) - unit = unit.instance; + unit = unit.trigger; // console.log('killUnit(', unit, ')'); @@ -172,24 +181,6 @@ Y.subclass('Game', { return agent; }, - explodeUnit : function explodeUnit(unit){ - if (unit instanceof Event) - unit = unit.instance; - - this.killUnit(unit); - var loc = unit.loc - , size = Math.max(unit.width, unit.height) - , exp = new Circle(3) - .position(loc.x,loc.y) - .fill('#980011') - .animate(1000, { 'radius':size }) - .appendTo(this.level); - - this.animations.push(exp); - - return unit; - }, - /** diff --git a/src/tanks/map/level.cjs b/src/tanks/map/level.cjs index 8b752a2..db6d81f 100644 --- a/src/tanks/map/level.cjs +++ b/src/tanks/map/level.cjs @@ -1,5 +1,6 @@ var Y = require('Y').Y , Rect = require('ezl/shape').Rect +, Thing = require('tanks/thing/thing').Thing , Tank = require('tanks/thing/tank').Tank , PlayerTank = require('tanks/thing/player').PlayerTank , PathMap = require('tanks/map/pathmap').PathMap diff --git a/src/tanks/thing/bullet.cjs b/src/tanks/thing/bullet.cjs index 404c5bf..b6541bc 100644 --- a/src/tanks/thing/bullet.cjs +++ b/src/tanks/thing/bullet.cjs @@ -1,9 +1,11 @@ // -*- mode: JavaScript; tab-width: 4; indent-tabs-mode: nil; -*- var Y = require('Y').Y +, math = require('ezl/math') , shape = require('ezl/shape') , Wall = require('tanks/map/wall').Wall , Thing = require('tanks/thing/thing').Thing , Trajectory = require('tanks/map/trajectory').Trajectory +, Explosion = require('tanks/fx/explosion').Explosion , Line = shape.Line , Circle = shape.Circle , @@ -13,6 +15,11 @@ exports['Bullet'] = Thing.subclass('Bullet', { traceTrajectories : true, + explDuration : 750, + explStart : 1.0, + explEnd : 1.5, + + /** * @param {tanks.Unit} owner @@ -52,9 +59,8 @@ Thing.subclass('Bullet', { }, remove : function remove(){ - if (this.shape) this.shape.remove(); - if (this.tline) this.tline.remove(); - // if (this.game) this.game.killUnit(this); + if (this.shape) { this.shape.remove(); } + if (this.tline) { this.tline.remove(); delete this.tline; } return this; }, @@ -84,21 +90,41 @@ Thing.subclass('Bullet', { }, onCollide : function onCollide(evt){ - var agent = evt.trigger + var unit = evt.trigger , trj = this.trajectory; - if ( agent instanceof Wall && trj.bounces <= this.bounceLimit ) + if ( this.dead || unit instanceof Wall && trj.bounces <= this.bounceLimit ) return; - agent.dealDamage(this.stats.power, this); + unit.dealDamage(this.stats.power, this); this.destroy(); trj.halt = true; + + // Trigger explosion + var loc = this.loc, uloc = unit.loc + , x = math.lerp(0.5,loc.x,uloc.x) + , y = math.lerp(0.5,loc.y,uloc.y) + + , bsize = Math.max(this.width, this.height) + , asize = Math.max(unit.width, unit.height) + + , duration = this.explDuration + , start = bsize, end = bsize + ; + + if ( unit.dead && asize >= bsize ) + end = asize; + + start = this.explStart * start; + end = this.explEnd * end; + this.game.addAnimation( + new Explosion(start, end, duration) + .position(x,y) ); }, render : function render(parent){ - if (this.tline) { this.tline.remove(); delete this.tline; } - if (this.shape) this.shape.remove(); + this.remove(); if (tanks.config.values.pathing.traceTrajectories) { var t = this.trajectory; @@ -109,7 +135,7 @@ Thing.subclass('Bullet', { } var loc = this.loc; - this.shape = new Circle(3) + this.shape = new Circle(this.width/2) .position(loc.x, loc.y) .fill('#FFF6AE') .appendTo( parent ); diff --git a/src/tanks/thing/player.cjs b/src/tanks/thing/player.cjs index ab5215a..153099a 100644 --- a/src/tanks/thing/player.cjs +++ b/src/tanks/thing/player.cjs @@ -18,7 +18,7 @@ Tank.subclass('PlayerTank', { stats: { hp : 1, // health - move : 1.0, // move speed (squares/sec) + move : 0.75, // move speed (squares/sec) rotate : HALF_PI, // rotation speed (radians/sec) power : 1, // attack power diff --git a/src/tanks/thing/tank.cjs b/src/tanks/thing/tank.cjs index 1d81dbe..b35b859 100644 --- a/src/tanks/thing/tank.cjs +++ b/src/tanks/thing/tank.cjs @@ -70,14 +70,6 @@ Thing.subclass('Tank', function(Tank){ - /* - ai : { - path : 1.0, // calculate a path to enemy - dodge : 1.0, // dodge an incoming bullet - shootIncoming : 0.5, // shoot down incoming bullet - shootEnemy : 0.75 // shoot at enemy tank if in range - */ - this['act'] = function act(allotment){ var ai = this.ai; diff --git a/src/tanks/ui/grid.cjs b/src/tanks/ui/grid.cjs index f3fb59c..5087f2c 100644 --- a/src/tanks/ui/grid.cjs +++ b/src/tanks/ui/grid.cjs @@ -9,7 +9,7 @@ Rect.subclass('Grid', { lineWidth : 0.5, strokeStyle : '#6E6E6E', - createTableGrid : true, + createTableGrid : false, createCanvasGrid : true, diff --git a/src/tanks/ui/main.cjs b/src/tanks/ui/main.cjs index 1e6f086..7e4a084 100644 --- a/src/tanks/ui/main.cjs +++ b/src/tanks/ui/main.cjs @@ -240,15 +240,17 @@ function updateInfo(){ , n_active = LBT.active.size() , n_units = LBT.units.size() , n_projs = LBT.bullets.size() + , n_anims = LBT.animations.size() ; $('#info #state').text( loop.running ? 'Running!' : ('Paused (tick '+TICKS+')') ); $('#info [name=fps]').val( fps.toFixed(2) + " / " + loop.framerate ); $('#info [name=frame]').val( loop.frametime().toFixed(3)+" ms" ); - $('#info [name=active]').val( n_active ); - $('#info [name=units]').val( n_units ); + $('#info [name=active]').val( n_active ); + $('#info [name=units]').val( n_units ); $('#info [name=bullets]').val( n_projs ); + $('#info [name=anims]').val( n_anims ); loop.spark.drawTimes(); diff --git a/www/css/lttl.css b/www/css/lttl.css index b3d805f..6854074 100644 --- a/www/css/lttl.css +++ b/www/css/lttl.css @@ -70,7 +70,7 @@ table.grid td { /* outline:1px solid rgba(255,255,255,0.1); */ #info { position:relative; width:250px; } #info #state { font-weight:bold; } - #info label { display:block; float:left; width:3em; margin-right:0.5em; color:#787878; } + #info label { display:block; float:left; width:5em; margin-right:0.5em; color:#787878; } #info input { border:0; background-color:transparent; min-width:5em; width:5em; color:#5c5c5c; } #info .sep { opacity:0.1; background-color:#999; margin:5px 0; height:1px; } #info .fps-sparkline { width:100%; height:1.5em; margin-top:0.5em; } diff --git a/www/debug.html b/www/debug.html index 49c699b..5f3371f 100644 --- a/www/debug.html +++ b/www/debug.html @@ -20,12 +20,13 @@
diff --git a/www/deps.html b/www/deps.html index a5a00ab..62c799f 100644 --- a/www/deps.html +++ b/www/deps.html @@ -29,8 +29,8 @@ - + @@ -53,6 +53,7 @@ + diff --git a/www/test/shapes/test-shapes.js b/www/test/shapes/test-shapes.js index 261302e..3ea753a 100644 --- a/www/test/shapes/test-shapes.js +++ b/www/test/shapes/test-shapes.js @@ -50,4 +50,5 @@ $(function(){ C.title(C.boundingBox+''); grid.draw(); + }); -- 1.7.0.4