var $ = function(_undefind) {
function Selector(elements) {
this.length = elements.length;
for (var i = 0, l = this.length; l > i; i++) this[i] = elements[i];
}
function $(selector) {
return tag.test(selector) ? new Selector([ document.createElementNS("http://www.w3.org/2000/svg", tag.exec(selector)[1]) ]) : "string" == typeof selector ? new Selector(document.querySelectorAll(selector)) : selector instanceof NodeList ? new Selector(selector) : selector instanceof Element ? new Selector([ selector ]) : selector.addEventListener ? new Selector([ selector ]) : selector instanceof Selector ? selector : new Selector([]);
}
var fn = Selector.prototype;
fn.each = function(callback) {
for (var i = 0, l = this.length; l > i; i++) callback(this[i], i);
return this;
}, fn.on = function(eventName, eventHandler) {
return this.each(function(el) {
el.addEventListener(eventName, eventHandler);
});
}, fn.off = function(eventName, eventHandler) {
return this.each(function(el) {
el.removeEventListener(eventName, eventHandler);
});
}, fn.trigger = function(eventName, data) {
return this.each(function(el) {
event = new CustomEvent(eventName, data), el.dispatchEvent(event);
});
}, fn.css = function(name, value) {
if (Object(name) === name) {
for (var prop in name) this.css(prop, name[prop]);
return this;
}
return null != value ? this.each(function(el) {
el.style[name] = value;
}) : this.length ? getComputedStyle(this[0]).getPropertyValue(name) : _undefind;
}, fn.show = function() {
return this.css("display", "block");
}, fn.hide = function() {
return this.css("display", "none");
}, fn.text = function(text) {
return null != text ? this.each(function(el) {
el.textContent = text;
}) : this.length ? this[0].textContent : _undefind;
}, fn.html = function(html) {
return null != html ? this.each(function(el) {
for (;el.firstChild; ) el.removeChild(el.firstChild);
var fragment = document.createElement("div");
fragment.innerHTML = "<svg>" + html + "</svg>";
for (var svg = fragment.firstChild, node = svg.firstChild; node; ) el.appendChild(node.cloneNode(!0)),
node = node.nextSibling;
}) : this.length ? this[0].innerHTML : _undefind;
}, fn.remove = function() {
return this.each(function(el) {
el.parentNode && el.parentNode.removeChild(el);
});
}, fn.attr = function(name, value) {
if (Object(name) === name) {
for (var prop in name) this.attr(prop, name[prop]);
return this;
}
return null != value ? this.each(function(el) {
el.setAttribute(name, value);
}) : this.length ? this[0].getAttribute(name) : _undefind;
}, fn.removeAttr = function(name) {
return this.each(function(el) {
el.removeAttribute(name);
});
}, fn.append = function(target) {
return this.each(function(el) {
target instanceof Selector ? target.each(function(child) {
el.appendChild(child);
}) : el.appendChild(target);
});
}, fn.empty = function() {
return this.each(function(el) {
for (;el.firstChild; ) el.removeChild(el.firstChild);
});
}, fn.eq = function(idx) {
return new Selector(idx >= this.length ? [] : [ this[idx] ]);
}, fn.find = function(selector) {
var result = [];
return this.each(function(el) {
Array.prototype.push.apply(result, el.querySelectorAll(selector));
}), new Selector(result);
}, fn.parent = function() {
var result = [];
return this.each(function(el) {
result.push(el.parentNode);
}), new Selector(result);
}, fn.first = function() {
return new Selector(this.length ? [ this[0] ] : []);
}, fn.last = function() {
return new Selector(this.length ? [ this[this.length - 1] ] : []);
}, fn.clone = function() {
var result = [];
return this.each(function(el) {
result.push(el.cloneNode(!0));
}), new Selector(result);
}, fn.width = function() {
return this.length ? this[0].getBoundingClientRect().width : _undefind;
}, fn.height = function() {
return this.length ? this[0].getBoundingClientRect().height : _undefind;
}, fn.position = function() {
if (this.length) {
var clientRect = this[0].getBoundingClientRect();
return {
top: clientRect.top,
right: clientRect.right,
bottom: clientRect.bottom,
left: clientRect.left
};
}
return _undefind;
};
var defaultAnim = {
"class": "anim",
begin: "indefinite"
}, anim = function(anim) {
return $("<animate/>").attr(anim);
};
fn.animate = function(anims) {
var callbacks = [], thenable = {
then: function(complete) {
return callbacks.push(complete), thenable;
}
};
return anims = $.extend({}, defaultAnim, anims), this.each(function(el) {
var $el = $(el), $anim = $el.find(".anim");
$anim.length ? $anim.attr(anims) : ($el.append(anim(anims)[0]), $anim = $el.find(".anim")),
el.timerId = setTimeout(function() {
$el.attr(anims.attributeName, anims.to), $el.removeAttr("animated"), callbacks.forEach(function(c) {
c();
}), callbacks = [];
}, 1e3 * parseFloat(anims.dur)), $el.attr("animated", !0), $anim[0].beginElement();
}), thenable;
};
var animDelay = 62.5;
fn.move = function(anims) {
return this.each(function(el) {
function tick() {
if (!el.paused) {
var cur = from + step;
(to > from ? to >= cur : cur >= to) ? ($el.attr(property, cur), from = cur) : clearInterval(timer);
}
}
var property = anims.attributeName, dur = anims.dur, to = parseInt(anims.to), $el = $(el), from = parseInt($el.attr(property)), step = (to - from) / (1e3 * dur / animDelay);
el.timer = setInterval(tick, animDelay);
});
};
var defaultTrf = {
"class": "trf",
type: "translate",
dur: "0.3",
calcMode: "spline",
keySplines: "0.215 0.61 0.355 1",
additive: "replace",
attributeName: "transform",
begin: "indefinite",
keyTimes: "0; 1"
}, trf = function(trf) {
return $("<animateTransform/>").attr(trf);
};
fn.transform = function(trfs) {
var callbacks = [], thenable = {
then: function(complete) {
return callbacks.push(complete), thenable;
}
};
return trfs = $.extend({}, defaultTrf, trfs), this.each(function(el) {
var $el = $(el), $anim = $el.find(".trf");
$anim.length ? $anim.attr(trfs) : ($el.append(trf(trfs)[0]), $anim = $el.find(".trf")),
el.timerId = setTimeout(function() {
$el.attr("transform", trfs.type + "(" + trfs.to + ")"), $el.removeAttr("animated"),
callbacks.forEach(function(c) {
c();
}), callbacks = [];
}, 1e3 * parseFloat(trfs.dur) - 20), $el.attr("animated", !0), $anim[0].beginElement();
}), thenable;
}, fn.stop = function() {
return this.each(function(el) {
$(el).find(".anim, .trf").each(function(anim) {
anim.endElement();
}), clearTimeout(el.timerId), clearInterval(el.timer);
});
}, fn.pause = function() {
return $("svg")[0].pauseAnimations(), this.each(function(el) {
el.paused = !0;
});
}, fn.resume = function() {
return $("svg")[0].unpauseAnimations(), this.each(function(el) {
el.paused = !1;
});
};
var tag = /^<(.+)\/>$/;
return $.extend = function(target) {
for (var obj, properties, i = 1, l = arguments.length; l > i; i++) {
obj = arguments[i], properties = Object.keys(obj);
for (var property, j = properties.length; j--; ) property = properties[j], target[property] = obj[property];
}
return target;
}, $.inherit = function(child, parent) {
function ctor() {
this.constructor = child, this.__super__ = parent.prototype;
}
return ctor.prototype = parent.prototype, child.prototype = new ctor(), child;
}, $.mixin = function(plagin) {
$.extend(fn, plagin);
}, $.timestamp = 1400668550599, $.load = function(url, complete) {
url = url + "?q=" + $.timestamp;
var result = localStorage.getItem(url);
if (null == result) {
var xhr = new XMLHttpRequest();
xhr.open("GET", url, !0), xhr.onload = function() {
localStorage.setItem(url, xhr.responseText), complete(xhr.responseText);
}, xhr.send();
} else complete(result);
}, $.rand = function(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}, $;
}(),
Core = function() {
var scope = {
apiUrl: "ws://localhost:8080/ws/",
gameId: 1000001,
defaultSessionId: "7hc6Vl0CpxvngjiQQWDspxUtKmhF1zCbT155+M73XhFcKw9e6jkNWLSLM8up4ZQbSUGJXKOphb0YNu4yDRKZkbkiyY1yZukqXFj4nAfvSUNuWx0352VWfLlKZWldHb1na7d7sA==",
CARD_SOURCE: "../app/svg/Card.svg",
CARD_SMALL_SOURCE: "../app/svg/Card-small.svg",
CARD_COLORS: [ "#CE290F", "#3B5998", "#48AF5E", "#F8E81C" ],
SKIN_NAMES: [ "Alina", "Gabrielo", "Mustafa" ]
};
return function(module) {
module(scope);
};
}();
Core(function(scope) {
function Controller() {
this.proxyAll(), this.refreshElements();
}
var isIE = window.navigator.msPointerEnabled;
$.extend(Controller.prototype, {
proxy: function(func) {
return func.bind(this);
},
proxyAll: function() {
if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i],
this[method] = this.proxy(this[method]);
},
withDelay: function(func, timeout) {
return setTimeout(this.proxy(func), timeout || 0);
},
$: function(selector) {
return this.$el.find(selector);
},
refreshElements: function() {
if (this.elements) for (var element in this.elements) this[element] = this.$(this.elements[element]);
},
on: function(eventType, handler) {
return this.$el.on(eventType, handler), this;
},
off: function(eventType, handler) {
return this.$el.off(eventType, handler), this;
},
clientX: function(e) {
return isIE ? e.pageX : document.createTouch ? e.changedTouches[0].clientX : e.clientX;
},
clientY: function(e) {
return isIE ? e.pageY : document.createTouch ? e.changedTouches[0].clientY : e.clientY;
},
intersect: function(x, y) {
var pos = this.$el.position();
return pos.top < y && pos.bottom > y && pos.left < x && pos.right > x;
}
}), scope.Controller = Controller;
}),
Core(function(scope) {
function ApiProvider(options) {
options = options || {}, this.url = options.url, this.sessionId = options.sessionId,
this.gameId = options.gameId, this.proxies = [ "init", "handleMessage", "actionTake" ],
this.proxyAll(), this.socket = new WebSocket(this.url), this.$socket = $(this.socket),
this.$socket.on("open", this.init), this.$socket.on("message", this.handleMessage);
}
var eventMap = [ "okey_game_info", "okey_game_started", "okey_game_player_state", "okey_next_turn", "okey_tile_discarded", "okey_tile_taken", "okey_revealed", "player_left", "game_paused" ],
session = /\('session_attach'\),'([^)]+)'\)/,
userName = /document.user\s?=\s?'([^']+)'/;
$.extend(ApiProvider.prototype, {
proxy: function(func) {
return func.bind(this);
},
proxyAll: function() {
if (this.proxies) for (var method, i = this.proxies.length; i--; ) method = this.proxies[i],
this[method] = this.proxy(this[method]);
},
on: function(eventType, handler) {
this.$socket.on(eventType, handler);
},
off: function(eventType, handler) {
this.$socket.off(eventType, handler);
},
init: function() {
this.socket.send([ "N2O", "" ]), setInterval(this.proxy(function() {
this.socket.send("PING");
}), 4e3);
},
handleMessage: function(e) {
var msg = JSON.parse(e.data);
if (msg.eval) {
var curSession, user;
(curSession = session.exec(msg.eval)) && (this.sessionId = curSession[1]), (user = userName.exec(msg.eval)) && (scope.user = user[1]);
}
msg.data ? (msg = dec(msg.data), this.emitEvent(this.beutify(this.parse(msg)))) : msg.eval && (this.socket.send(enc(tuple(atom("client"), tuple(atom("session_attach"), this.sessionId)))),
this.socket.send(enc(tuple(atom("client"), tuple(atom("join_game"), this.gameId)))));
},
parse: function(msg) {
if (Array.isArray(msg)) {
if (msg.every(function(el, i) {
return i % 2 == 0 || Object(el.value) === el.value;
}) || msg.length % 2 != 0) {
for (var result = [], i = 0, l = msg.length; l > i; i++) result.push(this.parse(msg[i]));
return result;
}
if (msg.length > 2 && msg.every(function(el) {
return null != el && "object" != typeof el || null != el.value && "object" != typeof el.value;
})) {
var result = {};
return result[this.parse(msg[0])] = this.parse(msg.slice(1)), result;
}
for (var result = {}, i = 0, l = msg.length; l > i; i += 2) {
{
this.parse(msg[i]);
}
result[this.parse(msg[i])] = this.parse(msg[i + 1]);
}
return result;
}
return msg.value && Object(msg.value) === msg.value && msg.value[0] && msg.value.length ? this.parse(msg.value[0]) : null != msg.value ? msg.value : msg;
},
beutify: function(msg) {
var result = {};
for (var prop in msg) {
var tempObj = msg[prop];
if (Array.isArray(tempObj)) {
for (var obj, i = tempObj.length; i--; ) if (obj = tempObj[i], Array.isArray(obj)) result[obj[0]] = obj[1]; else if (Object(obj) === obj) for (var p in obj) result[p] = obj[p]; else result[i] = obj;
msg[prop] = result;
}
}
return msg;
},
emitEvent: function(msg) {
for (var event, i = eventMap.length; i--; ) event = eventMap[i], msg[event] && this.$socket.trigger(event, {
detail: msg[event]
});
},
actionTake: function(card) {
var from = null != card.value ? 1 : 0;
this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_take"), {
pile: from
}))));
},
actionDiscard: function(card) {
this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_discard"), {
tile: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value)
}))));
},
reveal: function(card, hand) {
this.socket.send(enc(tuple(atom("client"), tuple(atom("game_action"), this.gameId, atom("okey_reveal"), {
discarded: tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value),
hand: hand
}))));
},
pause: function(resume) {
this.socket.send(enc(tuple(atom("client"), tuple(atom("pause_game"), atom("undefined"), this.gameId, atom(resume ? "resume" : "pause")))));
}
}), scope.ApiProvider = ApiProvider;
}),
Core(function(scope) {
function culcShift() {
sizeX = $svg[0].viewBox.baseVal.width / innerWidth, sizeY = $svg[0].viewBox.baseVal.height / innerHeight,
size = Math.max(sizeX, sizeY) || 1;
}
function Draggable(root, options) {
options = options || {}, this.$el = $(root), this.revert = options.revert, this.elements = {},
this.proxies = [ "onDown", "onMove", "onUp" ], this.__super__.constructor.call(this),
this.enable();
}
var sizeX, sizeY, size, moved, $svg = $("svg");
culcShift(), $(window).on("resize", culcShift), $(window).on("orientationchange", culcShift),
$.inherit(Draggable, scope.Controller), $.extend(Draggable.prototype, {
storeTrf: function() {
var trf = this.$el.attr("transform");
this.initTrf = trf ? trf.slice(10, -1).split(/\s+/) : [ 0, 0 ];
},
disable: function() {
this.$el.off(document.createTouch ? "touchstart" : "mousedown", this.onDown), this.$el.css({
cursor: "default"
});
},
enable: function() {
this.$el.on(document.createTouch ? "touchstart" : "mousedown", this.onDown), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;");
},
onDown: function(e, silent) {
e.preventDefault(), moved || (moved = !1, this.$el.attr("style", "cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing;"),
this.$el[0].parentNode.appendChild(this.$el[0]), this.x = this.clientX(e), this.y = this.clientY(e),
this.trf = this.$el.attr("transform"), this.trf && (this.trf = this.trf.slice(10, -1).split(/\s+/)),
this.storeTrf(), silent || (document.createTouch ? (this.$el.on("touchmove", this.onMove),
this.$el.on("touchend", this.onUp)) : ($("body").on("mousemove", this.onMove), $("body").on("mouseup", this.onUp)),
this.$el.trigger("dragstart")));
},
onMove: function(e, silent) {
e.preventDefault(), moved = !0, this.dx = ((this.curX = this.clientX(e)) - this.x) * size,
this.dy = ((this.curY = this.clientY(e)) - this.y) * size, this.trf && (this.dx += 0 | this.trf[0],
this.dy += 0 | this.trf[1]), this.$el.attr("transform", "translate(" + this.dx + " " + this.dy + ")"),
silent || this.$el.trigger("dragmove", {
detail: {
x: this.curX,
y: this.curY,
event: e
}
});
},
onUp: function(e, silent) {
if (e.preventDefault(), this.$el.attr("style", "cursor: -moz-grab; cursor: -webkit-grab; cursor: grab;"),
moved) {
for (var droped, item, dropList = scope.Droppable.list, i = 0, l = dropList.length; l > i; i++) if (item = dropList[i],
item.intersect(this.curX, this.curY)) {
droped = item.drop(this, this.curX, this.curY);
break;
}
droped || (this.$el.transform({
from: [ this.dx, this.dy ].join(" "),
to: this.initTrf.join(" ")
}), silent || this.$el.trigger("revert")), silent || this.$el.trigger("dragstop", {
detail: {
x: this.curX,
y: this.curY,
event: e
}
}), moved = !1;
}
document.createTouch ? (this.$el.off("touchmove", this.onMove), this.$el.off("touchend", this.onUp)) : ($("body").off("mousemove", this.onMove),
$("body").off("mouseup", this.onUp));
}
}),
scope.Draggable = Draggable,
$.mixin({
draggable: function() {
return this.each(function(el) {
new Draggable(el);
});
}
});
}),
Core(function(scope) {
function Droppable(root, options) {
options = options || {}, this.$el = $(root), this.accept = options.accept || function() {
return !0;
}, this.onDrop = options.drop || function() {}, this.elements = {}, this.proxies = [],
this.__super__.constructor.call(this), this.activate();
}
Droppable.list = [], $.inherit(Droppable, scope.Controller), $.extend(Droppable.prototype, {
drop: function(target, x, y) {
return this.accept(target, x, y) ? (this.onDrop(target, x, y), !0) : !1;
},
activate: function() {
Droppable.list.push(this);
},
release: function() {
var i;
~(i = Droppable.list.indexOf(this)) && Droppable.list.splice(i, 1);
}
}),
scope.Droppable = Droppable,
$.mixin({
droppable: function(options) {
return this.each(function(el) {
new Droppable(el, options);
});
}
});
}),
Core(function(scope) {
function Timer(root, options) {
options = options || {}, this.duration = options.duration, this.curTime = this.duration,
this.$el = $(root), this.elements = {
$value: "#value",
$progress: "#progress"
}, this.proxies = [ "tick" ], this.__super__.constructor.call(this), this.$value.text(this.duration),
defHeight = this.$progress.attr("height");
}
var defHeight;
$.inherit(Timer, scope.Controller), $.extend(Timer.prototype, {
from: function(time) {
this.$value.text(this.curTime = Math.round(time / 1e3));
},
start: function() {
this.$progress.move({
attributeName: "height",
to: "0",
dur: this.curTime
}), this.timerId = this.withDelay(this.tick, 1e3);
},
tick: function() {
return this.paused ? void (this.timerId = this.withDelay(this.tick, 1e3)) : void (this.curTime-- > 0 && (this.$value.text(this.curTime),
this.timerId = this.withDelay(this.tick, 1e3)));
},
reset: function() {
this.$progress.stop().attr({
height: defHeight
}), this.$value.text(this.curTime = this.duration), clearTimeout(this.timerId);
},
pause: function() {
this.paused = !0, this.$progress.pause();
},
resume: function() {
this.paused = !1, this.$progress.resume();
}
}),
scope.Timer = Timer;
}),
Core(function(scope) {
function Player(options) {
options = options || {}, this.name = options.name, this.position = options.position,
this.noSkin = options.noSkin, this.skin = options.skin || scope.SKIN_NAMES[$.rand(0, scope.SKIN_NAMES.length - 1)],
this.$el = $("#player-" + this.position), this.elements = {
$timer: "#timer",
$name: "#name",
$nameWrapper: "#name rect",
$nameText: "#name text"
}, this.proxies = [ "loadSkin" ], this.__super__.constructor.call(this), this.$el.show(),
this.$timer.hide(), this.$name.show(), this.$nameText.text(this.name);
var nameWrapperWidth = this.$nameText.width() / $("#Page-1").width() * 100 + 2 * (this.$nameText.position().left - this.$nameWrapper.position().left) / $("#Page-1").width() * 100;
this.$nameWrapper.attr({
width: nameWrapperWidth + "%"
}), this.initTimer(), "me" == this.position || this.noSkin || $.load("../app/svg/" + [ "Person", this.position, this.skin ].join("-") + ".svg", this.loadSkin);
}
$.inherit(Player, scope.Controller), $.extend(Player.prototype, {
loadSkin: function(result) {
var $result = $("<g/>").html(result);
this.$el.append($result[0].firstChild), this.unselect();
},
initTimer: function() {
this.timer = new scope.Timer(this.$timer, {
duration: 30
});
},
select: function() {
this.$nameWrapper.attr({
fill: "#517ECE"
}), this.$nameText.attr({
fill: "#FFFFFF"
}), this.$timer.show(), this.$("#Selection").show(), this.timer.start();
},
unselect: function() {
this.$nameWrapper.attr({
fill: "#FFFFFF"
}), this.$nameText.attr({
fill: "#48AF5E"
}), this.$timer.hide(), this.$("#Selection").hide(), this.timer.reset();
}
}), scope.Player = Player;
}),
Core(function(scope) {
function Hand(root, options) {
options = options || {}, this.$el = $(root), this.elements = {
$topCard: "#top-card",
$rollUp: "#roll-up",
$rollDown: "#roll-down",
$container: "#container",
$back: "#back",
$cards: "#cards"
}, this.proxies = [ "show", "hide" ], this.__super__.constructor.call(this), this.$rollUp.on("click", this.show),
this.$rollDown.on("click", this.hide), this.cards = [];
}
var trfsMap = [ {
backHeight: 74,
containerTrf: "0 -44",
cardTrf: "0 -38"
}, {
backHeight: 124,
containerTrf: "0 -94",
cardTrf: "0 -89"
}, {
backHeight: 174,
containerTrf: "0 -144",
cardTrf: "0 -139"
} ],
defCardTrf = "0 20";
$.inherit(Hand, scope.Controller), $.extend(Hand.prototype, {
take: function() {
var card = this.cards.pop();
return this.render(), card && card.$el.remove(), card;
},
discard: function(tile) {
var card = new scope.Card({
color: scope.CARD_COLORS[tile[1] - 1],
value: tile[2]
});
this.cards.push(card), this.render(), card.drag(), card.dragHandler.disable(), this.$topCard.append(card.$el[0]);
},
pop: function() {
this.cards.pop(), this.render();
},
show: function() {
var count = this.cards.length - 1;
count > 0 && (this.$container.transform({
to: trfsMap[4 > count ? count - 1 : 2].containerTrf,
from: "0 50",
dur: .355,
calcMode: "linear"
}), this.$back.animate({
attributeName: "height",
to: trfsMap[4 > count ? count - 1 : 2].backHeight,
dur: .355
}), this.$cards.find("g").each(function(el, i) {
3 > i && $(el).transform({
to: trfsMap[i].cardTrf,
from: "0 20",
dur: .6,
calcmode: "linear"
});
}), this.shown = !0);
},
hide: function() {
var count = this.cards.length - 1;
count > 0 && (this.$container.transform({
to: "0 50",
from: trfsMap[4 > count ? count - 1 : 2].containerTrf,
dur: .5,
calcMode: "linear"
}), this.$back.animate({
attributeName: "height",
to: 0,
dur: .5
}), this.$cards.find("g").each(function(el, i) {
3 > i && $(el).transform({
to: defCardTrf,
from: trfsMap[4 > count ? count - 1 : 2].cardTrf,
dur: .6,
calcmode: "linear"
});
}), this.shown = !1);
},
render: function() {
var history = this.cards.slice(0, this.cards.length - 1);
this.$cards.empty(), this.shown && this.hide(), history.reverse().forEach(function(card) {
card = card.clone(), card.template(scope.CARD_SMALL_SOURCE), card.$el.attr("transform", "translate(" + defCardTrf + ")"),
this.$cards.append(card.$el[0]);
}, this);
},
clear: function() {
this.cards.forEach(function(card) {
card.$el.remove();
}), this.cards = [], this.render();
}
}), scope.Hand = Hand;
}),
Core(function(scope) {
function Card(options) {
options = options || {}, this.value = options.value, this.color = options.color,
this.selected = !1, this.pos = {}, this.elements = {
$circle: "circle",
$text: "text",
$overlay: ".overlay"
}, this.proxies = [ "toggle", "selectGroup", "dragGroup", "clearGroup", "revertGroup" ],
this.template(scope.CARD_SOURCE), this.$el.on("mousedown", this.toggle), this.$el.on("revert", this.revertGroup),
this.$el.on("dragstop", this.clearGroup), this.$overlay.on("mousedown", this.selectGroup);
}
var selStart = !1;
$(window).on("keydown", function(e) {
e.ctrlKey && (selStart = !0);
}), $(window).on("keyup", function() {
selStart = !1;
}), Card.selected = [], Card.uncheckAll = function() {
for (var i = Card.selected.length; i--; ) Card.selected[i].uncheck();
}, $("body").on("mousedown", Card.uncheckAll), $.inherit(Card, scope.Controller),
$.extend(Card.prototype, {
template: function(source) {
$.load(source, this.proxy(this.load));
},
load: function(result) {
this.$el = (this.$el || $("<g/>")).attr({
"class": "card"
}).css({
cursor: "default"
}).html(result), this.__super__.constructor.call(this), this.render();
},
render: function() {
null == this.value && null == this.color ? (this.$circle.hide(), this.$text.hide()) : 0 == this.value ? (this.$circle.hide(),
this.$text.show().attr({
fill: this.color,
y: 36
}).text("*")) : (this.$circle.show().attr("fill", this.color), this.$text.show().attr("fill", this.color).text(this.value));
},
drag: function() {
this.dragHandler = new scope.Draggable(this.$el), this.dragHandler.owner = this;
},
centerX: function() {
var pos = this.$el.position(), width = this.$el.width();
return Math.round(pos.left + width / 2);
},
toggle: function(e) {
e.stopPropagation(), selStart ? this.nearSelectGroup() ? this.selected && !this.betweenSelected() ? this.uncheck() : this.check() : (Card.uncheckAll(),
this.check()) : ~Card.selected.indexOf(this) || Card.uncheckAll();
},
check: function() {
this.$overlay.css("display", ""), this.selected = !0, deck.cards[this.pos.y][this.pos.x] = null,
Card.selected.push(this);
},
uncheck: function() {
this.$overlay.css("display", "none"), this.selected = !1, deck.cards[this.pos.y][this.pos.x] = this;
var i;
~(i = Card.selected.indexOf(this)) && Card.selected.splice(i, 1);
},
selectGroup: function(e) {
if (!selStart) {
for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i],
card != this && card.dragHandler.onDown(e, !0);
this.$el.on("dragmove", this.dragGroup);
}
},
dragGroup: function(e) {
for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i],
card != this && card.dragHandler.onMove(e.detail.event, !0);
},
clearGroup: function() {
this.$el.off("dragmove", this.dragGroup), selStart || Card.uncheckAll();
},
nearSelectGroup: function() {
return Card.selected.some(function(card) {
return Math.abs(card.pos.x - this.pos.x) <= 1 && card.pos.y == this.pos.y;
}, this);
},
betweenSelected: function() {
Card.selected.sort(function(a, b) {
return (a.pos.x < b.pos.x) - (b.pos.x < a.pos.x);
});
var idx = Card.selected.indexOf(this);
return -1 != idx && 0 != idx && idx != Card.selected.length - 1;
},
revertGroup: function() {
for (var card, i = 0, l = Card.selected.length; l > i; i++) card = Card.selected[i],
card != this && card.$el.transform({
from: [ card.dragHandler.dx, card.dragHandler.dy ].join(" "),
to: card.dragHandler.initTrf.join(" ")
}), scope.deck.cards[card.pos.y][card.pos.x] = card;
},
clone: function() {
return new Card({
color: this.color,
value: this.value
});
},
log: function() {}
}), scope.Card = Card;
}),
Core(function(scope) {
function Deck(root, options) {
options = options || {}, this.$el = $(root), this.elements = {
$dropPlace: "#deck"
}, this.proxies = [ "select", "track", "place" ], this.cards = [ [], [] ], this.trfs = [ [], [] ],
this.__super__.constructor.call(this), this.$dropPlace.droppable({
accept: this.place
});
}
var padding = {
top: 5,
left: 5
};
$.inherit(Deck, scope.Controller);
var prevX, prevY, selected;
$.extend(Deck.prototype, {
each: function(callback) {
for (var i = 0; 15 > i; i++) for (var j = 0; 2 > j; j++) if (callback.call(this, this.cards[j][i], i, j) === !1) return;
},
fill: function(tiles) {
var count = 0;
this.each(function(c, i, j) {
if (null != c && (this.cards[j][i] = null, c.$el.remove()), 0 == j && count < tiles.length) {
var tile = tiles[count], card = new scope.Card({
color: scope.CARD_COLORS[tile[1] - 1],
value: tile[2]
});
card.pos = {
x: i,
y: j
}, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card,
count++;
}
this.trfs[j][i] = {
x: 42 * i + padding.left,
y: 71 * j + padding.top
};
});
},
render: function() {
this.each(function(card, i, j) {
null != card && (card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"),
card.drag(), this.$el.append(card.$el[0]));
});
},
track: function(e) {
this.each(function(card, i, j) {
if (card && card.$el[0] != e.target && card.intersect(e.detail.x, e.detail.y) && !card.$el.attr("animated") && scope.Card.selected.length < 2) {
var shift = e.detail.x > card.centerX() ? i + 1 : i - 1;
return shift = shift > 14 ? shift - 2 : shift, shift = 0 > shift ? shift + 2 : shift,
prevX = i, prevY = j, this.move({
i: i,
j: j
}, {
i: shift,
j: j
}), !1;
}
});
},
move: function(fst, snd) {
var card, trfs = this.trfs, i = snd.i, cond = function(i) {
return fst.i < snd.i ? 14 >= i : i >= 0;
}, _cond = function(j, i) {
return fst.i < snd.i ? i > j : j > i;
}, op = function() {
fst.i < snd.i ? i++ : i--;
}, _op = function() {
fst.i < snd.i ? j++ : j--;
}, direction = function(j) {
return fst.i < snd.i ? j + (scope.Card.selected.length || 1) : j - (scope.Card.selected.length || 1);
}, _direction = function(j) {
return fst.i < snd.i ? j - 1 : j + 1;
};
if (scope.Card.selected.length < 2) for (;cond(i); op()) if (null == this.cards[snd.j][i] || this.cards[snd.j][i] == selected) {
for (var j = _direction(i); _cond(j, i); _op()) card = this.cards[fst.j][j], card != selected && (card.$el.transform({
from: [ trfs[fst.j][j].x, trfs[fst.j][j].y ].join(" "),
to: [ trfs[fst.j][direction(j)].x, trfs[fst.j][direction(j)].y ].join(" ")
}), selected && (selected.dragHandler.initTrf = [ trfs[fst.j][j].x, trfs[fst.j][j].y ]),
((this.cards[fst.j][j] = this.cards[fst.j][direction(j)]) || {}).pos = {
x: j,
y: fst.j
}, (this.cards[fst.j][direction(j)] = card).pos = {
x: direction(j),
y: fst.j
});
break;
}
},
select: function(e) {
selected = null, this.each(function(card) {
return card && card.$el[0] == e.target ? (selected = card, !1) : void 0;
});
},
place: function(target, x, y) {
var trfs = this.trfs, pos = this.$dropPlace.position(), width = this.$dropPlace.width(), height = this.$dropPlace.height(), placeWidth = Math.round(width / 15), placeHeight = Math.round(height / 2), truePosX = Math.floor((x - pos.left) / placeWidth), posY = Math.floor((y - pos.top) / placeHeight);
scope.Card.selected.sort(function(a, b) {
return (a.pos.x > b.pos.x) - (b.pos.x > a.pos.x);
});
var dropResult, idx = scope.Card.selected.indexOf(target.owner), cards = scope.Card.selected.length ? scope.Card.selected.concat() : [ target.owner ];
if (cards.every(function(card, i) {
return posX = truePosX + (i - idx) * (card != target.owner), null == this.cards[posY][posX] || this.cards[posY][posX] == card;
}, this)) for (var card, i = 0, l = cards.length; l > i; i++) card = cards[i], posX = truePosX + (i - idx) * (card != target.owner),
(dropResult = null == this.cards[posY][posX] || this.cards[posY][posX] == selected) && (this.cards[posY][posX] != card && (null != card.pos.x && null != card.pos.y ? this.cards[card.pos.y][card.pos.x] = this.cards[card.pos.y][card.pos.x] == card ? null : this.cards[card.pos.y][card.pos.x] : (this.$el.trigger("take", {
detail: {
card: card
}
}), this.justTaken = !0), (this.cards[posY][posX] = card).pos = {
x: posX,
y: posY
}), function(card) {
card.$el.transform({
from: card.$el.attr("transform").slice(10, -1),
to: [ trfs[posY][posX].x, trfs[posY][posX].y ].join(" ")
}).then(function() {
card.dragHandler.storeTrf();
});
}(card));
return dropResult;
},
remove: function(tile) {
return selected && selected.color == scope.CARD_COLORS[tile[1] - 1] && selected.value == tile[2] ? (this.cards[selected.pos.y][selected.pos.x] = null,
selected.$el.remove(), selected.off("dragmove", this.track), !1) : void this.each(function(card, i, j) {
return card && card.color == scope.CARD_COLORS[tile[1] - 1] && card.value == tile[2] ? (this.cards[j][i] = null,
card.$el.remove(), card.off("dragmove", this.track), !1) : void 0;
});
},
insert: function(tile) {
this.justTaken ? this.justTaken = !1 : this.each(function(card, i, j) {
return card ? void 0 : (card = new scope.Card({
color: scope.CARD_COLORS[tile[1] - 1],
value: tile[2]
}), card.pos = {
x: i,
y: j
}, card.on("dragstart", this.select), card.on("dragmove", this.track), this.cards[j][i] = card,
card.$el.attr("transform", "translate(" + this.trfs[j][i].x + " " + this.trfs[j][i].y + ")"),
card.drag(), this.$el.append(card.$el[0]), !1);
});
},
length: function() {
var count = 0;
return this.each(function(card) {
null != card && (count += 1);
}), count;
},
hand: function(discarded) {
return result = [ [], [] ], this.each(function(card, i, j) {
card && card != discarded && result[j].push(tuple(atom("OkeyPiece"), scope.CARD_COLORS.indexOf(card.color) + 1, card.value));
}), result;
},
dir: function() {
for (var i = 0; 15 > i; i++) this.cards[0][i] && this.cards[0][i].log();
for (var i = 0; 15 > i; i++) this.cards[1][i] && this.cards[1][i].log();
}
}), scope.deck = new Deck("#deck-root");
}),
Core(function(scope) {
$.load(scope.CARD_SOURCE, function() {
function fadeOut() {
$(this).animate({
attributeName: "opacity",
from: 1,
to: 0,
dur: .3
});
}
function fadeIn() {
$(this).animate({
attributeName: "opacity",
from: 0,
to: 1,
dur: .3
});
}
function addFadeOut() {
$(this).on(document.createTouch ? "touchend" : "mouseup", fadeOut);
}
function removeFadeOut() {
$(this).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
}
function createCentralCard() {
centralCard = new scope.Card(), centralCard.$el.attr({
opacity: 0,
transform: "translate(298 -115)"
}).on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut),
centralCard.drag(), centralCard.dragHandler.enable(), centralCard.on("dragstart", deck.select).on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("dragmove", deck.track).on("revert", fadeOut),
deck.$el.append(centralCard.$el[0]);
}
function init(e) {
if (ended = !1, scope.deck.fill(e.detail.tiles), scope.deck.render(), centralCard.dragHandler.disable(),
centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut),
e.detail.gosterge && "null" != e.detail.gosterge) {
var gosterge = new scope.Card({
color: scope.CARD_COLORS[e.detail.gosterge[1] - 1],
value: e.detail.gosterge[2]
});
gosterge.$el.attr("transform", "translate(16 0)"), $gosterge.append(gosterge.$el);
}
var piles = e.detail.piles;
if (piles && "null" != piles) for (var i = 0; i < piles.length, pile; i++) {
pile = piles[i];
for (var name in pile) for (var playerPile = pile[name], hand = playersLeftHandsMap[name], j = playerPile.length; j--; ) hand.discard(playerPile[j]);
}
e.detail.whos_move && "null" != e.detail.whos_move && (e.detail.next_turn_in && "null" != e.detail.next_turn_in && playersMap[e.detail.whos_move].timer.from(e.detail.next_turn_in),
e.detail.paused && (playersMap[e.detail.whos_move].timer.pause(), $overlay.show()),
playersMap[e.detail.whos_move].select());
}
window.deck = scope.deck;
var centralCard, apiProvider = new scope.ApiProvider({
url: scope.apiUrl,
gameId: scope.gameId,
sessionId: scope.defaultSessionId
});
createCentralCard(), deck.on("take", function(e) {
e.detail.card.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut),
centralCard.off("dragmove", removeFadeOut).off("dragstop", addFadeOut).off("revert", fadeOut),
~playersLeftHandsMap[scope.user].cards.indexOf(e.detail.card) && playersLeftHandsMap[scope.user].pop(),
apiProvider.actionTake(e.detail.card);
});
var $gosterge = $("#gosterge"), ended = !0;
apiProvider.on("okey_game_started", init), apiProvider.on("okey_game_player_state", init);
var playersPositions = [ [ "me", "right", "center", "left" ], [ "left", "me", "right", "center" ], [ "center", "left", "me", "right" ], [ "right", "center", "left", "me" ] ], playersMap = {}, playersRightHandsMap = {}, playersLeftHandsMap = {};
apiProvider.on("okey_game_info", function(e) {
if (!scope.started) {
for (var playerInfo, players = e.detail.players, i = 0; i < players.length; i++) if (playerInfo = players[i].PlayerInfo,
playerInfo[0] == scope.user) {
playersPositions = playersPositions[i];
break;
}
for (var playerInfo, i = 0, l = players.length; l > i; i++) {
playerInfo = players[i].PlayerInfo, playersMap[playerInfo[0]] = playersMap[playerInfo[0]] || new scope.Player({
position: playersPositions[i],
name: [ playerInfo[2], playerInfo[3] ].join(" ")
});
var prevPlayer = i == players.length - 1 ? players[0] : players[i + 1];
for (var prop in playersLeftHandsMap) playersLeftHandsMap[prop].clear();
playersLeftHandsMap[prevPlayer.PlayerInfo[0]] = playersRightHandsMap[playerInfo[0]] = new scope.Hand("#" + [ "player", playersPositions[i], "hand" ].join("-")),
"me" == playersPositions[i] && playersRightHandsMap[playerInfo[0]].$el.droppable({
accept: function() {
return playerTurn && deck.length() > 14;
},
drop: function(target) {
apiProvider.actionDiscard(target.owner);
}
});
}
scope.started = !0;
}
}), window.playersRightHandsMap = playersRightHandsMap, window.playersLeftHandsMap = playersLeftHandsMap;
var playerTurn = !1;
apiProvider.on("okey_next_turn", function(e) {
for (var playerName in playersMap) playersMap[playerName].unselect();
if (playersMap[e.detail.player].select(), e.detail.player == scope.user) {
playerTurn = !0;
var cards = playersLeftHandsMap[e.detail.player].cards;
if (cards.length) {
var card = cards[cards.length - 1];
deck.$el.append(card.$el[0]), card.$el.attr({
transform: "translate(16 -65)"
}), card.dragHandler.enable(), card.on("dragstart", deck.select), card.on("dragmove", deck.track);
}
deck.length() < 15 ? (centralCard.dragHandler.enable(), centralCard.$el.on(document.createTouch ? "touchstart" : "mousedown", fadeIn).on(document.createTouch ? "touchend" : "mouseup", fadeOut),
centralCard.on("dragmove", removeFadeOut).on("dragstop", addFadeOut).on("revert", fadeOut)) : (centralCard.dragHandler.disable(),
centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut));
} else playerTurn = !1, centralCard.dragHandler.disable(), centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
}), apiProvider.on("okey_tile_discarded", function(e) {
if ("object" == typeof e.detail.tile) {
var c = new scope.Card({
color: scope.CARD_COLORS[e.detail.tile[1] - 1],
value: e.detail.tile[2]
});
c.log();
}
e.detail.player == scope.user && deck.remove(e.detail.tile), playersRightHandsMap[e.detail.player].discard(e.detail.tile);
});
var $pile = $("#pile"), $fullPile = $pile.find("g").clone(), $wholeCards = $("#whole-cards"), $fullWholeCards = $("#whole-cards > g").clone();
apiProvider.on("okey_tile_taken", function(e) {
if ("object" == typeof e.detail.revealed) {
var c = new scope.Card({
color: scope.CARD_COLORS[e.detail.revealed[1] - 1],
value: e.detail.revealed[2]
});
c.log();
}
if (e.detail.pile && !deck.justTaken && playersLeftHandsMap[e.detail.player].take(),
0 === e.detail.pile && e.detail.player == scope.user && (centralCard.color = scope.CARD_COLORS[e.detail.revealed[1] - 1],
centralCard.value = e.detail.revealed[2], centralCard.render(), createCentralCard()),
0 === e.detail.pile) {
var $topCard = $pile.find("g");
if ($topCard.length > 1) $topCard.last().remove(); else {
$topCard.last().remove(), $pile.append($fullPile);
var $miniPile = $wholeCards.find("g");
$miniPile.length ? $miniPile.first().remove() : $wholeCards.append($fullWholeCards);
}
}
e.detail.player == scope.user && deck.insert(e.detail.revealed), centralCard.dragHandler.disable(),
centralCard.$el.off(document.createTouch ? "touchstart" : "mousedown", fadeIn).off(document.createTouch ? "touchend" : "mouseup", fadeOut);
var cards = playersLeftHandsMap[scope.user].cards;
if (cards.length) {
var card = cards[cards.length - 1];
card.dragHandler.disable();
}
}), apiProvider.on("okey_revealed", function(e) {
ended = !0, alert(e.detail.player), deck.fill([]);
for (var hand in playersLeftHandsMap) playersLeftHandsMap[hand].clear();
for (var playerName in playersMap) playersMap[playerName].unselect();
$gosterge.remove();
}), apiProvider.on("player_left", function(e) {
var playerInfo = e.detail.replacement.PlayerInfo;
playersMap[playerInfo[0]] = new scope.Player({
position: playersMap[e.detail.player].position,
name: [ playerInfo[2], playerInfo[3] ].join(" "),
noSkin: !0
}), delete playersMap[e.detail.player], playersRightHandsMap[playerInfo[0]] = playersRightHandsMap[e.detail.player],
delete playersRightHandsMap[e.detail.player], playersLeftHandsMap[playerInfo[0]] = playersLeftHandsMap[e.detail.player],
delete playersLeftHandsMap[e.detail.player];
}), $("#pause").on("click", function() {
apiProvider.pause();
});
var whoPausedGame, $overlay = $("#overlay");
$overlay.on("click", function() {
whoPausedGame == scope.user && apiProvider.pause(!0);
}), apiProvider.on("game_paused", function(e) {
if (whoPausedGame = e.detail[3], "pause" == e.detail[2]) {
$overlay.show();
for (var player in playersMap) playersMap[player].timer.pause();
var player = playersMap[e.detail[3]];
$overlay.find("text").text(player.name + " paused the game");
} else {
$overlay.hide();
for (var player in playersMap) playersMap[player].timer.resume();
}
}), $("#table-ellipse").droppable({
accept: function(target) {
return 1 === apiProvider.socket.readyState && deck.length() > 14 && target.owner != centralCard && !ended && scope.Card.selected.length <= 1;
},
drop: function(target) {
apiProvider.reveal(target.owner, deck.hand(target.owner));
}
});
});
var leftFlag = !1;
$("#Left-Menu").css("cursor", "pointer").on("click", function() {
leftFlag ? ($("#Tournaments").transform({
to: "10 575",
from: "44 465"
}), $("#Promos").transform({
to: "10 575",
from: "122 538"
}), leftFlag = !1) : ($("#Tournaments").transform({
from: "10 575",
to: "44 465"
}), $("#Promos").transform({
from: "10 575",
to: "122 538"
}), leftFlag = !0);
});
var rightFlag = !1;
$("#Right-Menu").css("cursor", "pointer").on("click", function() {
rightFlag ? ($("#Play").transform({
to: "975 575",
from: "946, 461"
}), $("#Create").transform({
to: "975 575",
from: "864 526"
}), rightFlag = !1) : ($("#Play").transform({
from: "975 575",
to: "946, 461"
}), $("#Create").transform({
from: "975 575",
to: "864 526"
}), rightFlag = !0);
});
});