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

Fix fog images pointer events

Browse source
This commit is contained in:
aronmal 2022-10-27 19:15:44 +02:00
parent 1e89b629f9
commit 4545f47fff
Signed by: aronmal
GPG key ID: 816B7707426FC612
3 changed files with 22 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/FogImages.tsx
View file

@ -1,8 +1,8 @@
function FogImages() { function FogImages() {
return <> return <>
<img className='fog-left' src={`/fog/fog2.png`} alt={`fog1.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 right' src={`/fog/fog2.png`} alt={`fog1.png`} />
<img className='fog-middle' src={`/fog/fog4.png`} alt={`fog4.png`} /> <img className='fog middle' src={`/fog/fog4.png`} alt={`fog4.png`} />
</> </>
} }

4
frontend/src/components/Gamefield.tsx
View file

@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { CSSProperties, useEffect, useReducer, useState } from 'react'; import { CSSProperties, useEffect, useReducer, useState } from 'react';
import Bluetooth from './Bluetooth'; import Bluetooth from './Bluetooth';
import BorderTiles from './BorderTiles'; import BorderTiles from './BorderTiles';
import FogImages from './FogImages'; // import FogImages from './FogImages';
import HitElems from './HitElems'; import HitElems from './HitElems';
import Labeling from './Labeling'; import Labeling from './Labeling';
import Ships from './Ships'; import Ships from './Ships';
@ -100,7 +100,7 @@ function Gamefield() {
<HitElems hits={hits} /> <HitElems hits={hits} />
{/* Fog images */} {/* Fog images */}
<FogImages /> {/* <FogImages /> */}
<div className={`hit-svg target ${target.show ? 'show' : ''}`} style={{ '--x': target.x, '--y': target.y } as CSSProperties}> <div className={`hit-svg target ${target.show ? 'show' : ''}`} style={{ '--x': target.x, '--y': target.y } as CSSProperties}>
<FontAwesomeIcon icon={faCrosshairs} /> <FontAwesomeIcon icon={faCrosshairs} />
</div> </div>

31
frontend/src/styles/App.scss
View file

@ -167,20 +167,23 @@
border: 2px solid yellowgreen; border: 2px solid yellowgreen;
} }
.fog-left { .fog {
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; 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;
}
} }
} }