From 84a15794e631172d8c8a09d6f90bcbb1d502dda6 Mon Sep 17 00:00:00 2001
From: aronmal <aron@mal-noh.de>
Date: Thu, 27 Oct 2022 19:15:44 +0200
Subject: [PATCH] Fix fog images pointer events

---
 frontend/src/components/FogImages.tsx |  6 +++---
 frontend/src/components/Gamefield.tsx |  4 ++--
 frontend/src/styles/App.scss          | 31 +++++++++++++++------------
 3 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/FogImages.tsx b/frontend/src/components/FogImages.tsx
index ac3c230..193b68b 100644
--- a/frontend/src/components/FogImages.tsx
+++ b/frontend/src/components/FogImages.tsx
@@ -1,8 +1,8 @@
 function FogImages() {
     return <>
-        <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-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 middle' src={`/fog/fog4.png`} alt={`fog4.png`} />
     </>
 }
 
diff --git a/frontend/src/components/Gamefield.tsx b/frontend/src/components/Gamefield.tsx
index 9ca0bf5..a1110d8 100644
--- a/frontend/src/components/Gamefield.tsx
+++ b/frontend/src/components/Gamefield.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { CSSProperties, useEffect, useReducer, useState } from 'react';
 import Bluetooth from './Bluetooth';
 import BorderTiles from './BorderTiles';
-import FogImages from './FogImages';
+// import FogImages from './FogImages';
 import HitElems from './HitElems';
 import Labeling from './Labeling';
 import Ships from './Ships';
@@ -100,7 +100,7 @@ function Gamefield() {
                 <HitElems hits={hits} />
 
                 {/* Fog images */}
-                <FogImages />
+                {/* <FogImages /> */}
                 <div className={`hit-svg target ${target.show ? 'show' : ''}`} style={{ '--x': target.x, '--y': target.y } as CSSProperties}>
                     <FontAwesomeIcon icon={faCrosshairs} />
                 </div>
diff --git a/frontend/src/styles/App.scss b/frontend/src/styles/App.scss
index f10e413..9bbbcfa 100644
--- a/frontend/src/styles/App.scss
+++ b/frontend/src/styles/App.scss
@@ -167,20 +167,23 @@
     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;
+  .fog {
     width: inherit;
+    pointer-events: none;
+
+    &.left {
+      grid-area: 1 / 1 / -1 / -1;
+      align-self: flex-start;
+      transform: rotate(180deg);
+    }
+
+    &.right {
+      grid-area: 1 / 1 / -1 / -1;
+      align-self: flex-end;
+    }
+
+    &.middle {
+      grid-area: 4 / 4 / -4 / -4;
+    }
   }
 }
\ No newline at end of file