Better fog

leaky-ships/components/Gamefield/FogImages.tsx

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

leaky-ships/styles/App.scss

@@ -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;
+      transform: rotate(270deg);
-      align-self: flex-end;
+      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 {