diff --git a/src/index.html b/src/index.html index da0696f1..2aa8b6c5 100644 --- a/src/index.html +++ b/src/index.html @@ -4,15 +4,25 @@ - The Art of Presence - + Learn Git Branching + +
+
+
+ +
+
+
+ + + - + @@ -28,15 +38,16 @@ - + + diff --git a/src/legacy.js b/src/legacy.js index 85c6de8d..77df5ec5 100644 --- a/src/legacy.js +++ b/src/legacy.js @@ -1,3 +1,8 @@ +/* + * this code is adapted from the excellent ArborJS tutorial by + * Samizdat Drafting Co + */ + Renderer = function(canvas) { canvas = $(canvas).get(0); var ctx = canvas.getContext("2d"); @@ -37,8 +42,8 @@ Renderer = function(canvas) { }, resize: function(){ - var w = $(window).width(), - h = $(window).height(); + var w = $(canvas).width(), + h = $(canvas).height(); // resize the canvas element to fill the screen TODO -- fix this canvas.width = w; canvas.height = h; // inform the system so it can map coords for us diff --git a/src/mine.js b/src/mine.js index 808f9e1e..144912fb 100644 --- a/src/mine.js +++ b/src/mine.js @@ -1,16 +1,18 @@ /** * Globals */ -var ee = null; +var events = _.clone(Backbone.Events); var sys = null; var graphicsEffects = {}; var gitEngine = null; $(document).ready(function(){ - ee = new EventEmitter(); sys = arbor.ParticleSystem(4000, 500, 0.5, false, 55, 0.005, 'verlet'); sys.renderer = Renderer('#viewport'); + new CommandLineView({ + el: $('#commandLineBar') + }); gitEngine = new GitEngine(); var repulsionBreathe = function(r) { diff --git a/src/style/main.css b/src/style/main.css index c5566dc4..1c46a46e 100644 --- a/src/style/main.css +++ b/src/style/main.css @@ -14,6 +14,17 @@ html,body { letter-spacing: -0.02em; color: #eee; - } +#controls { + position: absolute; + top: 0px; + left: 0px; + width: 50%; + height: 100%; + -webkit-box-orientation: vertical; +} + +#commandTextField { + width: 100%; +}