Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: oceddi/Enlil
base: db182681cb
...
head fork: oceddi/Enlil
compare: 54ec70009a
Checking mergeability… Don't worry, you can still create the pull request.
  • 2 commits
  • 4 files changed
  • 0 commit comments
  • 1 contributor
Showing with 206 additions and 22 deletions.
  1. +22 −1 examples/loader.html
  2. +70 −0 examples/uitest.html
  3. +0 −21 lib/main.js
  4. +114 −0 lib/ui.js
View
23 examples/loader.html
@@ -1,6 +1,6 @@
<html>
<head>
- <script data-main="../lib/main" src="../lib/require.js"></script>
+ <script src="../lib/require.js"></script>
</head>
<body>
<h1>Loader Test Page</h1>
@@ -10,6 +10,27 @@
<div id='stage'></div>
</body>
+ <script type="text/javascript">
+ require(["../lib/enlil"], function(Enlil) {
+ var advance = function() {
+ Enlil.drawFrame();
+ Enlil.tick();
+ fps.innerHTML = 'FPS: ' + Enlil.fps;
+ };
+ var run = function () {
+ Enlil.startFPS();
+ Enlil.registerRunLoop(advance);
+ Enlil.start(30);
+ };
+
+ require(['../lib/domReady'], function (domReady) {
+ domReady(function () {
+ /* package is defined in testpackage.json file. */
+ Enlil.loadPackage("testpackage.json", 'stage', run);
+ });
+ });
+ });
+ </script>
</html>
View
70 examples/uitest.html
@@ -0,0 +1,70 @@
+<html>
+ <head>
+ <script src="../lib/require.js"></script>
+ </head>
+ <body>
+ <h1>UI Test Page</h1>
+
+ <div id='version'></div>
+ <div id='fps'></div>
+ <div id='element1'></div>
+ <div id='element2'></div>
+ <div id='element3'></div>
+ click anywhere on the browser to place a speech bubble.
+ </body>
+
+ <script type="text/javascript">
+ require(["../lib/enlil", "../lib/ui"], function(Enlil, UI) {
+ var bubble1 = UI.createSpeechBubble('This is a really long message to display!', 30, 50, 200);
+ var bubble2 = UI.createSpeechBubble('Shorter', 8, 150, 400);
+ var bubble3 = UI.createSpeechBubble('Medium Sized Message!', 15, 250, 600);
+
+ var advance = function() {
+ Enlil.tick();
+ fps.innerHTML = 'FPS: ' + Enlil.fps;
+ };
+
+ var run = function () {
+ Enlil.startFPS();
+ Enlil.registerRunLoop(advance);
+ Enlil.start(30);
+ };
+
+ var clickHandler = function userClicked (event) {
+ var words = ['NiCe', 'sweeeet', 'cool', 'righteOUS', 'DUDE!'];
+ var size = [10, 15, 20, 25, 30, 40];
+ var target = event.target || event.srcElement;
+ var pageX = event.pageX;
+ var pageY = event.pageY;
+ var div = document.createElement('div');
+
+ div.setAttribute('id', new Date().getTime());
+ document.body.appendChild(div);
+ var bubbleColors = {
+ fill: 'rgba(255, 128, 0, 0.5)',
+ outline: 'rgba(255, 0, 255, 1.0)',
+ textInner: 'rgba( 0, 255, 0, 1.0)',
+ textOuter: 'rgba( 0, 0, 0, 1.0)'
+ };
+ var bubble = UI.createSpeechBubble(words[Math.floor(Math.random()*words.length)],
+ size[Math.floor(Math.random()*size.length)],
+ pageX-11, pageY-2, bubbleColors);
+ UI.showWindow(bubble, div.id);
+ };
+
+
+ require(['../lib/domReady'], function (domReady) {
+ domReady(function () {
+ Enlil.startFPS();
+ Enlil.registerRunLoop(advance);
+ Enlil.addEventHandler(document, "click", clickHandler);
+ UI.showWindow(bubble1, 'element1');
+ UI.showWindow(bubble2, 'element2');
+ UI.showWindow(bubble3, 'element3');
+ Enlil.start(60);
+ });
+ });
+ });
+ </script>
+
+</html>
View
21 lib/main.js
@@ -1,21 +0,0 @@
-
-require(["../lib/enlil"], function(Enlil) {
- var advance = function() {
- Enlil.drawFrame();
- Enlil.tick();
- fps.innerHTML = 'FPS: ' + Enlil.fps;
- };
-
- var run = function () {
- Enlil.startFPS();
- Enlil.registerRunLoop(advance);
- Enlil.start(30);
- };
-
- require(['domReady'], function (domReady) {
- domReady(function () {
- /* package is defined in testpackage.json file. */
- Enlil.loadPackage("testpackage.json", 'stage', run);
- });
- });
-});
View
114 lib/ui.js
@@ -0,0 +1,114 @@
+
+define( function(require) {
+
+ var windows = [];
+
+ function createSpeechBubble(text, fontSize, x, y, colors) {
+ var canvas = document.createElement('canvas');
+ var context = canvas.getContext('2d');
+ var canvas2;
+ var context2;
+ var padSize = Math.floor(fontSize*.15);
+ var padSize2 = padSize*2;
+
+ /* Figure out the dimensions by looking at text */
+ context.font = fontSize+'px arial';
+ var textSize = context.measureText(text);
+
+ var x2 = 1;
+ var y2 = 18;
+ var radius = (fontSize+padSize2+25)/2;
+ var width = textSize.width + 50;
+ var height = (fontSize+padSize2)+y2;
+ var r = x2 + width;
+ var b = y2 + height;
+
+ canvas2 = document.createElement('canvas');
+ canvas2.width = parseInt(textSize.width)+(55);
+ canvas2.height = (fontSize+padSize2) + (40);
+ context2 = canvas2.getContext('2d');
+
+ if(colors == undefined)
+ {
+ /* Default colors. */
+ colors = {
+ fill: 'rgba(255, 255, 0, 0.5)',
+ outline: 'rgba(255, 0, 0, 1.0)',
+ textInner: 'rgba( 0, 0, 0, 1.0)',
+ textOuter: 'rgba( 0, 0, 0, 1.0)'
+ };
+ }
+
+
+ /* Speech Bubble Shape */
+ context2.save();
+ context2.fillStyle = colors.fill;
+ context2.strokeStyle = colors.outline;
+ context2.lineWidth = '2';
+
+ context2.beginPath();
+ context2.moveTo(x2+radius, y2);
+ context2.lineTo(x2+radius/2, y2-10);
+ context2.lineTo(x2+radius*2, y2);
+ context2.lineTo(r-radius, y2);
+ context2.quadraticCurveTo(r, y2, r, y2+radius);
+ context2.lineTo(r, y2+height-radius);
+ context2.quadraticCurveTo(r, b, r-radius, b);
+ context2.lineTo(x2+radius, b);
+ context2.quadraticCurveTo(x2, b, x2, b-radius);
+ context2.lineTo(x2, y2+radius);
+ context2.quadraticCurveTo(x2, y2, x2+radius, y2);
+ context2.closePath();
+ context2.stroke();
+ context2.fill();
+ context2.restore();
+
+ /* Text */
+ context2.save();
+ context2.font = context.font;
+ context2.strokeStyle = colors.textOuter;
+ context2.fillStyle = colors.textInner;
+ context2.textBaseline = 'middle';
+ context2.lineWidth = '1';
+ context2.fillText(text, canvas2.width/2 - textSize.width/2, canvas2.height/2+y2/2);
+ context2.strokeText(text, canvas2.width/2 - textSize.width/2, canvas2.height/2+y2/2);
+ context2.restore();
+
+ var newWindow = {
+ context : context2,
+ canvas : canvas2,
+ x : x,
+ y : y
+ };
+
+ windows.push(newWindow);
+
+ return windows.length-1;
+ };
+
+ function showWindow(index, divname) {
+ var div = document.getElementById(divname);
+
+ div.style.position="absolute";
+ div.style.left = (windows[index].x)+"px";
+ div.style.top = (windows[index].y)+"px";
+
+ div.appendChild(windows[index].canvas);
+ };
+
+ function hideWindow(index, divname) {
+ var div = document.getElementById(divname);
+
+ div.removeChild(windows[index].canvas);
+ };
+
+
+
+ var UI = {};
+
+ UI.createSpeechBubble = createSpeechBubble;
+ UI.showWindow = showWindow;
+ UI.hideWindow = hideWindow;
+
+ return UI;
+});

No commit comments for this range

Something went wrong with that request. Please try again.