resources/js/components/aos-tracker/Cell.js

   1 import PropTypes from 'prop-types';
   2 import React from 'react';
   3
   4 const hasCorner = (a, b) =>
   5         (hasWall(a) && hasWall(b)) || a === 'door' || b == 'door';
   6
   7 const hasWall = side => side && side !== 'open';
   8
   9 const wallType = side => side || 'open';
  10
  11 const Cell = ({ bottom, left, right, top, x, y }) =>
  12         <g className="cell" transform={`translate(${x || 0}, ${y || 0})`}>
  13                 <rect className="background" x="-0.03125" y="-0.03125" width="1.03125" height="1.03125" />
  14                 {hasWall(top) ?
  15                         <line className={`wall ${wallType(top)}`} x1="-0.03125" y1="0" x2="1.03125" y2="0" />
  16                 : null}
  17                 {hasWall(right) ?
  18                         <line className={`wall ${wallType(right)}`} x1="1" y1="-0.03125" x2="1" y2="1.03125" />
  19                 : null}
  20                 {hasWall(bottom) ?
  21                         <line className={`wall ${wallType(bottom)}`} x1="-0.03125" y1="1" x2="1.03125" y2="1" />
  22                 : null}
  23                 {hasWall(left) ?
  24                         <line className={`wall ${wallType(left)}`} x1="0" y1="-0.03125" x2="0" y2="1.03125" />
  25                 : null}
  26                 {hasCorner(top, left) ?
  27                         <rect className="corner" x="-0.0625" y="-0.0625" width="0.125" height="0.125" />
  28                 : null}
  29                 {hasCorner(top, right) ?
  30                         <rect className="corner" x="0.9375" y="-0.0625" width="0.125" height="0.125" />
  31                 : null}
  32                 {hasCorner(bottom, left) ?
  33                         <rect className="corner" x="-0.0625" y="0.9375" width="0.125" height="0.125" />
  34                 : null}
  35                 {hasCorner(bottom, right) ?
  36                         <rect className="corner" x="0.9375" y="0.9375" width="0.125" height="0.125" />
  37                 : null}
  38         </g>;
  39
  40 Cell.propTypes = {
  41         bottom: PropTypes.string,
  42         left: PropTypes.string,
  43         right: PropTypes.string,
  44         top: PropTypes.string,
  45         x: PropTypes.number,
  46         y: PropTypes.number,
  47 };
  48
  49 export default Cell;