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 dbc372a0a0
commit 137b1715a7
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() {
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`} />
</>
}

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 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>

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

@ -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;
}
}
}