Cкрипт Для Диаграмм

здорово!

 

Поскольку вася тоже юзает полторы лисы (FF 1.5) отвечу за него что все кнопки уже на месте

 

Можно ли непрограммисту упростить задачу представления интересной диаграммы на Форум, а именно - использовать диаграмму, нарисованную в Chess Assistant?

 

копируешь FEN, вставляешь в форум...

 

Я имею в виду действия, которые нужно выполнить, чтобы диаграмму, составленную в СА, представить на форум. Хотелось бы получить разъяснения на понятном русском языке, а не на программистском слэнге, типа "копируешь FEN, вставляешь в форум.."
Кроме того, над рамкой набираемого сейчас мною текста располо-жены таинственные значки, смысл которых не объясняется. Они тоже - для высокоумных?
Затрону, кстати, тему "простоты", раз уж мы говорим о языке. В молодости простота кажется серостью, и интеллектуальная моло-дёжь разбавляет свою речь малодоступными для непосвящённых наворотами, типа ИМХО (имею мнение - хрен отнимешь!?) или загадочными значками, вроде и т.п. С возрастом вкусы меняются, и человек возвращается к истокам - ясной, точной и прозрачной, как родниковая вода, русской речи. "Аркадий, не говори красиво..." Впрочем, крылатые выражения на иноземных языках, если они общепонятны и применяются к месту и в меру, речь украшают. Может быть, модераторам стоило бы начать тему "Словарь (тезаурус) современных выражений, сокращений (аббревиатур) и знаков, употребляемых интернетовским сообществом". Это было бы интересно и полезно - для уплотнения общения.

 

Модератору Vasa - личное спасибо! Попробую разобраться...

 

Krey, не сочти за наглость, но ... я немного поправил твой скрипт "fen2diag", (как для творческой натуры - немогу без креатуры!), теперь он стал в два раза меньше и количество рисунков-фигур также уменьшилось вдвое ! Скачать комплект можно тут.
Как тебе такой вариант?

Код:

function fen2diag(fen)
{var result='<table border="2" bordercolor="black" cellpadding="2" cellspacing="2"><tr><td><table border="0" cellpadding="0" cellspacing="0"><tr><td nowrap background="img/fon.gif" width="216" height="216">';
var LEN=fen.length; var i, count=0; var currChar; var control=0, aux="";
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar==' ')
break;
else aux +=currChar;}
fen=aux;
LEN=fen.length;
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar > '0' && currChar < '9')
control +=parseInt(currChar);
else
{switch (currChar) {case 'K': case 'Q': case 'R': case 'B': case 'N': case 'P':
case 'k': case 'q': case 'r': case 'b': case 'n': case 'p':
control++;
break;
case '/':continue;
default:
control +=100;}}}
if(control !=64)
{fen="8/8/8/8/8/8/8/8";
LEN=fen.length;}
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar > '0' && currChar < '9')
{for(t=0; t < parseInt(currChar); t++)
{result +='<IMG SRC="img/0.gif">';}}
else if(currChar=='/')
{count++;
result +="<br />";}
else if(currChar==' ')
{break;}
else
{result +='<IMG SRC="img/';
switch (currChar) {case 'K': case 'Q': case 'R': case 'B': case 'N': case 'P':
result +=currChar ;
break;
case 'k': case 'q': case 'r': case 'b': case 'n': case 'p':
result +=currChar.toUpperCase() + 1;
break;}
result +='.gif">';}}
result +="</td></tr></table></td></tr></table>";
return result;}

Пробовал делать мой движок?

 

Вот сделал ещё одну версию скрипта, ещё более облегчённого (без рисунка-фона), разметка полей делается цветом бэкграунда ячеек.
Проводил интересный эксперимент - запускал на разных браузерах этот скрипт на полную мощь. Дал задание построить сразу 600 диаграмм (это веб-страница всего 56 Кб), - проц грузился на все 100 - результат:
Безнадёжно зависла Opera 9 - а жаль...
IE 6 задумался на полминуты,
Поразиллллла Mozillllla FireFox 2 - всего 5 сек. и готово! Вот это ядрышко исполняющее!
А сотню диаграмм - все почти одинаково.
Вот сурс.

Код:

function fen2diag(fen)
{var result='<table align=center border="2" bordercolor="black" cellpadding="2" cellspacing="2"><td><table border="0" cellpadding="0" cellspacing="0"><tr>';
var LEN=fen.length; var i, c 
count=0; var currChar; var control=0, aux="";
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar==' ')
break;
else aux +=currChar;}
fen=aux;
LEN=fen.length;
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar > '0' && currChar < '9')
control +=parseInt(currChar);
else
{switch (currChar) {case 'K': case 'Q': case 'R': case 'B': case 'N': case 'P':
case 'k': case 'q': case 'r': case 'b': case 'n': case 'p':
control++;
break;
case '/':continue;
default:
control +=100;}}}
if(control !=64)
{fen="8/8/8/8/8/8/8/8";
LEN=fen.length;}
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar > '0' && currChar < '9')
{for(t=0; t < parseInt(currChar); t++)
{result +='<td bgcolor="';
count++;
if( (count%2)==0 )
{result +='#C0C0C0';}
else
{result +='#FFFFFF';}
result +='"><IMG SRC="img/0.GIF"></td>';}}
else if(currChar=='/')
{count++;
result +="</tr><tr>";}
else if(currChar==' ')
{break;}
else
{count++;
if( count%2==0 )
{c='#C0C0C0';}
else
{c='#FFFFFF';}
result +='<td bgcolor="'+c+'"><IMG SRC="img/';
switch (currChar) {case 'K': case 'Q': case 'R': case 'B': case 'N': case 'P':
result +=currChar ;
break;
case 'k': case 'q': case 'r': case 'b': case 'n': case 'p':
result +=currChar + 1;
break;}
result +='.GIF"></td>';}}
result +="</table></td></table>\n";
return result;}

 

И с хвостиком у фэна всё прекрасно работает, обе версии - ОК !
Если надо сразу комплект - качай тут.

 

Главное новшество - количество используемых рисунков-фигур меньше в 2 раза.
Может быть стоит ещё сделать такой прикол, чтобы клик левой по диаграмме увеличивал её на 10 процентов, ещё клик - ещё больше, и без потери качества.
А клик правой менял цвет клеток, нужны ли такие декорации?

 

М-да, давно тут не был...
Но я без дела не сидел.
Думал думу в тему темы, и вот шо сотворил.
Пожалуй это будет самый простой и доступный метод публикации диаграмм на сайтах.
Пробуйте скрипт, который ищет на странице все FEN и рисует под ними диаграммы.
И без всяких серверных скриптов, новых тегов, лишних кнопок...
Качайте тут, испытывайте, жду комментов.
Внимание скрипт надо добавлять только в конец:

Код:

<SCRIPT language=javascript src="fen2diag.js"></SCRIPT>
</body>
</html>

 

JS решение конечно более привлекательно хотя бы по той причине что нагрузка на сервер заметно падает. Миша, а ну потестируй!

 

В Firefox ?
Какой версии?
У меня всё везде работает!
А сегодня я этот маленький скрипток :

Код:

window.onload=function()
{
document.body.innerHTML=document.body.innerHTML.replace(/(\w+\/\w+\/\w+\/\w+\/\w+\/\w+\/\w+\/\w+)/g,"$1<var>$1</var>"); var fens=document.getElementsByTagName('var');
for (var fe=0;fe<fens.length;fe++) {fens[fe].innerHTML=fen2diag(fens[fe].innerHTML);}
};

...прикрутил к любимой Опере 9.20, как пользовательский, и зашёл сюда.
Всё вышло, вот только диаграмма была неотстилизирована хорошо, тут в голове до сих пор старая версия fen2diag.js .
Скрипт легко переделать и исполнять на другие события, клик, даблклик, выделение.
Ещё сделаю яваскриптом статичную диаграмму возле формы внизу справа. На ней можно будет расставить фигуры и отправить в форму. Уже есть демо...
Но кто всё это сюда загрузит?..

 

Если в фаере не работает, я решительно против!

 

"Для уплотнения общения"? А есть чего уплотнять-то? Чего-то не наблюдается!

 

В FireFox тоже всё работает !
А сегодня доделал автономный юзерский скрипт для Оперы. Причём фигуры-рисунки уже включены в тело скрипта (ура base64 !), а сама диаграмма есть пустой таблицей, но с бэкграундом - таким образом удаётся избежать конфликтов и багов со стилями.
Вот:

Код:

function f2d(fen)
{var result='<table style="border-width:2px;border-style: solid;border-color: #000;background-color:White;" cellpadding="2" cellspacing="2"><td style="border:0;margin:0 0 0 0;padding:0 0 0 0;"><table border="0" cellpadding="0" cellspacing="0"><tr>';
var LEN=fen.length;
count=0; var currChar; var control=0, aux="";
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar==' ')
break;
else aux+=currChar;}
fen=aux;
LEN=fen.length;
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar > '0' && currChar < '9')
control+=parseInt(currChar);
else
{switch (currChar) {case 'K': case 'Q': case 'R': case 'B': case 'N': case 'S': case 'P':
case 'k': case 'q': case 'r': case 'b': case 'n': case 's': case 'p':
control++;
break;
case '/':continue;
default:
control+=100;}}}
if(control !=64)
{fen="8/8/8/8/8/8/8/8";
LEN=fen.length;}
for(i=0; i < LEN; i++)
{currChar=fen.charAt(i);
if(currChar > '0' && currChar < '9')
{for(t=0; t < parseInt(currChar); t++)
{result+='<td style="border: none; margin-bottom: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; height: 27px; width: 27px;"';
count++;
if( (count%2)==0 )
{result+=' bgcolor="#C0C0C0"';}
result+='>&nbsp;</td>';}}
else if(currChar=='/')
{count++;
result+="</tr><tr>";}
else if(currChar==' ')
{break;}
else
{result+='<td style="background-image: url(';count++;
switch (currChar) {case 'K': case 'Q': case 'R': case 'B': case 'N': case 'S': case 'P': case 'k': case 'q': case 'r': case 'b': case 'n': case 's': case 'p':
if(currChar=='P') {result +='data:image/gif;base64,R0lGODlhGwAbALsAAP///8zMzCQkJN7e3oqKildXVzMzM2ZmZqurq/Dw8Hh4eEVFRf8AAAAAAAAAAAAAACH5BAEAAAwALAAAAAAbABsAAASIkMlJq704651C2iAiHAICagKgCicWLCqwBO0lDMDA1tZRAIUDj6JT4AaK25Bxi6l0w8DBGTvQagEFVaW41lLbHQ9hwD0NpmXhp1ovdYRELEFQtnRmKr7V3D7FGgQEfk6CIGCEMYAYBolOBhsvjjEzG42TAJAbAoKdnp6LFwMBpKWmpQNLqqsTEQA7';}
if(currChar=='p') {result +='data:image/gif;base64,R0lGODlhGwAbALsAAAAAAMzMzBISEt7e3iQkJKurq1dXV/Dw8IqKimZmZv8AAAAAAAAAAAAAAAAAAAAAACH5BAEAAAoALAAAAAAbABsAAARlUMlJq704633C2WABjAWoCSMgmFiQjgF7oeMqW0ma3NRAp4IBT/F72WSu1yuGVC55ReBQ5CwNDUrD0OdUCVncrpcVdR41CLESASKoXwTQW7lJzmGbe6qtj28GAYGCg4JfQ4eIChEAOw==';}
if(currChar=='R') {result +='data:image/gif;base64,R0lGODlhGwAbALsAAP///8zMzIqKikVFRWZmZgAAACQkJBISEt7e3qurq5mZmTMzM1dXV/8AAAAAAAAAACH5BAEAAA0ALAAAAAAbABsAAASisMlJq7046xr67MHnaYEhDEIToEN4CkaYrcBLCPWNAi05AAGBMAAUCoi92QLEbAaWGsThMKhar4MpYoMwEADgcJhg2G4kjIJ6vWacKTQxOPlW/eQ8WT0up7/5Yn5ngGGCG4Rzem8EVFhZBHUNBF94YJNvCgdGm5sHCmcCBE5NN6A4lWFCGgkDBgaOWK4DCRhCqJWqFy+cvEYoM6PBipHExRcRADs=';}
if(currChar=='r') {result +='data:image/gif;base64,R0lGODlhGwAbALsAAAAAAMzMzEVFRYqKiv///yQkJGZmZqurq97e3hISEpmZmXh4eFdXV/8AAAAAAAAAACH5BAEAAA0ALAAAAAAbABsAAASZsMlJq7046xr67MHnaQFgDk1phoMJhJkKCIPhGoPgwpjs/kDeJVAYGI/IY0FoQRQOoGj0UEBsnDOBdqsFVDcThoFALhMMDDAlkOBuE8yNL6j+AH9x0n1Xl8zxfSl7K4EGC2ZlCwZ9Nm5cAItgCgJSlQIKYDlJmzSZg0AoGQcCRYimAwUCBxgtXo5uBSesn4OhQ5W4IIG7vBgRADs=';}
if(currChar=='S' || currChar=='N') {result +='data:image/gif;base64,R0lGODlhGwAbAMwAAP///8zMzIqKikVFRd7e3qurqyQkJPDw8AAAAGZmZpmZmTMzM3h4eL29vVdXVxISEv8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAbABsAAAXkICSOZGmeaKqWRUEeayosBgE1iBubikAYhZqhEdiRCA6AApEAFBaDRwK2KyACCUUDEBgADoyHTnVYFLaA9Ff9Y6wEBUCiqa6nxapBwHG12wMPVCcGAA4Bdl52cygCAn5phHYHCIIjBAuPSnR2C24lNY9LcX4KBiUKDAQEdQIGCQyOfgQINiN6oGkLAiILh485JIZxBwB6IgGRj7okDUlYAgoiBA9ojwOeIwwIOQMiB0CZaQPdJgQ+IgOr4cXkKQ4K6+LtJ2Xx8io99uwqAgON/wABGphn4kCAgwgTKqxlpKHDFCEAADs=';}
if(currChar=='s' || currChar=='n') {result +='data:image/gif;base64,R0lGODlhGwAbAMwAAAAAAMzMzEVFRf///xISEqurq/Dw8N7e3iQkJGZmZoqKijMzM3h4eJmZmb29vVdXV/8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAbABsAAAXeICSOZGmeaKqWRUEaa6oAyAE5gBubDQAQBYLPEdiRDj7AIikQEBKwXcEXmPoSAwMDGDMIaUkfojA4IBir2cOACCcXhwE31RwE3OGFnRA9PRNtYQGBAAoDCQkoM3g+A2EEWQB9I0iMAAxWSWQLaCWEeE5uWA0IJT0/bk8MeJBINiMCAAcPYQoiS3gGjjoiD2NKP0UQd4wBAwu2IzgAAjgNIgdfeMYCnSOrBAQCIl6WANTbJgcKr7iW4Cu03t8DTSoG61Tt4Sin6+gy8QAJCgj0JwYCCBxIsOArIwgTpggBADs=';}
if(currChar=='B') {result +='data:image/gif;base64,R0lGODlhGwAbALsAAP///0VFRTMzM8zMzIqKinh4eCQkJAAAAJmZmd7e3qurq/Dw8FdXV2ZmZhISEv8AACH5BAEAAA8ALAAAAAAbABsAAASl8MlJq7046/0I/wZhfNrAAMxAZkIgrGzzwpagAMpMP4kN/LkEbWBIAH+JIqz4AxyaxFXvhzhYET8dZxBoOr0BFcngJXhHqwDWSw3QAgyCXM5w7wyIgR6B3nX1AwB2NAUHLQEuBwU7AgIFcwWNOxINhQUNJASILgEFnQMHA56ehwEeFQIAC1ALCwIEqQuBP6taEgiHpQ4KDwoOm7kIH2ITxJPHyA8RADs=';}
if(currChar=='b') {result +='data:image/gif;base64,R0lGODlhGwAbALsAAAAAAEVFRSQkJDMzM4qKiv///8zMzBISEnh4eGZmZqurq97e3pmZmf8AAAAAAAAAACH5BAEAAA0ALAAAAAAbABsAAASSsMlJq704690I/wdwfJoBnAaZDcCgru17sacrS4tw7sIiG6ETYXfwqXS7wg4gUC12hIKUsVOZlsplirQEDJevQHcZkIkThnQCUL4JEoR4onlrtAJ4cR2hkPoVCDcDYmQ2NwkIAAgJJARIAgEIAQeJCAeRAY8eFUFjXp4nIxUMkAE0IgoNCp2DmQwfWxOxdbS1DREAOw==';}
if(currChar=='Q') {result +='data:image/gif;base64,R0lGODlhGwAbAMwAAP///8zMzIqKikVFRTMzMyQkJJmZmVdXV6urq97e3gAAABISEmZmZvDw8L29vXh4eP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAbABsAAAX/ICSOZGmeaKqaSTI+yjO2qygQBAIFBHAEEANOgDoMXINGYCAqBArIQIOZGBxGDEOiALnlRI6BQ4QYQggJBEPEEDi4kMSCpCAtXGeHYM3+ihRjO4BgdWQEfCM8IwVXXQdEEAdwZ0AlCQoGIgMEIgcIjQRMQQqVJQRwAwaZBQBcqqIFnCcLBg9LAJw9TLoBDwaTJUkEBgM+BgcAWcipuigMAQELqQ8LRgcKAggDC9CIJQIHDdeSCgUICwrSCsgCkCYIBQMDAgD19g31AgULCzooBfgCIGhHsB2CAAAaADNhYAGBRwIMQAtgoN0BArRWsAKQYKLHBPUWnogVDyJBI6dEN5rYaK8jSHutaixgMECBglDyaioYwGCOCngSYQqlmDEFjwJtDnqsyCBWKRUCCxI8WKOq1asoQgAAOw==';}
if(currChar=='q') {result +='data:image/gif;base64,R0lGODlhGwAbAMwAAAAAAEVFRf///8zMzIqKijMzM5mZmRISEqurq97e3iQkJGZmZldXV729vXh4ePDw8P8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAbABsAAAX/ICSOZGmeaKqaSTI6gDO2q0gAAAINODBABhwBxQi4AriAqHdMQhIBxmiBU0BuOVEj0BAhhJACbiGiAqzPAwlAOrjC42lBt+zuAPYG21sgkwYFIwBSVwBDEAx7YT8lCQAGS3uJhDgiQYwlAGoQOJAKZ0CVEAeKJaQOPACBPXA+MJsmSI89QZ20TidmpDi7PbxxJ1i+w8SHJl89BQHLzAFiPXQnBwQPAtbX2AIJBrAnBgwEC8vPqssLBAyQKqoOBA0D8PEEDkg1CtYJ8AgEBvHWaCoUfDrQjBkpgTV8ZFvIYwWCOQTG9WBG4KE6FICIaSyAScWAfQRCikTQsYbJkyhJAoQAADs=';}
if(currChar=='K') {result +='data:image/gif;base64,R0lGODlhGwAbAMwAAP///8zMzEVFRQAAAIqKiiQkJFdXV6urqxISEpmZmTMzM3h4ePDw8GZmZt7e3r29vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAbABsAAAXXICSOZGmeaKquUMO+wRC86iEMwkGrw67GM5+JYCAICL6FwJAQIQBQhMgoaARLh8IhEEgIblAATpDgZnWkQCEcDiAOgAMiwIYWrhADvA5wrAsOfHEGJAJ0gg0JDYIAAQKFD4xAjA+PIwkGjGKaTCUKi2wOXDIBgWwNCicKBkoDCl+wXwoIRwapKAsGDJpQDKwqDgK9XMRcuwACDisICgVfBNDQXwWzLE+8UStqRgUD3t8DzgsFDyrjCwHHdQwBBAULKgkIRVvFZkYDSNoJRLFLBGWECBx4IgQAOw==';}
if(currChar=='k') {result +='data:image/gif;base64,R0lGODlhGwAbAMwAAAAAAMzMzEVFRf///4qKiqurq5mZmWZmZiQkJDMzMxISEldXV3h4eN7e3r29vfDw8P8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAABAALAAAAAAbABsAAAXuICSOZGmeaKqu0MG+ARC8aiEAQkGrwK7GM5+JsCAICD6GYGEQKQaEh0JkFByCpQKiEAgYBLcGQCxIGLqGbSmAGAQOx0dAUagrAg/ldYDAQhYFDgCDAHQNbX0FhIMOBQskAgEEi4MNBwYHYpQEAQKQDgaUAAsxDguigZ4jBgsDB5RPAAOiBwNMJQm1rwlgBLNQYAkAtQwJJ7wPA25oMl0BygNlKQwICqKUCAgMKmIJDAQOzs4ESmMrsgMNXQUEZ13KPecIhWD1YNbzK0DQ/PylKsXYBSNUj0ABbyoMWLsmCok+A0TsLWnnR4jFiyNCAAA7';}
break;}
result+=') !important;';
if( (count%2)==0 ) {result+='background-color:silver;';}
result+='border: none; margin-bottom: 0px; margin-top: 0px; margin-left: 0px; margin-right: 0px; padding-top: 0px; padding-right: 0px; padding-left: 0px; padding-bottom: 0px; height: 27px; width: 27px;">&nbsp;</td>';}}
result+="</tr></table></td></tr></table>\n";
return result;}
window.onload=function()
{document.body.innerHTML=document.body.innerHTML.replace(/(\w+\/\w+\/\w+\/\w+\/\w+\/\w+\/\w+\/\w+)/g,"$1<var>$1</var>"); var fens=document.getElementsByTagName('var');
for (var fe=0;fe<fens.length;fe++) {fens[fe].innerHTML=f2d(fens[fe].innerHTML);}};

 

Можно также апробировать insertHTML или document.createElement(TAG) - тоже вариант.
Чего бы мне ишо такого сделать ?

Видишшшшшь деахрамху, а я вижюю! кочай спиркт.js
6Q1/7p/3P1Ps1/1KPRbr2/pp1pkpP1/3rpR2/2P2p1P/5s1B
#4 1st PRIZE(обещали 100$, но не дали) 'M.VUCKCHEVICH - 60', 2000 , - MY FIRST BIG WIN IN A GREATE COMPITISHION !

 

Подскажите, пожалуйста, почему на сайте http://kasparovchess.crestbook.com/krey/ не удается задать другой размер диаграмм, а также другой набор фигур, кроме дефолтного?