26 lines
745 B
TypeScript
26 lines
745 B
TypeScript
import classNames from 'classnames';
|
|
import { CSSProperties } from 'react'
|
|
|
|
function Ships() {
|
|
let shipIndexes = [
|
|
{ size: 2, index: null },
|
|
{ size: 3, index: 1 },
|
|
{ size: 3, index: 2 },
|
|
{ size: 3, index: 3 },
|
|
{ size: 4, index: 1 },
|
|
{ size: 4, index: 2 }
|
|
];
|
|
|
|
return <>
|
|
{shipIndexes.map(({ size, index }, i) => {
|
|
const filename = `/assets/ship_blue_${size}x${index ? '_' + index : ''}.gif`
|
|
return (
|
|
<div key={i} className={classNames('ship', 's' + size)} style={{ '--x': i + 3 } as CSSProperties}>
|
|
<img src={filename} alt={filename} />
|
|
</div>
|
|
)
|
|
})}
|
|
</>
|
|
}
|
|
|
|
export default Ships;
|