You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1553 lines
65 KiB
1553 lines
65 KiB
/**
|
|
* Created by ohayon_m on 17/08/15.
|
|
*/
|
|
|
|
define(["activity/sample-ressources", "activity/palettes/template-palette", "activity/palettes/size-palette", "activity/lz-string", "sugar-web/graphics/journalchooser", 'sugar-web/datastore'], function (SampleRessources, templatePalette, sizePalette, lzString, chooser, datastore) {
|
|
|
|
var FOUND_COLOR = "#84f060";
|
|
var MODE_CLASSIC = "classic";
|
|
var MODE_SPLITTED = "splitted";
|
|
var MODE_EQUAL = "equal";
|
|
var MODE_NON_EQUAL = "non_equal";
|
|
var INLINE_RES = "#inline#";
|
|
|
|
var TEMPLATE_SUMS = {
|
|
name: "Addition", icon: "addition.svg", cards: [
|
|
[{text: "3+4"}, {text: "7"}],
|
|
[{text: "5+5"}, {text: "10"}],
|
|
[{text: "5+6"}, {text: "11"}],
|
|
[{text: "4+4"}, {text: "8"}],
|
|
[{text: "4+5"}, {text: "9"}],
|
|
[{text: "3+3"}, {text: "6"}],
|
|
[{text: "2+2"}, {text: "4"}],
|
|
[{text: "1+1"}, {text: "2"}],
|
|
[{text: "1+2"}, {text: "3"}],
|
|
[{text: "9+9"}, {text: "18"}],
|
|
[{text: "10+9"}, {text: "19"}],
|
|
[{text: "8+8"}, {text: "16"}],
|
|
[{text: "8+9"}, {text: "17"}],
|
|
[{text: "7+7"}, {text: "14"}],
|
|
[{text: "7+8"}, {text: "15"}],
|
|
[{text: "6+6"}, {text: "12"}]
|
|
],
|
|
mode: MODE_SPLITTED
|
|
};
|
|
var TEMPLATE_LETTERS = {
|
|
name: "Letters", icon: "letters.svg", cards: [
|
|
[{text: "A"}, {text: "a"}],
|
|
[{text: "B"}, {text: "b"}],
|
|
[{text: "C"}, {text: "c"}],
|
|
[{text: "D"}, {text: "d"}],
|
|
[{text: "E"}, {text: "e"}],
|
|
[{text: "F"}, {text: "f"}],
|
|
[{text: "G"}, {text: "g"}],
|
|
[{text: "H"}, {text: "h"}],
|
|
[{text: "I"}, {text: "i"}],
|
|
[{text: "J"}, {text: "j"}],
|
|
[{text: "K"}, {text: "k"}],
|
|
[{text: "L"}, {text: "l"}],
|
|
[{text: "M"}, {text: "m"}],
|
|
[{text: "N"}, {text: "n"}],
|
|
[{text: "O"}, {text: "o"}],
|
|
[{text: "P"}, {text: "p"}],
|
|
[{text: "Q"}, {text: "q"}],
|
|
[{text: "R"}, {text: "r"}],
|
|
[{text: "S"}, {text: "s"}],
|
|
[{text: "T"}, {text: "t"}],
|
|
[{text: "U"}, {text: "u"}],
|
|
[{text: "V"}, {text: "v"}],
|
|
[{text: "W"}, {text: "w"}],
|
|
[{text: "X"}, {text: "x"}],
|
|
[{text: "Y"}, {text: "y"}],
|
|
[{text: "Z"}, {text: "z"}]
|
|
],
|
|
mode: MODE_SPLITTED
|
|
};
|
|
|
|
var TEMPLATE_SOUNDS = {
|
|
name: "Sounds", icon: "sounds.svg", cards: [
|
|
[
|
|
{image: INLINE_RES + "drumkit1_b", sound: INLINE_RES + "beat1_a"},
|
|
{image: INLINE_RES + "drumkit1_b", sound: INLINE_RES + "beat1_a"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit2_b", sound: INLINE_RES + "beat1_b"},
|
|
{image: INLINE_RES + "drumkit2_b", sound: INLINE_RES + "beat1_b"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit3_b", sound: INLINE_RES + "beat1_c"},
|
|
{image: INLINE_RES + "drumkit3_b", sound: INLINE_RES + "beat1_c"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit4_b", sound: INLINE_RES + "beat8"},
|
|
{image: INLINE_RES + "drumkit4_b", sound: INLINE_RES + "beat8"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit5_b", sound: INLINE_RES + "beat10"},
|
|
{image: INLINE_RES + "drumkit5_b", sound: INLINE_RES + "beat10"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit6_b", sound: INLINE_RES + "beat3"},
|
|
{image: INLINE_RES + "drumkit6_b", sound: INLINE_RES + "beat3"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit7_b", sound: INLINE_RES + "beat4"},
|
|
{image: INLINE_RES + "drumkit7_b", sound: INLINE_RES + "beat4"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit8_b", sound: INLINE_RES + "beat14"},
|
|
{image: INLINE_RES + "drumkit8_b", sound: INLINE_RES + "beat14"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit9_b", sound: INLINE_RES + "beat6_2"},
|
|
{image: INLINE_RES + "drumkit9_b", sound: INLINE_RES + "beat6_2"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit10_b", sound: INLINE_RES + "beat2"},
|
|
{image: INLINE_RES + "drumkit10_b", sound: INLINE_RES + "beat2"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit11_b", sound: INLINE_RES + "beat16"},
|
|
{image: INLINE_RES + "drumkit11_b", sound: INLINE_RES + "beat16"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "drumkit12_b", sound: INLINE_RES + "beat17"},
|
|
{image: INLINE_RES + "drumkit12_b", sound: INLINE_RES + "beat17"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar1_2", sound: INLINE_RES + "bending_a"},
|
|
{image: INLINE_RES + "guitar1_2", sound: INLINE_RES + "bending_a"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar2_2", sound: INLINE_RES + "bending_b"},
|
|
{image: INLINE_RES + "guitar2_2", sound: INLINE_RES + "bending_b"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar3_2", sound: INLINE_RES + "flashcomp2a"},
|
|
{image: INLINE_RES + "guitar3_2", sound: INLINE_RES + "flashcomp2a"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar4_2", sound: INLINE_RES + "flashcomp2b"},
|
|
{image: INLINE_RES + "guitar4_2", sound: INLINE_RES + "flashcomp2b"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar5_2", sound: INLINE_RES + "gedaempft"},
|
|
{image: INLINE_RES + "guitar5_2", sound: INLINE_RES + "gedaempft"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar6_2", sound: INLINE_RES + "ungedaempft"},
|
|
{image: INLINE_RES + "guitar6_2", sound: INLINE_RES + "ungedaempft"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar7_2", sound: INLINE_RES + "jimi4"},
|
|
{image: INLINE_RES + "guitar7_2", sound: INLINE_RES + "jimi4"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar8_2", sound: INLINE_RES + "git_hit1"},
|
|
{image: INLINE_RES + "guitar8_2", sound: INLINE_RES + "git_hit1"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar9_2", sound: INLINE_RES + "git_hit4"},
|
|
{image: INLINE_RES + "guitar9_2", sound: INLINE_RES + "git_hit4"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar10_2", sound: INLINE_RES + "jimi1"},
|
|
{image: INLINE_RES + "guitar10_2", sound: INLINE_RES + "jimi1"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar11_2", sound: INLINE_RES + "flasholet4"},
|
|
{image: INLINE_RES + "guitar11_2", sound: INLINE_RES + "flasholet4"}
|
|
],
|
|
[
|
|
{image: INLINE_RES + "guitar12_2", sound: INLINE_RES + "guitcello"},
|
|
{image: INLINE_RES + "guitar12_2", sound: INLINE_RES + "guitcello"}
|
|
]
|
|
],
|
|
mode: MODE_CLASSIC
|
|
};
|
|
|
|
var MemorizeApp = {
|
|
strings: {add: "Add", update: "Update", remove: "Remove"},
|
|
ui: {},
|
|
templates: [TEMPLATE_SUMS, TEMPLATE_LETTERS, TEMPLATE_SOUNDS],
|
|
isHost: false,
|
|
editor: {pairMode: MODE_EQUAL, card1: {}, card2: {}, selectedPair: -1},
|
|
game: {
|
|
template: TEMPLATE_LETTERS,
|
|
multiplayer: false,
|
|
selectedCards: [],
|
|
mode: undefined,
|
|
cards: [],
|
|
currentPlayer: "",
|
|
players: [],
|
|
size: 4
|
|
},
|
|
computeCards: computeCards,
|
|
inEditMode: false,
|
|
shareActivity: shareActivity,
|
|
initUI: initUI,
|
|
drawGame: drawGame,
|
|
onUsersListChanged: onUsersListChanged,
|
|
onDataReceived: onDataReceived
|
|
};
|
|
|
|
function shuffle(array) {
|
|
var currentIndex = array.length, temporaryValue, randomIndex;
|
|
|
|
while (0 !== currentIndex) {
|
|
randomIndex = Math.floor(Math.random() * currentIndex);
|
|
currentIndex -= 1;
|
|
|
|
temporaryValue = array[currentIndex];
|
|
array[currentIndex] = array[randomIndex];
|
|
array[randomIndex] = temporaryValue;
|
|
}
|
|
|
|
return array;
|
|
}
|
|
|
|
|
|
function shareActivity(isHost) {
|
|
if (!MemorizeApp.presence.isConnected()) {
|
|
return;
|
|
}
|
|
MemorizeApp.inEditMode = false;
|
|
|
|
leaveEditMode();
|
|
disableEditMode();
|
|
|
|
MemorizeApp.game.multiplayer = true;
|
|
MemorizeApp.isHost = isHost;
|
|
MemorizeApp.me = MemorizeApp.presence.userInfo;
|
|
MemorizeApp.game.currentPlayer = MemorizeApp.me.networkId;
|
|
MemorizeApp.ui.gamePlayers.style.display = "block";
|
|
}
|
|
|
|
|
|
function computeCards(ignoreSave) {
|
|
MemorizeApp.game.cards = [];
|
|
MemorizeApp.game.selectedCards = [];
|
|
|
|
if (!MemorizeApp.game.template) {
|
|
return;
|
|
}
|
|
MemorizeApp.game.mode = MemorizeApp.game.template.mode;
|
|
|
|
var shuffledTemplate = {name: MemorizeApp.game.template.name, cards: []};
|
|
shuffledTemplate.cards = JSON.parse(JSON.stringify(shuffle(MemorizeApp.game.template.cards)));
|
|
|
|
var cardsNumber = 0;
|
|
if (MemorizeApp.game.size % 2 == 0) {
|
|
cardsNumber = MemorizeApp.game.size * MemorizeApp.game.size;
|
|
} else {
|
|
cardsNumber = MemorizeApp.game.size * MemorizeApp.game.size - 2;
|
|
}
|
|
|
|
if (MemorizeApp.game.mode == MODE_CLASSIC) {
|
|
var cards = [];
|
|
for (var i = 0; i < shuffledTemplate.cards.length && i < cardsNumber / 2; i++) {
|
|
var card1 = shuffledTemplate.cards[i][0];
|
|
var card2 = shuffledTemplate.cards[i][1];
|
|
|
|
card1.id = i;
|
|
card2.id = i;
|
|
|
|
cards.push(card1);
|
|
cards.push(card2);
|
|
}
|
|
MemorizeApp.game.cards = shuffle(cards);
|
|
}
|
|
|
|
if (MemorizeApp.game.mode == MODE_SPLITTED) {
|
|
var cards1 = [];
|
|
var cards2 = [];
|
|
|
|
for (var i = 0; i < cardsNumber / 2 && i < shuffledTemplate.cards.length; i++) {
|
|
var card1 = shuffledTemplate.cards[i][0];
|
|
var card2 = shuffledTemplate.cards[i][1];
|
|
|
|
card1.id = i;
|
|
card2.id = i;
|
|
|
|
cards1.push(card1);
|
|
cards2.push(card2);
|
|
}
|
|
|
|
var shuffledCard1 = shuffle(cards1);
|
|
for (var i = 0; i < shuffledCard1.length; i++) {
|
|
MemorizeApp.game.cards.push(shuffledCard1[i]);
|
|
}
|
|
|
|
var shuffledCard2 = shuffle(cards2);
|
|
for (var i = 0; i < shuffledCard2.length; i++) {
|
|
MemorizeApp.game.cards.push(shuffledCard2[i]);
|
|
}
|
|
}
|
|
if (!ignoreSave) saveGame();
|
|
}
|
|
|
|
|
|
function resizeTextInsideTextCardDivs() {
|
|
var elements = document.getElementsByClassName('textCard');
|
|
for (var i = 0; i < elements.length; i++) {
|
|
var el = elements[i];
|
|
while (el.scrollHeight > el.offsetHeight) {
|
|
el.style.fontSize = parseInt(el.style.fontSize) - 1 + "px";
|
|
}
|
|
while (el.scrollWidth > el.offsetWidth) {
|
|
el.style.fontSize = parseInt(el.style.fontSize) - 1 + "px";
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
function generateCardDiv(card, minSize) {
|
|
if (card.image) {
|
|
if (card.image.indexOf(INLINE_RES) == 0) {
|
|
card.image = SampleRessources[card.image.slice(INLINE_RES.length)];
|
|
}
|
|
var div = document.createElement("div");
|
|
div.style.background = "url('" + card.image + "')";
|
|
div.style.backgroundRepeat = "no-repeat";
|
|
div.style.backgroundSize = "contain";
|
|
div.style.webkitBackgroundSize = "contain";
|
|
div.style.backgroundPosition = "center center";
|
|
div.style.height = minSize + "px";
|
|
div.style.width = minSize + "px";
|
|
|
|
return div;
|
|
}
|
|
|
|
if (card.text) {
|
|
if (card.text.indexOf(INLINE_RES) == 0) {
|
|
card.text = SampleRessources[card.text.slice(INLINE_RES.length)];
|
|
}
|
|
var div = document.createElement("div");
|
|
div.className = "textCard";
|
|
div.style.textAlign = "center";
|
|
div.style.display = "block";
|
|
div.innerHTML = card.text;
|
|
div.style.lineHeight = minSize + "px";
|
|
div.style.fontSize = minSize + 'px';
|
|
div.style.color = "#000";
|
|
div.style.width = minSize + "px";
|
|
div.style.height = minSize + "px";
|
|
|
|
return div;
|
|
}
|
|
}
|
|
|
|
function createAudioContextIfMissing() {
|
|
if (MemorizeApp.context) {
|
|
return;
|
|
}
|
|
var context = window.AudioContext ||
|
|
window.webkitAudioContext ||
|
|
window.mozAudioContext ||
|
|
window.oAudioContext ||
|
|
window.msAudioContext;
|
|
|
|
if (!context) {
|
|
return;
|
|
}
|
|
context = new context();
|
|
MemorizeApp.context = context;
|
|
|
|
var buffer = context.createBuffer(1, 1, 22050);
|
|
var source = context.createBufferSource();
|
|
MemorizeApp.source = source;
|
|
source.buffer = buffer;
|
|
|
|
source.connect(context.destination);
|
|
source.start(0);
|
|
}
|
|
|
|
function createFullCardDiv(i, minSize, card) {
|
|
var fullCardDiv = document.createElement("div");
|
|
fullCardDiv.cardPosition = i;
|
|
fullCardDiv.webkitPerspective = "500px";
|
|
fullCardDiv.perspective = "500px";
|
|
fullCardDiv.style.border = "3px solid #fff";
|
|
fullCardDiv.style.borderRadius = "6px";
|
|
fullCardDiv.style.margin = "5px";
|
|
fullCardDiv.style.webkitTransition = "transform 0.5s";
|
|
fullCardDiv.style.transition = "transform 0.5s";
|
|
|
|
fullCardDiv.style.transitionDuration = "0.5s";
|
|
fullCardDiv.style.webkitTransitionDuration = "0.5s";
|
|
|
|
fullCardDiv.style.transformStyle = "preserve-3d";
|
|
fullCardDiv.style.webkitTransformStyle = "preserve-3d";
|
|
fullCardDiv.style.position = "relative";
|
|
fullCardDiv.style.float = "left";
|
|
fullCardDiv.style.height = minSize + "px";
|
|
fullCardDiv.style.width = minSize + "px";
|
|
if (card.solved) {
|
|
fullCardDiv.style.webkitTransform = "rotateY(180deg)";
|
|
fullCardDiv.style.transform = "rotateY(180deg)";
|
|
} else {
|
|
fullCardDiv.style.webkitTransform = "";
|
|
fullCardDiv.style.transform = "";
|
|
}
|
|
if (MemorizeApp.game.selectedCards.length != 0) {
|
|
if (MemorizeApp.game.selectedCards[0].cardPosition == fullCardDiv.cardPosition) {
|
|
fullCardDiv.style.webkitTransform = "";
|
|
fullCardDiv.style.transform = "";
|
|
}
|
|
}
|
|
|
|
return fullCardDiv;
|
|
}
|
|
|
|
function createFrontDiv(i, middle, minSize) {
|
|
var front = document.createElement("div");
|
|
if (MemorizeApp.game.mode == MODE_CLASSIC) {
|
|
front.style.background = "#777";
|
|
}
|
|
if (MemorizeApp.game.mode == MODE_SPLITTED) {
|
|
if (i < middle) {
|
|
front.style.background = "#777 url(icons/number1.svg)";
|
|
} else {
|
|
front.style.background = "#777 url(icons/number2.svg)";
|
|
}
|
|
}
|
|
front.zIndex = 2;
|
|
front.style.borderRadius = "6px";
|
|
front.style.webkitBackfaceVisibility = "hidden";
|
|
front.style.backfaceVisibility = "hidden";
|
|
|
|
front.style.backgroundPosition = "center center";
|
|
front.style.backgroundRepeat = "no-repeat";
|
|
front.style.height = minSize + "px";
|
|
front.style.position = "absolute";
|
|
front.style.top = "0px";
|
|
front.style.left = "0px";
|
|
front.style.width = minSize + "px";
|
|
|
|
return front;
|
|
}
|
|
|
|
function createDiv(i, minSize, card) {
|
|
var div = document.createElement("div");
|
|
var generatedDiv = generateCardDiv(MemorizeApp.game.cards[i], minSize);
|
|
div.appendChild(generatedDiv);
|
|
div.style.height = minSize + "px";
|
|
div.style.webkitBackfaceVisibility = "hidden";
|
|
div.style.backfaceVisibility = "hidden";
|
|
div.style.mozBackfaceVisibility = "hidden";
|
|
div.style.position = "absolute";
|
|
div.style.webkitTransform = "rotateY(180deg)";
|
|
div.style.transform = "rotateY(180deg)";
|
|
div.style.top = "0px";
|
|
div.style.left = "0px";
|
|
div.style.borderRadius = "6px";
|
|
div.style.width = minSize + "px";
|
|
div.style.background = "#fff";
|
|
|
|
if (card.solved) {
|
|
div.style.backgroundColor = FOUND_COLOR;
|
|
}
|
|
|
|
return div;
|
|
}
|
|
|
|
function cardClick(div, fromMe, user) {
|
|
var middle = MemorizeApp.game.cards.length / 2;
|
|
|
|
createAudioContextIfMissing();
|
|
var t = div;
|
|
|
|
if (t.card.solved || MemorizeApp.game.selectedCards.length == 2) {
|
|
return;
|
|
}
|
|
|
|
if (MemorizeApp.game.mode == MODE_SPLITTED && MemorizeApp.game.selectedCards.length == 1) {
|
|
if (t.cardPosition < middle && MemorizeApp.game.selectedCards[0].cardPosition < middle) {
|
|
return;
|
|
}
|
|
if (t.cardPosition >= middle && MemorizeApp.game.selectedCards[0].cardPosition >= middle) {
|
|
return;
|
|
}
|
|
}
|
|
|
|
t.style.webkitTransform = "rotateY(180deg)";
|
|
t.style.transform = "rotateY(180deg)";
|
|
|
|
if(MemorizeApp.game.selectedCards.length == 1 && MemorizeApp.game.selectedCards[0] == t){
|
|
return;
|
|
}
|
|
else{
|
|
MemorizeApp.game.selectedCards.push(t);
|
|
}
|
|
|
|
if (t.card.sound) {
|
|
if (t.card.sound.indexOf(INLINE_RES) == 0) {
|
|
t.card.sound = SampleRessources[t.card.sound.slice(INLINE_RES.length)];
|
|
}
|
|
var b64 = t.card.sound.split("base64,")[1];
|
|
b64 = Base64Binary.decodeArrayBuffer(btoa(atob(b64)));
|
|
|
|
if (MemorizeApp.context) {
|
|
MemorizeApp.context.decodeAudioData(b64, function (buffer) {
|
|
var source = MemorizeApp.context.createBufferSource(); // creates a sound source
|
|
if (MemorizeApp.source) {
|
|
try {
|
|
MemorizeApp.source.stop(0);
|
|
} catch (e) {
|
|
}
|
|
}
|
|
MemorizeApp.source = source;
|
|
source.buffer = buffer;
|
|
source.connect(MemorizeApp.context.destination);
|
|
try {
|
|
source.start(0);
|
|
} catch (e) {
|
|
|
|
}
|
|
}, function (err) {
|
|
console.log("err(decodeAudioData): " + err);
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
if (MemorizeApp.game.selectedCards.length == 1) {
|
|
return;
|
|
}
|
|
|
|
if (MemorizeApp.game.selectedCards[0].card.id == t.card.id) {
|
|
MemorizeApp.game.selectedCards[0].card.solved = true;
|
|
t.card.solved = true;
|
|
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
if (MemorizeApp.game.players[i].networkId == user.networkId) {
|
|
MemorizeApp.game.players[i].score = MemorizeApp.game.players[i].score + 1;
|
|
}
|
|
}
|
|
|
|
displayUsersAndScores();
|
|
var div1 = MemorizeApp.game.selectedCards[0].resultDiv;
|
|
var div2 = t.resultDiv;
|
|
setTimeout(function () {
|
|
div1.style.backgroundColor = FOUND_COLOR;
|
|
div2.style.backgroundColor = FOUND_COLOR;
|
|
}, 1000);
|
|
|
|
MemorizeApp.game.selectedCards = [];
|
|
saveGame();
|
|
return;
|
|
}
|
|
|
|
MemorizeApp.game.currentPlayer = "";
|
|
|
|
setTimeout(function () {
|
|
try {
|
|
t.style.webkitTransform = "";
|
|
t.style.transform = "";
|
|
MemorizeApp.game.selectedCards[0].style.webkitTransform = "";
|
|
MemorizeApp.game.selectedCards[0].style.transform = "";
|
|
MemorizeApp.game.selectedCards = [];
|
|
|
|
setTimeout(function () {
|
|
if (fromMe) {
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
if (MemorizeApp.game.players[i].online && MemorizeApp.game.players[i].networkId != MemorizeApp.me.networkId) {
|
|
MemorizeApp.game.currentPlayer = MemorizeApp.game.players[i].networkId;
|
|
sendMessage({
|
|
action: "updateCurrentPlayer",
|
|
currentPlayer: MemorizeApp.game.currentPlayer
|
|
});
|
|
displayUsersAndScores();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}, 300);
|
|
|
|
|
|
} catch (e) {
|
|
}
|
|
}, 2000)
|
|
|
|
}
|
|
|
|
function saveGame() {
|
|
MemorizeApp.activity.getDatastoreObject().setDataAsText(JSON.stringify({game: MemorizeApp.game}));
|
|
MemorizeApp.activity.getDatastoreObject().save(function (error, meta) {
|
|
});
|
|
}
|
|
|
|
function onCardClick() {
|
|
if (MemorizeApp.game.multiplayer) {
|
|
if (MemorizeApp.game.currentPlayer != MemorizeApp.me.networkId) {
|
|
return;
|
|
}
|
|
sendMessage({action: "cardClick", position: this.cardPosition});
|
|
if (MemorizeApp.game.players.length == 0 || MemorizeApp.game.players.length == 1) {
|
|
cardClick(this, true);
|
|
}
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
if (MemorizeApp.game.players[i].networkId == MemorizeApp.me.networkId) {
|
|
cardClick(this, true, MemorizeApp.game.players[i]);
|
|
}
|
|
}
|
|
} else {
|
|
cardClick(this, true);
|
|
}
|
|
|
|
}
|
|
|
|
function drawGame() {
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.backgroundImage = "url(icons/pair-non-equals.svg)"
|
|
} else {
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.backgroundImage = "url(icons/pair-equals.svg)"
|
|
}
|
|
if (MemorizeApp.game.template.mode == MODE_CLASSIC) {
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.backgroundImage = "url(icons/grouped_game1.svg)";
|
|
} else {
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.backgroundImage = "url(icons/grouped_game2.svg)";
|
|
}
|
|
|
|
MemorizeApp.ui.gameSizeButton.style.background = "url(icons/" + MemorizeApp.game.size + "x" + MemorizeApp.game.size + ".svg)";
|
|
MemorizeApp.ui.gameTemplatesButton.style.backgroundImage = "url(icons/" + MemorizeApp.game.template.icon + ")";
|
|
|
|
MemorizeApp.ui.gameGrid.innerHTML = "";
|
|
|
|
var gameDiv = MemorizeApp.ui.gameGrid;
|
|
var width = document.body.clientWidth;
|
|
var height = document.body.clientHeight;
|
|
var middle = MemorizeApp.game.cards.length / 2;
|
|
|
|
var minSize = height;
|
|
if (width < height) {
|
|
minSize = width;
|
|
}
|
|
minSize = minSize - (56 + 20) * 3;
|
|
minSize = minSize / MemorizeApp.game.size;
|
|
|
|
for (var i = 0; i < MemorizeApp.game.cards.length; i++) {
|
|
var card = MemorizeApp.game.cards[i];
|
|
|
|
if (i % MemorizeApp.game.size == 0 && i > 0) {
|
|
var div = document.createElement("div");
|
|
div.style.clear = "both";
|
|
gameDiv.appendChild(div);
|
|
}
|
|
|
|
var fullCardDiv = createFullCardDiv(i, minSize, card);
|
|
var front = createFrontDiv(i, middle, minSize);
|
|
var div = createDiv(i, minSize, card);
|
|
|
|
fullCardDiv.card = card;
|
|
fullCardDiv.resultDiv = div;
|
|
|
|
var clickEvent = "click";
|
|
if (/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
|
|
clickEvent = "touchend";
|
|
}
|
|
fullCardDiv.addEventListener(clickEvent, onCardClick, false);
|
|
fullCardDiv.appendChild(div);
|
|
fullCardDiv.appendChild(front);
|
|
gameDiv.appendChild(fullCardDiv);
|
|
}
|
|
|
|
gameDiv.style.width = parseInt(minSize + 10) * parseInt(MemorizeApp.game.size + 1) + "px";
|
|
gameDiv.style.marginLeft = "auto";
|
|
gameDiv.style.marginRight = "auto";
|
|
|
|
resizeTextInsideTextCardDivs();
|
|
}
|
|
|
|
function onDataReceived(data) {
|
|
if (data.user.networkId == MemorizeApp.me.networkId) {
|
|
return;
|
|
}
|
|
|
|
data.content = JSON.parse(lzString.decompressFromUTF16(data.content));
|
|
|
|
if (data.content.action == "updateCurrentPlayer") {
|
|
MemorizeApp.game.currentPlayer = data.content.currentPlayer;
|
|
displayUsersAndScores();
|
|
}
|
|
|
|
if (data.content.action == "updateGame") {
|
|
MemorizeApp.game = data.content.game;
|
|
MemorizeApp.ui.gameSizeButton.style.background = "url(icons/" + MemorizeApp.game.size + "x" + MemorizeApp.game.size + ".svg)";
|
|
MemorizeApp.ui.gameTemplatesButton.style.backgroundImage = "url(icons/" + MemorizeApp.game.template.icon + ")";
|
|
MemorizeApp.drawGame();
|
|
displayUsersAndScores();
|
|
saveGame();
|
|
}
|
|
|
|
if (data.content.action == "cardClick") {
|
|
var notFilteredCards = MemorizeApp.ui.gameGrid.childNodes;
|
|
var cards = [];
|
|
|
|
for (var i = 0; i < notFilteredCards.length; i++) {
|
|
if (!notFilteredCards[i].style.clear || notFilteredCards[i].style.clear == "") {
|
|
cards.push(notFilteredCards[i]);
|
|
}
|
|
}
|
|
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
if (MemorizeApp.game.players[i].networkId == data.user.networkId) {
|
|
cardClick(cards[data.content.position], false, MemorizeApp.game.players[i]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function sendMessage(content) {
|
|
if (!MemorizeApp.game.multiplayer) {
|
|
return;
|
|
}
|
|
var sharedId = window.top.sugar.environment.sharedId;
|
|
if (!sharedId) {
|
|
sharedId = MemorizeApp.presence.getSharedInfo().id
|
|
}
|
|
|
|
MemorizeApp.presence.sendMessage(sharedId, {
|
|
user: MemorizeApp.presence.getUserInfo(),
|
|
content: lzString.compressToUTF16(JSON.stringify(content))
|
|
});
|
|
}
|
|
|
|
function displayUsersAndScores() {
|
|
if (MemorizeApp.game.players.length == 0) {
|
|
return;
|
|
}
|
|
var div = document.createElement("div");
|
|
|
|
var myTurn = false;
|
|
if (MemorizeApp.game.currentPlayer == MemorizeApp.me.networkId) {
|
|
myTurn = true;
|
|
}
|
|
var canPlay = document.createElement("div");
|
|
canPlay.style.float = "left";
|
|
canPlay.style.marginTop = "10px";
|
|
canPlay.style.width = "30px";
|
|
canPlay.style.marginRight = "3px";
|
|
canPlay.style.borderRight = "1px solid #fff";
|
|
canPlay.style.height = "30px";
|
|
if (myTurn) {
|
|
canPlay.style.backgroundImage = "url(icons/play.svg)"
|
|
} else {
|
|
canPlay.style.backgroundImage = "url(icons/sandclock.svg)"
|
|
}
|
|
canPlay.style.backgroundPosition = "center center";
|
|
canPlay.style.backgroundRepeat = "no-repeat";
|
|
div.appendChild(canPlay);
|
|
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
var player = MemorizeApp.game.players[i];
|
|
var d = document.createElement("div");
|
|
d.style.paddingTop = "15px";
|
|
var xoColor = generateXOLogoWithColor(player.colorvalue);
|
|
var scores = "";
|
|
for (var j = 0; j < player.score; j++) {
|
|
scores += '<img style="height:13px;" src="icons/pair-add.svg">';
|
|
}
|
|
d.innerHTML = '<img style="height:23px; vertical-align:middle; " src="' + xoColor + '"><span style="color:#fff;">' + player.name + "</span> " + scores;
|
|
d.style.float = "left";
|
|
if (i != 0) {
|
|
d.style.marginLeft = "10px";
|
|
}
|
|
div.appendChild(d);
|
|
}
|
|
MemorizeApp.ui.gamePlayers.innerHTML = "";
|
|
MemorizeApp.ui.gamePlayers.appendChild(div);
|
|
}
|
|
|
|
function onUsersListChanged(users) {
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
MemorizeApp.game.players[i].online = false;
|
|
}
|
|
|
|
if (!MemorizeApp.hasLoadedMultiplayer && users.length >= 3) {
|
|
document.getElementById("stop-button").click();
|
|
return;
|
|
}
|
|
|
|
MemorizeApp.hasLoadedMultiplayer = true;
|
|
|
|
|
|
if (users.length == 1) {
|
|
MemorizeApp.isHost = true;
|
|
MemorizeApp.game.currentPlayer = MemorizeApp.me.networkId;
|
|
MemorizeApp.game.selectedCards = [];
|
|
drawGame();
|
|
displayUsersAndScores();
|
|
return;
|
|
}
|
|
|
|
for (var i = 0; i < users.length; i++) {
|
|
var found = false;
|
|
for (var j = 0; j < MemorizeApp.game.players.length; j++) {
|
|
if (MemorizeApp.game.players[j].networkId == users[i].networkId) {
|
|
MemorizeApp.game.players[j].online = true;
|
|
found = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!found) {
|
|
var user = users[i];
|
|
user.score = 0;
|
|
user.online = true;
|
|
MemorizeApp.game.players.push(user);
|
|
}
|
|
}
|
|
if (MemorizeApp.isHost) {
|
|
sendMessage({action: "updateGame", game: MemorizeApp.game});
|
|
}
|
|
displayUsersAndScores();
|
|
}
|
|
|
|
var xoLogo = '<?xml version="1.0" ?><!DOCTYPE svg PUBLIC \'-//W3C//DTD SVG 1.1//EN\' \'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\' [<!ENTITY stroke_color "#010101"><!ENTITY fill_color "#FFFFFF">]><svg enable-background="new 0 0 55 55" height="55px" version="1.1" viewBox="0 0 55 55" width="55px" x="0px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" y="0px"><g display="block" id="stock-xo_1_"><path d="M33.233,35.1l10.102,10.1c0.752,0.75,1.217,1.783,1.217,2.932 c0,2.287-1.855,4.143-4.146,4.143c-1.145,0-2.178-0.463-2.932-1.211L27.372,40.961l-10.1,10.1c-0.75,0.75-1.787,1.211-2.934,1.211 c-2.284,0-4.143-1.854-4.143-4.141c0-1.146,0.465-2.184,1.212-2.934l10.104-10.102L11.409,24.995 c-0.747-0.748-1.212-1.785-1.212-2.93c0-2.289,1.854-4.146,4.146-4.146c1.143,0,2.18,0.465,2.93,1.214l10.099,10.102l10.102-10.103 c0.754-0.749,1.787-1.214,2.934-1.214c2.289,0,4.146,1.856,4.146,4.145c0,1.146-0.467,2.18-1.217,2.932L33.233,35.1z" fill="&fill_color;" stroke="&stroke_color;" stroke-width="3.5"/><circle cx="27.371" cy="10.849" fill="&fill_color;" r="8.122" stroke="&stroke_color;" stroke-width="3.5"/></g></svg>';
|
|
|
|
function generateXOLogoWithColor(color) {
|
|
var coloredLogo = xoLogo;
|
|
coloredLogo = coloredLogo.replace("#010101", color.stroke);
|
|
coloredLogo = coloredLogo.replace("#FFFFFF", color.fill);
|
|
|
|
return "data:image/svg+xml;base64," + btoa(coloredLogo);
|
|
}
|
|
|
|
function initUI(callback) {
|
|
MemorizeApp.ui.gameGrid = document.getElementById("game-grid");
|
|
MemorizeApp.ui.gamePlayers = document.getElementById("game-players");
|
|
MemorizeApp.ui.gameEditor = document.getElementById("game-editor");
|
|
|
|
MemorizeApp.ui.gameTemplatesButton = document.getElementById("game-templates-button");
|
|
|
|
var gt = new templatePalette.TemplatePalette(MemorizeApp.ui.gameTemplatesButton, undefined, MemorizeApp.templates);
|
|
gt.addEventListener('template', function (e) {
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
MemorizeApp.game.players[i].score = 0;
|
|
}
|
|
MemorizeApp.game.template = e.detail.value;
|
|
MemorizeApp.ui.gameTemplatesButton.style.backgroundImage = "url(icons/" + e.detail.value.icon + ")";
|
|
MemorizeApp.computeCards();
|
|
MemorizeApp.drawGame();
|
|
sendMessage({action: "updateGame", game: MemorizeApp.game});
|
|
});
|
|
|
|
MemorizeApp.ui.gameSizeButton = document.getElementById("game-size-button");
|
|
var sp = new sizePalette.SizePalette(MemorizeApp.ui.gameSizeButton);
|
|
sp.addEventListener('size', function (e) {
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
MemorizeApp.game.players[i].score = 0;
|
|
}
|
|
MemorizeApp.game.size = e.detail.value;
|
|
MemorizeApp.ui.gameSizeButton.style.background = "url(icons/" + e.detail.value + "x" + e.detail.value + ".svg)";
|
|
MemorizeApp.computeCards();
|
|
MemorizeApp.drawGame();
|
|
sendMessage({action: "updateGame", game: MemorizeApp.game});
|
|
});
|
|
|
|
|
|
MemorizeApp.ui.gameResetButton = document.getElementById("game-reset-button");
|
|
MemorizeApp.ui.gameResetButton.addEventListener("click", function () {
|
|
for (var i = 0; i < MemorizeApp.game.players.length; i++) {
|
|
MemorizeApp.game.players[i].score = 0;
|
|
}
|
|
MemorizeApp.game.selectedCards = [];
|
|
MemorizeApp.game.cards = [];
|
|
displayUsersAndScores();
|
|
MemorizeApp.computeCards();
|
|
MemorizeApp.drawGame();
|
|
sendMessage({action: "updateGame", game: MemorizeApp.game});
|
|
});
|
|
|
|
MemorizeApp.ui.gameEditorButton = document.getElementById("game-editor-button");
|
|
MemorizeApp.ui.gameEditorInsertModeButton = document.getElementById("game-editor-insert-mode-button");
|
|
MemorizeApp.ui.gameEditorPlayModeButton = document.getElementById("game-editor-play-mode-button");
|
|
|
|
MemorizeApp.ui.gameEditorPlayModeButton.addEventListener("click", function() {
|
|
if (MemorizeApp.game.template.mode == MODE_CLASSIC) {
|
|
MemorizeApp.game.template.mode = MODE_SPLITTED;
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.backgroundImage = "url(icons/grouped_game2.svg)";
|
|
} else {
|
|
MemorizeApp.game.template.mode = MODE_CLASSIC;
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.backgroundImage = "url(icons/grouped_game1.svg)";
|
|
}
|
|
saveGame();
|
|
displayEditor();
|
|
});
|
|
|
|
|
|
MemorizeApp.ui.gameEditorClearButton = document.getElementById("game-editor-clear-button");
|
|
|
|
MemorizeApp.ui.gameEditorInsertModeButton.addEventListener("click", function() {
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
MemorizeApp.editor.pairMode = MODE_NON_EQUAL;
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.backgroundImage = "url(icons/pair-non-equals.svg)"
|
|
} else {
|
|
MemorizeApp.editor.pairMode = MODE_EQUAL;
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.backgroundImage = "url(icons/pair-equals.svg)"
|
|
}
|
|
saveGame();
|
|
displayEditor();
|
|
});
|
|
|
|
MemorizeApp.ui.gameEditorClearButton.addEventListener("click", function() {
|
|
MemorizeApp.game.template.cards = [];
|
|
saveGame();
|
|
displayEditor();
|
|
});
|
|
|
|
MemorizeApp.ui.gameEditorButton.addEventListener("click", function () {
|
|
if (MemorizeApp.inEditMode) {
|
|
leaveEditMode();
|
|
} else {
|
|
enterEditMode();
|
|
}
|
|
});
|
|
|
|
MemorizeApp.ui.gameEditorInsertModeButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorPlayModeButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorClearButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorClearButton.style.opacity = 0.3;
|
|
|
|
//window.onresize = function () {
|
|
// setTimeout(function () {
|
|
// if (MemorizeApp.inEditMode) {
|
|
// displayEditor()
|
|
// } else {
|
|
// MemorizeApp.drawGame();
|
|
// }
|
|
// }, 250);
|
|
//};
|
|
|
|
|
|
if (callback) {
|
|
callback();
|
|
}
|
|
}
|
|
|
|
function enterEditMode() {
|
|
//TODO palette equality
|
|
//TODO palette show
|
|
MemorizeApp.inEditMode = true;
|
|
MemorizeApp.ui.gameGrid.innerHTML = "";
|
|
MemorizeApp.ui.gameGrid.style.display = "none";
|
|
MemorizeApp.ui.gameEditor.style.display = "block";
|
|
MemorizeApp.game.selectedCards = [];
|
|
MemorizeApp.editor.selectedPair = -1;
|
|
|
|
/* Disable game buttons */
|
|
|
|
MemorizeApp.ui.gameTemplatesButton.disabled = true;
|
|
MemorizeApp.ui.gameTemplatesButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameSizeButton.disabled = true;
|
|
MemorizeApp.ui.gameSizeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameResetButton.disabled = true;
|
|
MemorizeApp.ui.gameResetButton.style.opacity = 0.3;
|
|
|
|
/* Enable editor buttons */
|
|
|
|
MemorizeApp.ui.gameEditorInsertModeButton.disabled = false;
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.opacity = 1;
|
|
|
|
MemorizeApp.ui.gameEditorPlayModeButton.disabled = false;
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.opacity = 1;
|
|
|
|
MemorizeApp.ui.gameEditorClearButton.disabled = false;
|
|
MemorizeApp.ui.gameEditorClearButton.style.opacity = 1;
|
|
|
|
MemorizeApp.ui.gameEditorButton.style.backgroundImage = "url(icons/play.svg)";
|
|
|
|
displayEditor();
|
|
}
|
|
|
|
function generateEditorDiv(card) {
|
|
var minSize = document.body.clientWidth;
|
|
if (minSize > document.body.clientHeight) {
|
|
minSize = document.body.clientHeight;
|
|
}
|
|
|
|
var e = document.createElement("div");
|
|
e.style.width = parseInt(minSize / 3.5) + "px";
|
|
e.style.marginLeft = "25px";
|
|
e.style.float = "left";
|
|
e.style.marginTop = "7px";
|
|
|
|
var d = document.createElement("div");
|
|
d.style.width = parseInt(minSize / 3.5) - 10 + "px";
|
|
d.style.height = parseInt(minSize / 3.5) - 10 + "px";
|
|
d.style.background = "rgb(119, 119, 119)";
|
|
d.style.border = "4px solid #000";
|
|
d.style.textAlign = "center";
|
|
d.style.borderRadius = "9px";
|
|
d.style.color = "#fff";
|
|
d.style.fontSize = parseInt(minSize / 3.5) - 10 + "px";
|
|
d.style.lineHeight = parseInt(minSize / 3.5) - 10 + "px";
|
|
d.className = "textCard";
|
|
d.style.backgroundRepeat = "no-repeat";
|
|
d.style.backgroundSize = "100%";
|
|
d.style.backgroundPosition = "center";
|
|
if (card && card.text) {
|
|
d.innerHTML = card.text;
|
|
} else if (card && card.image) {
|
|
d.style.backgroundImage = "url('" + card.image + "')";
|
|
}
|
|
|
|
var importPicture = document.createElement("img");
|
|
importPicture.style.marginLeft = "5px";
|
|
importPicture.style.marginTop = "5px";
|
|
importPicture.style.textAlign = "center";
|
|
importPicture.setAttribute("src", "icons/import_picture.svg");
|
|
importPicture.style.width = "30px";
|
|
importPicture.className = "insertImage";
|
|
|
|
var input = document.createElement("input");
|
|
input.setAttribute("type", "text");
|
|
input.style.marginRight = "auto";
|
|
input.style.marginLeft = "auto";
|
|
input.style.width = parseInt(minSize / 3.5) - 50 + "px";
|
|
input.style.marginTop = "5px";
|
|
input.card = card;
|
|
if (card && card.text) {
|
|
input.value = card.text;
|
|
}
|
|
|
|
input.linkedDiv = d;
|
|
input.onkeyup = function () {
|
|
this.linkedDiv.innerHTML = this.value;
|
|
this.linkedDiv.style.fontSize = this.linkedDiv.style.width;
|
|
this.card.text = this.value;
|
|
resizeTextInsideTextCardDivs()
|
|
};
|
|
|
|
e.appendChild(d);
|
|
e.appendChild(input);
|
|
e.appendChild(importPicture);
|
|
|
|
return e;
|
|
}
|
|
|
|
function generateAddEditRemoveButton() {
|
|
var div = document.createElement("div");
|
|
var minSize = document.body.clientWidth;
|
|
if (minSize > document.body.clientHeight) {
|
|
minSize = document.body.clientHeight;
|
|
}
|
|
|
|
div.style.float = "right";
|
|
div.style.height = parseInt(minSize / 3.5) + "px";
|
|
div.style.marginRight = "20px";
|
|
div.style.marginTop = "7px";
|
|
|
|
var addButton = document.createElement("div");
|
|
var updateButton = document.createElement("div");
|
|
var deleteButton = document.createElement("div");
|
|
|
|
var buttonSize = parseInt((minSize / 3.5) / 5) + "px";
|
|
|
|
addButton.style.padding = "5px";
|
|
addButton.style.userSelect = "none";
|
|
addButton.style.webkitUserSelect = "none";
|
|
addButton.style.mozUserSelect = "none";
|
|
addButton.innerHTML = "<img style='height:" + buttonSize + "; width:" + buttonSize + ";' src='icons/pair-add.svg'><br/>" + MemorizeApp.strings.add;
|
|
addButton.onmouseover = function () {
|
|
this.style.background = "#888";
|
|
};
|
|
addButton.onmouseout = function () {
|
|
this.style.background = "transparent";
|
|
};
|
|
addButton.addEventListener("click", function () {
|
|
var cards = [];
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card1;
|
|
}
|
|
if (MemorizeApp.editor.pairMode == MODE_NON_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card2;
|
|
}
|
|
|
|
if (!cards[0].text && !cards[0].image && !cards[0].sound) {
|
|
return;
|
|
}
|
|
|
|
if (!cards[1].text && !cards[1].image && !cards[1].sound) {
|
|
return;
|
|
}
|
|
|
|
cards = JSON.parse(JSON.stringify(cards));
|
|
MemorizeApp.editor.card1 = {};
|
|
MemorizeApp.editor.card2 = {};
|
|
MemorizeApp.game.template.cards.push(cards);
|
|
MemorizeApp.editor.selectedPair = -1;
|
|
saveGame();
|
|
displayEditor();
|
|
});
|
|
|
|
updateButton.style.padding = "5px";
|
|
updateButton.style.userSelect = "none";
|
|
updateButton.style.webkitUserSelect = "none";
|
|
updateButton.style.mozUserSelect = "none";
|
|
updateButton.innerHTML = "<img style='height:" + buttonSize + "; width:" + buttonSize + ";' src='icons/pair-update.svg'><br/>" + MemorizeApp.strings.update;
|
|
updateButton.onmouseover = function () {
|
|
this.style.background = "#888";
|
|
};
|
|
updateButton.onmouseout = function () {
|
|
this.style.background = "transparent";
|
|
};
|
|
updateButton.addEventListener("click", function () {
|
|
var cards = [];
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card1;
|
|
}
|
|
if (MemorizeApp.editor.pairMode == MODE_NON_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card2;
|
|
}
|
|
|
|
if (!cards[0].text && !cards[0].image && !cards[0].sound) {
|
|
return;
|
|
}
|
|
|
|
if (!cards[1].text && !cards[1].image && !cards[1].sound) {
|
|
return;
|
|
}
|
|
|
|
cards = JSON.parse(JSON.stringify(cards));
|
|
|
|
if (MemorizeApp.editor.selectedPair > -1) {
|
|
MemorizeApp.game.template.cards[MemorizeApp.editor.selectedPair] = cards
|
|
}
|
|
saveGame();
|
|
displayEditor();
|
|
});
|
|
|
|
deleteButton.style.padding = "5px";
|
|
deleteButton.style.userSelect = "none";
|
|
deleteButton.style.webkitUserSelect = "none";
|
|
deleteButton.style.mozUserSelect = "none";
|
|
deleteButton.innerHTML = "<img style='height:" + buttonSize + "; width:" + buttonSize + ";' src='icons/remove.svg'><br/>" + MemorizeApp.strings.remove;
|
|
deleteButton.onmouseover = function () {
|
|
this.style.background = "#888";
|
|
};
|
|
deleteButton.onmouseout = function () {
|
|
this.style.background = "transparent";
|
|
};
|
|
deleteButton.addEventListener("click", function () {
|
|
if (MemorizeApp.editor.selectedPair > -1) {
|
|
MemorizeApp.game.template.cards.splice(MemorizeApp.editor.selectedPair, 1);
|
|
}
|
|
|
|
MemorizeApp.editor.selectedPair = -1;
|
|
MemorizeApp.editor.card1 = {};
|
|
MemorizeApp.editor.card2 = {};
|
|
saveGame();
|
|
displayEditor();
|
|
});
|
|
|
|
div.appendChild(addButton);
|
|
div.appendChild(updateButton);
|
|
div.appendChild(deleteButton);
|
|
|
|
return div;
|
|
}
|
|
|
|
function generateCardFromCardsList(pair, minSize, index) {
|
|
minSize = minSize - 10;
|
|
var d = document.createElement("div");
|
|
d.style.display = "inline-block";
|
|
d.style.height = minSize + "px";
|
|
d.style.marginLeft = "5px";
|
|
|
|
if (index == MemorizeApp.editor.selectedPair) {
|
|
d.style.border = "3px solid #00f";
|
|
}
|
|
//d.style.marginTop = "5px";
|
|
//d.style.marginLeft = "15px";
|
|
|
|
var card1 = document.createElement("div");
|
|
card1.style.backgroundRepeat = "no-repeat";
|
|
card1.style.backgroundSize = "cover";
|
|
card1.style.backgroundPosition = "center center";
|
|
|
|
card1.innerHTML = " ";
|
|
card1.style.backgroundColor = "#666";
|
|
card1.className = "textCard";
|
|
|
|
|
|
if (pair[0].text) {
|
|
if (pair[0].text.indexOf(INLINE_RES) == 0) {
|
|
pair[0].text = SampleRessources[pair[0].image.slice(INLINE_RES.length)]
|
|
}
|
|
card1.innerHTML = pair[0].text;
|
|
}
|
|
else if (pair[0].image) {
|
|
if (pair[0].image.indexOf(INLINE_RES) == 0) {
|
|
pair[0].image = SampleRessources[pair[0].image.slice(INLINE_RES.length)]
|
|
}
|
|
card1.style.backgroundImage = "url('" + pair[0].image + "')";
|
|
|
|
}
|
|
card1.style.width = parseInt(minSize / 2) + "px";
|
|
card1.style.height = parseInt(minSize / 2) + "px";
|
|
card1.style.lineHeight = card1.style.width + "";
|
|
card1.style.borderRadius = "6px";
|
|
card1.style.textAlign = "center";
|
|
card1.style.fontSize = parseInt(minSize / 8) + "px";
|
|
card1.style.border = "1px solid #000";
|
|
card1.style.color = "#fff";
|
|
card1.style.marginBottom = "5px";
|
|
|
|
|
|
var card2 = document.createElement("div");
|
|
card2.style.backgroundRepeat = "no-repeat";
|
|
card2.style.backgroundPosition = "center center";
|
|
card2.style.backgroundSize = "cover";
|
|
|
|
|
|
card2.innerHTML = " ";
|
|
card2.style.backgroundColor = "#666";
|
|
card2.className = "textCard";
|
|
if (pair[1].text) {
|
|
if (pair[1].text.indexOf(INLINE_RES) == 0) {
|
|
pair[1].text = SampleRessources[pair[1].image.slice(INLINE_RES.length)]
|
|
}
|
|
card2.innerHTML = pair[1].text;
|
|
}
|
|
else if (pair[1].image) {
|
|
if (pair[1].image.indexOf(INLINE_RES) == 0) {
|
|
pair[1].image = SampleRessources[pair[1].image.slice(INLINE_RES.length)]
|
|
}
|
|
card2.style.backgroundImage = "url('" + pair[1].image + "')";
|
|
}
|
|
|
|
card2.style.width = parseInt(minSize / 2) + "px";
|
|
card2.style.height = parseInt(minSize / 2) + "px";
|
|
card2.style.textAlign = "center";
|
|
card2.style.lineHeight = card2.style.width + "";
|
|
card2.style.borderRadius = "6px";
|
|
card2.style.fontSize = parseInt(minSize / 8) + "px";
|
|
card2.style.border = "1px solid #000";
|
|
card2.style.color = "#fff";
|
|
|
|
d.appendChild(card1);
|
|
d.appendChild(card2);
|
|
|
|
return d;
|
|
}
|
|
|
|
function insertimagebuttonsFun(){
|
|
document.getElementsByClassName("insertImage")[0].onclick = function(){
|
|
var cards = [];
|
|
chooser.show(function (entry) {
|
|
// No selection
|
|
if (!entry) {
|
|
return;
|
|
}
|
|
// Get object content
|
|
var dataentry = new datastore.DatastoreObject(entry.objectId);
|
|
dataentry.loadAsText(function (err, metadata, text) {
|
|
//We load the drawing inside an image element
|
|
var element = document.createElement('img');
|
|
if (entry.metadata.activity == 'org.olpcfrance.PaintActivity') {
|
|
element.src = LZString.decompressFromUTF16(JSON.parse(text).src);
|
|
} else {
|
|
element.src = text;
|
|
}
|
|
element.onload = function () {
|
|
document.getElementsByClassName("textCard")[0].style.backgroundImage = 'url(' + element.src + ')';
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
MemorizeApp.editor.card1.image = element.src;
|
|
MemorizeApp.editor.card1.text = "";
|
|
MemorizeApp.editor.card2.image = element.src;
|
|
MemorizeApp.editor.card2.text = "";
|
|
}else{
|
|
MemorizeApp.editor.card1.image = element.src;
|
|
MemorizeApp.editor.card1.text = "";
|
|
}
|
|
var cards = [];
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card1;
|
|
}
|
|
if (MemorizeApp.editor.pairMode == MODE_NON_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card2;
|
|
}
|
|
|
|
if (!cards[0].text && !cards[0].image && !cards[0].sound) {
|
|
return;
|
|
}
|
|
|
|
if (!cards[1].text && !cards[1].image && !cards[1].sound) {
|
|
return;
|
|
}
|
|
|
|
cards = JSON.parse(JSON.stringify(cards));
|
|
|
|
if (MemorizeApp.editor.selectedPair > -1) {
|
|
MemorizeApp.game.template.cards[MemorizeApp.editor.selectedPair] = cards
|
|
}
|
|
saveGame();
|
|
displayEditor();
|
|
};
|
|
});
|
|
}, { mimetype: 'image/png' }, { mimetype: 'image/jpeg' }, { activity: 'org.olpcfrance.PaintActivity'});
|
|
}
|
|
if(document.getElementsByClassName("insertImage")[1]){
|
|
document.getElementsByClassName("insertImage")[1].onclick = function(){
|
|
var cards = [];
|
|
chooser.show(function (entry) {
|
|
// No selection
|
|
if (!entry) {
|
|
return;
|
|
}
|
|
// Get object content
|
|
var dataentry = new datastore.DatastoreObject(entry.objectId);
|
|
dataentry.loadAsText(function (err, metadata, text) {
|
|
//We load the drawing inside an image element
|
|
var element = document.createElement('img');
|
|
element.src = text;
|
|
element.onload = function () {
|
|
document.getElementsByClassName("textCard")[1].style.backgroundImage = 'url(' + element.src + ')';
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
MemorizeApp.editor.card1.image = element.src;
|
|
MemorizeApp.editor.card1.text = "";
|
|
MemorizeApp.editor.card2.image = element.src;
|
|
MemorizeApp.editor.card2.text = "";
|
|
}else{
|
|
MemorizeApp.editor.card2.image = element.src;
|
|
MemorizeApp.editor.card2.text = "";
|
|
}
|
|
var cards = [];
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card1;
|
|
}
|
|
if (MemorizeApp.editor.pairMode == MODE_NON_EQUAL) {
|
|
cards[0] = MemorizeApp.editor.card1;
|
|
cards[1] = MemorizeApp.editor.card2;
|
|
}
|
|
|
|
if (!cards[0].text && !cards[0].image && !cards[0].sound) {
|
|
return;
|
|
}
|
|
|
|
if (!cards[1].text && !cards[1].image && !cards[1].sound) {
|
|
return;
|
|
}
|
|
cards = JSON.parse(JSON.stringify(cards));
|
|
if (MemorizeApp.editor.selectedPair > -1) {
|
|
MemorizeApp.game.template.cards[MemorizeApp.editor.selectedPair] = cards
|
|
}
|
|
saveGame();
|
|
displayEditor();
|
|
};
|
|
});
|
|
}, { mimetype: 'image/png' }, { mimetype: 'image/jpeg' });
|
|
}
|
|
}
|
|
}
|
|
|
|
function generateCardsList() {
|
|
var div = document.createElement("div");
|
|
var minSize = document.body.clientWidth;
|
|
if (minSize > document.body.clientHeight) {
|
|
minSize = document.body.clientHeight;
|
|
}
|
|
|
|
div.style.position = "fixed";
|
|
div.style.bottom = 0;
|
|
div.style.width = document.body.clientWidth + "px";
|
|
div.style.height = parseInt(minSize / 3) + "px";
|
|
div.style.padding = "10px";
|
|
div.style.paddingBottom = "20px";
|
|
div.style.marginTop = "7px";
|
|
div.style.background = "#eee";
|
|
div.style.overflowX = "auto";
|
|
div.style.whiteSpace = "nowrap"
|
|
div.style.overflowY = "hidden";
|
|
|
|
for (var i = 0; i < MemorizeApp.game.template.cards.length; i++) {
|
|
var card = MemorizeApp.game.template.cards[i];
|
|
var pair = generateCardFromCardsList(card, parseInt(minSize / 3), i);
|
|
pair.cards = card;
|
|
pair.index = i;
|
|
pair.addEventListener("click", function() {
|
|
MemorizeApp.editor.selectedPair = this.index;
|
|
MemorizeApp.editor.pairMode = MODE_NON_EQUAL;
|
|
MemorizeApp.editor.card1 = this.cards[0];
|
|
MemorizeApp.editor.card2 = this.cards[1];
|
|
displayEditor();
|
|
});
|
|
|
|
div.appendChild(pair);
|
|
}
|
|
var emptyDiv = document.createElement("div");
|
|
emptyDiv.style.height = parseInt(minSize/6)+"px";
|
|
emptyDiv.style.width = "30px";
|
|
emptyDiv.style.display = "inline-block";
|
|
div.appendChild(emptyDiv);
|
|
|
|
return div;
|
|
}
|
|
|
|
function generateClearBoth() {
|
|
var d = document.createElement("div");
|
|
d.style.clear = "both";
|
|
return d;
|
|
}
|
|
|
|
function displayEditor() {
|
|
MemorizeApp.ui.gameEditor.innerHTML = "";
|
|
|
|
if (MemorizeApp.editor.pairMode == MODE_EQUAL) {
|
|
MemorizeApp.ui.gameEditor.appendChild(generateEditorDiv(MemorizeApp.editor.card1));
|
|
}
|
|
|
|
if (MemorizeApp.editor.pairMode == MODE_NON_EQUAL) {
|
|
MemorizeApp.ui.gameEditor.appendChild(generateEditorDiv(MemorizeApp.editor.card1));
|
|
MemorizeApp.ui.gameEditor.appendChild(generateEditorDiv(MemorizeApp.editor.card2));
|
|
}
|
|
insertimagebuttonsFun();
|
|
MemorizeApp.ui.gameEditor.appendChild(generateAddEditRemoveButton());
|
|
MemorizeApp.ui.gameEditor.appendChild(generateClearBoth());
|
|
MemorizeApp.ui.gameEditor.appendChild(generateCardsList());
|
|
|
|
resizeTextInsideTextCardDivs()
|
|
|
|
}
|
|
|
|
function leaveEditMode() {
|
|
MemorizeApp.editor.card1 = {};
|
|
MemorizeApp.editor.card2 = {};
|
|
MemorizeApp.inEditMode = false;
|
|
MemorizeApp.ui.gameEditor.innerHTML = "";
|
|
MemorizeApp.ui.gameEditor.style.display = "none";
|
|
MemorizeApp.ui.gameGrid.style.display = "block";
|
|
|
|
/* Enable game buttons */
|
|
|
|
MemorizeApp.ui.gameTemplatesButton.disabled = false;
|
|
MemorizeApp.ui.gameTemplatesButton.style.opacity = 1;
|
|
|
|
MemorizeApp.ui.gameSizeButton.disabled = false;
|
|
MemorizeApp.ui.gameSizeButton.style.opacity = 1;
|
|
|
|
MemorizeApp.ui.gameResetButton.disabled = false;
|
|
MemorizeApp.ui.gameResetButton.style.opacity = 1;
|
|
|
|
/* Disable editor buttons */
|
|
|
|
MemorizeApp.ui.gameEditorInsertModeButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorPlayModeButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorClearButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorClearButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorButton.style.backgroundImage = "url(icons/cog.svg)";
|
|
|
|
MemorizeApp.drawGame();
|
|
}
|
|
|
|
function disableEditMode() {
|
|
/* Disable All editor buttons */
|
|
|
|
MemorizeApp.ui.gameEditorButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorButton.style.opacity = 0.3;
|
|
MemorizeApp.ui.gameEditorButton.style.backgroundImage = "url(icons/cog.svg)";
|
|
|
|
MemorizeApp.ui.gameEditorInsertModeButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorInsertModeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorPlayModeButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorPlayModeButton.style.opacity = 0.3;
|
|
|
|
MemorizeApp.ui.gameEditorClearButton.disabled = true;
|
|
MemorizeApp.ui.gameEditorClearButton.style.opacity = 0.3;
|
|
}
|
|
|
|
var Base64Binary = {
|
|
_keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
|
|
|
|
_arrayBufferToBase64: function (buffer) {
|
|
var binary = '';
|
|
var bytes = new Uint8Array(buffer);
|
|
var len = bytes.byteLength;
|
|
for (var i = 0; i < len; i++) {
|
|
binary += String.fromCharCode(bytes[i]);
|
|
}
|
|
return window.btoa(binary);
|
|
},
|
|
|
|
/* will return a Uint8Array type */
|
|
decodeArrayBuffer: function (input) {
|
|
var bytes = (input.length / 4) * 3;
|
|
var ab = new ArrayBuffer(bytes);
|
|
this.decode(input, ab);
|
|
|
|
return ab;
|
|
},
|
|
|
|
removePaddingChars: function (input) {
|
|
var lkey = this._keyStr.indexOf(input.charAt(input.length - 1));
|
|
if (lkey == 64) {
|
|
return input.substring(0, input.length - 1);
|
|
}
|
|
return input;
|
|
},
|
|
|
|
decode: function (input, arrayBuffer) {
|
|
//get last chars to see if are valid
|
|
input = this.removePaddingChars(input);
|
|
input = this.removePaddingChars(input);
|
|
|
|
var bytes = parseInt((input.length / 4) * 3, 10);
|
|
|
|
var uarray;
|
|
var chr1, chr2, chr3;
|
|
var enc1, enc2, enc3, enc4;
|
|
var i = 0;
|
|
var j = 0;
|
|
|
|
if (arrayBuffer)
|
|
uarray = new Uint8Array(arrayBuffer);
|
|
else
|
|
uarray = new Uint8Array(bytes);
|
|
|
|
input = input.replace(/[^A-Za-z0-9\+\/\=]/g, "");
|
|
|
|
for (i = 0; i < bytes; i += 3) {
|
|
enc1 = this._keyStr.indexOf(input.charAt(j++));
|
|
enc2 = this._keyStr.indexOf(input.charAt(j++));
|
|
enc3 = this._keyStr.indexOf(input.charAt(j++));
|
|
enc4 = this._keyStr.indexOf(input.charAt(j++));
|
|
|
|
chr1 = (enc1 << 2) | (enc2 >> 4);
|
|
chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
|
|
chr3 = ((enc3 & 3) << 6) | enc4;
|
|
|
|
uarray[i] = chr1;
|
|
if (enc3 != 64) uarray[i + 1] = chr2;
|
|
if (enc4 != 64) uarray[i + 2] = chr3;
|
|
}
|
|
|
|
return uarray;
|
|
}
|
|
}
|
|
|
|
|
|
return MemorizeApp;
|
|
}
|
|
)
|
|
;
|