diff --git a/src/assets/images/player.png b/src/assets/images/player.png new file mode 100644 index 0000000..591983e Binary files /dev/null and b/src/assets/images/player.png differ diff --git a/src/main.js b/src/main.js index 244c78e..59fcde4 100644 --- a/src/main.js +++ b/src/main.js @@ -50,14 +50,15 @@ kontra.assets.load( 'room_stasis_dark.png', - 'room_stasis.png' + 'room_stasis.png', + 'player.png' ).then(function() { document.getElementById('loading').style.display = 'none'; if (kontra.store.get('current-room') === null) kontra.store.set('current-room', 'stasis_dark'); - muri.talk([ + muri.bubble.talk([ 'Uh ...', 'Where I am? ...', 'It is so dark in here, I can\'t even see my bare hands. I can\'t remember a thing and my brain hurts so bad. What happened here?' @@ -76,9 +77,11 @@ render: function() { var currentRoom = kontra.store.get('current-room'); rooms[currentRoom].render(); + muri.bubble.render(); } }); + muri.init(); loop.start(); }); })(); diff --git a/src/muri.js b/src/muri.js index 65e463b..cea7f2a 100644 --- a/src/muri.js +++ b/src/muri.js @@ -1,22 +1,39 @@ var muri = { - bubble: function(text, position=[2, 7], delay=3, callback=false) { - var bubble = document.getElementById('bubble'); - bubble.style.display = ''; - bubble.style.left = position[0]*8; - bubble.style.top = position[1]*8; - bubble.innerHTML = text; - setTimeout(function() { - bubble.style.display = 'none'; - if (callback !== false) callback.call(); - }, delay*1000); + init: function() { + muri.bubble.playerSprite = kontra.sprite({x: 0, y: 0, image: kontra.assets.images.player }) }, - talk: function(texts, position) { - if (texts.length === 0) return; - var text = texts.shift(); - var delay = Math.ceil(text.length/13); - this.bubble(text, position, delay, function() { - muri.talk(texts, position); - }); + bubble: { + isActive: false, + playerSprite: false, + + show: function(text, position=[2, 7], delay=3, callback=false) { + muri.bubble.isActive = true; + var bubble = document.getElementById('bubble'); + bubble.style.display = ''; + bubble.style.left = position[0]*8; + bubble.style.top = position[1]*8; + bubble.innerHTML = text; + setTimeout(function() { + muri.bubble.isActive = false; + bubble.style.display = 'none'; + if (callback !== false) callback.call(); + }, delay*1000); + }, + + talk: function(texts, position) { + if (texts.length === 0) return; + var text = texts.shift(); + var delay = Math.ceil(text.length/13); + muri.bubble.show(text, position, delay, function() { + muri.bubble.talk(texts, position); + }); + }, + + render: function() { + if (muri.bubble.isActive) { + muri.bubble.playerSprite.render(); + } + } } };