seperate observer logic
i split apart the code that tells the dialogue when to update into a seperate file so that i can use it in other places! seemed like a faster solution to have observable-esque behaviour without using very new features, setting up compilers, and including huge libraries! (not 100% sure its totally working, but i havn't caught it failing yet!)
This commit is contained in:
parent
c1a136f590
commit
45e3f27c79
|
@ -216,6 +216,7 @@
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
<!-- SCRIPTS -->
|
<!-- SCRIPTS -->
|
||||||
|
<script src="scripts/lib/tickable_observer.js"></script>
|
||||||
<script src="scripts/lib/helpers.js"></script>
|
<script src="scripts/lib/helpers.js"></script>
|
||||||
<script src="scripts/lib/rsvp.min.js"></script>
|
<script src="scripts/lib/rsvp.min.js"></script>
|
||||||
<script src="scripts/lib/minpubsub.min.js"></script>
|
<script src="scripts/lib/minpubsub.min.js"></script>
|
||||||
|
|
|
@ -310,59 +310,49 @@ Game.immediatePromise = function(){
|
||||||
Game.FORCE_TEXT_Y = -1;
|
Game.FORCE_TEXT_Y = -1;
|
||||||
Game.WORDS_HEIGHT_BOTTOM = -1;
|
Game.WORDS_HEIGHT_BOTTOM = -1;
|
||||||
(function(){
|
(function(){
|
||||||
const offset = 80
|
var wordsObserver = new TickableObserver(function(){
|
||||||
let lastCount = 0
|
var offset = 80
|
||||||
let lastBottom = -1
|
if(Game.WORDS_HEIGHT_BOTTOM < 0) Game.WORDS_HEIGHT_BOTTOM = 250;
|
||||||
Game.updateText = function(instant) {
|
let advanceTextPosition = 0
|
||||||
|
|
||||||
if(Game.WORDS_HEIGHT_BOTTOM < 0) Game.WORDS_HEIGHT_BOTTOM = 250;
|
// Either force the text somewhere...
|
||||||
|
if(Game.FORCE_TEXT_Y != -1){
|
||||||
let updated = false
|
Game.wordsDOM.style.transform = `translateY(${Game.FORCE_TEXT_Y}px)`;
|
||||||
function updateTransform(){
|
advanceTextPosition = Game.wordsDOM.clientHeight + Game.FORCE_TEXT_Y + 5
|
||||||
if(updated) return
|
}
|
||||||
updated = true
|
// Or calculate its position based on a window...
|
||||||
|
else {
|
||||||
let advanceTextPosition = 0
|
const wordsHeight = Game.wordsDOM.clientHeight;
|
||||||
if(Game.FORCE_TEXT_Y != -1){
|
let diff = wordsHeight - (Game.WORDS_HEIGHT_BOTTOM - offset)
|
||||||
Game.wordsDOM.style.transform = `translateY(${Game.FORCE_TEXT_Y}px)`;
|
if(diff < 0) diff = 0
|
||||||
advanceTextPosition = Game.wordsDOM.clientHeight + Game.FORCE_TEXT_Y + 5
|
Game.wordsDOM.style.transform = `translateY(${offset - diff}px)`;
|
||||||
} else {
|
advanceTextPosition = offset - diff + wordsHeight + 5
|
||||||
const wordsHeight = Game.wordsDOM.clientHeight;
|
}
|
||||||
let diff = wordsHeight - (Game.WORDS_HEIGHT_BOTTOM - offset)
|
|
||||||
if(diff < 0) diff = 0
|
|
||||||
Game.wordsDOM.style.transform = `translateY(${offset - diff}px)`;
|
|
||||||
advanceTextPosition = offset - diff + wordsHeight + 5
|
|
||||||
}
|
|
||||||
|
|
||||||
// Also, move click_to_advance DOM
|
// "Instant mode" was only used for clearing... so lets just do it when it's clear?
|
||||||
$('#click_to_advance').style.transform = `translateY(${Math.round(advanceTextPosition)}px)`;
|
if(Game.wordsDOM.children.length == 0){
|
||||||
}
|
Game.wordsDOM.classList.add("clear_transition");
|
||||||
|
Game.wordsDOM.clientHeight;
|
||||||
|
Game.wordsDOM.classList.remove("clear_transition");
|
||||||
|
}
|
||||||
|
|
||||||
if(Game.wordsDOM.children.length != lastCount){
|
// Also, move the click_to_advance DOM
|
||||||
updateTransform()
|
$('#click_to_advance').style.transform = `translateY(${Math.round(advanceTextPosition)}px)`;
|
||||||
lastCount = Game.wordsDOM.children.length;
|
});
|
||||||
}
|
|
||||||
|
// The words UI depends on these things:
|
||||||
if(Game.WORDS_HEIGHT_BOTTOM != lastBottom){
|
wordsObserver.watch(function(){ return Game.FORCE_TEXT_Y });
|
||||||
updateTransform()
|
wordsObserver.watch(function(){ return Game.WORDS_HEIGHT_BOTTOM });
|
||||||
lastBottom = Game.WORDS_HEIGHT_BOTTOM;
|
wordsObserver.watch(function(){ return Game.wordsDOM.children.length });
|
||||||
}
|
Game.updateText = function() { wordsObserver.tick() };
|
||||||
|
|
||||||
if(instant || Game.FORCE_TEXT_Y != -1){
|
|
||||||
updateTransform()
|
|
||||||
Game.wordsDOM.classList.add("clear_transition");
|
|
||||||
Game.wordsDOM.clientHeight;
|
|
||||||
Game.wordsDOM.classList.remove("clear_transition");
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
})()
|
})()
|
||||||
|
|
||||||
// CLEAR TEXT
|
// CLEAR TEXT
|
||||||
Game.clearText = function(){
|
Game.clearText = function(){
|
||||||
Game.wordsDOM.innerHTML = "";
|
Game.wordsDOM.innerHTML = "";
|
||||||
Game.updateText(true);
|
Game.updateText();
|
||||||
};
|
};
|
||||||
|
|
||||||
Game.clearAll = function(){
|
Game.clearAll = function(){
|
||||||
Game.clearText();
|
Game.clearText();
|
||||||
Game.resetScene();
|
Game.resetScene();
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
|
||||||
|
/*
|
||||||
|
Lots of things in this game were written to happen every frame, but they often don't need to!
|
||||||
|
|
||||||
|
Here's something I call a `Tickable Obersver`, it lets you (every frame) check if some values
|
||||||
|
have changed, and only then run the expensive code!
|
||||||
|
|
||||||
|
It's kinda like an observable, but it's tiny and runs on a frame-by-frame basis!
|
||||||
|
- Spacie
|
||||||
|
*/
|
||||||
|
|
||||||
|
class TickableObserver {
|
||||||
|
|
||||||
|
constructor(event){
|
||||||
|
this.depCount = 0;
|
||||||
|
this.previousValues = [];
|
||||||
|
this.watchers = [];
|
||||||
|
this.event = event;
|
||||||
|
}
|
||||||
|
|
||||||
|
tick(){
|
||||||
|
for(let i = 0; i < this.depCount; i++){
|
||||||
|
if(this.watchers[i]() != this.previousValues[i]){
|
||||||
|
this.previousValues[i] = this.watchers[i]();
|
||||||
|
if(this.event != null) return this.event();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(watcher){
|
||||||
|
this.depCount++;
|
||||||
|
this.watchers.push(watcher);
|
||||||
|
this.previousValues.push(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -70,7 +70,7 @@ MAIN GAME
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: transform 0.3s;
|
transition: transform 0.5s;
|
||||||
}
|
}
|
||||||
#game_words.clear_transition {
|
#game_words.clear_transition {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
|
|
Loading…
Reference in New Issue