chess-gui/chess_gui/public/js/dand.js

// (C) Roy van Lunsen

var xhr = new XMLHttpRequest();
var h1 = document.createElement('h1');
var h2 = document.createElement('h2');
var count = 1;
//var e = document.createElement('li');
//var f = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
var d = document.createElement('dl');
//var ol = document.createElement('ol');
var pn = {b:'bishop',k:'king',q:'queen',n:'knight',p:'pawn',r:'rook'};
var pp = ['White','Black'];
var statusm = ['Your turn','Opponent\'s turn','Suggestion','You failed in deceiving your opponent.','You won','You lost','Stalemate','Confirmation','Notice','Connection lost','You resigned','Opponent resigned','Server maintenance'];
var nrsuffix = ['st', 'nd', 'rd'];
var defsuffix = 'th';

//x = 25;
//console.log(x.toString(36));

if (!localStorage.init) { // Use AJAX.
if (window.localStorage) { // TODO: Might try session storage/cookies if false.
localStorage.state = S();
}
xhr.open('GET', 'board/init', true); // Returns coordinate & piece.
xhr.send(null);
xhr.onload = function () {
if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);
var ol;
var array = [];
for (var i=0; responseObject.pco.length > i; i++) {
array.push(responseObject.pco[i], responseObject.pce[i]);
G(i, responseObject.pco[i], responseObject.pce[i]);
}
localStorage.init = [array];
}
}
} else { // Use localStorage.
var ol;
var javascript = localStorage.init.split(','); // TODO: There should be a cleaner way to store/retrieve multidimensional data structures in localStorage.
for (var i=j=0; javascript.length > j; j += 2) {
//if (!localStorage.getItem(javascript[j+1])) {
if (localStorage.getItem(javascript[j]) === null && !localStorage.getItem(javascript[j+1]) && (javascript[j+1] === '' || I(javascript[j+1]) === null)) {
G(i, javascript[j], javascript[j+1]);
} else {
//console.log(javascript[j], localStorage.getItem(javascript[j]));
G(i, javascript[j], localStorage.getItem(javascript[j]), 1);
}
//}
i++;
}
}

function dragAndDrop(drag, drop) {
xhr.open('GET', 'move/' + drag + '/' + drop + '/' + localStorage.state, true);
xhr.send(null);

var h1TN = statusm[1];
var h2TN = statusm[2];
h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2);

xhr.onload = function () {
if (xhr.status === 200) {
responseObject = JSON.parse(xhr.responseText);
if (responseObject.White.status[1] === 0 && responseObject.Black.status[1] === 0) { // Legal move(s)?
count = 1;
if (responseObject.White.status.length === 6) {
if (responseObject.White.status[5] === 4) {
var h1TN = statusm[6];
var h2TN = 'Only kings can act.';
} else if (responseObject.White.status[5] === 3) {
var h1TN = statusm[6];
var h2TN = 'Turn limit exceeded.';
} else if (responseObject.White.status[5] === 2) {
var h1TN = statusm[6];
var h2TN = 'Loop limit exceeded.';
} else if (responseObject.White.status[5] === 1) {
var h1TN = statusm[4];
var h2TN = 'White took your king.';
}
} else {
var h1TN = statusm[0];
var h2TN = statusm[2];
}
h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2);

if (responseObject.Black.status.length === 6) {
if (responseObject.Black.status[5] === 4) {
var h1TN = statusm[6];
var h2TN = 'Only kings can act.';
} else if (responseObject.Black.status[5] === 3) {
var h1TN = statusm[6];
var h2TN = 'Turn limit exceeded.';
} else if (responseObject.Black.status[5] === 2) {
var h1TN = statusm[6];
var h2TN = 'Loop limit exceeded.';
} else if (responseObject.Black.status[5] === 1) {
var h1TN = statusm[5];
var h2TN = 'Black took your king.';
}
h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2);
}
// else {
//var h1TN = statusm[1];
//var h2TN = statusm[2];
//}
//h2.innerHTML = h2TN;
//document.body.insertBefore(h2, I('board'));
//h1.innerHTML = h1TN;
//document.body.insertBefore(h1, h2);

localStorage.removeItem(responseObject.White.src[0]);
localStorage.setItem(responseObject.White.dst[0], responseObject.White.src[1]);
localStorage.removeItem(responseObject.Black.src[0]);
localStorage.setItem(responseObject.Black.dst[0], responseObject.Black.src[1]);

//localStorage.setItem(responseObject.White.src[1], responseObject.White.dst[0]);
//localStorage.setItem(responseObject.Black.src[1], responseObject.Black.dst[0]);
if (responseObject.White.dst[1]) {
localStorage.setItem(responseObject.White.dst[1], undefined);
//localStorage.removeItem(responseObject.White.dst[1]);
}
if (responseObject.Black.dst[1]) {
localStorage.setItem(responseObject.Black.dst[1], undefined);
//localStorage.removeItem(responseObject.Black.dst[1]);
}

//if (responseObject.White.status[5] === 1) { // Won?
//}
//I(drag).setAttribute('src', 'i/' + responseObject.White.src[0] + '.png');
//I(drop).setAttribute('src', 'i/' + responseObject.White.src[1] + '.png');
//I(drag).id = responseObject.White.src[0];
//I(drop).id = responseObject.White.src[1];

//I(responseObject.White.src[1]).setAttribute('src', 'i/' + responseObject.White.src[0] + '.png');
//I(responseObject.White.dst[responseObject.White.dst.length-1]).setAttribute('src', 'i/' + responseObject.White.src[1] + '.png');
//I(responseObject.White.src[1]).id = responseObject.White.src[0];
//I(responseObject.White.dst[responseObject.White.dst.length-1]).id = responseObject.White.src[1];

var salt = I(responseObject.White.src[1]).getAttribute('alt');
salt = salt.substring(0, salt.length-2) + responseObject.White.dst[0];
I(responseObject.White.src[1]).setAttribute('alt', salt);
var srci = I(responseObject.White.src[0]).innerHTML; // Duplicate.
I(responseObject.White.src[0]).innerHTML = ''; // Remove.
I(responseObject.White.dst[0]).innerHTML = srci; // Add.

//I(responseObject.Black.src[1]).setAttribute('src', 'i/' + responseObject.Black.src[0] + '.png');
//I(responseObject.Black.dst[responseObject.Black.dst.length-1]).setAttribute('src', 'i/' + responseObject.Black.src[1] + '.png');
//I(responseObject.Black.src[1]).id = responseObject.Black.src[0];
//I(responseObject.Black.dst[responseObject.Black.dst.length-1]).id = responseObject.Black.src[1];

var salt = I(responseObject.Black.src[1]).getAttribute('alt');
salt = salt.substring(0, salt.length-2) + responseObject.Black.dst[0];
I(responseObject.Black.src[1]).setAttribute('alt', salt);
var srci = I(responseObject.Black.src[0]).innerHTML; // Duplicate.
I(responseObject.Black.src[0]).innerHTML = ''; // Remove.
I(responseObject.Black.dst[0]).innerHTML = srci; // Add.

if (responseObject.White.status[0] === 1) { // TODO: Replace for a (temporary) session flag whether initialized (more reliable). Also: Shall we store the move history in localStorage?
//ol.setAttribute('id', 'moves');
var section = document.createElement('section');
section.setAttribute('id', 'log');
document.body.insertBefore(section, T('script')[1]);
//d = document.createElement('ol');
section.appendChild(d);
//d.appendChild(ol);
}
var li = document.createElement('li');
var dt = document.createElement('dt');
var figure = document.createElement('figure');
figure.setAttribute('class', 'white');
var i = document.createElement('img');
var figcaption = document.createElement('figcaption');
var dd = document.createElement('dd');
d.appendChild(li);
li.appendChild(figure);
i.setAttribute('src', 'i/' + responseObject.White.src[1].substring(0, 2) + '.png');
figure.appendChild(dt);
dt.appendChild(i);
//e.setAttribute('class', 'movement');
//d = document.createElement('img');
//d.setAttribute('class', 'ooc');

//i.setAttribute('alt', f[Math.floor(responseObject.White.dst[0])] + ((responseObject.White.dst[0]) * 10 + 1 - Math.floor(responseObject.White.dst[0]) * 10));
//figcaption.appendChild(document.createTextNode(f[Math.floor(responseObject.White.src[0])] + ((responseObject.White.src[0]) * 10 + 1 - Math.floor(responseObject.White.src[0]) * 10)));
figcaption.appendChild(document.createTextNode(responseObject.White.src[0]));
dt.appendChild(figcaption);
//dd.setAttribute('class', 'old');
//li.appendChild(dd);
//dd.appendChild(document.createTextNode(f[Math.floor(responseObject.White.src[0])] + ((responseObject.White.src[0]) * 10 + 1 - Math.floor(responseObject.White.src[0]) * 10))); // Convert x-coordinate to the chess' counterpart (while avoiding (inaccurate) floats).
//var dd2 = document.createElement('dd');
//dd.setAttribute('class', 'new');
if (responseObject.White.dst.length === 2) {
var i = document.createElement('img');
i.setAttribute('class', 'black');
var figcaption = document.createElement('figcaption');
i.setAttribute('src', 'i/' + responseObject.White.dst[1].substring(0, 2) + '.png');
figure.appendChild(dd);
dd.appendChild(i);
dd.appendChild(figcaption);
figcaption.appendChild(document.createTextNode(responseObject.White.dst[0]));
} else {
dd.setAttribute('class', 'noimg');
figure.appendChild(dd);
//dd.appendChild(document.createTextNode(f[responseObject.White.dst[0])] + ((responseObject.White.dst[0]) * 10 + 1 - Math.floor(responseObject.White.dst[0]) * 10)));
dd.appendChild(document.createTextNode(responseObject.White.dst[0]));
}
d.appendChild(li);

var dt = document.createElement('dt');
var figure = document.createElement('figure');
figure.setAttribute('class', 'black');
var i = document.createElement('img');
var figcaption = document.createElement('figcaption');
var dd = document.createElement('dd');

li.appendChild(figure);
i.setAttribute('src', 'i/' + responseObject.Black.src[1].substring(0, 2) + '.png');
figure.appendChild(dt);
dt.appendChild(i);
//figcaption.appendChild(document.createTextNode(f[Math.floor(responseObject.Black.src[0])] + ((responseObject.Black.src[0]) * 10 + 1 - Math.floor(responseObject.Black.src[0]) * 10)));
figcaption.appendChild(document.createTextNode(responseObject.Black.src[0]));
dt.appendChild(figcaption);
if (responseObject.Black.dst.length === 2) {
var i = document.createElement('img');
i.setAttribute('class', 'white');
var figcaption = document.createElement('figcaption');
i.setAttribute('src', 'i/' + responseObject.Black.dst[1].substring(0, 2) + '.png');
figure.appendChild(dd);
dd.appendChild(i);
dd.appendChild(figcaption);
figcaption.appendChild(document.createTextNode(responseObject.Black.dst[0]));
} else {
dd.setAttribute('class', 'noimg');
figure.appendChild(dd);
//dd.appendChild(document.createTextNode(f[Math.floor(responseObject.Black.dst[0])] + ((responseObject.Black.dst[0]) * 10 + 1 - Math.floor(responseObject.Black.dst[0]) * 10)));
dd.appendChild(document.createTextNode(responseObject.Black.dst[0]));
}
d.appendChild(li);
} else {
var h1TN = statusm[0];
h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2);
var h2TN = statusm[3];
if (count > 1) {
if (count > 3) {
var suffix = defsuffix;
} else {
var suffix = nrsuffix[count-1];
}
h2.innerHTML = h2TN + ' for the ' + count + '<sup>' + suffix + '</sup>' + ' time.';
} else {
h2.innerHTML = h2TN;
}
document.body.insertBefore(h2, I('board'));
count++;
}
// TODO: Display status and/or sleep.
//I('title').innerHTML = responseObject.Black.src[1] + ' moves from ' + responseObject.Black.src[0] + ' to ' + responseObject.Black.dst[0];
//if (responseObject.Black.dst.length === 2) {I('title').innerHTML += ' and takes ' + responseObject.Black.dst[1]}
//I('description').innerHTML = 'Turn ' + responseObject.White.status.length + ' of white.';
//I('title').innerHTML = responseObject.Black.status[0];
//I('description').innerHTML = responseObject.Black.status[1];
} else {
var h1TN = statusm[8];
var h2TN = statusm[9];
h2.innerHTML = h2TN;
document.body.insertBefore(h2, I('board'));
h1.innerHTML = h1TN;
document.body.insertBefore(h1, h2);
}
}
}

//for (b=0; C('coord').length > b; b++) {C('coord')[b].onmousemove = function () {
//if (drag !== null && drag !== undefined) {console.log(this.x + '.' + this.y)}
//if (drag !== null && drag !== undefined) {I(this.id).style.position = 'absolute'; I(this.id).style.left = this.x + 'px'; I(this.id).style.up = this.y + 'px'}
//}}

//window.onload = function () {
//for (var b=0; C('coord').length > b; b++) {C('coord')[b].onmousedown = function () {
//event.preventDefault();
//drag = this.id;
//}}
//}