75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
import { faXmark } from '@fortawesome/free-solid-svg-icons';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import { CSSProperties } from 'react';
|
|
import './App.scss';
|
|
|
|
function App() {
|
|
|
|
let borders: JSX.Element[] = [];
|
|
let elems2: {
|
|
field: string,
|
|
x: number,
|
|
y: number,
|
|
}[] = [];
|
|
let elems: {
|
|
field: string,
|
|
x: number,
|
|
y: number,
|
|
}[] = [],
|
|
count = 12;
|
|
for (let x = 0; x < count; x++) {
|
|
elems2.push(...[
|
|
{ field: String.fromCharCode(65+x), x: x+2, y: 1 },
|
|
{ field: (x+1).toString(), x: 1, y: x+2 },
|
|
{ field: String.fromCharCode(65+x), x: x+2, y: count+2 },
|
|
{ field: (x+1).toString(), x: count+2, y: x+2 }
|
|
])
|
|
for (let y = 0; y < count; y++) {
|
|
elems.push({ field: String.fromCharCode(65+x)+(y), x: x+2, y: y+2 })
|
|
}
|
|
}
|
|
for (let x = 0; x < count+2; x++) {
|
|
for (let y = 0; y < count+2; y++) {
|
|
borders.push(<div className='border' style={{'--x': (x + 1), '--y': (y + 1)} as CSSProperties}></div>)
|
|
}
|
|
}
|
|
return (
|
|
<div className="App">
|
|
<header className="App-header">
|
|
{[1,2,3,4,5,6,11,12,13,14].map((num, i) => <img key={i} src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
|
|
<div id="game-frame">
|
|
{ borders }
|
|
{elems2.map((obj, i) =>
|
|
<span key={i} className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>{obj.field}</span>
|
|
)}
|
|
{/* <div id='game'> */}
|
|
{elems.map((obj, i) =>
|
|
<div key={i} className={`${obj.field} svg-r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties}>
|
|
<FontAwesomeIcon key={i} className={`${obj.field} r1`} icon={faXmark} />
|
|
</div>)}
|
|
{[1,2,3,4,5,6].map((num, i) =>
|
|
<div key={i} id='test-ship' className={`s${num}`} style={{'--i': i+3} as CSSProperties}>
|
|
<img src={`/svgs/${num}.svg`} alt={`${num}.svg`}/>
|
|
</div>)}
|
|
{/* <div id='test-ship' className='s2'>
|
|
<img src={`/svgs/${3}.svg`} alt={`${3}.svg`} />
|
|
</div> */}
|
|
{/* </div> */}
|
|
</div>
|
|
<p>
|
|
Edit <code>src/App.tsx</code> and save to reload.
|
|
</p>
|
|
<a
|
|
className="App-link"
|
|
href="https://www.freepik.com/free-vector/militaristic-ships-set-navy-ammunition-warship-submarine-nuclear-battleship-float-cruiser-trawler-gunboat-frigate-ferry_10704121.htm"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Battleships designed by macrovector
|
|
</a>
|
|
</header>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|