Skip to content

Commit

Permalink
Redesign header
Browse files Browse the repository at this point in the history
  • Loading branch information
@iaincollins
iaincollins committed Jan 18, 2024
1 parent 4b920c3 commit 18c1b01
Show file tree
Hide file tree
Showing 9 changed files with 295 additions and 64 deletions.
9 changes: 6 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,13 @@

This is the website for [ardent-industry.com](https://ardent-industry.com)

It provides a web based interface to the Ardent API and Ardent Collector.
Ardent Industry provides trade and exploration data for the game [Elite Dangerous](https://www.elitedangerous.com/).

As of June 2023 the website and API are in beta.
It uses a live data feed from the [Elite: Dangerous Data Network](https://eddn.edcd.io) by the [Elite: Dangerous Community Developers](https://edcd.github.io/).

These three repositories combined make up the Ardent Industry service:

* https://github.com/iaincollins/ardent-www
* https://github.com/iaincollins/ardent-api
* https://github.com/iaincollins/ardent-collector

Expand All @@ -24,7 +27,7 @@ tools.

## Legal

Copyright Iain Collins, 2023.
Copyright Iain Collins, 2024.

This software has been released under the GNU Affero General Public License.

Expand Down
130 changes: 130 additions & 0 deletions components/dialog/about-dialog.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,130 @@
import { useState, useEffect } from 'react'
import Package from 'package.json'
import Dialog from 'components/dialog'

import { API_BASE_URL } from 'lib/consts'

export default ({ toggle }) => {
const [stats, setStats] = useState()
const [version, setVersion] = useState()

useEffect(() => {
(async () => {
const res = await fetch(`${API_BASE_URL}/v1/stats`)
const stats = await res.json()
setStats(stats)
})()
;(async () => {
const res = await fetch(`${API_BASE_URL}/v1/version`)
const version = await res.json()
setVersion(version)
})()
}, [])

return (
<Dialog title='About' toggle={toggle}>
<p>
ArdentOS v{Package.version}
{version &&
<>
{', '}
<a style={{ textTransform: 'none' }} href={API_BASE_URL} rel='noreferrer' target='_blank'>
Ardent API v{version.version}
</a>
</>}
</p>
<p className='muted'>
Trade &amp; exploration data for <a href='https://www.elitedangerous.com/' rel='noreferrer' target='_blank'>Elite Dangerous</a>
</p>
<p className='muted'>
Uses live data feed from <a href='https://eddn.edcd.io' rel='noreferrer' target='_blank'>EDDN</a> by <a href='https://edcd.github.io/' rel='noreferrer' target='_blank'>EDCD</a>
</p>
<p className='muted'>
<a href='https://github.com/iaincollins/ardent-www' rel='noreferrer' target='_blank'>ArdentOS</a>
<span className='muted'> | </span>
<a href='https://github.com/iaincollins/ardent-api' rel='noreferrer' target='_blank'>Ardent API</a>
<span className='muted'> | </span>
<a href='https://github.com/iaincollins/ardent-collector' rel='noreferrer' target='_blank'>Ardent Collector</a>
<span className='muted'> | </span>
<a href='/downloads' rel='noreferrer' target='_blank'>Downloads</a>
</p>
{/* ? 'Locations:\n' +
`* Star systems: ${stats.systems.toLocaleString()}\n` +
`* Points of interest: ${stats.pointsOfInterest.toLocaleString()}\n` +
'Stations:\n' +
`* Stations: ${stats.stations.stations.toLocaleString()}\n` +
`* Fleet Carriers: ${stats.stations.carriers.toLocaleString()}\n` +
`* Station updates in last hour: ${stats.stations.updatedInLastHour.toLocaleString()}\n` +
`* Station updates in last 24 hours: ${stats.stations.updatedInLast24Hours.toLocaleString()}\n` +
`* Station updates in last 7 days: ${stats.stations.updatedInLast7Days.toLocaleString()}\n` +
`* Station updates in last 30 days: ${stats.stations.updatedInLast30Days.toLocaleString()}\n` +
'Trade:\n' +
`* Station Markets: ${stats.trade.stations.toLocaleString()}\n` +
`* Fleet Carrier Markets: ${stats.trade.carriers.toLocaleString()}\n` +
`* Trade systems: ${stats.trade.systems.toLocaleString()}\n` +
`* Trade orders: ${stats.trade.tradeOrders.toLocaleString()}\n` +
`* Trade updates in last hour: ${stats.trade.updatedInLastHour.toLocaleString()}\n` +
`* Trade updates in last 24 hours: ${stats.trade.updatedInLast24Hours.toLocaleString()}\n` +
`* Trade updates in last 7 days: ${stats.trade.updatedInLast7Days.toLocaleString()}\n` +
`* Trade updates in last 30 days: ${stats.trade.updatedInLast30Days.toLocaleString()}\n` +
`* Unique commodities: ${stats.trade.uniqueCommodities.toLocaleString()}\n` +
`Stats last updated: ${stats.timestamp}\nStats updated every 15 minutes.`
: 'Stats not generated yet') */}

<h3>Statistics</h3>
{stats &&
<>
<p className='clear'>
Statistics last updated on {stats.timestamp.replace('T', ' at ').replace(/:\d\d\.(\d+)Z/, ' UTC')}
</p>
<ul>
<li>
Trade Data
<ul>
<li>
Trade Orders: {stats.trade.tradeOrders.toLocaleString()}
</li>
<li>
Markets: {(stats.trade.stations + stats.trade.carriers).toLocaleString()}
</li>
<li>
Trade Systems: {stats.trade.systems.toLocaleString()}
</li>
</ul>
</li>
<li>Location Data
<ul>
<li>
Star systems: {stats.systems.toLocaleString()}
</li>
<li>
Stations &amp; Settlements: {stats.stations.stations.toLocaleString()}
</li>
<li>
Fleet Carriers: {stats.stations.carriers.toLocaleString()}
</li>
<li>
Points of Interest: {stats.pointsOfInterest.toLocaleString()}
</li>
</ul>
</li>
</ul>
</>}

<h3>Legal</h3>
<p className='clear'>
Released under GNU Affero General Public License.
</p>
<p>
Elite Dangerous is copyright Frontier Developments plc. This software is
not endorsed by nor reflects the views or opinions of Frontier Developments and
no employee of Frontier Developments was involved in the making of it.
</p>
{/*
<pre>
{JSON.stringify(stats, 0, 2)}
</pre>
*/}
</Dialog>
)
}
16 changes: 16 additions & 0 deletions components/dialog/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export default ({ title, children, toggle }) => {
return (
<>
<div className='dialog__background' onClick={() => toggle(false)} />
<div className='dialog'>
<h3 className='dialog__title'>{title}</h3>
<div className='dialog__contents scrollable'>
{children}
</div>
<div className='dialog__buttons'>
<button className='button' onClick={() => toggle(false)}>Close</button>
</div>
</div>
</>
)
}
109 changes: 69 additions & 40 deletions components/header.js
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,81 @@
import { useState, useEffect } from 'react'
import Link from 'next/link'
import Package from 'package.json'

import { API_BASE_URL } from '../lib/consts'
import AboutDialog from 'components/dialog/about-dialog'

export default () => {
const [stats, setStats] = useState()
const [fullScreenState, setFullScreenState] = useState(false)
const [aboutDialogVisible, setAboutDialogVisible] = useState(false)

useEffect(() => {
(async () => {
const res = await fetch(`${API_BASE_URL}/v1/stats`)
const stats = await res.json()
setStats(stats)
})()
document.addEventListener('fullscreenchange', onFullScreenChangeHandler)
return () => document.removeEventListener('click', onFullScreenChangeHandler)
function onFullScreenChangeHandler (event) {
setFullScreenState(isFullScreen())
}
}, [])

return (
<>
<header>
<Link href='/' className='--no-hover' style={{ border: 'none' }}>
<div className='header__logo'>
<h1>
<em>A</em>rdent <em>I</em>ndustry
</h1>
<p style={{ fontStyle: 'italic' }}>
Trade &amp; Exploration
</p>
</div>
</Link>
<div className='header__navigation' style={{ display: 'none' }}>
<Link href='/commodities'>
<button className='button'><i className='icon icarus-terminal-cargo' /></button>
</Link>
<button className='button'><i className='icon icarus-terminal-system-orbits' /></button>
<header>
<Link href='/' className='--no-hover' style={{ border: 'none' }}>
<div className='header__logo'>
<h1>
<em>A</em>rdent <em>I</em>ndustry
</h1>
<p style={{ fontStyle: 'italic' }}>
Trade &amp; Exploration
</p>
</div>
{stats &&
<div className='is-hidden-mobile'>
<div className='header__stats'>
<span className='header__stats__label'>Star systems </span>
<span className='header__stats__value'>{stats.systems.toLocaleString()}</span>
<br />
<span className='header__stats__label'>Updates today </span>
<span className='header__stats__value'>{stats.trade.updatedInLast24Hours.toLocaleString()}</span>
<br />
<a style={{ textTransform: 'none' }} href='https://github.com/iaincollins/ardent-www' rel='noreferrer' target='_blank'>ArdentOS v{Package.version} [beta]</a>
</div>
</div>}
</header>
</>
</Link>
<div className='header__navigation' style={{ display: 'block' }}>
{/* <Link href='/commodities'>
<button className='button'><i className='icon icarus-terminal-cargo' /></button>
</Link>
<button className='button'><i className='icon icarus-terminal-system-orbits' /></button> */}
<button
className='button'
onClick={() => setAboutDialogVisible(!aboutDialogVisible)}
>
<i className='icon icarus-terminal-info' />
</button>
<button className='button' onClick={() => toggleFullScreen()}>
<i className={`icon ${fullScreenState === true ? 'icarus-terminal-exit' : 'icarus-terminal-fullscreen'}`} />
</button>
</div>
{aboutDialogVisible && <AboutDialog toggle={setAboutDialogVisible} />}
</header>
)
}

function isFullScreen () {
if (typeof document === 'undefined') return false

if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.webkitCurrentFullScreenElement) {
return false
} else {
return true
}
}

async function toggleFullScreen () {
if (isFullScreen()) {
if (document.cancelFullScreen) {
document.cancelFullScreen()
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen()
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen()
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen()
}
return false
} else {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen()
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen()
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen()
}
return true
}
}
4 changes: 2 additions & 2 deletions components/loader.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export default function Loader ({ visible }) {
return (
<div>
<>
{/* <div className='loader__background' style={{ opacity: visible ? 1 : 0 }} /> */}
<div className='loader__spinner' style={{ opacity: visible ? 1 : 0 }}>
<div className='loader__row'>
Expand Down Expand Up @@ -36,7 +36,7 @@ export default function Loader ({ visible }) {
<div className='loader__arrow loader__arrow--down loader__arrow--outer-9' />
</div>
</div>
</div>
</>
)
}

Expand Down
17 changes: 14 additions & 3 deletions css/components/header.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,25 @@
.header__navigation {
position: absolute;
top: 0;
right: 0;
right: 0.5rem;
padding: .25rem;
}

.header__navigation a {
border-bottom: none !important;
}

.header__navigation .button {
margin-left: 0;
padding-left: .8rem;
padding-right: .8rem;
}

.header__stats {
display: none;
position: absolute;
top: 0;
right: 0;
top: 0rem;
right: 0em;
height: 3.3rem;
padding: .5rem 2.5rem .25rem 0rem;
text-align: right;
Expand Down
57 changes: 57 additions & 0 deletions css/elements/dialog.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
.dialog__background {
position: fixed;
z-index: 10000;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.25);
backdrop-filter: blur(.1rem);
Xtransition: 1.5s ease-in-out;
}

.dialog {
position: fixed;
z-index: 10001;
border: .2rem solid var(--color-primary);
background: black;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: min(40rem, 80vw);
max-height: min(20rem, 80vh);
box-shadow: 0 0 5rem black, 0 0 10rem black;
padding: 0.5rem;
Xtransition: opacity .5s ease-in-out;
}

.dialog__title {
position: absolute;
top: -2.8rem;
left: -.2rem;
font-size: 1.6rem !important;
line-height: 2rem !important;
}

.dialog__contents {
position: absolute;
top: .3rem;
left: .3rem;
right: .3rem;
bottom: 3.3rem;
overflow: scroll;
padding-right: .4rem;
}

.dialog__buttons {
position: absolute;
display: block;
left: 0;
right: 0;
bottom: 0rem;
height: 3.2rem;
text-align: right;
overflow: hidden;
}
Loading

0 comments on commit 18c1b01

Please sign in to comment.