Nice
very cute kittens
Changing piece look!
Sort:
This is a very cool idea; any updates?
I wish I knew more about css and web since customization like this is possible!
Monstrop wrote:
Hi thanks for the idea, but this was not working for me so I took a look via chrome devtools.
For information I am using chrome browser and sea ice theme.
First of all document.getElementById("piece-2"); always return a null value.
But what I see is that style of the pieces are in some <style> tag (the name of the style tag change depending on the game mode), what is interessant is that the images of the piece are pure css with class structured like that .piece.{letter_of_piece_color}{letter_of_the_piece} (for exemple for black king : .piece.bk).
An exemple of a css class representing the attributes of the board and the pieces :
#board-vs-personalities, .fade-in-overlay { background-image: url("https://images.chesscomfiles.com/chess-themes/boards/bubblegum/150.png"); }
.coordinate-light { fill: #f9cdd3; } .coordinate-dark { fill: #fff3f3; } .highlight { background-color: #de5d6f; }
#board-vs-personalities .piece.wp, #board-vs-personalities .promotion-piece.wp { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/wp.png"); }#board-vs-personalities .piece.wn, #board-vs-personalities .promotion-piece.wn { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/wn.png"); }#board-vs-personalities .piece.wb, #board-vs-personalities .promotion-piece.wb { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/wb.png"); }#board-vs-personalities .piece.wr, #board-vs-personalities .promotion-piece.wr { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/wr.png"); }#board-vs-personalities .piece.wq, #board-vs-personalities .promotion-piece.wq { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/wq.png"); }#board-vs-personalities .piece.wk, #board-vs-personalities .promotion-piece.wk { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/wk.png"); }#board-vs-personalities .piece.bp, #board-vs-personalities .promotion-piece.bp { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/bp.png"); }#board-vs-personalities .piece.bn, #board-vs-personalities .promotion-piece.bn { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/bn.png"); }#board-vs-personalities .piece.bb, #board-vs-personalities .promotion-piece.bb { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/bb.png"); }#board-vs-personalities .piece.br, #board-vs-personalities .promotion-piece.br { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/br.png"); }#board-vs-personalities .piece.bq, #board-vs-personalities .promotion-piece.bq { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/bq.png"); }#board-vs-personalities .piece.bk, #board-vs-personalities .promotion-piece.bk { background-image: url("https://images.chesscomfiles.com/chess-themes/pieces/bubblegum/150/bk.png"); }
So I try an other approach :
Simply add some css rules to change the image of the pieces at the loading of the page. To do so you must set the new attribute to important so this way, it will be use instead of the classic one.
Here is an example with the images you want to use for your knight :
(function() {
var styles = `
.piece.wn{
background-image:url(\"https://images.chesscomfiles.com/proxy/i.im.ge/2021/10/18/o22Na8.png\/https/6f42d80ddc") !important;
}
.piece.bn{
background-image:url(\"https://images.chesscomfiles.com/proxy/i.im.ge/2021/10/18/o22PAh.png\/https/c22a2f3530") !important;
}
`
var styleSheet = document.createElement("style")
styleSheet.type = "text/css"
styleSheet.innerText = styles
document.head.appendChild(styleSheet)
})();
What was your browser ? I am curious to know how your script is working.
By the way their is probably a more clean way to this but i think this a relatively simple to understand and easy to use.
Please let me know if some of you see another approach or want to go deeper (or if that is not clear).
Hi!
I am doing some streaming for chess recently so I decided to do something interesting on Chess.com
You all know that chess.com has very limited customization on your board and pieces. So basically I am using third party plugin, with some very basic javascript, replacing the piece picture with my own.
it look like this! I have my own kitty knight.
I am using Tampermonkey, a chrome plugin, which I think there are more other plugin can do the same.
The coding is still very buggy. I think I will publish a better one later. But currently it looks like this
(function() {
'use strict';
var div = document.getElementById("piece-2");
var div2 = document.getElementById("piece-7");
var div3 = document.getElementById("piece-26");
var div4 = document.getElementById("piece-31");
var img = document.createElement("img");
var img2 = document.createElement("img");
var img3 = document.createElement("img");
var img4 = document.createElement("img");
var oh = div.offsetHeight;
img.src = "https://i.im.ge/2021/10/18/o22Na8.png";
img.width=oh;
img.height=oh;
img2.src = "https://i.im.ge/2021/10/18/o22Na8.png";
img2.width=oh;
img2.height=oh;
img3.src = "https://i.im.ge/2021/10/18/o22PAh.png";
img3.width=oh;
img3.height=oh;
img4.src = "https://i.im.ge/2021/10/18/o22PAh.png";
img4.width=oh;
img4.height=oh;
div.style.cssText="";
div.appendChild(img);
div2.style.cssText="";
div2.appendChild(img2);
div3.style.cssText="";
div3.appendChild(img3);
div4.style.cssText="";
div4.appendChild(img4);
function displayWindowSize(){
oh = div.offsetHeight;
img.width=oh;
img.height=oh;
img2.width=oh;
img2.height=oh;
img3.width=oh;
img3.height=oh;
img4.width=oh;
img4.height=oh;
}
window.addEventListener("resize", displayWindowSize);})();
Cheeeers everyone! Have a nice day!