nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

simplify handling of piece images with CSS content attributes

This commit is contained in:
Jesse D. McDonald 2020-03-28 18:24:20 -05:00
parent 57b5da99b5
commit 51ee683bad
3 changed files with 46 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
css/chess.css
View File

@ -21,6 +21,16 @@ h1 {
margin-bottom: 0; margin-bottom: 0;
} }
a.plain-link {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
color: inherit;
background-color: inherit;
text-decoration: inherit;
}
.media-button-svg { .media-button-svg {
width: 12pt; width: 12pt;
height: 12pt; height: 12pt;
@ -338,4 +348,22 @@ button:disabled .silhouette {
} }
} }
img.cb-dk-piece.cb-king { content: url(../svg/Chess_kdt45.svg); }
img.cb-dk-piece.cb-queen { content: url(../svg/Chess_qdt45.svg); }
img.cb-dk-piece.cb-rook { content: url(../svg/Chess_rdt45.svg); }
img.cb-dk-piece.cb-knight { content: url(../svg/Chess_ndt45.svg); }
img.cb-dk-piece.cb-bishop { content: url(../svg/Chess_bdt45.svg); }
img.cb-dk-piece.cb-pawn { content: url(../svg/Chess_pdt45.svg); }
img.cb-lt-piece.cb-king { content: url(../svg/Chess_klt45.svg); }
img.cb-lt-piece.cb-queen { content: url(../svg/Chess_qlt45.svg); }
img.cb-lt-piece.cb-rook { content: url(../svg/Chess_rlt45.svg); }
img.cb-lt-piece.cb-knight { content: url(../svg/Chess_nlt45.svg); }
img.cb-lt-piece.cb-bishop { content: url(../svg/Chess_blt45.svg); }
img.cb-lt-piece.cb-pawn { content: url(../svg/Chess_plt45.svg); }
#cb_board.cb-reversed img.cb-knight {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
/* vim: set expandtab sw=3 ts=8: */ /* vim: set expandtab sw=3 ts=8: */

33
index.html
View File

@ -9,7 +9,7 @@
</head> </head>
<body> <body>
<div id="page"> <div id="page">
<h1>Paco Ŝako</h1> <h1><a href="." class="plain-link">Paco Ŝako</a></h1>
<div id="content"> <div id="content">
<div id="cb_outer2"> <div id="cb_outer2">
@ -238,25 +238,18 @@
<div id="cb_phantom" class="cb-phantom"></div> <div id="cb_phantom" class="cb-phantom"></div>
<div id="cb_pieces" style="display: none"> <div id="cb_pieces" style="display: none">
<div id="cb_piece_kd"><img src="svg/Chess_kdt45.svg" alt="kd" class="cb-piece cb-dk-piece cb-king"></div> <img id="cb_piece_kd" src="svg/Chess_kdt45.svg" alt="kd" class="cb-piece cb-dk-piece cb-king">
<div id="cb_piece_qd"><img src="svg/Chess_qdt45.svg" alt="qd" class="cb-piece cb-dk-piece cb-queen"></div> <img id="cb_piece_qd" src="svg/Chess_qdt45.svg" alt="qd" class="cb-piece cb-dk-piece cb-queen">
<div id="cb_piece_rd"><img src="svg/Chess_rdt45.svg" alt="rd" class="cb-piece cb-dk-piece cb-rook"></div> <img id="cb_piece_rd" src="svg/Chess_rdt45.svg" alt="rd" class="cb-piece cb-dk-piece cb-rook">
<div id="cb_piece_nd"><img src="svg/Chess_ndt45.svg" alt="nd" class="cb-piece cb-dk-piece cb-knight"></div> <img id="cb_piece_nd" src="svg/Chess_ndt45.svg" alt="nd" class="cb-piece cb-dk-piece cb-knight">
<div id="cb_piece_bd"><img src="svg/Chess_bdt45.svg" alt="bd" class="cb-piece cb-dk-piece cb-bishop"></div> <img id="cb_piece_bd" src="svg/Chess_bdt45.svg" alt="bd" class="cb-piece cb-dk-piece cb-bishop">
<div id="cb_piece_pd"><img src="svg/Chess_pdt45.svg" alt="pd" class="cb-piece cb-dk-piece cb-pawn"></div> <img id="cb_piece_pd" src="svg/Chess_pdt45.svg" alt="pd" class="cb-piece cb-dk-piece cb-pawn">
<div id="cb_piece_kl"><img src="svg/Chess_klt45.svg" alt="kl" class="cb-piece cb-lt-piece cb-king"></div> <img id="cb_piece_kl" src="svg/Chess_klt45.svg" alt="kl" class="cb-piece cb-lt-piece cb-king">
<div id="cb_piece_ql"><img src="svg/Chess_qlt45.svg" alt="ql" class="cb-piece cb-lt-piece cb-queen"></div> <img id="cb_piece_ql" src="svg/Chess_qlt45.svg" alt="ql" class="cb-piece cb-lt-piece cb-queen">
<div id="cb_piece_rl"><img src="svg/Chess_rlt45.svg" alt="rl" class="cb-piece cb-lt-piece cb-rook"></div> <img id="cb_piece_rl" src="svg/Chess_rlt45.svg" alt="rl" class="cb-piece cb-lt-piece cb-rook">
<div id="cb_piece_nl"><img src="svg/Chess_nlt45.svg" alt="nl" class="cb-piece cb-lt-piece cb-knight"></div> <img id="cb_piece_nl" src="svg/Chess_nlt45.svg" alt="nl" class="cb-piece cb-lt-piece cb-knight">
<div id="cb_piece_bl"><img src="svg/Chess_blt45.svg" alt="bl" class="cb-piece cb-lt-piece cb-bishop"></div> <img id="cb_piece_bl" src="svg/Chess_blt45.svg" alt="bl" class="cb-piece cb-lt-piece cb-bishop">
<div id="cb_piece_pl"><img src="svg/Chess_plt45.svg" alt="pl" class="cb-piece cb-lt-piece cb-pawn"></div> <img id="cb_piece_pl" src="svg/Chess_plt45.svg" alt="pl" class="cb-piece cb-lt-piece cb-pawn">
</div>
<div id="cb_flipped" style="display: none">
<img id="cb_img_nd_normal" src="svg/Chess_ndt45.svg" alt="nd">
<img id="cb_img_nl_normal" src="svg/Chess_nlt45.svg" alt="nl">
<img id="cb_img_nd_flipped" src="svg/Chess_ndt45_flip.svg" alt="nd_flip">
<img id="cb_img_nl_flipped" src="svg/Chess_nlt45_flip.svg" alt="nl_flip">
</div> </div>
</div> </div>
</div> </div>

10
js/pacosako_ui.js
View File

@ -143,7 +143,10 @@ $(function (){
function placePiece(where, side, type, suffix) { function placePiece(where, side, type, suffix) {
const code = pieceCode(side, type); const code = pieceCode(side, type);
const piece_id = 'cb_piece_' + code + '_' + suffix; const piece_id = 'cb_piece_' + code + '_' + suffix;
const piece = $($('#' + piece_id)[0] || $('#cb_piece_' + code + ' img').clone()); let piece = $('#' + piece_id);
if (piece.length < 1) {
piece = $('#cb_piece_' + code).clone().prop({ id: piece_id });
}
piece.stop(true); piece.stop(true);
piece.attr('id', piece_id); piece.attr('id', piece_id);
piece.removeClass('cb-selected'); piece.removeClass('cb-selected');
@ -548,11 +551,6 @@ $(function (){
boardElem.removeClass('cb-reversed'); boardElem.removeClass('cb-reversed');
} }
const nd_img_src = $('#cb_img_nd_' + (reversed ? 'flipped' : 'normal'))[0].src;
const nl_img_src = $('#cb_img_nl_' + (reversed ? 'flipped' : 'normal'))[0].src;
$('.cb-piece.cb-dk-piece.cb-knight').attr('src', nd_img_src);
$('.cb-piece.cb-lt-piece.cb-knight').attr('src', nl_img_src);
for (const row of rows) { for (const row of rows) {
const rowElem = $('#cb_row' + row); const rowElem = $('#cb_row' + row);
rowElem.appendTo(boardElem); rowElem.appendTo(boardElem);