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

Better fog

Browse source
This commit is contained in:
aronmal 2023-05-26 18:24:51 +02:00
parent d54db32980
commit 6bff62c0c2
Signed by: aronmal
GPG key ID: 816B7707426FC612
2 changed files with 59 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

10
leaky-ships/components/Gamefield/FogImages.tsx
View file

@ -1,11 +1,11 @@
import Image from "next/image"
function FogImages() {
return (
<>
<Image className="fog left" src={`/fog/fog2.png`} alt={`fog1.png`} />
<Image className="fog right" src={`/fog/fog2.png`} alt={`fog1.png`} />
<Image className="fog middle" src={`/fog/fog4.png`} alt={`fog4.png`} />
<img className="fog left" src={`/fog/fog2.png`} alt={`fog1.png`} />
<img className="fog right" src={`/fog/fog2.png`} alt={`fog1.png`} />
<img className="fog top" src={`/fog/fog2.png`} alt={`fog1.png`} />
<img className="fog bottom" src={`/fog/fog2.png`} alt={`fog1.png`} />
<img className="fog middle" src={`/fog/fog4.png`} alt={`fog4.png`} />
</>
)
}

58
leaky-ships/styles/App.scss
View file

@ -71,6 +71,7 @@ body {
justify-items: center;
grid-template-rows: 0.75fr repeat(12, 1fr) 0.75fr;
grid-template-columns: 0.75fr repeat(12, 1fr) 0.75fr;
overflow: hidden;
> .label {
grid-column: var(--x);
@ -274,21 +275,70 @@ body {
width: inherit;
pointer-events: none;
&.left {
&:not(.middle) {
grid-area: 1 / 1 / -1 / -1;
transform-origin: 324px 0;
align-self: flex-start;
transform: rotate(180deg);
margin-top: 324px;
opacity: 1;
}
&.left {
transform: rotate(90deg);
animation: floatInl 3s ease-out;
@keyframes floatInl {
from {
transform: scale(2) rotate(90deg);
margin-left: -324px;
opacity: 0;
}
}
}
&.right {
grid-area: 1 / 1 / -1 / -1;
align-self: flex-end;
transform: rotate(270deg);
animation: floatInr 3s ease-out;
@keyframes floatInr {
from {
transform: scale(2) rotate(270deg);
margin-left: 324px;
opacity: 0;
}
}
}
&.top {
animation: floatInt 3s ease-out;
@keyframes floatInt {
from {
transform: scale(2);
margin-top: 648px;
opacity: 0;
}
}
}
&.bottom {
transform: rotate(180deg);
animation: floatInb 3s ease-out;
@keyframes floatInb {
from {
transform: scale(2) rotate(180deg);
margin-top: 0;
opacity: 0;
}
}
}
&.middle {
grid-area: 4 / 4 / -4 / -4;
}
}
canvas {
grid-area: 1 / 1 / -1 / -1;
border: 1px solid #000;
display: absolute;
}
}
.event-bar {