2015-12-06 13:49:35 +02:00
|
|
|
/* global TextUtils, PathResolver, ViewActivity, transitions, Transition */
|
|
|
|
|
|
|
|
function Views(parser) {
|
|
|
|
this.parser = parser;
|
|
|
|
this.screenWidth = window.innerWidth;
|
|
|
|
this.screenHeight = window.innerHeight;
|
|
|
|
|
|
|
|
this.windowTag = document.getElementById("window");
|
|
|
|
this.textAuthorTag = document.getElementById("textAuthor");
|
|
|
|
this.textContentTag = document.getElementById("textContent");
|
|
|
|
|
|
|
|
this.musicPlayerAudio = new Audio();
|
|
|
|
this.soundPlayerAudio = new Audio();
|
|
|
|
|
|
|
|
this.backgroundName = "";
|
|
|
|
this.backgroundType = "";
|
|
|
|
this.characters = new Characters();
|
2015-12-06 15:31:06 +02:00
|
|
|
this.characters.makeNamesUnknown();
|
2015-12-06 13:49:35 +02:00
|
|
|
this.characters.makeNamesKnown();
|
|
|
|
|
|
|
|
this.useSpriteTransitions = true;
|
|
|
|
this.spriteInContainer = {};
|
|
|
|
|
|
|
|
this.blockTap = false;
|
|
|
|
this.cancelNextStep = false;
|
|
|
|
this.nextCommandRunnable = function () {
|
|
|
|
Views.blockTap = false;
|
|
|
|
if (!Views.cancelNextStep) parser.next();
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
Views.prototype.getInstance = function () {
|
|
|
|
return this;
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.onTouch = function (e) {
|
|
|
|
if (this.blockTap) return;
|
|
|
|
|
|
|
|
this.cancelNextStep = true;
|
|
|
|
this.parser.next();
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.windowShow = function (effect) {
|
|
|
|
if (this.windowTag.style.visibility !== "visible") {
|
|
|
|
this.windowTag.style.visibility = "visible";
|
|
|
|
}
|
|
|
|
if (!TextUtils.isEmpty(effect)) {
|
|
|
|
this.background(this.backgroundType, this.backgroundName, effect);
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.windowHide = function (effect) {
|
|
|
|
if (this.windowTag.style.visibility !== "hidden") {
|
|
|
|
this.windowTag.style.visibility = "hidden";
|
|
|
|
}
|
|
|
|
if (!TextUtils.isEmpty(effect)) {
|
|
|
|
this.background(this.backgroundType, this.backgroundName, effect);
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.windowSwitchVisibility = function () {
|
|
|
|
if (this.windowTag.style.visibility === "hidden") {
|
|
|
|
this.windowTag.style.visibility = "visible";
|
|
|
|
} else {
|
|
|
|
this.windowTag.style.visibility = "hidden";
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.background = function (type, name, effect) {
|
|
|
|
if (TextUtils.isEmpty(name)) return;
|
|
|
|
this.backgroundType = type;
|
|
|
|
this.backgroundName = name;
|
|
|
|
this.text("");
|
|
|
|
|
2015-12-06 15:26:35 +02:00
|
|
|
var background = '';
|
2015-12-06 13:49:35 +02:00
|
|
|
if (name.equalsIgnoreCase("black")) {
|
2015-12-06 15:26:35 +02:00
|
|
|
background = "black";
|
2015-12-06 13:49:35 +02:00
|
|
|
} else if (name.equalsIgnoreCase("white")) {
|
2015-12-06 15:26:35 +02:00
|
|
|
background = "white";
|
|
|
|
} else {
|
|
|
|
background = 'url("' + PathResolver.background(type, name) + '") no-repeat center center fixed';
|
|
|
|
}
|
|
|
|
|
|
|
|
var animationTime = 0;
|
|
|
|
$('#background1').css('background', $('#background2').css('background'));
|
|
|
|
$('#background1').show();
|
|
|
|
if (effect in transitions) {
|
|
|
|
var transition = transitions[effect];
|
|
|
|
if (transition["type"] === Transition.TYPE_FADE) {
|
|
|
|
animationTime = transition["inTime"] + transition["outTime"];
|
|
|
|
$('#background2').hide();
|
|
|
|
$('#background2').css('background', background);
|
|
|
|
$('#background2').css('backgroundSize', 'cover');
|
|
|
|
$('#background1').fadeOut(transition["outTime"], function () {
|
|
|
|
$('#background2').fadeIn(transition["inTime"], function () {
|
|
|
|
$('#background1').hide();
|
|
|
|
$(this).show();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2015-12-06 15:31:06 +02:00
|
|
|
this.pause(animationTime, false);
|
|
|
|
return;
|
2015-12-06 15:26:35 +02:00
|
|
|
}
|
2015-12-06 13:49:35 +02:00
|
|
|
}
|
2015-12-06 15:31:06 +02:00
|
|
|
|
|
|
|
$('#background1').hide();
|
|
|
|
$('#background2').css('background', background);
|
|
|
|
$('#background2').css('backgroundSize', 'cover');
|
|
|
|
$('#background2').show();
|
2015-12-06 13:49:35 +02:00
|
|
|
this.pause(animationTime, false);
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.spritesClear = function () {
|
|
|
|
$('#container').empty();
|
|
|
|
this.spriteInContainer = {};
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.sprite = function (whoid, params, position, alias, effect) {
|
|
|
|
var img = undefined;
|
|
|
|
var key = TextUtils.isEmpty(alias) ? whoid : alias;
|
|
|
|
if (key in this.spriteInContainer) {
|
|
|
|
img = this.spriteInContainer[key];
|
|
|
|
} else {
|
|
|
|
//if (this.useSpriteTransitions) img = new AnimatableImageView(this);
|
|
|
|
//else img = new ImageView(this);
|
|
|
|
img = $('<img>', {class: "sprite", style: "height: " + this.screenHeight + "px;" });
|
|
|
|
this.spriteInContainer[key] = img;
|
|
|
|
}
|
|
|
|
var path = PathResolver.sprite(whoid, params);
|
|
|
|
try {
|
|
|
|
//if (useSpriteTransitions) ((AnimatableImageView)img).setImageBitmap(bitmap, effect);
|
|
|
|
//else img.setImageBitmap(bitmap);
|
|
|
|
img.one("load", function() {
|
|
|
|
ViewActivity.getInstance().setSpritePosition($(this), position);
|
|
|
|
});
|
|
|
|
img.attr('src', path);
|
|
|
|
if (!$.contains($('#container'), img))
|
|
|
|
$('#container').append(img);
|
|
|
|
if (effect in transitions) {
|
|
|
|
var transition = transitions[effect];
|
|
|
|
if (transition["type"] === Transition.TYPE_FADE) {
|
|
|
|
img.hide().fadeIn(transition["inTime"]);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} catch (ioe) {
|
|
|
|
console.log("sprite: " + path, ioe);
|
|
|
|
//if (Logger.DEBUG) Logger.log("sprite: " + path, ioe);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.hideSprite = function (whoid, effect) {
|
|
|
|
if (!(whoid in this.spriteInContainer)) return;
|
|
|
|
this.hide(whoid, effect);
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.hide = function (whoid, effect) {
|
|
|
|
var img = this.spriteInContainer[whoid];
|
|
|
|
if (img == null) return;
|
|
|
|
if (effect in transitions) {
|
|
|
|
var transition = transitions[effect];
|
|
|
|
if (transition["type"] === Transition.TYPE_FADE) {
|
|
|
|
img.fadeOut(transition["outTime"], function() {
|
|
|
|
$(this).remove();
|
|
|
|
});
|
2015-12-06 15:26:35 +02:00
|
|
|
} else {
|
|
|
|
img.remove();
|
2015-12-06 13:49:35 +02:00
|
|
|
}
|
|
|
|
} else {
|
|
|
|
img.remove();
|
|
|
|
}
|
|
|
|
delete this.spriteInContainer[whoid];
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.setSpritePosition = function (img, position) {
|
|
|
|
var width = this.screenWidth;
|
|
|
|
var imgWidth = img.width();
|
|
|
|
if (TextUtils.isEmpty(position) || position.equals("center")) {
|
|
|
|
img.css("left", Math.floor(width / 2 - imgWidth / 2) + "px");
|
|
|
|
} else if (position.equals("left")) {
|
|
|
|
img.css("left", Math.floor(imgWidth / 6) + "px");
|
|
|
|
} else if (position.equals("cleft")) {
|
|
|
|
img.css("left", Math.floor(width / 2 - imgWidth + imgWidth / 8) + "px");
|
|
|
|
} else if (position.equals("right")) {
|
|
|
|
img.css("right", Math.floor(imgWidth / 6) + "px");
|
|
|
|
} else if (position.equals("cright")) {
|
|
|
|
img.css("right", Math.floor(width / 2 - imgWidth + imgWidth / 8) + "px");
|
|
|
|
} else if (position.equals("fleft")) {
|
|
|
|
img.css("left", Math.floor(-imgWidth / 4) + "px");
|
|
|
|
} else if (position.equals("fright")) {
|
|
|
|
img.css("right", Math.floor(-imgWidth / 4) + "px");
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.pause = function (duration, hard) {
|
|
|
|
this.blockTap = hard;
|
|
|
|
this.cancelNextStep = false;
|
|
|
|
/* var now = new Date().getTime();
|
|
|
|
while(new Date().getTime() < now + sleepDuration){ ; } */
|
|
|
|
setTimeout(this.nextCommandRunnable, duration);
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.text_1 = function (text) {
|
|
|
|
this.textAuthorTag.innerText = "";
|
|
|
|
if (TextUtils.isEmpty(text)) this.windowHide("");
|
|
|
|
else {
|
|
|
|
this.windowShow("");
|
|
|
|
this.formatString(this.textContentTag, text);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
Views.prototype.text_2 = function (whoid, text) {
|
|
|
|
if (whoid.equalsIgnoreCase("th")) this.text("~ " + text + " ~");
|
|
|
|
else if (!this.characters.contains(whoid)) this.text(text);
|
|
|
|
else {
|
|
|
|
this.windowShow("");
|
|
|
|
var person = this.characters.get(whoid);
|
|
|
|
this.textAuthorTag.innerText = person.name;
|
|
|
|
this.textAuthorTag.style.color = toColor(person.color);
|
|
|
|
this.formatString(this.textContentTag, text);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
Views.prototype.text = function (arg1, arg2) {
|
|
|
|
if (arguments.length === 1) this.text_1(arg1);
|
|
|
|
else this.text_2(arg1, arg2);
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.formatString = function (tag, text) {
|
|
|
|
var edited = text.replaceAll("\\{w.*?\\}", "");
|
|
|
|
if (edited.contains("{center}")) {
|
|
|
|
edited = text.replaceAll("\\{center\\}", "");
|
|
|
|
this.textContentTag.style.textAlign = "center";
|
|
|
|
} else {
|
|
|
|
this.textContentTag.style.textAlign = "left";
|
|
|
|
}
|
|
|
|
if (edited.contains("{html}")) {
|
|
|
|
edited = edited.replaceAll("\\{html\\}", "");
|
|
|
|
return edited;
|
|
|
|
}
|
|
|
|
var codes = ["b","i","s","u","big","small"];
|
|
|
|
var html = false;
|
|
|
|
for (var i = 0; i < codes.length; i++) {
|
|
|
|
var ch = codes[i];
|
|
|
|
if (edited.contains("{"+ch+"}")) {
|
|
|
|
edited = edited.replace("{"+ch+"}", "<"+ch+">");
|
|
|
|
edited = edited.replace("{/"+ch+"}", "</"+ch+">");
|
|
|
|
html = true;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (html) {
|
|
|
|
edited = edited.replace("\n", "<br/>");
|
|
|
|
tag.innerHtml = edited;
|
|
|
|
} else {
|
|
|
|
tag.innerText = edited;
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.makeNamesKnown = function () {
|
|
|
|
this.characters.makeNamesKnown();
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.makeNamesUnknown = function () {
|
|
|
|
this.characters.makeNamesUnknown();
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.meet = function (whoid, name) {
|
|
|
|
this.characters.setName(whoid, name);
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.disableAllZones = function () {
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.disableCurrentZone = function () {
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.resetZone = function (zone) {
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.setZone = function (name, label) {
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.showMap = function () {
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.menu = function (menu) {
|
|
|
|
};
|
|
|
|
|
|
|
|
Views.prototype.music = function (name, fade) {
|
|
|
|
// !musicPlayerAudio.paused;
|
|
|
|
this.musicPlayerAudio.src = PathResolver.music(name);
|
|
|
|
this.musicPlayerAudio.play();
|
|
|
|
if (fade.fadeIn || fade.fadeOut) {
|
|
|
|
var startVolume = fade.fadeIn ? 0.0 : 1.0;
|
|
|
|
$(this.musicPlayerAudio).prop("volume", startVolume);
|
|
|
|
var targetVolume = fade.fadeIn ? 1.0 : 0.0;
|
|
|
|
$(this.musicPlayerAudio).animate({volume: targetVolume}, fade.duration * 1000);
|
|
|
|
}
|
|
|
|
};
|