nice-ui
Version:
React design system, components, and utilities
210 lines (209 loc) • 11.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Board = void 0;
const React = require("react");
const theme_1 = require("./theme");
const constants_1 = require("./constants");
const h = React.createElement;
function mapColor(color) {
color = color || 'green';
switch (color) {
case 'green':
color = '#52aa05';
break;
case 'red':
color = '#c6140d';
break;
}
return color;
}
let globalMarkerId = 0;
class Board extends React.Component {
shouldComponentUpdate(nextProps) {
return JSON.stringify(nextProps) !== JSON.stringify(this.props);
}
renderCheckers() {
const checkers = [];
for (let i = 0; i < 8; i++) {
for (let j = (i + 1) % 2; j < 8; j += 2) {
// Draw black squares.
checkers.push(React.createElement("rect", { key: `checker-${i},${j}`, x: constants_1.squareWidth * j, y: constants_1.squareWidth * i, height: constants_1.squareWidth, width: constants_1.squareWidth, style: { fill: theme_1.default.black } }));
}
}
return checkers;
}
renderRuler() {
const { noRuler } = this.props;
const ruler = [];
if (noRuler)
return ruler;
const rulerStyle = {
fontFamily: 'Open Sans,sans',
fontWeight: 'bold',
textAlign: 'center',
lineHeight: constants_1.squareWidth * 0.25,
fontSize: constants_1.squareWidth * 0.21,
};
for (let i = 0; i < 8; i++) {
ruler.push(React.createElement("text", { x: "1.2", y: constants_1.squareWidth * i + 3.7, style: { fill: i % 2 ? '#fff' : '#000', opacity: i % 2 ? 0.5 : 0.4, ...rulerStyle }, key: 'ruler-x' + i }, 8 - i));
ruler.push(React.createElement("text", { y: "98.5", x: constants_1.squareWidth * i + 9.5, style: { fill: i % 2 ? '#000' : '#fff', opacity: i % 2 ? 0.4 : 0.5, ...rulerStyle }, key: 'ruler-y' + i }, (i + 10).toString(18)));
}
return ruler;
}
renderLines() {
const { props } = this;
const markers = [];
const lines = [];
if (props.lines && props.lines.length) {
for (let i = 0; i < props.lines.length; i++) {
const line = props.lines[i];
const { from, to, tipFrom, tipTo, body } = line;
const color = mapColor(line.color || 'green');
const opacity = line.opacity || 0.8;
const strokeWidth = body ? (body[0] === '=' ? 8 : 3) / body.length : 3;
let tipToId;
let tipFromId;
if (tipTo) {
tipToId = 'board-marker-' + globalMarkerId++;
if (tipTo === 'o' || tipTo === 'O') {
markers.push(React.createElement("marker", { key: 'line-' + i, id: tipToId, markerWidth: "10", markerHeight: "10", refX: "3", refY: "3", orient: "auto", markerUnits: "strokeWidth", viewBox: "0 0 25 25" },
React.createElement("circle", { cx: "3", cy: "3", r: tipTo === 'o' ? 2 : 3, fill: color })));
}
else {
const size = 25 - tipTo.length * 2;
markers.push(React.createElement("marker", { key: 'line-' + i, id: tipToId, markerWidth: "10", markerHeight: "10", refX: "2.7", refY: "3", orient: "auto", markerUnits: "strokeWidth", viewBox: `0 0 ${size} ${size}` },
React.createElement("path", { d: "M0,0 L0,6 L4.5,3 z", fill: color })));
}
}
if (tipFrom) {
tipFromId = 'board-marker-' + globalMarkerId++;
if (tipFrom === 'o' || tipFrom === 'O') {
markers.push(React.createElement("marker", { key: 'line-' + i, id: tipFromId, markerWidth: "10", markerHeight: "10", refX: "3", refY: "3", orient: "auto", markerUnits: "strokeWidth", viewBox: "0 0 25 25" },
React.createElement("circle", { cx: "3", cy: "3", r: tipFrom === 'o' ? 2 : 3, fill: color })));
}
else {
const size = 25 - tipFrom.length * 2;
markers.push(React.createElement("marker", { key: 'line-' + i, id: tipFromId, markerWidth: "10", markerHeight: "10", refX: "2.7", refY: "3", orient: "auto", markerUnits: "strokeWidth", viewBox: `0 0 ${size} ${size}` },
React.createElement("path", { d: "M4.5,0 L4.5,6 L0,3 z", fill: color })));
}
}
const lineProps = {
key: `line-${i}`,
x1: (0.5 + from[0]) * constants_1.squareWidth,
y1: (7.5 - from[1]) * constants_1.squareWidth,
x2: (0.5 + to[0]) * constants_1.squareWidth,
y2: (7.5 - to[1]) * constants_1.squareWidth,
markerStart: tipFromId ? `url(#${tipFromId})` : undefined,
markerEnd: tipToId ? `url(#${tipToId})` : undefined,
stroke: color,
strokeWidth: strokeWidth,
style: { opacity },
};
lines.push(h('line', lineProps));
}
}
return [markers, lines];
}
renderFigures() {
const figures = [];
const { props } = this;
if (props.squares instanceof Array) {
for (let i = 0; i < props.squares.length; i++) {
const square = props.squares[i];
if (square.piece) {
figures.push(React.createElement("image", { key: 'figure-' + i, x: constants_1.squareWidth * square.xy[0], y: constants_1.squareWidth * (7 - square.xy[1]), width: constants_1.squareWidth, height: constants_1.squareWidth, xlinkHref: constants_1.PIECES[square.piece], style: { opacity: square.pieceOpacity || 1 } }));
}
}
}
return figures;
}
renderHighlights() {
const { props } = this;
const highlights = [];
if (props.squares instanceof Array) {
for (let i = 0; i < props.squares.length; i++) {
const square = props.squares[i];
if (square.color ||
(!square.piece && !square.borderTop && !square.borderRight && !square.borderBottom && !square.borderLeft)) {
highlights.push(React.createElement("rect", { key: 'highlight-' + i, x: square.xy[0] * constants_1.squareWidth, y: (7 - square.xy[1]) * constants_1.squareWidth, height: constants_1.squareWidth, width: constants_1.squareWidth, style: { fill: mapColor(square.color ?? ''), opacity: square.opacity || 0.35 } }));
}
if (square.borderTop) {
highlights.push(React.createElement("rect", { key: 'highlight-' + i, x: square.xy[0] * constants_1.squareWidth, y: (7 - square.xy[1]) * constants_1.squareWidth, height: constants_1.squareWidth * constants_1.borderWidth, width: constants_1.squareWidth, style: { fill: constants_1.borderColor, opacity: constants_1.borderOpacity } }));
}
if (square.borderRight) {
highlights.push(React.createElement("rect", { key: 'highlight-' + i, x: (square.xy[0] + 1 - constants_1.borderWidth) * constants_1.squareWidth, y: (7 - square.xy[1]) * constants_1.squareWidth, height: constants_1.squareWidth, width: constants_1.squareWidth * constants_1.borderWidth, style: { fill: constants_1.borderColor, opacity: constants_1.borderOpacity } }));
}
if (square.borderBottom) {
highlights.push(React.createElement("rect", { key: 'highlight-' + i, x: square.xy[0] * constants_1.squareWidth, y: (8 - square.xy[1] - constants_1.borderWidth) * constants_1.squareWidth, height: constants_1.squareWidth * constants_1.borderWidth, width: constants_1.squareWidth, style: { fill: constants_1.borderColor, opacity: constants_1.borderOpacity } }));
}
if (square.borderLeft) {
highlights.push(React.createElement("rect", { key: 'highlight-' + i, x: square.xy[0] * constants_1.squareWidth, y: (7 - square.xy[1]) * constants_1.squareWidth, height: constants_1.squareWidth, width: constants_1.squareWidth * constants_1.borderWidth, style: { fill: constants_1.borderColor, opacity: constants_1.borderOpacity } }));
}
}
}
return highlights;
}
renderBorders() {
const { props } = this;
const borders = [];
if (props.borders instanceof Array) {
for (let i = 0; i < props.borders.length; i++) {
const border = props.borders[i];
let stepLength = constants_1.squareWidth;
if (border.segmentSize)
stepLength *= border.segmentSize;
let offsetX = 0;
let offsetY = 0;
if (border.offset) {
offsetX = border.offset[0];
offsetY = border.offset[1];
}
let d = `M${(border.xy[0] + offsetX) * constants_1.squareWidth} ${(7 - border.xy[1] + offsetY) * constants_1.squareWidth} l`;
for (let j = 0; j < border.segments.length; j++) {
switch (border.segments[j]) {
case 'd':
d += stepLength + ' 0 ';
break;
case 's':
d += '0 ' + stepLength + ' ';
break;
case 'a':
d += -stepLength + ' 0 ';
break;
case 'w':
d += '0 ' + -stepLength + ' ';
break;
}
}
const strokeWidth = 1.8 * (border.width || 1);
const strokeColor = mapColor(border.color || 'orange');
const strokeOpacity = border.opacity || 0.75;
const fillColor = border.fillColor || 'none';
const fillOpacity = border.fillOpacity || 0.4;
borders.push(React.createElement("path", { key: 'border-' + i, d: d, strokeLinejoin: "round", style: {
strokeWidth,
stroke: strokeColor,
strokeOpacity,
fill: fillColor,
fillOpacity,
} }));
}
}
return borders;
}
render() {
const [markers, lines] = this.renderLines();
return (React.createElement("svg", { viewBox: "0 0 100 100" },
React.createElement("defs", null, markers),
React.createElement("rect", { x: "0", y: "0", height: "100", width: "100", style: { fill: theme_1.default.white } }),
this.renderCheckers(),
this.renderHighlights(),
this.renderBorders(),
this.renderFigures(),
this.renderRuler(),
lines));
}
}
exports.Board = Board;
Board.lineCnt = 0;
exports.default = Board;