30 lines
1.1 KiB
TypeScript
30 lines
1.1 KiB
TypeScript
import classNames from 'classnames';
|
|
import { CSSProperties } from 'react'
|
|
import { fieldIndex } from '../helpers';
|
|
import { FieldType } from '../interfaces';
|
|
|
|
function Labeling({count}: {count: number}) {
|
|
let elems: (FieldType & {
|
|
orientation: string
|
|
})[] = [];
|
|
for (let x = 0; x < count; x++) {
|
|
elems.push(
|
|
// Up
|
|
{field: String.fromCharCode(65+x), x: x+2, y: 1, orientation: 'up'},
|
|
// Left
|
|
{field: (x+1).toString(), x: 1, y: x+2, orientation: 'left'},
|
|
// Bottom
|
|
{field: String.fromCharCode(65+x), x: x+2, y: count+2, orientation: 'bottom'},
|
|
// Right
|
|
{field: (x+1).toString(), x: count+2, y: x+2, orientation: 'right'}
|
|
);
|
|
}
|
|
elems = elems.sort((a, b) => fieldIndex(count, a.x, a.y)-fieldIndex(count, b.x, b.y));
|
|
return <>
|
|
{elems.map(({field, x, y, orientation}, i) =>
|
|
<span key={i} className={classNames('label', orientation, field)} style={{'--x': x, '--y': y} as CSSProperties}>{field}</span>
|
|
)}
|
|
</>
|
|
}
|
|
|
|
export default Labeling;
|