aronmal/leaky-ships
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Working CSS grid

Browse source
This commit is contained in:
aronmal 2022-08-09 03:06:15 +02:00
parent 19e9b224a4
commit 03c456208d
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 150 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/App.tsx
View file

@ -5,23 +5,56 @@ 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 = 1; x <= count; x++) {
for (let y = 1; y <= count; y++) {
elems.push({field: String.fromCharCode(64+x)+(y), x, y})
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 => <img src={`/svgs/${num}.svg`} alt={`${num}.svg`} />)}
<div id='game'>
{elems.map(obj => <FontAwesomeIcon className={`${obj.field} r1`} style={{'--x': obj.x, '--y': obj.y} as CSSProperties} icon={faXmark} />)}
{[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.