Fix the bubble thin with the mouse ...
This commit is contained in:
parent
9abd6a4663
commit
2243a5a788
4 changed files with 42 additions and 37 deletions
|
@ -1,67 +1,63 @@
|
||||||
(function() {
|
(function() {
|
||||||
|
"use strict";
|
||||||
|
|
||||||
var bubble = {};
|
var bubble = {};
|
||||||
|
|
||||||
var activeTalk = false;
|
|
||||||
var skip = false;
|
|
||||||
var dom = document.getElementById('bubble');
|
var dom = document.getElementById('bubble');
|
||||||
|
|
||||||
|
var resolveFn, fragmentTimer, delayTimer = null;
|
||||||
var show = function(text, position) {
|
var show = function(text, position) {
|
||||||
return new Promise(function(resolve, reject) {
|
return new Promise(function(resolve) {
|
||||||
dom.style.display = '';
|
resolveFn = resolve;
|
||||||
|
|
||||||
|
dom.innerHTML = '';
|
||||||
dom.style.left = position[0]*8;
|
dom.style.left = position[0]*8;
|
||||||
dom.style.top = position[1]*8;
|
dom.style.top = position[1]*8;
|
||||||
dom.innerHTML = '';
|
|
||||||
|
|
||||||
parts = text.split(' ');
|
var parts = text.split(' ');
|
||||||
var showFragment = function() {
|
var showFragment = function() {
|
||||||
if (skip) {
|
|
||||||
dom.innerHTML = '';
|
|
||||||
dom.style.display = 'none';
|
|
||||||
skip = false;
|
|
||||||
throw new Error('dfad');
|
|
||||||
}
|
|
||||||
if (parts.length === 0) {
|
if (parts.length === 0) {
|
||||||
setTimeout(function() {
|
delayTimer = setTimeout(resolve, 3000);
|
||||||
dom.style.display = 'none';
|
|
||||||
return resolve();
|
|
||||||
}, 1500);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
dom.innerHTML += parts.shift() + ' ';
|
dom.innerHTML += parts.shift() + ' ';
|
||||||
setTimeout(showFragment, 150);
|
fragmentTimer = setTimeout(showFragment, 140);
|
||||||
};
|
};
|
||||||
showFragment();
|
showFragment();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
bubble.skip = function() {
|
bubble.skip = function(what) {
|
||||||
dom.innerHTML = '';
|
clearTimeout(fragmentTimer);
|
||||||
skip = true;
|
clearTimeout(delayTimer);
|
||||||
|
if (resolveFn) resolveFn(what || 'line');
|
||||||
};
|
};
|
||||||
|
|
||||||
bubble.stop = function() {
|
|
||||||
bubble.skip();
|
|
||||||
if (!activeTalk) return;
|
|
||||||
activeTalk.reject();
|
|
||||||
activeTalk = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
bubble.talk = function(texts, position) {
|
bubble.talk = function(texts, position) {
|
||||||
if (texts.length === 0) return;
|
if (texts.length === 0) {
|
||||||
|
dom.innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
var text = texts.shift();
|
var text = texts.shift();
|
||||||
return show(text, position || [5, 44])
|
return show(text, position || [5, 44])
|
||||||
.then(function() {return bubble.talk(texts, position);})
|
.then(function(what) {
|
||||||
.catch(function() { return; });
|
if (what !== undefined) return Promise.resolve(what);
|
||||||
|
return bubble.talk(texts, position);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
bubble.story = function(talkList) {
|
bubble.story = function(talkList) {
|
||||||
if (talkList.length === 0) return;
|
if (talkList.length === 0) {
|
||||||
|
dom.innerHTML = '';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
bubble.skip('story');
|
||||||
var params = talkList.shift();
|
var params = talkList.shift();
|
||||||
var activeTalk = bubble.talk(params[0], params[1])
|
return bubble.talk(params[0], params[1])
|
||||||
.then(function() {return bubble.story(talkList);})
|
.then(function(what) {
|
||||||
.catch(function() { return; });
|
if (what === 'story') return Promise.resolve();
|
||||||
|
return bubble.story(talkList);
|
||||||
return activeTalk;
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
bubble.name = 'bubble';
|
bubble.name = 'bubble';
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<div id="content">
|
<div id="content">
|
||||||
<div>
|
<div>
|
||||||
<canvas width="100" height="50" id="js13k-2017"></canvas>
|
<canvas width="100" height="50" id="js13k-2017"></canvas>
|
||||||
<div id="bubble" style="display: none;">Uh ...</div>
|
<div id="bubble"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p id="loading">loading game ...</p>
|
<p id="loading">loading game ...</p>
|
||||||
|
|
|
@ -25,6 +25,10 @@
|
||||||
return sprite.collidesWith(mouseSprite);
|
return sprite.collidesWith(mouseSprite);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
mouse.isClickReleased = function() {
|
||||||
|
return mouseSprite.x === -1 && mouseSprite.y === -1;
|
||||||
|
};
|
||||||
|
|
||||||
mouse.releaseClick = function() {
|
mouse.releaseClick = function() {
|
||||||
mouseSprite.x = -1;
|
mouseSprite.x = -1;
|
||||||
mouseSprite.y = -1;
|
mouseSprite.y = -1;
|
||||||
|
|
|
@ -85,6 +85,11 @@ var muri = (function() {
|
||||||
muri.modules.forEach(function(m) {
|
muri.modules.forEach(function(m) {
|
||||||
if (m.update !== undefined) m.update();
|
if (m.update !== undefined) m.update();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
if (!muri.get('mouse').isClickReleased()) {
|
||||||
|
muri.get('mouse').releaseClick();
|
||||||
|
muri.get('bubble').skip();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
render: function() {
|
render: function() {
|
||||||
muri.room(muri.currentRoom).render();
|
muri.room(muri.currentRoom).render();
|
||||||
|
|
Loading…
Reference in a new issue