Skip to content

Commit 3e1d4a3

Browse files
PiterdenPiterden
committed
Added separ. stub
1 parent f3f00a4 commit 3e1d4a3

File tree

6 files changed

+215
-41
lines changed

6 files changed

+215
-41
lines changed

‎.eslintrc.yaml

-6
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,6 @@ rules:
3030
- x
3131
- y
3232
- e
33-
id-match:
34-
- error
35-
- "^(([A-Za-z0-9]+){2,})|([A-Z][A-Z_0-9]+)$"
36-
-
37-
properties: false
38-
onlyDeclarations: true
3933
indent:
4034
- error
4135
- 2

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
MIT License
22

3-
Copyright (c) 2018 Denis Efremov
3+
Copyright (c) 2021 Denis Efremov
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎src/config.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const FILES = 'abcdefgh'
2+
const BG_COLOR = '212121'
3+
const BOARD_SIZE = 512
4+
const MARKS_SIZE = 5
5+
const TEXT_COLOR = 'e5e5e5'
6+
const CROSS_COLOR = 'ff2500'
7+
const MARKS_COLOR = 'aaa23b'
8+
const SQUARE_SIZE = 45
9+
const B_CELL_COLOR = 'b58863'
10+
const W_CELL_COLOR = 'f0d9b5'
11+
const BOARD_PADDING = 15
12+
13+
module.exports = {
14+
FILES,
15+
BG_COLOR,
16+
BOARD_SIZE,
17+
MARKS_SIZE,
18+
TEXT_COLOR,
19+
CROSS_COLOR,
20+
MARKS_COLOR,
21+
SQUARE_SIZE,
22+
B_CELL_COLOR,
23+
W_CELL_COLOR,
24+
BOARD_PADDING,
25+
}

‎src/index.js

+54-34
Original file line numberDiff line numberDiff line change
@@ -5,70 +5,88 @@ const express = require('express')
55
const { StaticCanvas, loadSVGFromString, util: { groupSVGElements } } = require('fabric').fabric
66
const { Board } = require('chess/dist/board')
77

8+
const {
9+
FILES,
10+
BG_COLOR,
11+
BOARD_SIZE,
12+
MARKS_SIZE,
13+
TEXT_COLOR,
14+
CROSS_COLOR,
15+
MARKS_COLOR,
16+
SQUARE_SIZE,
17+
B_CELL_COLOR,
18+
W_CELL_COLOR,
19+
BOARD_PADDING,
20+
} = require('./config')
21+
22+
const {
23+
makeDot,
24+
makeCross,
25+
makePiece,
26+
makeScale,
27+
makeSquare,
28+
} = require('./svg')
29+
830
const app = express()
9-
const stubSvg = fs.readFileSync('stub.svg', { encoding: 'utf-8' })
10-
11-
const W_CELL_COLOR = 'f0d9b5'
12-
const B_CELL_COLOR = 'b58863'
13-
const BG_COLOR = '212121'
14-
const TEXT_COLOR = 'e5e5e5'
15-
const MARKS_COLOR = 'aaa23b'
16-
const MARKS_SIZE = 7
17-
const BOARD_SIZE = 512
18-
const SQUARE_SIZE = 45
19-
const BOARD_PADDING = 15
20-
const FILES = 'abcdefgh'
31+
const stubSvg = fs.readFileSync('stubs/stub.svg', { encoding: 'utf-8' })
2132

2233
const renderSVG = (board, {
2334
marks = [],
2435
bgColor,
2536
marksSize,
2637
textColor,
38+
crossColor,
2739
marksColor,
2840
bCellColor,
2941
wCellColor,
3042
squareSize,
3143
whiteBottom,
44+
boardPadding,
3245
}) => {
3346
const svgElements = []
3447

3548
for (let i = 0; i < board.squares.length; i += 1) {
3649
const { file, rank, piece } = board.squares[i]
3750
const fileNumber = FILES.indexOf(file) + 1
38-
const x = ((whiteBottom ? 9 - fileNumber : fileNumber) - 1) * squareSize + BOARD_PADDING
39-
const y = ((whiteBottom ? rank : 9 - rank) - 1) * squareSize + BOARD_PADDING
51+
const x = ((whiteBottom ? 9 - fileNumber : fileNumber) - 1) * squareSize + boardPadding
52+
const y = ((whiteBottom ? rank : 9 - rank) - 1) * squareSize + boardPadding
4053
const color = (fileNumber + rank) % 2 ? wCellColor : bCellColor
4154
const squareId = `${file}${rank}`
4255

43-
svgElements.push(`<rect x="${x}" y="${y}" width="${squareSize}" height="${squareSize}" class="square ${squareId}" stroke="none" fill="#${color}"/>`)
56+
svgElements.push(makeSquare({ x, y, squareSize, squareId, color }))
4457

4558
if (piece) {
46-
svgElements.push(`<use xlink:href="#${piece.side.name}-${piece.type}" transform="translate(${x}, ${y})"/>`)
59+
svgElements.push(makePiece({ x, y, piece }))
4760
}
61+
4862
if (marks.includes(squareId)) {
49-
if (piece) {
50-
svgElements.push(`<use xlink:href="#xx" transform="translate(${x}, ${y})"/>`)
51-
} else {
52-
svgElements.push(`<circle cx="${x + squareSize / 2}" cy="${y + squareSize / 2}" r="${marksSize}" fill="#${marksColor}"/>`)
53-
}
63+
svgElements.push(
64+
piece
65+
? makeCross({ x, y, crossColor })
66+
: makeDot({ x, y, squareSize, marksSize, marksColor }),
67+
)
5468
}
5569
}
5670

5771
const horizontal = FILES.split('')
5872
const vertical = Array.from({ length: 8 }, (item, idx) => 8 - idx)
5973

6074
for (let i = 0; i < 8; i += 1) {
61-
const file = horizontal[whiteBottom ? i : 8 - i - 1]
62-
const rank = vertical[whiteBottom ? i : 8 - i - 1]
63-
64-
svgElements.push(`<text transform="translate(${BOARD_PADDING + squareSize / 2 + i * squareSize - 3}, 10) scale(.65)" fill="#${textColor}">${file.toUpperCase()}</text>`)
65-
svgElements.push(`<text transform="translate(${squareSize + i * squareSize - 10}, ${squareSize * 8 + BOARD_PADDING * 2 - 3}) scale(.65)" fill="#${textColor}">${file.toUpperCase()}</text>`)
66-
67-
svgElements.push(`<text transform="translate(4, ${squareSize + i * squareSize - 3}) scale(.7)" fill="#${textColor}">${rank}</text>`)
68-
svgElements.push(`<text transform="translate(${squareSize * 8 + BOARD_PADDING * 2 - 10}, ${squareSize + i * squareSize - 3}) scale(.7)" fill="#${textColor}">${rank}</text>`)
75+
const file = horizontal[whiteBottom ? 8 - i - 1 : i]
76+
const rank = vertical[whiteBottom ? 8 - i - 1 : i]
77+
78+
svgElements.push(makeScale({
79+
i,
80+
file,
81+
rank,
82+
boardPadding,
83+
squareSize,
84+
textColor,
85+
}))
6986
}
7087

71-
return stubSvg.split('{{bg}}').join(bgColor).split('{{board}}').join(svgElements.join(''))
88+
return stubSvg.split('{{bg}}').join(bgColor)
89+
.split('{{board}}').join(svgElements.join(''))
7290
}
7391

7492
app.get('/:fen.jpeg', (req, res) => {
@@ -77,14 +95,15 @@ app.get('/:fen.jpeg', (req, res) => {
7795
rotate = 0,
7896
marks: marksList = '',
7997
bg_color: bgColor = BG_COLOR,
80-
marks_color: marksColor = MARKS_COLOR,
81-
marks_size: marksSize = MARKS_SIZE,
8298
board_size: boardSize = BOARD_SIZE,
99+
marks_size: marksSize = MARKS_SIZE,
83100
text_color: textColor = TEXT_COLOR,
101+
cross_color: crossColor = CROSS_COLOR,
102+
marks_color: marksColor = MARKS_COLOR,
84103
square_size: squareSize = SQUARE_SIZE,
85-
board_padding: boardPadding = BOARD_PADDING,
86-
w_cell_color: wCellColor = W_CELL_COLOR,
87104
b_cell_color: bCellColor = B_CELL_COLOR,
105+
w_cell_color: wCellColor = W_CELL_COLOR,
106+
board_padding: boardPadding = BOARD_PADDING,
88107
} = req.query
89108
const { fen = 'rnbkqbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBKQBNR' } = req.params
90109

@@ -98,6 +117,7 @@ app.get('/:fen.jpeg', (req, res) => {
98117
bgColor,
99118
marksSize,
100119
textColor,
120+
crossColor,
101121
marksColor,
102122
squareSize,
103123
bCellColor,

‎src/svg.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const makeSquare = ({ x, y, squareSize, squareId, color }) => `<rect
2+
x="${x}"
3+
y="${y}"
4+
width="${squareSize}"
5+
height="${squareSize}"
6+
class="square ${squareId}"
7+
stroke="none"
8+
fill="#${color}"
9+
/>`
10+
11+
const makePiece = ({ x, y, piece }) => `<use
12+
xlink:href="#${piece.side.name}-${piece.type}"
13+
transform="translate(${x}, ${y})"
14+
/>`
15+
16+
const makeCross = ({ x, y, crossColor }) => `<g transform="translate(${x}, ${y})">
17+
<path
18+
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"
19+
fill="#${crossColor}"
20+
stroke="#000"
21+
stroke-width="1.688"
22+
/>
23+
</g>`
24+
25+
const makeDot = ({ x, y, squareSize, marksSize, marksColor }) => `<circle
26+
cx="${x + squareSize / 2}"
27+
cy="${y + squareSize / 2}"
28+
r="${marksSize}"
29+
fill="#${marksColor}"
30+
/>`
31+
32+
const makeScale = ({ i, boardPadding, squareSize, textColor, file, rank }) => `<text
33+
transform="translate(${boardPadding + squareSize / 2 + i * squareSize - 3}, 10) scale(.65)"
34+
fill="#${textColor}"
35+
>${file.toUpperCase()}</text>
36+
<text
37+
transform="translate(${squareSize + i * squareSize - 10}, ${squareSize * 8 + boardPadding * 2 - 3}) scale(.65)"
38+
fill="#${textColor}"
39+
>${file.toUpperCase()}</text>
40+
<text
41+
transform="translate(4, ${squareSize + i * squareSize - 3}) scale(.7)"
42+
fill="#${textColor}"
43+
>${rank}</text>
44+
<text
45+
transform="translate(${squareSize * 8 + boardPadding * 2 - 10}, ${squareSize + i * squareSize - 3}) scale(.7)"
46+
fill="#${textColor}"
47+
>${rank}</text>`
48+
49+
module.exports = {
50+
makeDot,
51+
makeCross,
52+
makePiece,
53+
makeScale,
54+
makeSquare,
55+
}

‎stubs/stub.svg

+80
Loading

0 commit comments

Comments
 (0)