Start with the first act

src/act1.js

@@ -1,7 +1,13 @@
 (function() {
     var act1 = {};
 
-    muri.get('bubble').talk(['Hi', 'I Think, this works ...', 'This looks kinda cool. I think , I can work with that to build a nice little adventure game with some clicky things.', 'Just need to find out a way to click on things.']);
+    muri.get('bubble')
+        .story([
+            [['Beep ...', 'Click, Click, Click ...'], [20, 15]],
+            [['Urgh ... ....', 'What is wrong with me? ...'], [5, 40]]
+        ]).then(function() {
+            console.log("asdf");
+        })
 
     act1.update = function() {
     };

src/bubble.js

@@ -2,39 +2,54 @@
     var bubble = {};
 
     var isactive = false;
-    var show = function(text, position, callback) {
-        isactive = true;
+    var show = function(text, position) {
+        return new Promise(function(resolve) {
+            isactive = true;
 
-        var dom = document.getElementById('bubble');
-        dom.style.display = '';
-        dom.style.left = position[0]*8;
-        dom.style.top = position[1]*8;
-        dom.innerHTML = '';
+            var dom = document.getElementById('bubble');
+            dom.style.display = '';
+            dom.style.left = position[0]*8;
+            dom.style.top = position[1]*8;
+            dom.innerHTML = '';
 
-        parts = text.split(' ');
-        var show = function() {
-            if (parts.length === 0) {
-                setTimeout(function() {
-                    isactive = false;
-                    dom.style.display = 'none';
-                    callback.call();
-                }, 4000);
-                return;
-            }
-            dom.innerHTML += parts.shift() + ' ';
-            setTimeout(show, 150);
-        };
-        show();
+            parts = text.split(' ');
+            var show = function() {
+                if (parts.length === 0) {
+                    setTimeout(function() {
+                        isactive = false;
+                        dom.style.display = 'none';
+                        return resolve();
+                    }, 4000);
+                    return;
+                }
+                dom.innerHTML += parts.shift() + ' ';
+                setTimeout(show, 150);
+            };
+            show();
+        });
     };
     
-    bubble.talk = function(texts, position, callback) {
-        if (texts.length === 0) {
-            if (callback !== undefined) callback.call();
-            return;
-        }
-        var text = texts.shift();
-        show(text, position || [5, 40], function() {
-            bubble.talk(texts, position);
+    bubble.talk = function(texts, position) {
+        return new Promise(function(resolve) {
+            if (texts.length === 0) {
+                return resolve();
+            }
+            var text = texts.shift();
+            show(text, position || [5, 40]).then(function() {
+                bubble.talk(texts, position);
+            });
+        });
+    };
+
+    bubble.story = function(talkList) {
+        return new Promise(function(resolve, reject) {
+            if (talkList.length === 0) {
+                return resolve();
+            }
+            var params = talkList.shift();
+            bubble.talk(params[0], params[1]).then(function() {
+                bubble.story(talkList);
+            });
         });
     };
 

src/index_dev.html

@@ -10,6 +10,7 @@
   </div>
 </div>
 <p id="loading">loading game ...</p>
+<button id="newGame">New Game</button>
 
 <script src="vendor/kontra.js"></script>
 <script src="muri.js"></script>

src/muri.js

@@ -58,16 +58,19 @@ var muri = (function() {
                 return muri.modules[i];
     };
 
-    muri.start = function() {
+    muri.newGame = function() {
+        kontra.store.set('current-room', 'stasis_dark');
+    };
+
+    muri.setup = function() {
         kontra.assets.load(
             'player.png',
-            'room_stasis_dark.png',
-            'room_stasis.png'
+            'room_stasis_dark.gif',
+            'room_stasis.gif'
         ).then(function() {
             document.getElementById('loading').style.display = 'none';
             if (kontra.store.get('current-room') === null)
-                kontra.store.set('current-room', 'stasis_dark');
-
+                kontra.store.set('current-room', 'stasis');
             var rooms = {
                 stasis_dark: bg('stasis_dark'),
                 stasis: bg('stasis')
@@ -95,4 +98,5 @@ var muri = (function() {
     return muri;
 }());
 
-window.onload = muri.start;
+document.getElementById('newGame').addEventListener('click', muri.newGame);
+window.onload = muri.setup;