Sizes fixes

Author: Piterden

package.json

@@ -1,7 +1,7 @@
 {
   "name": "chessboard-svg-image",
-  "version": "0.0.2",
-  "description": "Microservice render jpeg image of chessboard by FEN.",
+  "version": "0.0.3",
+  "description": "Chess board JPEG image generator microservice",
   "main": "src/index.js",
   "scripts": {
     "lint": "eslint --ext .js src",

src/index.js

@@ -34,6 +34,7 @@ const stubSvg = fs.readFileSync('stubs/stub.svg', { encoding: 'utf-8' })
 
 const renderSVG = (board, {
   marks = [],
+  scale,
   arrows = [],
   bgColor,
   marksSize,
@@ -59,14 +60,14 @@ const renderSVG = (board, {
     svgElements.push(makeSquare({ x, y, squareSize, squareId, color }))
 
     if (piece) {
-      svgElements.push(makePiece({ x, y, piece }))
+      svgElements.push(makePiece({ x, y, piece, scale }))
     }
 
     if (marks.includes(squareId)) {
       svgElements.push(
         piece
-          ? makeCross({ x, y, crossColor })
-          : makeDot({ x, y, squareSize, marksSize, marksColor }),
+          ? makeCross({ x, y, crossColor, scale })
+          : makeDot({ x, y, squareSize, marksSize, marksColor, scale }),
       )
     }
   }
@@ -101,6 +102,7 @@ const renderSVG = (board, {
   }
 
   return stubSvg
+    .split('{{fullWidth}}').join(squareSize * 8 + boardPadding * 2)
     .split('{{bg}}').join(bgColor)
     .split('{{board}}').join(svgElements.join(''))
 }
@@ -116,22 +118,22 @@ app.get('/:fen.jpeg', (req, res) => {
     text_color: textColor = TEXT_COLOR,
     cross_color: crossColor = CROSS_COLOR,
     marks_color: marksColor = MARKS_COLOR,
-    square_size: squareSize = SQUARE_SIZE,
     b_cell_color: bCellColor = B_CELL_COLOR,
     w_cell_color: wCellColor = W_CELL_COLOR,
-    board_padding: boardPadding = BOARD_PADDING,
   } = req.query
   const { fen = 'rnbkqbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBKQBNR' } = req.params
 
+  const boardPadding = boardSize / 26
+  const squareSize = boardPadding * 3
+  const scale = boardSize / 390
   const marks = marksList.split(',')
   const whiteBottom = !!Number(rotate)
 
   res.contentType('image/jpeg')
 
-  console.log(fen)
-
   const svg = renderSVG(Board.load(fen), {
     marks,
+    scale,
     arrows,
     bgColor,
     marksSize,
@@ -152,6 +154,7 @@ app.get('/:fen.jpeg', (req, res) => {
 
   loadSVGFromString(svg, (objects, info) => {
     const ctx = canvas.getContext('2d')
+    console.log(info)
     const scaleX = info.width ? (boardSize / info.width) : 1
     const scaleY = info.height ? (boardSize / info.height) : 1
 

src/svg.js

@@ -8,12 +8,13 @@ const makeSquare = ({ x, y, squareSize, squareId, color }) => `<rect
   fill="#${color}"
 />`
 
-const makePiece = ({ x, y, piece }) => `<use
+const makePiece = ({ x, y, piece, scale }) => `<use
   xlink:href="#${piece.side.name}-${piece.type}"
-  transform="translate(${x}, ${y})"
+  transform="translate(${x}, ${y}) scale(${scale})"
 />`
 
-const makeCross = ({ x, y, crossColor }) => `<g transform="translate(${x}, ${y})">
+const makeCross = ({ x, y, crossColor, scale }) => `<g
+  transform="translate(${x}, ${y}) scale(${scale})">
   <path
     d="M35.865 9.135a1.89 1.89 0 0 1 0 2.673L25.173 22.5l10.692 10.692a1.89 1.89 0 0 1 0 2.673 1.89 1.89 0 0 1-2.673 0L22.5 25.173 11.808 35.865a1.89 1.89 0 0 1-2.673 0 1.89 1.89 0 0 1 0-2.673L19.827 22.5 9.135 11.808a1.89 1.89 0 0 1 0-2.673 1.89 1.89 0 0 1 2.673 0L22.5 19.827 33.192 9.135a1.89 1.89 0 0 1 2.673 0z"
     fill="#${crossColor}"
@@ -22,27 +23,27 @@ const makeCross = ({ x, y, crossColor }) => `<g transform="translate(${x}, ${y})
   />
 </g>`
 
-const makeDot = ({ x, y, squareSize, marksSize, marksColor }) => `<circle
+const makeDot = ({ x, y, squareSize, marksSize, marksColor, scale }) => `<circle
   cx="${x + squareSize / 2}"
   cy="${y + squareSize / 2}"
-  r="${marksSize}"
+  r="${marksSize * scale}"
   fill="#${marksColor}"
 />`
 
 const makeScale = ({ i, boardPadding, squareSize, textColor, file, rank }) => `<text
-  transform="translate(${boardPadding + squareSize / 2 + i * squareSize - 3}, 10) scale(.65)"
+  transform="translate(${boardPadding + squareSize / 2 + i * squareSize - 3}, 10) scale(.75)"
   fill="#${textColor}"
 >${file.toUpperCase()}</text>
 <text
-  transform="translate(${squareSize + i * squareSize - 10}, ${squareSize * 8 + boardPadding * 2 - 3}) scale(.65)"
+  transform="translate(${squareSize + i * squareSize - 10}, ${squareSize * 8 + boardPadding * 2 - 3}) scale(.75)"
   fill="#${textColor}"
 >${file.toUpperCase()}</text>
 <text
-  transform="translate(4, ${squareSize + i * squareSize - 3}) scale(.7)"
+  transform="translate(4, ${squareSize + i * squareSize - 3}) scale(.75)"
   fill="#${textColor}"
 >${rank}</text>
 <text
-  transform="translate(${squareSize * 8 + boardPadding * 2 - 10}, ${squareSize + i * squareSize - 3}) scale(.7)"
+  transform="translate(${squareSize * 8 + boardPadding * 2 - 10}, ${squareSize + i * squareSize - 3}) scale(.75)"
   fill="#${textColor}"
 >${rank}</text>`