From 5805c8daf517543d3196fcf57f7382c60b0e53c7 Mon Sep 17 00:00:00 2001
From: Aaron Fischer <aaron.fischer@marbis.net>
Date: Thu, 24 Aug 2017 17:06:46 +0200
Subject: [PATCH] Start working with animations

---
 src/act1.js                             |  39 ++++++++++++++++++++++++
 src/assets/images/stasis_door-sheet.png | Bin 0 -> 304 bytes
 src/mouse.js                            |   2 ++
 src/muri.js                             |   5 +--
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/stasis_door-sheet.png

diff --git a/src/act1.js b/src/act1.js
index e467d42..f919a9a 100644
--- a/src/act1.js
+++ b/src/act1.js
@@ -2,8 +2,36 @@
     var act1 = {};
 
     var controlPanelSprite = kontra.sprite({x: 16, y: 13, width: 3, height: 2});
+    var doorSpriteSheet = null;
+    var doorAnimation = null;
 
     act1.init = function() {
+        doorSpriteSheet = kontra.spriteSheet({
+            image: kontra.assets.images['stasis_door-sheet'],
+            frameWidth: 23,
+            frameHeight: 20,
+            animations: {
+                closed: {
+                    frames: 0
+                },
+                opened: {
+                    frames: 2
+                },
+                open: {
+                    frames: '0..2',
+                    frameRate: 6
+                },
+                close: {
+                    frames: '2..0',
+                    frameRate: 6
+                }
+            }
+        });
+        doorAnimation = kontra.sprite({
+            x: 72, y: 8,
+            animations: doorSpriteSheet.animations
+        });
+
         if (muri.currentRoom === 'stasis_dark') {
             muri.get('bubble')
                 .story([
@@ -15,6 +43,14 @@
     };
 
     act1.update = function() {
+        if (muri.currentRoom === 'stasis') {
+            doorAnimation.closed.update();
+            if (muri.get('mouse').clickedOn(doorAnimation)) {
+                muri.get('mouse').releaseClick();
+                doorAnimation.playAnimation('open');
+            }
+        }
+
         if (muri.get('mouse').clickedOn(controlPanelSprite)) {
             muri.get('mouse').releaseClick();
 
@@ -33,6 +69,9 @@
     };
 
     act1.render = function() {
+        if (muri.currentRoom === 'stasis') {
+            doorAnimation.closed.render();
+        }
     };
 
     muri.modules.push(act1);
diff --git a/src/assets/images/stasis_door-sheet.png b/src/assets/images/stasis_door-sheet.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e1523e9cf7d9a5d00a8c143ef5af98ad4856679
GIT binary patch
literal 304
zcmeAS@N?(olHy`uVBq!ia0vp^9zZP0!3-oXDM!QrDXjpX5LXv_M`<}tATKD$r@SJ%
zI5A+}lI5pgd|zbb_n^BnB#VK;n8QrnJtd_k$ok}apgO*iAirRS|HvTR>$V6`X1S+}
zV~9oX+bL&-nhiKwguexS{d@nqr$~fHvh`ofl4aF~>prkbv<J-+2=VzM^k=3*>~m*_
zee)Q<C2#w^)jNUxGp9=(n_@v!LaGp-#oc9fYLzu>UYu}{b$FFN;rQ_;4ymZ%_@eB)
zhbH_n>+miL$nbUCxiwv@iu21xNnP;;rF>ECl6Uo@Za-U_Yj3dlfBl!YlAYb>F09Q|
p`P5!}Wt+O($#;AAU;BEQ?}8q?#iuiV4L~O|c)I$ztaD0e0syr7e*FLd

literal 0
HcmV?d00001

diff --git a/src/mouse.js b/src/mouse.js
index 8329314..9919fc9 100644
--- a/src/mouse.js
+++ b/src/mouse.js
@@ -16,6 +16,8 @@
             mouseSprite.x = Math.floor(evt.offsetX/8);
             mouseSprite.y = Math.floor(evt.offsetY/8);
         }
+        // DEBUGGING PURPOSE
+        console.log(mouseSprite.x, mouseSprite.y);
     };
     canvas.addEventListener('click', clickEvent);
 
diff --git a/src/muri.js b/src/muri.js
index e6a9281..4f60f8d 100644
--- a/src/muri.js
+++ b/src/muri.js
@@ -51,7 +51,7 @@ var muri = (function() {
             image: kontra.assets.images['room_'+room]
         });
     };
-    muri.currentRoom = 'stasis_dark';
+    muri.currentRoom = 'stasis';
     muri.modules = [];
     muri.get = function(moduleName) {
         for (var i in muri.modules)
@@ -62,7 +62,8 @@ var muri = (function() {
     muri.setup = function() {
         kontra.assets.load(
             'room_stasis_dark.gif',
-            'room_stasis.gif'
+            'room_stasis.gif',
+            'stasis_door-sheet.png'
         ).then(function() {
             document.getElementById('loading').style.display = 'none';
             var rooms = {