Refactored and added svg.js

Author: Piterden

.editorconfig

@@ -1,9 +1,6 @@
 # This file is for unifying the coding style for different editors and IDEs
 # editorconfig.org
 
-# PHP PSR-2 Coding Standards
-# http://www.php-fig.org/psr/psr-2/
-
 root = true
 
 [*]

.eslintrc.yaml

@@ -30,12 +30,12 @@ rules:
         - x
         - y
         - e
-  id-match:
-    - error
-    - "^(([A-Za-z0-9]+){2,})|([A-Z][A-Z_0-9]+)$"
-    -
-      properties: false
-      onlyDeclarations: true
+  # id-match:
+  #   - error
+  #   - "^(([A-Za-z0-9]+){2,})|([A-Z][A-Z_0-9]+)$"
+  #   -
+  #     properties: false
+  #     onlyDeclarations: true
   indent:
     - error
     - 2

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Denis Efremov
+Copyright (c) 2021 Denis Efremov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/index.js

@@ -19,8 +19,16 @@ const {
   BOARD_PADDING,
 } = require('./config')
 
+const {
+  makeDot,
+  makeCross,
+  makePiece,
+  makeScale,
+  makeSquare,
+} = require('./svg')
+
 const app = express()
-const stubSvg = fs.readFileSync('stub.svg', { encoding: 'utf-8' })
+const stubSvg = fs.readFileSync('stubs/stub.svg', { encoding: 'utf-8' })
 
 const renderSVG = (board, {
   marks = [],
@@ -45,16 +53,18 @@ const renderSVG = (board, {
     const color = (fileNumber + rank) % 2 ? wCellColor : bCellColor
     const squareId = `${file}${rank}`
 
-    svgElements.push(`<rect x="${x}" y="${y}" width="${squareSize}" height="${squareSize}" class="square ${squareId}" stroke="none" fill="#${color}"/>`)
+    svgElements.push(makeSquare({ x, y, squareSize, squareId, color }))
 
     if (piece) {
-      svgElements.push(`<use xlink:href="#${piece.side.name}-${piece.type}" transform="translate(${x}, ${y})"/>`)
+      svgElements.push(makePiece({ x, y, piece }))
     }
 
     if (marks.includes(squareId)) {
-      svgElements.push(piece
-        ? `<g transform="translate(${x}, ${y})"><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}" stroke="#000" stroke-width="1.688"/></g>`
-        : `<circle cx="${x + squareSize / 2}" cy="${y + squareSize / 2}" r="${marksSize}" fill="#${marksColor}"/>`)
+      svgElements.push(
+        piece
+          ? makeCross({ x, y, crossColor })
+          : makeDot({ x, y, squareSize, marksSize, marksColor }),
+      )
     }
   }
 
@@ -65,14 +75,18 @@ const renderSVG = (board, {
     const file = horizontal[whiteBottom ? 8 - i - 1 : i]
     const rank = vertical[whiteBottom ? 8 - i - 1 : i]
 
-    svgElements.push(`<text transform="translate(${boardPadding + squareSize / 2 + i * squareSize - 3}, 10) scale(.65)" fill="#${textColor}">${file.toUpperCase()}</text>`)
-    svgElements.push(`<text transform="translate(${squareSize + i * squareSize - 10}, ${squareSize * 8 + boardPadding * 2 - 3}) scale(.65)" fill="#${textColor}">${file.toUpperCase()}</text>`)
-
-    svgElements.push(`<text transform="translate(4, ${squareSize + i * squareSize - 3}) scale(.7)" fill="#${textColor}">${rank}</text>`)
-    svgElements.push(`<text transform="translate(${squareSize * 8 + boardPadding * 2 - 10}, ${squareSize + i * squareSize - 3}) scale(.7)" fill="#${textColor}">${rank}</text>`)
+    svgElements.push(makeScale({
+      i,
+      file,
+      rank,
+      boardPadding,
+      squareSize,
+      textColor,
+    }))
   }
 
-  return stubSvg.split('{{bg}}').join(bgColor).split('{{board}}').join(svgElements.join(''))
+  return stubSvg.split('{{bg}}').join(bgColor)
+    .split('{{board}}').join(svgElements.join(''))
 }
 
 app.get('/:fen.jpeg', (req, res) => {

src/svg.js

@@ -0,0 +1,55 @@
+const makeSquare = ({ x, y, squareSize, squareId, color }) => `<rect
+  x="${x}"
+  y="${y}"
+  width="${squareSize}"
+  height="${squareSize}"
+  class="square ${squareId}"
+  stroke="none"
+  fill="#${color}"
+/>`
+
+const makePiece = ({ x, y, piece }) => `<use
+  xlink:href="#${piece.side.name}-${piece.type}"
+  transform="translate(${x}, ${y})"
+/>`
+
+const makeCross = ({ x, y, crossColor }) => `<g transform="translate(${x}, ${y})">
+  <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}"
+    stroke="#000"
+    stroke-width="1.688"
+  />
+</g>`
+
+const makeDot = ({ x, y, squareSize, marksSize, marksColor }) => `<circle
+  cx="${x + squareSize / 2}"
+  cy="${y + squareSize / 2}"
+  r="${marksSize}"
+  fill="#${marksColor}"
+/>`
+
+const makeScale = ({ i, boardPadding, squareSize, textColor, file, rank }) => `<text
+  transform="translate(${boardPadding + squareSize / 2 + i * squareSize - 3}, 10) scale(.65)"
+  fill="#${textColor}"
+>${file.toUpperCase()}</text>
+<text
+  transform="translate(${squareSize + i * squareSize - 10}, ${squareSize * 8 + boardPadding * 2 - 3}) scale(.65)"
+  fill="#${textColor}"
+>${file.toUpperCase()}</text>
+<text
+  transform="translate(4, ${squareSize + i * squareSize - 3}) scale(.7)"
+  fill="#${textColor}"
+>${rank}</text>
+<text
+  transform="translate(${squareSize * 8 + boardPadding * 2 - 10}, ${squareSize + i * squareSize - 3}) scale(.7)"
+  fill="#${textColor}"
+>${rank}</text>`
+
+module.exports = {
+  makeDot,
+  makeCross,
+  makePiece,
+  makeScale,
+  makeSquare,
+}