aronmal
46a899b0ec
- interfaces instead of types - remove semicolons - use functions instead of anonymous arrow functions - rename vars/types for better understanding - fix typo
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 { Field } from '../interfaces'
|
|
|
|
function Labeling({count}: {count: number}) {
|
|
let elems: (Field & {
|
|
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
|