diff --git a/css/chess.css b/css/chess.css index f2ea3a5..c02b8e7 100644 --- a/css/chess.css +++ b/css/chess.css @@ -120,7 +120,7 @@ button:disabled .silhouette { margin-top: 0; } -#cb_controls, #cb_names, #cb_message, #cb_game, #cb_navigate { +#cb_controls, #cb_theme, #cb_names, #cb_message, #cb_game, #cb_navigate { margin-top: 0.5em; white-space: nowrap; } diff --git a/css/theme/pacosako.css b/css/theme/pacosako.css new file mode 100644 index 0000000..6e021ba --- /dev/null +++ b/css/theme/pacosako.css @@ -0,0 +1,45 @@ +.cb-theme-pacosako img.cb-dk-piece.cb-king { content: url(../../svg/pacosako/kd.svg); } +.cb-theme-pacosako img.cb-dk-piece.cb-queen { content: url(../../svg/pacosako/qd.svg); } +.cb-theme-pacosako img.cb-dk-piece.cb-rook { content: url(../../svg/pacosako/rd.svg); } +.cb-theme-pacosako img.cb-dk-piece.cb-knight { content: url(../../svg/pacosako/nd.svg); } +.cb-theme-pacosako img.cb-dk-piece.cb-bishop { content: url(../../svg/pacosako/bd.svg); } +.cb-theme-pacosako img.cb-dk-piece.cb-pawn { content: url(../../svg/pacosako/pd.svg); } +.cb-theme-pacosako img.cb-lt-piece.cb-king { content: url(../../svg/pacosako/kl.svg); } +.cb-theme-pacosako img.cb-lt-piece.cb-queen { content: url(../../svg/pacosako/ql.svg); } +.cb-theme-pacosako img.cb-lt-piece.cb-rook { content: url(../../svg/pacosako/rl.svg); } +.cb-theme-pacosako img.cb-lt-piece.cb-knight { content: url(../../svg/pacosako/nl.svg); } +.cb-theme-pacosako img.cb-lt-piece.cb-bishop { content: url(../../svg/pacosako/bl.svg); } +.cb-theme-pacosako img.cb-lt-piece.cb-pawn { content: url(../../svg/pacosako/pl.svg); } + +.cb-theme-pacosako .cb-piece { + position: absolute; + top: 10%; + width: calc(55% * 80 / 65); + height: 80%; +} + +#cb_board.cb-theme-pacosako .cb-lt-piece { + left: 0; + right: auto; +} + +#cb_board.cb-theme-pacosako .cb-dk-piece { + left: auto; + right: 0; +} + +#cb_board.cb-theme-pacosako.cb-reversed .cb-lt-piece { + right: 0; + left: auto; +} + +#cb_board.cb-theme-pacosako.cb-reversed .cb-dk-piece { + left: 0; + right: auto; +} + +#cb_board.cb-theme-pacosako #cb_phantom .cb-piece { + top: 15%; + left: calc((100% - (55% * 80 / 65)) / 2); + right: auto; +} diff --git a/index.html b/index.html index a78c9a0..ea256b5 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Paco Ŝako @@ -198,6 +199,13 @@ +
+ + +
vs. diff --git a/js/pacosako_ui.js b/js/pacosako_ui.js index 0b84ebc..ee311f1 100644 --- a/js/pacosako_ui.js +++ b/js/pacosako_ui.js @@ -352,6 +352,16 @@ $(function (){ } } + function applyTheme(theme) { + let cbBoard = $('#cb_board').first(); + for (const klass of cbBoard.prop('classList')) { + if (klass.match(/^cb-theme-/)) { + cbBoard.removeClass(klass); + } + } + cbBoard.addClass('cb-theme-' + theme); + } + function setVisibleGame(game, animate) { /* navigation should not include the redo stack */ visibleGame = new PS.Game(game); @@ -607,6 +617,7 @@ $(function (){ const LS_KEY_NOTIFY = 'pacosako/notify'; const LS_KEY_REVERSE = 'pacosako/reverse'; + const LS_KEY_THEME = 'pacosako/theme'; if ('localStorage' in window) { function fromStorage(key, value) { @@ -623,6 +634,16 @@ $(function (){ const cb_reverse = $('#cb_reverse')[0]; cb_reverse.checked = doReverse; arrangeBoard(doReverse); + } else if (key === LS_KEY_THEME) { + const cb_theme = $('#cb_select_theme'); + if (value !== cb_theme.val()) { + cb_theme.val(value); + if (!cb_theme.val()) { + value = 'traditional'; + cb_theme.val(value); + } + applyTheme(value); + } } } @@ -630,7 +651,7 @@ $(function (){ fromStorage(event.originalEvent.key, event.originalEvent.newValue); }); - for (const key of [LS_KEY_NOTIFY, LS_KEY_REVERSE]) { + for (const key of [LS_KEY_NOTIFY, LS_KEY_REVERSE, LS_KEY_THEME]) { const value = window.localStorage.getItem(key); if (value !== null) { fromStorage(key, value); @@ -746,6 +767,15 @@ $(function (){ renderBoard(true); }); + $('#cb_select_theme').on('change', function(){ + const theme = $('#cb_select_theme').val(); + debug('cb_select_theme changed to ' + theme); + if ('localStorage' in window) { + window.localStorage.setItem(LS_KEY_THEME, theme); + } + applyTheme(theme); + }); + $('#cb_select_game').on('change', function(){ let optIndex = $('#cb_select_game')[0].selectedIndex; if (optIndex === 0) { diff --git a/svg/pacosako/bd.svg b/svg/pacosako/bd.svg new file mode 100644 index 0000000..ea04ad1 --- /dev/null +++ b/svg/pacosako/bd.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/bl.svg b/svg/pacosako/bl.svg new file mode 100644 index 0000000..e998aed --- /dev/null +++ b/svg/pacosako/bl.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/kd.svg b/svg/pacosako/kd.svg new file mode 100644 index 0000000..87c0126 --- /dev/null +++ b/svg/pacosako/kd.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/kl.svg b/svg/pacosako/kl.svg new file mode 100644 index 0000000..72a293d --- /dev/null +++ b/svg/pacosako/kl.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/nd.svg b/svg/pacosako/nd.svg new file mode 100644 index 0000000..0ea4e93 --- /dev/null +++ b/svg/pacosako/nd.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/nl.svg b/svg/pacosako/nl.svg new file mode 100644 index 0000000..88122c6 --- /dev/null +++ b/svg/pacosako/nl.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/pd.svg b/svg/pacosako/pd.svg new file mode 100644 index 0000000..4bbcbf1 --- /dev/null +++ b/svg/pacosako/pd.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/pl.svg b/svg/pacosako/pl.svg new file mode 100644 index 0000000..f8f447e --- /dev/null +++ b/svg/pacosako/pl.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/qd.svg b/svg/pacosako/qd.svg new file mode 100644 index 0000000..ed07f91 --- /dev/null +++ b/svg/pacosako/qd.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/ql.svg b/svg/pacosako/ql.svg new file mode 100644 index 0000000..460cd62 --- /dev/null +++ b/svg/pacosako/ql.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/rd.svg b/svg/pacosako/rd.svg new file mode 100644 index 0000000..64452d6 --- /dev/null +++ b/svg/pacosako/rd.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/rl.svg b/svg/pacosako/rl.svg new file mode 100644 index 0000000..5c965c1 --- /dev/null +++ b/svg/pacosako/rl.svg @@ -0,0 +1,2 @@ + + diff --git a/svg/pacosako/unoptimized/bd.svg b/svg/pacosako/unoptimized/bd.svg new file mode 100644 index 0000000..dca420d --- /dev/null +++ b/svg/pacosako/unoptimized/bd.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/bl.svg b/svg/pacosako/unoptimized/bl.svg new file mode 100644 index 0000000..4b87172 --- /dev/null +++ b/svg/pacosako/unoptimized/bl.svg @@ -0,0 +1,82 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/kd.svg b/svg/pacosako/unoptimized/kd.svg new file mode 100644 index 0000000..622b4fe --- /dev/null +++ b/svg/pacosako/unoptimized/kd.svg @@ -0,0 +1,115 @@ + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/kl.svg b/svg/pacosako/unoptimized/kl.svg new file mode 100644 index 0000000..8180006 --- /dev/null +++ b/svg/pacosako/unoptimized/kl.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/nd.svg b/svg/pacosako/unoptimized/nd.svg new file mode 100644 index 0000000..6c4ac6d --- /dev/null +++ b/svg/pacosako/unoptimized/nd.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/nl.svg b/svg/pacosako/unoptimized/nl.svg new file mode 100644 index 0000000..a20038a --- /dev/null +++ b/svg/pacosako/unoptimized/nl.svg @@ -0,0 +1,87 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/pd.svg b/svg/pacosako/unoptimized/pd.svg new file mode 100644 index 0000000..3c9e968 --- /dev/null +++ b/svg/pacosako/unoptimized/pd.svg @@ -0,0 +1,93 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/pl.svg b/svg/pacosako/unoptimized/pl.svg new file mode 100644 index 0000000..e6503b0 --- /dev/null +++ b/svg/pacosako/unoptimized/pl.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/qd.svg b/svg/pacosako/unoptimized/qd.svg new file mode 100644 index 0000000..9804d17 --- /dev/null +++ b/svg/pacosako/unoptimized/qd.svg @@ -0,0 +1,96 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/ql.svg b/svg/pacosako/unoptimized/ql.svg new file mode 100644 index 0000000..2a35c80 --- /dev/null +++ b/svg/pacosako/unoptimized/ql.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/rd.svg b/svg/pacosako/unoptimized/rd.svg new file mode 100644 index 0000000..5c81b99 --- /dev/null +++ b/svg/pacosako/unoptimized/rd.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/svg/pacosako/unoptimized/rl.svg b/svg/pacosako/unoptimized/rl.svg new file mode 100644 index 0000000..aac039c --- /dev/null +++ b/svg/pacosako/unoptimized/rl.svg @@ -0,0 +1,94 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + +