New functional features and fog images
This commit is contained in:
parent
2a8f25a6e6
commit
febb6b1607
GPG key ID:
816B7707426FC612
6 changed files with 221 additions and 68 deletions
|
|
@ -1,3 +1,7 @@
|
|||
@use './mixins/display' as *;
|
||||
@use './mixins/effects' as *;
|
||||
@import './mixins/variables';
|
||||
|
||||
.App {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -14,10 +18,9 @@
|
|||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
background-color: $theme;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include flex-col;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: calc(10px + 2vmin);
|
||||
|
|
@ -38,61 +41,81 @@
|
|||
}
|
||||
|
||||
#game-frame {
|
||||
border: 1px solid orange;
|
||||
// border: 1px solid orange;
|
||||
// position: relative;
|
||||
height: 900px;
|
||||
width: 900px;
|
||||
height: 945px;
|
||||
width: 945px;
|
||||
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-template-rows: .75fr repeat(12, 1fr) .75fr;
|
||||
grid-template-columns: .75fr repeat(12, 1fr) .75fr;
|
||||
// grid-gap: 1px solid blue;
|
||||
|
||||
> .r1 {
|
||||
grid-column: var(--x);
|
||||
grid-row: var(--y);
|
||||
}
|
||||
> .border {
|
||||
> .border-tile {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid blue;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
grid-column: var(--x);
|
||||
grid-row: var(--y);
|
||||
|
||||
&.edge {
|
||||
border: 1px solid gray;
|
||||
}
|
||||
|
||||
&.left-top-corner {
|
||||
-webkit-mask-image: -webkit-gradient(linear, right bottom,
|
||||
left top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
|
||||
}
|
||||
&.right-top-corner {
|
||||
-webkit-mask-image: -webkit-gradient(linear, left bottom,
|
||||
right top, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
|
||||
}
|
||||
&.left-bottom-corner {
|
||||
-webkit-mask-image: -webkit-gradient(linear, right top,
|
||||
left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
|
||||
}
|
||||
&.right-bottom-corner {
|
||||
-webkit-mask-image: -webkit-gradient(linear, left top,
|
||||
right bottom, color-stop(0, rgba(0,0,0,1)), color-stop(0.5, rgba(0,0,0,0)));
|
||||
}
|
||||
|
||||
&.left {
|
||||
-webkit-mask-image: -webkit-gradient(linear, right top,
|
||||
left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
|
||||
}
|
||||
&.right {
|
||||
-webkit-mask-image: -webkit-gradient(linear, left top,
|
||||
right top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
|
||||
}
|
||||
&.top {
|
||||
-webkit-mask-image: -webkit-gradient(linear, left bottom,
|
||||
left top, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
|
||||
}
|
||||
&.bottom {
|
||||
-webkit-mask-image: -webkit-gradient(linear, left top,
|
||||
left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
|
||||
}
|
||||
}
|
||||
> :not(.border) {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid red;
|
||||
// border: 1px solid red;
|
||||
}
|
||||
> span {
|
||||
vertical-align: center;
|
||||
user-select: none;
|
||||
}
|
||||
// }
|
||||
|
||||
// #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 {
|
||||
.ship {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@include flex-col;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
border: 1px solid yellow;
|
||||
|
|
@ -128,8 +151,8 @@
|
|||
grid-column: 3 / 7;
|
||||
}
|
||||
}
|
||||
|
||||
.svg-r1 {
|
||||
|
||||
.hit-svg {
|
||||
// border: 2px solid blue;
|
||||
|
||||
// height: 50px;
|
||||
|
|
@ -137,13 +160,13 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
// flex-direction: column;
|
||||
@include flex;
|
||||
// align-items: center;
|
||||
// align-self: center;
|
||||
// justify-self: center;
|
||||
grid-column: var(--x);
|
||||
grid-row: var(--y);
|
||||
pointer-events: none;
|
||||
|
||||
svg {
|
||||
position: absolute;
|
||||
|
|
@ -152,6 +175,28 @@
|
|||
|
||||
box-sizing: border-box;
|
||||
padding: 25%;
|
||||
|
||||
&.fa-burst {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
&.target {
|
||||
color: red;
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.target-preview {
|
||||
color: orange;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
@include transition(.2s);
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
.r2 {
|
||||
|
|
@ -160,4 +205,21 @@
|
|||
.r3 {
|
||||
border: 2px solid yellowgreen;
|
||||
}
|
||||
|
||||
.fog-left {
|
||||
grid-area: 1 / 1 / -1 / -1;
|
||||
align-self: flex-start;
|
||||
width: inherit;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.fog-right {
|
||||
grid-area: 1 / 1 / -1 / -1;
|
||||
align-self: flex-end;
|
||||
width: inherit;
|
||||
}
|
||||
.fog-middle {
|
||||
grid-area: 4 / 4 / -4 / -4;
|
||||
// align-self: flex-end;
|
||||
width: inherit;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue