Skip to content

Commit

Permalink
Improve System Map scan indicator
Browse files Browse the repository at this point in the history
  • Loading branch information
@iaincollins
iaincollins committed Feb 12, 2023
1 parent 72518a9 commit fa10a42
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 24 deletions.
40 changes: 23 additions & 17 deletions src/client/components/panels/nav/navigation-system-map-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SystemMap from 'components/panels/nav/system-map/system-map'
import CopyOnClick from 'components/copy-on-click'
import factionStates from '../../../../shared/faction-states'

export default function NavigationSystemMapPanel ({ system, systemObject, setSystemObject, getSystem, cmdrStatus }) {
export default function NavigationSystemMapPanel ({ system, systemObject, setSystemObject, getSystem, cmdrStatus, rescanSystem = () => {}, rescanInProgress = false }) {
const [showSystemDetails, setShowSystemDetails] = useState(true)

if (!system) return null
Expand Down Expand Up @@ -56,7 +56,7 @@ export default function NavigationSystemMapPanel ({ system, systemObject, setSys
</div>
<div className='system-map__toolbar-background' />
<div className='system-map__toolbar'>
<LocationInformation system={system} cmdrStatus={cmdrStatus} />
<LocationInformation system={system} cmdrStatus={cmdrStatus} rescanSystem={rescanSystem} rescanInProgress={rescanInProgress} />
<div className='system-map__info fx-fade-in text-uppercase'>
<span className='text-info'>
<i className='icarus-terminal-system-orbits' style={{ fontSize: '1.5rem', float: 'left', position: 'relative', left: '-.15rem' }} />
Expand All @@ -73,6 +73,16 @@ export default function NavigationSystemMapPanel ({ system, systemObject, setSys
{system.position?.[0]}<br />{system.position?.[1]}<br />{system.position?.[2]}
</div>}
</div>

<div className='fx-fade-in'>
{!system?.scanPercentComplete &&
<div className='system-map__system-telemetry--text text-info text-uppercase text-no-wrap' onClick={(e) => rescanSystem()}>
<p style={{margin: '0 4rem .15rem 0'}} className={rescanInProgress ? 'text-blink-slow' : 'text-muted'}>
<i className='icarus-terminal-scan float-left' style={{fontSize: '2.5rem', marginRight: '.15rem'}}/>
NO SCAN<br/>DATA
</p>
</div>}
</div>
</div>
</div>
)
Expand Down Expand Up @@ -140,25 +150,25 @@ export default function NavigationSystemMapPanel ({ system, systemObject, setSys

<div className='fx-fade-in'>
{system?.scanPercentComplete && system?.scanPercentComplete !== 100 &&
<div className='system-map__system-telemetry text-info text-uppercase'>
<div className={`system-map__system-telemetry--progress text-uppercase text-secondary ${rescanInProgress ? 'text-blink-slow' : ''}`} onClick={(e) => rescanSystem()}>
<i className='icarus-terminal-scan float-left' style={{fontSize: '2.5rem', marginLeft: '.25rem'}}/>
<div style={{position: 'absolute', right: 0}}>
EDSM {system?.scanPercentComplete}% <br />
<progress value={system?.scanPercentComplete} max='100' className='progress--info progress--border' style={{margin: '.15rem 0 -.1rem 0', height: '1.25rem', width: '5.5rem'}}/>
<progress value={system?.scanPercentComplete} max='100' className='progress--secondary progress--border' style={{margin: '.15rem 0 -.1rem 0', height: '1.25rem', width: '5.5rem'}}/>
</div>
</div>}
{system?.scanPercentComplete === 100 &&
<div className='system-map__system-telemetry--with-text text-secondary text-uppercase text-no-wrap'>
<p style={{margin: '0 4rem .15rem 0'}} className='text-muted'>
<div className='system-map__system-telemetry--text text-primary text-uppercase text-no-wrap' onClick={(e) => rescanSystem()}>
<p style={{margin: '0 4rem .15rem 0'}} className={rescanInProgress ? 'text-blink-slow' : 'text-muted'}>
<i className='icarus-terminal-scan float-left' style={{fontSize: '2.5rem', marginRight: '.15rem'}}/>
FULLY<br/>SCANNED
SYSTEM<br/>SCANNED
</p>
</div>}
{!system?.scanPercentComplete &&
<div className='system-map__system-telemetry--with-text text-info text-uppercase text-no-wrap'>
<p style={{margin: '0 4rem .15rem 0'}} className='text-muted'>
<div className='system-map__system-telemetry--text text-info text-uppercase text-no-wrap' onClick={(e) => rescanSystem()}>
<p style={{margin: '0 4rem .15rem 0'}} className={rescanInProgress ? 'text-blink-slow' : 'text-muted'}>
<i className='icarus-terminal-scan float-left' style={{fontSize: '2.5rem', marginRight: '.15rem'}}/>
SCAN<br/>REQUIRED
NO SCAN<br/>DATA
</p>
</div>}
{system.position &&
Expand All @@ -169,7 +179,7 @@ export default function NavigationSystemMapPanel ({ system, systemObject, setSys

<div className='system-map__toolbar-background' />
<div className='system-map__toolbar'>
<LocationInformation system={system} cmdrStatus={cmdrStatus} />
<LocationInformation system={system} cmdrStatus={cmdrStatus}/>
<div className='system-map__info fx-fade-in text-uppercase'>
<span className='text-info'>
<i className='icarus-terminal-system-orbits' style={{ fontSize: '1.5rem', float: 'left', position: 'relative', left: '-.15rem' }} />
Expand Down Expand Up @@ -224,7 +234,7 @@ function PointsOfInterest({ system }) {
if (geologicalSignals === 0 && body.isLandable && body.volcanismType && body.volcanismType !== 'No volcanism') {
geologicalSignals++
}

return total + geologicalSignals
}, 0)
const humanSignals = system.bodies.reduce((total, body) => total + (body?.signals?.human ?? 0), 0)
Expand Down Expand Up @@ -260,7 +270,7 @@ function PointsOfInterest({ system }) {
)
}

function LocationInformation ({ system, cmdrStatus }) {
function LocationInformation ({ system, cmdrStatus, rescanSystem, rescanInProgress }) {
return (
<div className='system-map__location fx-fade-in hidden-small'>
{system?.distance > 0 &&
Expand Down Expand Up @@ -295,10 +305,6 @@ function LocationInformation ({ system, cmdrStatus }) {
: 'Current location'}
</h3>
</div>}
{system.isCurrentLocation === true && cmdrStatus?.flags?.fsdJump === true &&
<div className='text-center-vertical'>
<h3 className='text-blink-slow text-info' style={{ background: 'transparent' }}>Frame Shift Drive Active</h3>
</div>}
</div>
)
}
15 changes: 9 additions & 6 deletions src/client/css/system-map.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,20 +181,23 @@ on slow devices (e.g. Amazon Fire) to be the default */
font-size: 1rem;
}

.system-map__system-telemetry,
.system-map__system-telemetry--with-text {
.system-map__system-telemetry--progress,
.system-map__system-telemetry--text {
position: absolute;
bottom: .5rem;
bottom: -.5rem;
right: 1.5rem;
font-size: 1rem;
text-align: left;
padding: .1rem;
border-radius: .2rem;
width: 9rem;
z-index: 100;
width: 8rem;
padding: 1rem;
overflow: hidden;
}

.system-map__system-telemetry--with-text {
width: 8rem;
.system-map__system-telemetry--text {
right: 1.25rem;
}

.system-map__planetary-system {
Expand Down
11 changes: 10 additions & 1 deletion src/client/pages/nav/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export default function NavMapPage () {
const [system, setSystem] = useState()
const [systemObject, setSystemObject] = useState()
const [cmdrStatus, setCmdrStatus] = useState()
const [rescanInProgress, setRescanInProgress] = useState(false)

const search = async (searchInput) => {
const newSystem = await sendEvent('getSystem', { name: searchInput })
Expand All @@ -30,6 +31,14 @@ export default function NavMapPage () {
setSystem(newSystem)
}

const rescanSystem = async () => {
setRescanInProgress(true)
const newSystem = await sendEvent('getSystem', { name: system?.name, useCache: false })
setRescanInProgress(false)
if (!newSystem) return
setSystem(newSystem)
}

const setSystemObjectByName = (name) => {
const el = document.querySelector(`[data-system-object-name="${name}" i]`)
if (el) {
Expand Down Expand Up @@ -109,7 +118,7 @@ export default function NavMapPage () {
return (
<Layout connected={connected} active={active} ready={ready} loader={!componentReady}>
<Panel layout='full-width' navigation={NavPanelNavItems('Map', query)} search={search} exit={system?.isCurrentLocation === false ? () => getSystem() : null}>
<NavigationSystemMapPanel system={system} systemObject={systemObject} setSystemObject={setSystemObject} getSystem={getSystem} cmdrStatus={cmdrStatus} />
<NavigationSystemMapPanel system={system} systemObject={systemObject} setSystemObject={setSystemObject} getSystem={getSystem} cmdrStatus={cmdrStatus} rescanSystem={rescanSystem} rescanInProgress={rescanInProgress}/>
<NavigationInspectorPanel systemObject={systemObject} setSystemObjectByName={setSystemObjectByName} />
</Panel>
</Layout>
Expand Down

0 comments on commit fa10a42

Please sign in to comment.