Configurar Web para PGNViewer

Como visualizar partidas de ajedrez en la página Web.

Para implantar el visor PGNViewer de ChessTempo se deben seguir los siguientes pasos:

En la sección HEAD se debe incluir los siguiente

[HTML]

<script src=’http://chesstempo.com/js/pgnyui.js’ type=’text/javascript’>
</script>
<script src=’http://chesstempo.com/js/pgnviewer.js’ type=’text/javascript’>
</script>

<!– Estilos del visor –>

<style type=»text/css»>
.ct-board-container{padding:5px;}.ct-board,.ct-black_square,.ct-white_square{display:block;}.ct-board-border{border:2px solid #363A3D;}.ct-board{overflow:hidden;text-align:center;}.ct-black-square,.ct-white-square{float:left;}.ct-black-square{background-color:#666;}.ct-white-square{background-color:#8D8D8C;}.ct-nav-buttons{padding-bottom:7px;padding-top:7px;}.ct-back,.ct-forward,.ct-start,.ct-end,.ct-play,.ct-stop{vertical-align:middle;}.ct-mainline-commentary{padding-left:15px;}.ct-board-move-mainline,.ct-board-move-variation{cursor:pointer;}.ct-board-move-mainline{font-weight:700;}.ct-board-move-comment{color:green;}.ct-board-move-current{color:red;}
</style>

[/HTML]

Para ver el table con fondo de madera hay que sbuir las imagenes de los cuadros blancos y negros a la carpeta images y añadir esto debajo de lo anterior dentro de HEAD:

[HTML]

<style type=»text/css»>
#Game2-container .ct-black-square
{
background: url(«/images/dark-wood.gif») no-repeat;
}
#Game2-container .ct-white-square
{
background: url(«/images/light-wood.gif») no-repeat;
}
</style>

[/HTML]

En la página o entrada donde se quiere ver la partida se pone los siguiente:

[HTML]

[Event «ICC 1-0»]
[Site «?»]
[Date «18-05-2008»]
[Round «?»]
[White «Alex Borras»]
[Black «Juan Facundo Pierrot»]
[Result «*»]
[BlackTitle «IM»]
[ChessCat «CHESSCAT 1.0»]
[PlyCount «47»]
<script type=»text/javascript»><!–
new PgnViewer( { boardName: «Game2», pgnString: ‘[Event «ICC 1-0»] [Site «?»] [Date «18-05-2008»] [Round «?»] [White «Alex Borras»] [Black «Juan Facundo Pierrot»] [Result «*»] [BlackTitle «IM»] [ChessCat «CHESSCAT 1.0»] [PlyCount «47»] 1. d4 Nf6 2. c4 d5 3. Nc3 c6 4. e3 e6 5. Nf3 Bd6 6. Bd3 O-O 7. O-O dxc4 8. Bxc4 b5 9. Bd3 a6 10. Qe2 Bb7 11. e4 Be7 12. e5 Nd5 13. Qe4 g6 14. Bh6 Re8 15. h3 Nd7 16. Nh2 c5 17. Ng4 cxd4 18. Qxd4 Nc5 19. Ne4 Nb6? 20. Nef6+ Kh8 21. Qe3!! Qxd3?? 22. Bg7+ Kxg7 23. Qh6+ Kh8 24. Qxh7# 1-0 ‘, pieceSet: ‘condal’, pieceSize: 46} );
// –></script>

[/HTML]

Como hay que generar el código de la partida para incluir en el PGN Viewer

  1. Utilizar el programa ChessCat para generar los PGN
  2. Copiar uno o varios PGN
  3. Pegarlos en GameClean y pegar el código generado en la entrada o página que se quiere.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies