163 lines
No EOL
2.8 KiB
SCSS
163 lines
No EOL
2.8 KiB
SCSS
.App {
|
|
text-align: center;
|
|
}
|
|
|
|
.App-logo {
|
|
height: 40vmin;
|
|
pointer-events: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.App-logo {
|
|
animation: App-logo-spin infinite 20s linear;
|
|
}
|
|
}
|
|
|
|
.App-header {
|
|
background-color: #282c34;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: calc(10px + 2vmin);
|
|
color: white;
|
|
}
|
|
|
|
.App-link {
|
|
color: #61dafb;
|
|
}
|
|
|
|
@keyframes App-logo-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
#game-frame {
|
|
border: 1px solid orange;
|
|
// position: relative;
|
|
height: 900px;
|
|
width: 900px;
|
|
display: grid;
|
|
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;
|
|
|
|
> .r1 {
|
|
grid-column: var(--x);
|
|
grid-row: var(--y);
|
|
}
|
|
> .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;
|
|
}
|
|
.r3 {
|
|
border: 2px solid yellowgreen;
|
|
}
|
|
} |