Custom text over chessboard square about cm-chessboard HOT 5 CLOSED

The chessboard.view.svg is the main SVG element of the board. You can use Svg.addElement(chessboard.view.svg, "text", ...). Just take a look in the source code of ChessboardView, there is coded how to draw on the chessboard. The code of the coordinates draws text (Line 207).

from cm-chessboard.

Thanks for pointing me towards the relevant part. I would like to create a function in my own code that does the text over a square thing, so that it doesn't pollute your codebase. If I need to update your codebase with the latest version, it will become a mess if my code is mixed in with yours.

So, I am creating my function in my own code like this:

function showTextOverSquare() {
    const textElement = Svg.addElement('test', 'text', {
      class: cssClass,
      x: x,
      y: y,
      style: `font-size: ${this.scalingY * 10}px`,
    });
  }

That is my start anyway! For something like this to work, will I need to import CeateSvgAndGroups() to get this to work, or am I simply in over my head on this? I'm trying to break the problem down so that I understand it, but I have never tried to do something like this before.

from cm-chessboard.

I am trying to decode all this myself and it is improving my understanding of JavaScript. I have taken your ChessboardView.js file and put a ton of // comments in there so I can understand what various sections are doing. Anything I am not understanding, I am iteratively Googling it. I've got some ways to go before I can understand how to add it to my project.

from cm-chessboard.

That sounds interesting. :) The modules of the chessboard are coded in ECMA Script 6, this is a fairly new dialect of JavaScript. For the SVG rendering I use standard SVG Elements with a little helper class export class Svg which mainly converts JS to SVG Elements. The rest ist standard SVG, as described here https://www.w3.org/TR/SVG2/text.html#TextElement. If you have further questions, just ask.

from cm-chessboard.

I've finally got my solution so thought I would report back. My understanding of the DOM was weak, so I injected HTML there using insertAdjacentHTML. I just duplicated one of the nodes but with my text instead of the coordinates.

It took me weeks but now my skills are up a notch and I got there in the end!

from cm-chessboard.