RPG MO Level up notification

_demo.md

To run the mod, run the code below in the console, I've checked it with the last game version I had (57-4-2-1a).

lvlupanim.js

;(function(){

var MSG = '<span>You have gained level </span><span style="color:#fff;">{level}</span> <span>{skill}</span>!';
var MSG_ITEMS = 'New items available!'; // not used atm
lang.en.interface[MSG] = "";
lang.en.interface[MSG_ITEMS] = "";

/// wrapper function to call from Client.level_up()
function onLevelUp(a)
{
	var skill = a.data;
	var level = skills[0][skill].level + 1;
	go(_ti(capitaliseFirstLetter(skill)), level);
}

/// helper function to set multiple CSS properties with one call
function setStyle(elem, style)
{
	for (var s in style)
		elem.style[s] = style[s];
}

/// helper function to set opacity of an element.
function setOpacity(elem, value)
{
	elem.style.opacity = value;
	elem.style.filter = "alpha(opacity=" + Math.round(value * 100) + ")";
}
/// helper function for tween animation
function animate(time, onProgress, onComplete)
{
	var animTimer = 0;
	var next = requestAnimationFrame(function go(t)
	{
		if (!animTimer)
			animTimer = t;
		
		var delta = (t - animTimer);
		
		var finished = delta > time
			
		if (!finished)
			next = requestAnimationFrame(go);
		
		onProgress && onProgress(Math.min(delta / time, 1));
		
		if (finished)
			onComplete && onComplete();
	})
	function cancel()
	{
		cancelAnimationFrame(next);
	}
	return cancel;
}

/// create notification window (DOM element)
function createWindow(skill, level, newItems)
{
	var textDiv = document.createElement('div');
	setStyle(textDiv, {
		position: "relative",
		width: "100%",
		float: "left",
		textAlign: "center",
		color: "#ff0",
	});
	textDiv.innerHTML = _ti(MSG, { skill: skill, level:level });
	
	var div = document.createElement('div');
	setStyle(div, {
		position: "absolute",
		left: "50%",
		width: "400px",
		marginLeft: "-200px",
		top: "20%",
		fontSize: "1em",
		padding: "7px",
		border: "2px solid #666",
		borderRadius: "0",
		zIndex: "100",
		textAlign: "center",
	});
	div.className = "menu_no_opacity";
	div.appendChild(textDiv);
	return div;
}

/// create and show animation
function go(skill, level, newItems)
{
	var div = createWindow(skill, level, newItems);
	setOpacity(div, 0);
	wrapper.appendChild(div);
	
	animate(350, function(p)
	{
		setOpacity(div, p);
	}, function()
	{
		setTimeout(hide, 3500);
	});
	function hide()
	{
		animate(700, function(p)
		{
			setOpacity(div, 1-p);
		}, function()
		{
			if (div && div.parentNode)
				div.parentNode.removeChild(div);
		});
	}
}

// hook to Client.level_up for demo purposes
_wrapper.removeByTag(Client.level_up, "lvlup_anim");
Client.level_up = _wrapper.callBefore(Client.level_up, onLevelUp, "lvlup_anim");

})();

wrapper.js

// This is a utility class for demo. Not necessary for production.

;
window._wrapper = (function(){
	var _wrapper = {
		wrap: function(f, factory, tag)
		{
			var wrapper = factory(f);
			var newFunc = function()
			{
				if (newFunc._enabled)
					return wrapper.apply(this, arguments);
				
				return f.apply(this, arguments);
			};
			newFunc._f = f;
			newFunc._enabled = true;
			newFunc._disable = function(){ newFunc._enabled = false; };
			newFunc._enable = function(){ newFunc._enabled = true; };
			newFunc._delete = function(){ newFunc._disable(); } // todo: remove gracefully (changing linked list of wrappers)
			newFunc._tag = tag;
			if (f._delete) // if func itself is wrapper, mark it's parent
				f._parent = newFunc;
			return newFunc;
		},
		callBefore: function(f, wrapper, tag)
		{
			return _wrapper.wrap(f, function(w){ return _wrapper.orig(f, wrapper); }, tag);
		},
		findTag: function(f, tag)
		{
			var cur = f;
			while (cur && (cur._tag != tag))
			{
				cur = f._f;
			}
			return cur;
		},
		removeByTag: function(f, tag)
		{
			var func = _wrapper.findTag(f, tag);
			if (func && func._delete)
				return func._delete(), true;
			return false;
		},
		orig: function(f, wrapper)
		{
			return function()
			{
				wrapper.apply(this, arguments);
				return f.apply(this, arguments);
			};
		},
		log: function(f, prefix)
		{
			return _wrapper.orig(f, function()
			{
				if (prefix)
					console.log(prefix);
				
				Array.prototype.slice.apply(arguments).forEach(function(a) { console.log(a); });
			});
		},
		stack: function(f)
		{
			return _wrapper.orig(f, function()
			{
				console.log(new Error().stack);
			});
		},
	}
	return _wrapper;
})();