51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
import { fieldIndex } from "@lib/utils/helpers"
|
|
import classNames from "classnames"
|
|
import { CSSProperties } from "react"
|
|
import { Field } from "../../interfaces/frontend"
|
|
import { count } from "./Gamefield"
|
|
|
|
function Labeling() {
|
|
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
|