Add mouse

src/act1.js

@@ -1,14 +1,35 @@
 (function() {
     var act1 = {};
 
+    var controlPanelSprite = kontra.sprite({x: 16, y: 13, width: 3, height: 2});
+
+    act1.init = function() {
+        if (kontra.store.get('current-room') === 'stasis_dark') {
             muri.get('bubble')
                 .story([
                     [['Beep', 'Bip, Bip'], [20, 15]],
                     [['Urgh ... ...', 'Where I am?', 'What happened?'], [35, 40]],
                     [['I can\'t see a thing ...', '... need to turn on the light ...'], [35, 40]]
                 ]);
+        }
+    };
 
     act1.update = function() {
+        if (muri.get('mouse').clickedOn(controlPanelSprite)) {
+            muri.get('mouse').releaseClick();
+
+            if (kontra.store.get('current-room') === 'stasis_dark') {
+                kontra.store.set('current-room', 'stasis');
+                muri.get('bubble')
+                    .talk([
+                        'Ah, much better.',
+                        'Looks like something happened to my stasis capsule.'
+                    ]);
+            } else {
+                muri.get('bubble')
+                    .talk(['No, I will not turn off the light again!']);
+            }
+        }
     };
 
     act1.render = function() {

src/assets/styles.css

@@ -36,6 +36,7 @@ canvas {
     image-rendering: pixelated;
     width: 800px;
     height: 400px;
+    cursor: hand;
 }
 
 #bubble {

src/bubble.js

@@ -1,10 +1,9 @@
 (function() {
     var bubble = {};
 
-    var isactive = false;
     var show = function(text, position) {
         return new Promise(function(resolve) {
-            isActive = true;
+            muri.get('mouse').disable();
 
             var dom = document.getElementById('bubble');
             dom.style.display = '';
@@ -16,7 +15,7 @@
             var show = function() {
                 if (parts.length === 0) {
                     setTimeout(function() {
-                        isActive = false;
+                        muri.get('mouse').enable();
                         dom.style.display = 'none';
                         return resolve();
                     }, 2000);
@@ -32,7 +31,7 @@
     bubble.talk = function(texts, position) {
         if (texts.length === 0) return;
         var text = texts.shift();
-        return show(text, position || [5, 40]).then(function() {
+        return show(text, position || [5, 44]).then(function() {
             return bubble.talk(texts, position);
         });
     };

src/index_dev.html

@@ -15,4 +15,5 @@
 <script src="vendor/kontra.js"></script>
 <script src="muri.js"></script>
 <script src="bubble.js"></script>
+<script src="mouse.js"></script>
 <script src="act1.js"></script>

src/mouse.js

@@ -0,0 +1,44 @@
+(function() {
+    var mouse = {};
+    var isEnabled = true;
+    var canvas = document.getElementById('js13k-2017');
+
+    var mouseSprite = kontra.sprite({
+        x: -1,
+        y: -1,
+        width: 1,
+        height: 1,
+        color: 'green'
+    });
+
+    var clickEvent = function(evt) {
+        if (isEnabled) {
+            mouseSprite.x = Math.floor(evt.offsetX/8);
+            mouseSprite.y = Math.floor(evt.offsetY/8);
+        }
+    };
+    canvas.addEventListener('click', clickEvent);
+
+    mouse.clickedOn = function(sprite) {
+        return sprite.collidesWith(mouseSprite);
+    };
+
+    mouse.releaseClick = function() {
+        mouseSprite.x = -1;
+        mouseSprite.y = -1;
+    };
+
+    mouse.disable = function() {
+        isEnabled = false;
+        mouse.releaseClick();
+        canvas.style.cursor = 'progress';
+    };
+
+    mouse.enable = function() {
+        isEnabled = true;
+        canvas.style.cursor = 'hand';
+    };
+
+    mouse.name = 'mouse';
+    muri.modules.push(mouse);
+}());

src/muri.js

@@ -60,6 +60,9 @@ var muri = (function() {
 
     muri.newGame = function() {
         kontra.store.set('current-room', 'stasis_dark');
+        muri.modules.forEach(function(m) {
+            if (m.init !== undefined) m.init();
+        });
     };
 
     muri.setup = function() {
@@ -93,10 +96,14 @@ var muri = (function() {
                 }
             }).start();
         });
+
+        muri.newGame();
     };
 
     return muri;
 }());
 
-document.getElementById('newGame').addEventListener('click', muri.newGame);
+document
+    .getElementById('newGame')
+    .addEventListener('click', muri.newGame);
 window.onload = muri.setup;