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

136
frontend/src/App.scss
View file

@ -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;