Skip to content

Commit

Permalink
add full page autoplay view
Browse files Browse the repository at this point in the history
  • Loading branch information
dethe committed Mar 22, 2015
1 parent 318024d commit 122882d
Show file tree
Hide file tree
Showing 7 changed files with 207 additions and 34 deletions.
2 changes: 1 addition & 1 deletion index.html
Expand Up @@ -73,7 +73,7 @@ <h2>Fork us</h2>
</section>
<section class="s4">
<div class="s4-1"><p><b>Waterbear</b> is also a toolkit for making programming more accessible and fun. Having a visual language means you don't have to focus on learning a syntax to start programming. It's good for kids, artists, and anyone who would like to make thir computer do something new without having to become a "programmer" (although it could lead to that).</p><blockquote>"It goes against the grain of modern education to teach children to program. What fun is there in making plans, acquiring discipline in organizing thoughts, devoting attention to detail and learning to be self critical"<br><br><i>— Alan Perlis, first recipient of the Turing Award</i></blockquote><p>Waterbear's system of draggable, snappable blocks are build using clean HTML5, CSS3, and Javascript. The Javascript playground for Waterbear allows you to create Waterbear scripts, see the Javascript it will generate, and run it right in the browser.</p></div>
<div class="s4-2"><iframe width="100%" height="300px" src="playground.html?view=result&amp;example=dance"></iframe></div>
<div class="s4-2"><iframe width="100%" height="300px" src="play.html?gist=e06514193419705e6224"></iframe></div>
</section>
<section class="s5">
<div class="s5-1">
Expand Down
11 changes: 11 additions & 0 deletions js/app.js
Expand Up @@ -170,6 +170,17 @@ function handleExampleButton(evt){

Event.on(document.body, 'ui:click', '.open-example', handleExampleButton);

Event.on(document.body, 'dragging:touchstart', null, Event.initDrag);
Event.on(document.body, 'dragging:touchmove', null, Event.dragging);
Event.on(document.body, 'dragging:touchend', null, Event.endDrag);
Event.on(document.body, 'dragging:mousedown', null, Event.initDrag);
Event.on(document.body, 'dragging:mousemove', null, Event.dragging);
Event.on(window, 'dragging:mouseup', null, Event.endDrag);
Event.on(window, 'dragging:keyup', null, Event.cancelDrag);
Event.on(window, 'input:keydown', null, Event.handleKeyDown);
Event.on(window, 'input:keyup', null, Event.handleKeyUp);


window.app = {
message: message,
error: error,
Expand Down
88 changes: 88 additions & 0 deletions js/app_play.js
@@ -0,0 +1,88 @@
(function(){
'use strict';

// FIXME: This feedback is important and useful, but using it this way violates
// our localization principle: All user-visible text should be in HTML text,
// not attributes, CSS, or JavaScript. Once the messages have stabilized, move them
// to hidden HTML elements and refer to them by name so they can be localized.
var feedbackElem = document.querySelector('.feedback');
function message(color, text){
if (feebackElem){
feedbackElem.style.color = color;
feedbackElem.value = text;
}
}

function error(text){
message('red', text);
}

function warn(text){
message('orange', text);
}

function info(text){
message('#333', text);
}

// Documentation for modal dialogs: https://github.com/kylepaulsen/NanoModal

Event.on('.do-run', 'ui:click', null, startScript);
Event.on('.do-stop', 'ui:click', null, stopScript);

function startScript(evt){
// Do any necessary cleanup (e.g., clear event handlers).
stopScript(evt);
runtime.resetStage();
evt.target.blur();
runtime.getStage().focus();
preload().whenLoaded(runScript);
}

function stopScript(evt){
runtime.stopEventLoop();
evt.target.blur();
runtime.getStage().focus()
runtime.clear();
}

function preload() {
return assets.load({
'wb-contains wb-expression[isAsset=true]': assets.loadMedia,
'wb-contains wb-expression[script^="geolocation."]':
assets.waitFor('locationchanged', util.geolocation.startTrackingLocation),
'wb-contains wb-expression[script="motion.tiltDirection"]':
assets.waitFor('motionchanged', util.motion.startTrackingMotion)
});
}

function runScript(){
var globalScope = {};
runtime.startEventLoop();
dom.findAll('wb-workspace > wb-contains > *').forEach(function(block){
if (block.run){
block.run(globalScope);
}
});
}

Event.on(document.body, 'dragging:touchstart', null, Event.trackPointerDown);
Event.on(document.body, 'dragging:touchmove', null, Event.trackPointerPosition);
Event.on(document.body, 'dragging:touchend', null, Event.trackPointerUp);
Event.on(document.body, 'dragging:mousedown', null, Event.trackPointerDown);
Event.on(document.body, 'dragging:mousemove', null, Event.trackPointerPosition);
Event.on(window, 'input:keydown', null, Event.handleKeyDown);
Event.on(window, 'input:keyup', null, Event.handleKeyUp);

Event.on(window, 'ui:load', null, preload);
Event.on(window, 'ui:script-load', null, preload);
Event.on(window, 'ui:asset-load', null, runScript);

window.app = {
message: message,
error: error,
warn: warn,
info: info
};

})();
37 changes: 24 additions & 13 deletions js/event.js
Expand Up @@ -278,6 +278,20 @@
return false;
}

// Used when we're not tracking dragging
function trackPointerPosition(evt){
Event.pointerX = evt.pageX;
Event.pointerY = evt.pageY;
}

function trackPointerDown(evt){
Event.pointerDown = true;
}

function trackPointerUp(evt){
Event.pointerDown = false;
}

function dragging(evt){
Event.pointerX = evt.pageX;
Event.pointerY = evt.pageY;
Expand Down Expand Up @@ -395,19 +409,16 @@
stagePointerY: 0,
keys: {},
keyHandlers: {},
clearRuntime: clearRuntime
clearRuntime: clearRuntime,
initDrag: initDrag,
dragging: dragging,
endDrag: endDrag,
cancelDrag: cancelDrag,
trackPointerPosition: trackPointerPosition,
trackPointerDown: trackPointerDown,
trackPointerUp: trackPointerUp,
handleKeyUp: handleKeyUp,
handleKeyDown: handleKeyDown
};


Event.on(document.body, 'dragging:touchstart', null, initDrag);
Event.on(document.body, 'dragging:touchmove', null, dragging);
Event.on(document.body, 'dragging:touchend', null, endDrag);
Event.on(document.body, 'dragging:mousedown', null, initDrag);
Event.on(document.body, 'dragging:mousemove', null, dragging);
Event.on(window, 'dragging:mouseup', null, endDrag);
Event.on(window, 'dragging:keyup', null, cancelDrag);
Event.on(window, 'input:keydown', null, handleKeyDown);
Event.on(window, 'input:keyup', null, handleKeyUp);


})();
17 changes: 10 additions & 7 deletions js/file.js
Expand Up @@ -122,7 +122,7 @@
var gistID = isNaN(parseInt(id)) ? prompt("What Gist would you like to load? Please enter the ID of the Gist: ") : id;
// console.log("Loading gist " + id);
if( !gistID ) return;
getScriptFromGist(id);
getScriptFromGistId(id);
}

function getScriptFromGistId(id){
Expand Down Expand Up @@ -161,6 +161,7 @@
// console.info('file format version: %s', fileObject.waterbearVersion);
// console.info('restoring to workspace %s', fileObject.workspace);
document.querySelector('wb-workspace > wb-contains').innerHTML = text;
Event.trigger(window, 'script-load', text);
}

function loadScriptsFromGist(gist){
Expand Down Expand Up @@ -193,7 +194,7 @@
getScriptFromGistId(params.gist);
}else if (params.example){
loadScriptsFromExample(params.example);
}else if (localStorage['__simple_currentWaterbearScript']){
}else if (page === 'playground' && localStorage['__simple_currentWaterbearScript']){
loadScriptsFromString(localStorage['__simple_currentWaterbearScript']);
}
}
Expand Down Expand Up @@ -222,12 +223,14 @@
loadScriptsFromFile(file);
}
}

var page = location.pathname.split('/').pop().split('.')[0];
Event.on(window, 'ui:load', null, loadCurrentScripts);
Event.on(window, 'ui:beforeunload', null, saveCurrentScripts);
Event.on(document.body, 'ui:wb-added', null, bareUrl); // Remove gist or other argument on script change
Event.on(document.body, 'ui:wb-removed', null, bareUrl);
Event.on(document.body, 'ui:wb-changed', null, bareUrl);
if (page === 'playground'){
Event.on(window, 'ui:beforeunload', null, saveCurrentScripts);
Event.on(document.body, 'ui:wb-added', null, bareUrl); // Remove gist or other argument on script change
Event.on(document.body, 'ui:wb-removed', null, bareUrl);
Event.on(document.body, 'ui:wb-changed', null, bareUrl);
}

window.File = {
scriptsToString: scriptsToString,
Expand Down
28 changes: 15 additions & 13 deletions js/util.js
Expand Up @@ -143,7 +143,7 @@
this.x = x;
this.y = y;
}

Vector.fromPolar = function(degrees, mag){
var radians = deg2rad(degrees);
return new Vector(cos(radians) * mag, sin(radians) * mag);
Expand All @@ -155,11 +155,11 @@
Vector.prototype.getX = function(){
return this.x;
}

Vector.prototype.getY = function(){
return this.y;
}

Vector.prototype.magnitude = function(){
return sqrt(this.x * this.x + this.y * this.y);
}
Expand Down Expand Up @@ -643,7 +643,7 @@

/* Default whenLoaded callback. */
whenLoaded = function () {
console.warn(toLoad, 'assets loaded.');
// console.log('default asset load');
};

/* Try every selector. */
Expand All @@ -666,13 +666,15 @@
function ready() {
/* No assets to load; just call whenLoaded. */
if (toLoad === 0) {
Event.trigger(window, 'asset-load');
whenLoaded();
return;
}

console.assert(loaded < toLoad);
loaded++;
if (loaded === toLoad && whenLoaded) {
if (loaded === toLoad) {
Event.trigger(window, 'asset-load');
whenLoaded();
}
}
Expand Down Expand Up @@ -851,11 +853,11 @@
WBImage.prototype.getHeight = function(){
return this.height;
};

WBImage.prototype.getWidth = function(){
return this.width;
};
};

WBImage.prototype.setWidth = function(w){
this.width = w;
this.height = this.width / this.origProportion;
Expand Down Expand Up @@ -901,23 +903,23 @@
this.velocity = add(this.velocity, multiply(this.facing, speed));
// console.log('position: %s, velocity: %s, facing: %s', strv(this.position), strv(this.velocity), strv(this.facing));
}

Sprite.prototype.setVelocity = function(vec){
this.velocity = vec;
}

Sprite.prototype.getXvel = function(){
return this.velocity.getX();
}

Sprite.prototype.getYvel = function(){
return this.velocity.getY();
}

Sprite.prototype.getXpos = function(){
return this.position.getX();
}

Sprite.prototype.getYpos = function(){
return this.position.getY();
}
Expand Down
58 changes: 58 additions & 0 deletions play.html
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<title>Waterbear Play</title>
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/widget.css" />
<link rel="stylesheet" href="css/block.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="lib/prefixfree.min.js"></script>
<script type="text/javascript">
<!-- Google Analytics -->
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-58671174-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</head>
<body>
<header>
<a href="index.html"><img src="images/logo/waterbear_icon_logo.svg" /></a>
<h1>Waterbear Play</h1>
</header>
<wb-workspace style="display:none">
<header>Workspace</header>
<output class="feedback"></output>
<wb-contains></wb-contains>
</wb-workspace>
<wb-playground>
<div class="menu">
<button class="do-run" onclick="_gaq.push(['_trackEvent', 'Actions', 'run']);">Run</button>
<button class="do-stop" onclick="_gaq.push(['_trackEvent', 'Action', 'stop']);">Stop</button>
</div>
<canvas></canvas>
</wb-playground>
<svg class="sekrit-svg"><text class="resize-tester"></text></svg>
<script src="lib/ajax.js"></script>
<script src="lib/document-register-element.js"></script><!-- polyfill for custom elements -->
<script src="lib/sound.js"></script>
<script src="lib/nanomodal.js"></script>
<script src="js/util.js"></script>
<script src="js/event.js"></script>
<script src="js/runtime.js"></script>
<script src="js/dom.js"></script>
<script src="js/block.js"></script>
<script src="js/app_play.js"></script>
<script src="js/file.js"></script>
<script src="js/queryparams.js"></script>

</body>
</html>

0 comments on commit 122882d

Please sign in to comment.