diff --git a/app/components/archaeology/abandonAllExcavatorsTab.tsx b/app/components/archaeology/abandonAllExcavatorsTab.tsx index 019488fb..0ba3dcbf 100644 --- a/app/components/archaeology/abandonAllExcavatorsTab.tsx +++ b/app/components/archaeology/abandonAllExcavatorsTab.tsx @@ -26,7 +26,7 @@ const AbandonAllExcavatorsTab: React.FunctionComponent = ({ view: { build return (
`, so the fields this -// reads out of it are a best guess based on the legacy panel rather than a confirmed shape. -// -type ExcavatorBody = { id?: number; name?: string; x?: number; y?: number }; +type Excavator = { + id: number; + date_landed: string; + body?: { + id: number; + name: string; + x: number; + y: number; + image: string; + }; + artifact?: number; + glyph?: number; + plan?: number; + resource?: number; +}; const chancePercent = (chance?: number) => (chance === undefined ? '—' : `${chance}%`); @@ -29,7 +40,7 @@ const ExcavatorsTab: React.FunctionComponent = ({ view: { building } }) =
{data && (

- {excavators.length} of {data.max_excavators} excavators deployed + {excavators.length - 1} of {data.max_excavators} excavators deployed {data.travelling > 0 && ` (${data.travelling} travelling)`}.

)} @@ -47,6 +58,7 @@ const ExcavatorsTab: React.FunctionComponent = ({ view: { building } }) = Body + Name Artifact Glyph Plan @@ -55,52 +67,62 @@ const ExcavatorsTab: React.FunctionComponent = ({ view: { building } }) = - {excavators.map((excavator) => { - const body = excavator.body as ExcavatorBody | undefined; - - return ( - - - {body?.name ? ( - - ) : ( - '—' - )} - - {chancePercent(excavator.artifact_chance)} - {chancePercent(excavator.glyph_chance)} - {chancePercent(excavator.plan_chance)} - {chancePercent(excavator.resource_chance)} - - - - - ); - })} + }} + > + View + +
+ + + + ))}
diff --git a/app/components/blackHoleGenerator/singularityTab.tsx b/app/components/blackHoleGenerator/singularityTab.tsx index b912459d..e4688744 100644 --- a/app/components/blackHoleGenerator/singularityTab.tsx +++ b/app/components/blackHoleGenerator/singularityTab.tsx @@ -70,7 +70,11 @@ const Cooldown: React.FunctionComponent = ({ view: { building } }) => {

- You may subsidize the cool-down for {COOLDOWN_SUBSIDY_COST} . + You may subsidize the cool-down for {COOLDOWN_SUBSIDY_COST}{' '} + + + + .

diff --git a/app/components/builder/categoryMenu.tsx b/app/components/builder/categoryMenu.tsx index 46d52049..54d1193c 100644 --- a/app/components/builder/categoryMenu.tsx +++ b/app/components/builder/categoryMenu.tsx @@ -56,13 +56,20 @@ const CategoryMenu: React.FunctionComponent = ({ onSelect }) => ( -
- - +
+
+ +
); diff --git a/app/components/building/actionButton.tsx b/app/components/building/actionButton.tsx index 1c339299..11e7950f 100644 --- a/app/components/building/actionButton.tsx +++ b/app/components/building/actionButton.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import classnames from 'classnames'; +import classNames from 'classnames'; type Props = { actionName: string; @@ -20,7 +20,7 @@ class ActionButton extends React.Component { return ( - -
- -
-
- -
+
+ + +
); diff --git a/app/components/development/buildQueueTab.tsx b/app/components/development/buildQueueTab.tsx index 36f97fd0..e4a05647 100644 --- a/app/components/development/buildQueueTab.tsx +++ b/app/components/development/buildQueueTab.tsx @@ -42,7 +42,7 @@ const Remaining: React.FunctionComponent<{ seconds: number }> = ({ seconds }) => }; const Queue: React.FunctionComponent = ({ view, queue, subsidyCost, buildings }) => { - const {building} = view; + const { building } = view; const subsidizeAll = useSubsidizeBuildQueueMutation(building.id, building.url); const subsidizeOne = useSubsidizeOneBuildMutation(building.id, building.url); const cancelOne = useCancelBuildMutation(building.id, building.url); @@ -81,8 +81,11 @@ const Queue: React.FunctionComponent = ({ view, queue, subsidyCost,
- You can subsidize the build queue for {subsidyCost} to finish - it immediately. + You can subsidize the build queue for {subsidyCost}{' '} + + + {' '} + to finish it immediately.
diff --git a/app/components/embassy/allianceTab.tsx b/app/components/embassy/allianceTab.tsx index 97d7dcf9..79584409 100644 --- a/app/components/embassy/allianceTab.tsx +++ b/app/components/embassy/allianceTab.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { AllianceStatus, Building } from 'app/interfaces'; -import * as util from 'app/util'; import * as vex from 'app/vex'; import { useDissolveAllianceMutation, useLeaveAllianceMutation, useUpdateAllianceMutation, } from 'app/queries/embassy'; +import TimeInWords from 'app/components/menu/timeInWords'; type Props = { building: Building; @@ -29,10 +29,6 @@ const AllianceTab: React.FunctionComponent = ({ building, alliance, isLea const [reason, setReason] = React.useState(''); const [message, setMessage] = React.useState(''); - const founded = alliance.date_created - ? util.formatMomentLong(util.serverDateToMoment(alliance.date_created)) - : 'Unknown'; - const handleSave = () => { update.mutate( { description, forum_uri: forumUri, announcements }, @@ -43,7 +39,8 @@ const AllianceTab: React.FunctionComponent = ({ building, alliance, isLea return (

- Founded: {founded} + Founded:{' '} +

{isLeader ? ( diff --git a/app/components/essentia/boost.tsx b/app/components/essentia/boost.tsx index 48a95b60..b52a52b3 100644 --- a/app/components/essentia/boost.tsx +++ b/app/components/essentia/boost.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { observer } from 'mobx-react'; -import classnames from 'classnames'; +import classNames from 'classnames'; import * as util from 'app/util'; import Icon from 'app/components/menu/icon'; import { IconStyle } from 'app/interfaces/menu/icons'; @@ -32,7 +32,7 @@ const Boost: React.FunctionComponent = ({ type, iconStyle, description, m
{ms > 0 ? (
3 * day, // More than three days 'is-warning': 3 * day > ms && ms > day, // Less than three days and more than one day 'is-danger': day > ms, // Less than one day @@ -45,7 +45,7 @@ const Boost: React.FunctionComponent = ({ type, iconStyle, description, m )} -
+
- - -

OR

- -
-
- -
-
- -
+
+ Invite your friends to the game and you get{' '} + free Essentia! For every university level + past 4 that they achieve, you'll get 5 Essentia. That's up to{' '} + 130 Essentia per friend!
-

OR

- -

- Invite your friends to the game and you get free Essentia! For every - university level past 4 that they achieve, you'll get 5 Essentia. That's up to{' '} - - 130 Essentia - {' '} - per friend! -

- - -
+ {canSubsidize || subsidize.isPending ? ( +
+ +
+ ) : undefined} {spies.length === 0 ? (
There are no spies stationed here.
@@ -77,7 +79,7 @@ const SpiesTab: React.FunctionComponent = ({ building }) => {
{renamingId === spy.id ? ( -
+
= ({ building }) => {
) : ( - +

+ { + setRenamingId(spy.id); + setRenameValue(spy.name); + }} + > + {spy.name} + +

)} -
+
+ + {spy.assignment} + +
+ +
Level {spy.level} — Offense {spy.offense_rating ?? '—'} / Defense{' '} {spy.defense_rating ?? '—'}
-
Current assignment: {spy.assignment}
+ +
+ Attributes: Intel: {spy.intel} + , Mayhem: {spy.mayhem}, Politics: {spy.politics}, Theft: {spy.theft}, + Mission Count:{' '} + {(spy.mission_count?.offensive ?? 0) + (spy.mission_count?.defensive ?? 0)} +
+ +
{Boolean(spy.is_available) && ( -
+
= ({ laws }) => ( {law.name} {law.description} - {law.date_enacted} + + + ))} diff --git a/app/components/login.tsx b/app/components/login.tsx index 989fba68..ffa1cccf 100644 --- a/app/components/login.tsx +++ b/app/components/login.tsx @@ -22,7 +22,7 @@ const LoginWindow: React.FunctionComponent = () => { { empire_name: empireNameField.current?.value || '', password: passwordField.current?.value || '', - api_key: 'anonymous', // TODO: add an API key + api_key: environment.getApiKey(), browser: fingerprint, }, { diff --git a/app/components/market/addTradeTab.tsx b/app/components/market/addTradeTab.tsx index 64d62030..814ab8cf 100644 --- a/app/components/market/addTradeTab.tsx +++ b/app/components/market/addTradeTab.tsx @@ -64,12 +64,13 @@ const AddTradeTab: React.FunctionComponent = ({ building, endpoint, needs
-
-
- - Ask +
+
+
= ({ building, endpoint, needs onChange={(event) => setAsk(util.int(event.target.value))} />
+
- {needsShip && ( -
-
+ {needsShip && ( +
+ + +
+
- )} +
+ )} +
+
+
))} - -
-
- - {countable && ( -
- setQuantity(util.int(event.target.value))} - /> -
+
+ )} - -
- -
-
- )} - - - {error &&
{error}
} - - {items.length > 0 && ( - - - - - - - - - - {items.map((item, index) => ( - - - - - - ))} - -
ItemQuantityAction
{describeItem(item)}{util.commify(item.quantity ?? 1)} - -
- )} + + + {error &&
{error}
} +
+ +
+ {items.length > 0 && ( + + + + + + + + + + {items.map((item, index) => ( + + + + + + ))} + +
ItemQuantityAction
{describeItem(item)}{util.commify(item.quantity ?? 1)} + +
+ )} +
+
); }; diff --git a/app/components/market/myTradesTab.tsx b/app/components/market/myTradesTab.tsx index 79fbd81e..3758b7a0 100644 --- a/app/components/market/myTradesTab.tsx +++ b/app/components/market/myTradesTab.tsx @@ -12,6 +12,7 @@ import { useWithdrawTradeMutation, } from 'app/queries/market'; import { BUILDING_WINDOW_SCROLL } from 'app/constants'; +import TimeInWords from 'app/components/menu/timeInWords'; type Props = { building: Building; @@ -53,10 +54,15 @@ const MyTradesTab: React.FunctionComponent = ({ {trades.map((trade) => ( - {util.formatMomentLong(util.serverDateToMoment(trade.date_offered))} + + + {trade.offer.join(', ')} - {util.commify(trade.ask)} + {util.commify(trade.ask)}{' '} + + + -
+
+ {platforms.map((platform) => ( +
+
+
+
+ +
-
-

{platform.asteroid.name}

-
- {platform.asteroid.x} : {platform.asteroid.y} -
+
+

{platform.asteroid.name}

+
+ {platform.asteroid.x}, {platform.asteroid.y} +
- - - {oreRates(platform as unknown as Record).map((row) => ( - - - - - ))} - -
{util.humanize(row.ore)}{util.commify(row.rate)}/hr
-
+ + + {oreRates(platform as unknown as Record).map((row) => ( + + + + + ))} + +
{util.humanize(row.ore)}{util.commify(row.rate)}/hr
+
-
- +
+ +
+ +
+
-
- ))} + ))} +
)}
@@ -137,5 +105,4 @@ const PlatformsTab: React.FunctionComponent = ({ building }) => { ); }; -export { capacityDescription }; export default PlatformsTab; diff --git a/app/components/miningMinistry/shipsTab.tsx b/app/components/miningMinistry/shipsTab.tsx index 85642f63..7d356d55 100644 --- a/app/components/miningMinistry/shipsTab.tsx +++ b/app/components/miningMinistry/shipsTab.tsx @@ -8,6 +8,7 @@ import { useRemoveCargoShipMutation, } from 'app/queries/miningMinistry'; import { BUILDING_WINDOW_SCROLL } from 'app/constants'; +import CapacityDescription from './capacityDescription'; type Props = { building: Building; @@ -24,6 +25,8 @@ const ShipsTab: React.FunctionComponent = ({ building }) => { return (
+ + {ships.length === 0 ? (
There are no cargo ships available to this ministry. diff --git a/app/components/missionCommand/missionsTab.tsx b/app/components/missionCommand/missionsTab.tsx index ecc57ca7..6b5fe6fe 100644 --- a/app/components/missionCommand/missionsTab.tsx +++ b/app/components/missionCommand/missionsTab.tsx @@ -9,6 +9,7 @@ import { useSkipMissionMutation, } from 'app/queries/missionCommand'; import { BUILDING_WINDOW_SCROLL } from 'app/constants'; +import TimeInWords from 'app/components/menu/timeInWords'; type Props = { building: Building; @@ -36,7 +37,7 @@ const MissionsTab: React.FunctionComponent = ({ building }) => {

- Posted: {util.formatMomentLong(util.serverDateToMoment(mission.date_posted))} + Posted:

Max University: {mission.max_university_level}

@@ -44,18 +45,22 @@ const MissionsTab: React.FunctionComponent = ({ building }) => {

{mission.description}

Objectives

-
    - {mission.objectives.map((objective) => ( -
  1. {objective}
    2. - ))} -
+
+
    + {mission.objectives.map((objective) => ( +
  1. {objective}
    2. + ))} +
+

Rewards

-
    - {mission.rewards.map((reward) => ( -
  1. {reward}
    2. - ))} -
+
+
    + {mission.rewards.map((reward) => ( +
  1. {reward}
    2. + ))} +
+
diff --git a/app/components/network19/coverageTab.tsx b/app/components/network19/coverageTab.tsx index a85a9641..c6eeaa8f 100644 --- a/app/components/network19/coverageTab.tsx +++ b/app/components/network19/coverageTab.tsx @@ -5,7 +5,8 @@ import QueryState from 'app/components/queryState'; import * as util from 'app/util'; import { useBuildingViewQuery } from 'app/queries/building'; import { useNewsQuery, useRestrictCoverageMutation } from 'app/queries/network19'; -import { BUILDING_WINDOW_SCROLL } from 'app/constants'; +import { BUILDING_WINDOW_SCROLL_SMALL } from 'app/constants'; +import TimeInWords from 'app/components/menu/timeInWords'; type Props = { building: Building; @@ -30,29 +31,49 @@ const NewsFeed: React.FunctionComponent = ({ buildingId }) => { {data && ( <> -
    - {data.news.map((item) => ( -
  • - {util.formatMomentLong(util.serverDateToMoment(item.date))}: {item.headline} -
    • - ))} -
+
+ + + + + + + + + + {data.news.map((item) => ( + + + + + ))} + +
EventHeadline
+ + {item.headline}
+
{feeds.map(([name, url]) => ( - {name} - RSS + {name} + + RSS + ))}
@@ -90,7 +111,7 @@ const CoverageTab: React.FunctionComponent = ({ building }) => {