mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-09 06:04:26 +02:00
initial view stuff
This commit is contained in:
parent
3bf34850ac
commit
78d0aa5b55
4 changed files with 38 additions and 9 deletions
|
@ -4,15 +4,25 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
<title>The Art of Presence</title>
|
<title>Learn Git Branching</title>
|
||||||
<meta name="author" content="Christian Swinehart And Peter Cottle">
|
<meta name="author" content="Peter Cottle">
|
||||||
<link rel="stylesheet" href="style/main.css" type="text/css" charset="utf-8">
|
<link rel="stylesheet" href="style/main.css" type="text/css" charset="utf-8">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<canvas id="viewport" width="800" height="600"></canvas>
|
<canvas id="viewport" width="800" height="600"></canvas>
|
||||||
|
|
||||||
|
<div id="controls">
|
||||||
|
<div id="commandLineBar">
|
||||||
|
<form id="commandForm">
|
||||||
|
<input id="commandTextField" type="text"></input>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<script src="../lib/jquery-1.8.0.min.js"></script>
|
<script src="../lib/jquery-1.8.0.min.js"></script>
|
||||||
<!-- Include the individual source files so we can extend-->
|
<!-- Include the individual arbor source files so we can extend-->
|
||||||
<script src="../arbor_src/etc.js"></script>
|
<script src="../arbor_src/etc.js"></script>
|
||||||
<script src="../arbor_src/kernel.js"></script>
|
<script src="../arbor_src/kernel.js"></script>
|
||||||
<script src="../arbor_src/graphics/colors.js"></script>
|
<script src="../arbor_src/graphics/colors.js"></script>
|
||||||
|
@ -28,15 +38,16 @@
|
||||||
|
|
||||||
<script src="../lib/Tween.js"></script>
|
<script src="../lib/Tween.js"></script>
|
||||||
<script src="../lib/rgbcolor.js"></script>
|
<script src="../lib/rgbcolor.js"></script>
|
||||||
<script src="../lib/EventEmitter.min.js"></script>
|
|
||||||
<script src="../lib/underscore-min.js"></script>
|
<script src="../lib/underscore-min.js"></script>
|
||||||
<script src="../lib/backbone-min.js"></script>
|
<script src="../lib/backbone-min.js"></script>
|
||||||
|
|
||||||
|
<!-- My files! -->
|
||||||
<script src="async.js"></script>
|
<script src="async.js"></script>
|
||||||
<script src="mine.js"></script>
|
<script src="mine.js"></script>
|
||||||
<script src="constants.js"></script>
|
<script src="constants.js"></script>
|
||||||
<script src="legacy.js"></script>
|
<script src="legacy.js"></script>
|
||||||
<script src="git.js"></script>
|
<script src="git.js"></script>
|
||||||
<script src="commandline.js"></script>
|
<script src="commandline.js"></script>
|
||||||
|
<script src="views.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,3 +1,8 @@
|
||||||
|
/*
|
||||||
|
* this code is adapted from the excellent ArborJS tutorial by
|
||||||
|
* Samizdat Drafting Co
|
||||||
|
*/
|
||||||
|
|
||||||
Renderer = function(canvas) {
|
Renderer = function(canvas) {
|
||||||
canvas = $(canvas).get(0);
|
canvas = $(canvas).get(0);
|
||||||
var ctx = canvas.getContext("2d");
|
var ctx = canvas.getContext("2d");
|
||||||
|
@ -37,8 +42,8 @@ Renderer = function(canvas) {
|
||||||
},
|
},
|
||||||
|
|
||||||
resize: function(){
|
resize: function(){
|
||||||
var w = $(window).width(),
|
var w = $(canvas).width(),
|
||||||
h = $(window).height();
|
h = $(canvas).height();
|
||||||
// resize the canvas element to fill the screen TODO -- fix this
|
// resize the canvas element to fill the screen TODO -- fix this
|
||||||
canvas.width = w; canvas.height = h;
|
canvas.width = w; canvas.height = h;
|
||||||
// inform the system so it can map coords for us
|
// inform the system so it can map coords for us
|
||||||
|
|
|
@ -1,16 +1,18 @@
|
||||||
/**
|
/**
|
||||||
* Globals
|
* Globals
|
||||||
*/
|
*/
|
||||||
var ee = null;
|
var events = _.clone(Backbone.Events);
|
||||||
var sys = null;
|
var sys = null;
|
||||||
var graphicsEffects = {};
|
var graphicsEffects = {};
|
||||||
var gitEngine = null;
|
var gitEngine = null;
|
||||||
|
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
ee = new EventEmitter();
|
|
||||||
sys = arbor.ParticleSystem(4000, 500, 0.5, false, 55, 0.005, 'verlet');
|
sys = arbor.ParticleSystem(4000, 500, 0.5, false, 55, 0.005, 'verlet');
|
||||||
sys.renderer = Renderer('#viewport');
|
sys.renderer = Renderer('#viewport');
|
||||||
|
|
||||||
|
new CommandLineView({
|
||||||
|
el: $('#commandLineBar')
|
||||||
|
});
|
||||||
gitEngine = new GitEngine();
|
gitEngine = new GitEngine();
|
||||||
|
|
||||||
var repulsionBreathe = function(r) {
|
var repulsionBreathe = function(r) {
|
||||||
|
|
|
@ -14,6 +14,17 @@ html,body {
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
|
|
||||||
color: #eee;
|
color: #eee;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#controls {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
-webkit-box-orientation: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
#commandTextField {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue