Add a lift

src/assets/styles.css

@@ -40,7 +40,7 @@ canvas {
     image-rendering: -webkit-crisp-edges;
     image-rendering: pixelated;
     width: 800px;
-    height: 400px;
+    height: 320px;
     cursor: hand;
 }
 

src/bubble.js

@@ -1,5 +1,5 @@
 (function() {
-    "use strict";
+    'use strict';
     
     var bubble = {};
 

src/entity.js

@@ -1,5 +1,5 @@
 (function() {
-    "use strict";
+    'use strict';
     
     var entity = {};
     var allEntities = [];
@@ -12,22 +12,23 @@
     };
 
     entity.create = function(name, sprite) {
-        allEntities.push({
+        var e = {
             name: name,
             sprite: sprite,
-            callbacks: []
+            callbacks: [],
-        });
-        return {
             addCallback: function(callback) {
-                entity.get(name).callbacks.push(callback);
+                this.callbacks.push(callback);
                 return this;
             }
         };
+        allEntities.push(e);
+        return e;
     };
 
     entity.update = function() {
         var clickedOnASprite = false;
         allEntities.forEach(function(e) {
+            if (e.name.split('.')[0] !== muri.currentRoom) return;
             e.sprite.update();
             if (muri.get('mouse').clickedOn(e.sprite)) {
                 clickedOnASprite = true;
@@ -43,6 +44,7 @@
 
     entity.render = function() {
         allEntities.forEach(function(e) {
+            if (e.name.split('.')[0] === muri.currentRoom)
                 e.sprite.render();
         });
     };

src/index.html

@@ -1 +1 @@
-<link rel="stylesheet" href="assets/styles.css"></link><h1>murí</h1><p>a js13kgame by <a href="https://aaron-fischer.net/">Aaron Fischer</a> (2017)</p> <div id="content"><div><canvas width="100" height="50" id="js13k-2017"></canvas><div id="bubble" style="display: none;">Uh ...</div></div></div><p id="loading">loading game ...</p><script src="vendor/kontra.min.js"></script><script src="muri.min.js"></script>
+<link rel="stylesheet" href="assets/styles.css"></link> <h1>murí</h1><p>a js13kgame by <a href="https://aaron-fischer.net/">Aaron Fischer</a> (2017)</p><div id="content"> <div> <canvas width="100" height="40" id="js13k-2017"></canvas> <div id="bubble"></div></div></div><p id="loading">loading game ...</p><script src="vendor/kontra.min.js"></script><script src="muri.min.js"></script>

src/index_dev.html

@@ -1,11 +1,10 @@
 <link rel="stylesheet" href="assets/styles.css"></link> 
-
 <h1>murí</h1>
 <p>a js13kgame by <a href="https://aaron-fischer.net/">Aaron Fischer</a> (2017)</p>
 
 <div id="content">
   <div>
-    <canvas width="100" height="45" id="js13k-2017"></canvas>
+    <canvas width="100" height="40" id="js13k-2017"></canvas>
     <div id="bubble"></div>
   </div>
 </div>
@@ -16,4 +15,5 @@
 <script src="entity.js"></script>
 <script src="bubble.js"></script>
 <script src="mouse.js"></script>
+<script src="lift.js"></script>
 <script src="stasis.js"></script>

src/lift.js

@@ -0,0 +1,57 @@
+(function() {
+    'use strict';
+
+    var lift = {};
+
+    var buttonSheet, background = null;
+    var buttons = [];
+    var roomState = {
+        position: 1
+    };
+
+    var createButtonEntity = function(i, room) {
+        var e = muri.get('entity')
+            .create('lift.button'+i,
+                    kontra.sprite({x: 59, y: i*2+8+i*2,
+                                   animations: buttonSheet.animations}))
+            .addCallback(function() {
+                buttons.forEach(function(b) { b.sprite.playAnimation('off'); });
+                muri.get('entity').get('lift.button'+i).sprite.playAnimation('on');
+                muri.get('bubble').talk([room], [65, i*4+8]);
+                setTimeout(function() { muri.currentRoom = room; }, 1000);
+            });
+        e.sprite.playAnimation('off');
+        return e;
+    };
+
+    lift.init = function() {
+        buttonSheet = kontra.spriteSheet({
+            image: kontra.assets.images.lift_button,
+            frameWidth: 2, frameHeight: 2,
+            animations: {
+                on: {frames: 1},
+                off: {frames: 0}
+            }
+        });
+
+        background = kontra.sprite({
+            x: 0, y: 0,
+            image: kontra.assets.images.room_lift});
+        buttons = [
+            createButtonEntity(0, 'engine'), // Engine room
+            createButtonEntity(1, 'stasis'), // Stasis
+            createButtonEntity(2, 'hydro'),  // Hydro Deck
+            createButtonEntity(3, 'bridge')  // Bridge
+        ];
+        buttons[1].sprite.playAnimation('on');
+    };
+
+    lift.update = function() {};
+
+    lift.render = function() {
+        background.render();
+    };
+    
+    lift.name = 'lift';
+    muri.rooms.push(lift);
+}());

src/mouse.js

@@ -1,5 +1,5 @@
 (function() {
-    "use strict";
+    'use strict';
     
     var mouse = {};
     var isEnabled = true;

src/muri.js

@@ -69,7 +69,9 @@ var muri = (function() {
             'room_stasis_dark.png',
             'room_stasis.png',
             'stasis_doorSheet.png',
-            'stasis_lightSwitch.png'
+            'stasis_lightSwitch.png',
+            'room_lift.png',
+            'lift_button.png'
         ).then(function() {
             document.getElementById('loading').style.display = 'none';
             muri.modules.forEach(function(m) {

src/stasis.js

@@ -1,5 +1,5 @@
 (function() {
-    "use strict";
+    'use strict';
 
     var stasis = {};
 
@@ -72,6 +72,7 @@
                     if (!roomState.isDoorOpen) {
                         doorSprite.playAnimation('open');
                         roomState.isDoorOpen = true;
+                        setTimeout(function() { muri.currentRoom = 'lift'; }, 800);
                     } else {
                         doorSprite.playAnimation('close');
                         roomState.isDoorOpen = false;