Working CSS grid
This commit is contained in:
parent
796b73dcee
commit
f4cb61c631
GPG key ID:
816B7707426FC612
2 changed files with 150 additions and 31 deletions
|
|
@ -37,36 +37,122 @@
|
|||
}
|
||||
}
|
||||
|
||||
#game {
|
||||
border: 5px solid orange;
|
||||
position: relative;
|
||||
height: 1200px;
|
||||
width: 1200px;
|
||||
#game-frame {
|
||||
border: 1px solid orange;
|
||||
// position: relative;
|
||||
height: 900px;
|
||||
width: 900px;
|
||||
display: grid;
|
||||
grid-template-rows: repeat(12, 1fr);
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-gap: 1px solid blue;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
grid-template-rows: .5fr repeat(12, 1fr) .5fr;
|
||||
grid-template-columns: .5fr repeat(12, 1fr) .5fr;
|
||||
// grid-gap: 1px solid blue;
|
||||
|
||||
.missle {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
position: absolute;
|
||||
border: 1px solid red;
|
||||
top: calc(50px + 100px * var(--y));
|
||||
left: calc(50px + 100px* var(--x));
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
> .r1 {
|
||||
grid-column: var(--x);
|
||||
grid-row: var(--y);
|
||||
}
|
||||
.r1 {
|
||||
border: 2px solid blue;
|
||||
> .border {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid blue;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-column: var(--x);
|
||||
grid-row: var(--y);
|
||||
}
|
||||
> :not(.border) {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid red;
|
||||
}
|
||||
> span {
|
||||
vertical-align: center;
|
||||
}
|
||||
// }
|
||||
|
||||
// #game {
|
||||
// grid-area: 2 / 2 / -2 / -2;
|
||||
// border: 5px solid orange;
|
||||
// // position: relative;
|
||||
// display: grid;
|
||||
// // grid-gap: 1px solid blue;
|
||||
|
||||
// .missle {
|
||||
// height: 50px;
|
||||
// width: 50px;
|
||||
// position: absolute;
|
||||
// border: 1px solid red;
|
||||
// top: calc(50px + 100px * var(--y));
|
||||
// left: calc(50px + 100px* var(--x));
|
||||
// transform: translateX(-50%) translateY(-50%);
|
||||
// }
|
||||
|
||||
#test-ship {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
border: 1px solid yellow;
|
||||
grid-row: var(--i);
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
// height: 90%;
|
||||
width: 90%;
|
||||
// object-fit: cover;
|
||||
}
|
||||
|
||||
&.s1 {
|
||||
grid-column: 3 / 7;
|
||||
}
|
||||
&.s2 {
|
||||
grid-column: 3 / 5;
|
||||
}
|
||||
&.s3 {
|
||||
grid-column: 3 / 6;
|
||||
|
||||
img {
|
||||
margin-top: -2%;
|
||||
}
|
||||
}
|
||||
&.s4 {
|
||||
grid-column: 3 / 6;
|
||||
}
|
||||
&.s5 {
|
||||
grid-column: 3 / 6;
|
||||
}
|
||||
&.s6 {
|
||||
grid-column: 3 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-r1 {
|
||||
// border: 2px solid blue;
|
||||
|
||||
// height: 50px;
|
||||
// width: 50px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
// align-items: center;
|
||||
// align-self: center;
|
||||
// justify-self: center;
|
||||
grid-column: var(--x);
|
||||
grid-row: var(--y);
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 25%;
|
||||
}
|
||||
}
|
||||
.r2 {
|
||||
border: 2px solid green;
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue