Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-23 06:32:26 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2645 from nickofolas/improvement/alignments

Browse Source 
Align various buttons with display: grid
This commit is contained in:
hydroflame 2022-01-15 12:53:38 -05:00 committed by GitHub
commit 0a1e1c548b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 155 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/Hacknet/ui/HacknetRoot.tsx
View File

@ -27,6 +27,7 @@ import { GetServer } from "../../Server/AllServers";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
import Grid from "@mui/material/Grid"; import Grid from "@mui/material/Grid";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
import { Box } from "@mui/material";
interface IProps { interface IProps {
player: IPlayer; player: IPlayer;
@ -136,7 +137,7 @@ export function HacknetRoot(props: IProps): React.ReactElement {
{hasHacknetServers(props.player) && <Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>} {hasHacknetServers(props.player) && <Button onClick={() => setOpen(true)}>Spend Hashes on Upgrades</Button>}
<Grid container>{nodes}</Grid> <Box sx={{ display: 'grid', width: 'fit-content', gridTemplateColumns: 'repeat(3, 1fr)' }}>{nodes}</Box>
<HashUpgradeModal open={open} onClose={() => setOpen(false)} /> <HashUpgradeModal open={open} onClose={() => setOpen(false)} />
</> </>
); );

8
src/Locations/ui/CasinoLocation.tsx
View File

@ -10,6 +10,7 @@ import { CoinFlip } from "../../Casino/CoinFlip";
import { Roulette } from "../../Casino/Roulette"; import { Roulette } from "../../Casino/Roulette";
import { SlotMachine } from "../../Casino/SlotMachine"; import { SlotMachine } from "../../Casino/SlotMachine";
import { IPlayer } from "../../PersonObjects/IPlayer"; import { IPlayer } from "../../PersonObjects/IPlayer";
import { Box } from "@mui/material";
enum GameType { enum GameType {
None = "none", None = "none",
@ -33,15 +34,12 @@ export function CasinoLocation(props: IProps): React.ReactElement {
return ( return (
<> <>
{game === GameType.None && ( {game === GameType.None && (
<> <Box sx={{ display: 'grid', width: 'fit-content' }}>
<Button onClick={() => updateGame(GameType.Coin)}>Play coin flip</Button> <Button onClick={() => updateGame(GameType.Coin)}>Play coin flip</Button>
<br />
<Button onClick={() => updateGame(GameType.Slots)}>Play slots</Button> <Button onClick={() => updateGame(GameType.Slots)}>Play slots</Button>
<br />
<Button onClick={() => updateGame(GameType.Roulette)}>Play roulette</Button> <Button onClick={() => updateGame(GameType.Roulette)}>Play roulette</Button>
<br />
<Button onClick={() => updateGame(GameType.Blackjack)}>Play blackjack</Button> <Button onClick={() => updateGame(GameType.Blackjack)}>Play blackjack</Button>
</> </Box>
)} )}
{game !== GameType.None && ( {game !== GameType.None && (
<> <>

206
src/Locations/ui/CompanyLocation.tsx
View File

@ -226,108 +226,114 @@ export function CompanyLocation(props: IProps): React.ReactElement {
</Box> </Box>
<Typography>-------------------------</Typography> <Typography>-------------------------</Typography>
<br /> <br />
<Button onClick={work}>Work</Button>
&nbsp;&nbsp;&nbsp;&nbsp;
<Button onClick={() => setQuitOpen(true)}>Quit</Button>
<QuitJobModal
locName={props.locName}
company={company}
onQuit={rerender}
open={quitOpen}
onClose={() => setQuitOpen(false)}
/>
</> </>
)} )}
<br /> <Box sx={{ display: 'grid', width: 'fit-content' }}>
{company.hasAgentPositions() && ( {isEmployedHere && (
<ApplyToJobButton <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
company={company} <Button onClick={work}>Work</Button>
entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]} <Button onClick={() => setQuitOpen(true)}>Quit</Button>
onClick={applyForAgentJob} <QuitJobModal
text={"Apply for Agent Job"} locName={props.locName}
/> company={company}
)} onQuit={rerender}
{company.hasBusinessConsultantPositions() && ( open={quitOpen}
<ApplyToJobButton onClose={() => setQuitOpen(false)}
company={company} />
entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]} </Box>
onClick={applyForBusinessConsultantJob} )
text={"Apply for Business Consultant Job"}
/> }
)} {company.hasAgentPositions() && (
{company.hasBusinessPositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.AgentCompanyPositions[0]]}
entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]} onClick={applyForAgentJob}
onClick={applyForBusinessJob} text={"Apply for Agent Job"}
text={"Apply for Business Job"} />
/> )}
)} {company.hasBusinessConsultantPositions() && (
{company.hasEmployeePositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.BusinessConsultantCompanyPositions[0]]}
entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]} onClick={applyForBusinessConsultantJob}
onClick={applyForEmployeeJob} text={"Apply for Business Consultant Job"}
text={"Apply to be an Employee"} />
/> )}
)} {company.hasBusinessPositions() && (
{company.hasEmployeePositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.BusinessCompanyPositions[0]]}
entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]} onClick={applyForBusinessJob}
onClick={applyForPartTimeEmployeeJob} text={"Apply for Business Job"}
text={"Apply to be a part-time Employee"} />
/> )}
)} {company.hasEmployeePositions() && (
{company.hasITPositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.MiscCompanyPositions[1]]}
entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]} onClick={applyForEmployeeJob}
onClick={applyForItJob} text={"Apply to be an Employee"}
text={"Apply for IT Job"} />
/> )}
)} {company.hasEmployeePositions() && (
{company.hasSecurityPositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[1]]}
entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]} onClick={applyForPartTimeEmployeeJob}
onClick={applyForSecurityJob} text={"Apply to be a part-time Employee"}
text={"Apply for Security Job"} />
/> )}
)} {company.hasITPositions() && (
{company.hasSoftwareConsultantPositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.ITCompanyPositions[0]]}
entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]} onClick={applyForItJob}
onClick={applyForSoftwareConsultantJob} text={"Apply for IT Job"}
text={"Apply for Software Consultant Job"} />
/> )}
)} {company.hasSecurityPositions() && (
{company.hasSoftwarePositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.SecurityCompanyPositions[2]]}
entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]} onClick={applyForSecurityJob}
onClick={applyForSoftwareJob} text={"Apply for Security Job"}
text={"Apply for Software Job"} />
/> )}
)} {company.hasSoftwareConsultantPositions() && (
{company.hasWaiterPositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.SoftwareConsultantCompanyPositions[0]]}
entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]} onClick={applyForSoftwareConsultantJob}
onClick={applyForWaiterJob} text={"Apply for Software Consultant Job"}
text={"Apply to be a Waiter"} />
/> )}
)} {company.hasSoftwarePositions() && (
{company.hasWaiterPositions() && ( <ApplyToJobButton
<ApplyToJobButton company={company}
company={company} entryPosType={CompanyPositions[posNames.SoftwareCompanyPositions[0]]}
entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]} onClick={applyForSoftwareJob}
onClick={applyForPartTimeWaiterJob} text={"Apply for Software Job"}
text={"Apply to be a part-time Waiter"} />
/> )}
)} {company.hasWaiterPositions() && (
{location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>} <ApplyToJobButton
company={company}
entryPosType={CompanyPositions[posNames.MiscCompanyPositions[0]]}
onClick={applyForWaiterJob}
text={"Apply to be a Waiter"}
/>
)}
{company.hasWaiterPositions() && (
<ApplyToJobButton
company={company}
entryPosType={CompanyPositions[posNames.PartTimeCompanyPositions[0]]}
onClick={applyForPartTimeWaiterJob}
text={"Apply to be a part-time Waiter"}
/>
)}
{location.infiltrationData != null && <Button onClick={startInfiltration}>Infiltrate Company</Button>}
</Box>
</> </>
); );
} }

5
src/Locations/ui/GymLocation.tsx
View File

@ -16,6 +16,7 @@ import { Server } from "../../Server/Server";
import { Money } from "../../ui/React/Money"; import { Money } from "../../ui/React/Money";
import { IRouter } from "../../ui/Router"; import { IRouter } from "../../ui/Router";
import { serverMetadata } from "../../Server/data/servers"; import { serverMetadata } from "../../Server/data/servers";
import { Box } from "@mui/material";
type IProps = { type IProps = {
loc: Location; loc: Location;
@ -56,7 +57,7 @@ export function GymLocation(props: IProps): React.ReactElement {
const cost = CONSTANTS.ClassGymBaseCost * calculateCost(); const cost = CONSTANTS.ClassGymBaseCost * calculateCost();
return ( return (
<> <Box sx={{ display: 'grid', width: 'fit-content' }}>
<Button onClick={trainStrength}> <Button onClick={trainStrength}>
Train Strength (<Money money={cost} player={props.p} /> / sec) Train Strength (<Money money={cost} player={props.p} /> / sec)
</Button> </Button>
@ -72,6 +73,6 @@ export function GymLocation(props: IProps): React.ReactElement {
<Button onClick={trainAgility}> <Button onClick={trainAgility}>
Train Agility (<Money money={cost} player={props.p} /> / sec) Train Agility (<Money money={cost} player={props.p} /> / sec)
</Button> </Button>
</> </Box>
); );
} }

17
src/Locations/ui/SlumsLocation.tsx
View File

@ -11,6 +11,7 @@ import { Crimes } from "../../Crime/Crimes";
import { numeralWrapper } from "../../ui/numeralFormat"; import { numeralWrapper } from "../../ui/numeralFormat";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { Box } from "@mui/material";
export function SlumsLocation(): React.ReactElement { export function SlumsLocation(): React.ReactElement {
const player = use.Player(); const player = use.Player();
@ -113,73 +114,61 @@ export function SlumsLocation(): React.ReactElement {
const heistChance = Crimes.Heist.successRate(player); const heistChance = Crimes.Heist.successRate(player);
return ( return (
<> <Box sx={{ display: 'grid', width: 'fit-content' }}>
<Tooltip title={<>Attempt to shoplift from a low-end retailer</>}> <Tooltip title={<>Attempt to shoplift from a low-end retailer</>}>
<Button onClick={shoplift}> <Button onClick={shoplift}>
Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success) Shoplift ({numeralWrapper.formatPercentage(shopliftChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to commit armed robbery on a high-end store</>}> <Tooltip title={<>Attempt to commit armed robbery on a high-end store</>}>
<Button onClick={robStore}> <Button onClick={robStore}>
Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success) Rob store ({numeralWrapper.formatPercentage(robStoreChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to mug a random person on the street</>}> <Tooltip title={<>Attempt to mug a random person on the street</>}>
<Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button> <Button onClick={mug}>Mug someone ({numeralWrapper.formatPercentage(mugChance)} chance of success)</Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to rob property from someone's house</>}> <Tooltip title={<>Attempt to rob property from someone's house</>}>
<Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button> <Button onClick={larceny}>Larceny ({numeralWrapper.formatPercentage(larcenyChance)} chance of success)</Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to deal drugs</>}> <Tooltip title={<>Attempt to deal drugs</>}>
<Button onClick={dealDrugs}> <Button onClick={dealDrugs}>
Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success) Deal Drugs ({numeralWrapper.formatPercentage(drugsChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to forge corporate bonds</>}> <Tooltip title={<>Attempt to forge corporate bonds</>}>
<Button onClick={bondForgery}> <Button onClick={bondForgery}>
Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success) Bond Forgery ({numeralWrapper.formatPercentage(bondChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to smuggle illegal arms into the city</>}> <Tooltip title={<>Attempt to smuggle illegal arms into the city</>}>
<Button onClick={traffickArms}> <Button onClick={traffickArms}>
Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success) Traffick illegal Arms ({numeralWrapper.formatPercentage(armsChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to murder a random person on the street</>}> <Tooltip title={<>Attempt to murder a random person on the street</>}>
<Button onClick={homicide}> <Button onClick={homicide}>
Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success) Homicide ({numeralWrapper.formatPercentage(homicideChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to commit grand theft auto</>}> <Tooltip title={<>Attempt to commit grand theft auto</>}>
<Button onClick={grandTheftAuto}> <Button onClick={grandTheftAuto}>
Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success) Grand theft Auto ({numeralWrapper.formatPercentage(gtaChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>}> <Tooltip title={<>Attempt to kidnap and ransom a high-profile-target</>}>
<Button onClick={kidnap}> <Button onClick={kidnap}>
Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success) Kidnap and Ransom ({numeralWrapper.formatPercentage(kidnapChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to assassinate a high-profile target</>}> <Tooltip title={<>Attempt to assassinate a high-profile target</>}>
<Button onClick={assassinate}> <Button onClick={assassinate}>
Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success) Assassinate ({numeralWrapper.formatPercentage(assassinateChance)} chance of success)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={<>Attempt to pull off the ultimate heist</>}> <Tooltip title={<>Attempt to pull off the ultimate heist</>}>
<Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button> <Button onClick={heist}>Heist ({numeralWrapper.formatPercentage(heistChance)} chance of success)</Button>
</Tooltip> </Tooltip>
<br /> </Box>
</>
); );
} }

2
src/Locations/ui/SpecialLocation.tsx
View File

@ -81,7 +81,7 @@ export function SpecialLocation(props: IProps): React.ReactElement {
return <></>; return <></>;
} }
const text = inBladeburner ? "Enter Bladeburner Headquarters" : "Apply to Bladeburner Division"; const text = inBladeburner ? "Enter Bladeburner Headquarters" : "Apply to Bladeburner Division";
return <Button onClick={handleBladeburner}>{text}</Button>; return <><br/><Button onClick={handleBladeburner}>{text}</Button></>;
} }
function renderNoodleBar(): React.ReactElement { function renderNoodleBar(): React.ReactElement {

5
src/Locations/ui/TechVendorLocation.tsx
View File

@ -18,6 +18,7 @@ import { Money } from "../../ui/React/Money";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { PurchaseServerModal } from "./PurchaseServerModal"; import { PurchaseServerModal } from "./PurchaseServerModal";
import { numeralWrapper } from "../../ui/numeralFormat"; import { numeralWrapper } from "../../ui/numeralFormat";
import { Box } from "@mui/material";
interface IServerProps { interface IServerProps {
ram: number; ram: number;
@ -70,7 +71,9 @@ export function TechVendorLocation(props: IProps): React.ReactElement {
return ( return (
<> <>
<br /> <br />
{purchaseServerButtons} <Box sx={{ display: 'grid', width: 'fit-content' }}>
{purchaseServerButtons}
</Box>
<br /> <br />
<Typography> <Typography>
<i>"You can order bigger servers via scripts. We don't take custom orders in person."</i> <i>"You can order bigger servers via scripts. We don't take custom orders in person."</i>

10
src/Locations/ui/UniversityLocation.tsx
View File

@ -15,6 +15,7 @@ import { Server } from "../../Server/Server";
import { Money } from "../../ui/React/Money"; import { Money } from "../../ui/React/Money";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { Box } from "@mui/material";
type IProps = { type IProps = {
loc: Location; loc: Location;
@ -72,45 +73,40 @@ export function UniversityLocation(props: IProps): React.ReactElement {
const earnCharismaExpTooltip = `Gain charisma experience!`; const earnCharismaExpTooltip = `Gain charisma experience!`;
return ( return (
<> <Box sx={{ display: 'grid', width: 'fit-content' }}>
<Tooltip title={earnHackingExpTooltip}> <Tooltip title={earnHackingExpTooltip}>
<Button onClick={study}>Study Computer Science (free)</Button> <Button onClick={study}>Study Computer Science (free)</Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={earnHackingExpTooltip}> <Tooltip title={earnHackingExpTooltip}>
<Button onClick={dataStructures}> <Button onClick={dataStructures}>
Take Data Structures course ( Take Data Structures course (
<Money money={dataStructuresCost} player={player} /> / sec) <Money money={dataStructuresCost} player={player} /> / sec)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={earnHackingExpTooltip}> <Tooltip title={earnHackingExpTooltip}>
<Button onClick={networks}> <Button onClick={networks}>
Take Networks course ( Take Networks course (
<Money money={networksCost} player={player} /> / sec) <Money money={networksCost} player={player} /> / sec)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={earnHackingExpTooltip}> <Tooltip title={earnHackingExpTooltip}>
<Button onClick={algorithms}> <Button onClick={algorithms}>
Take Algorithms course ( Take Algorithms course (
<Money money={algorithmsCost} player={player} /> / sec) <Money money={algorithmsCost} player={player} /> / sec)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={earnCharismaExpTooltip}> <Tooltip title={earnCharismaExpTooltip}>
<Button onClick={management}> <Button onClick={management}>
Take Management course ( Take Management course (
<Money money={managementCost} player={player} /> / sec) <Money money={managementCost} player={player} /> / sec)
</Button> </Button>
</Tooltip> </Tooltip>
<br />
<Tooltip title={earnCharismaExpTooltip}> <Tooltip title={earnCharismaExpTooltip}>
<Button onClick={leadership}> <Button onClick={leadership}>
Take Leadership course ( Take Leadership course (
<Money money={leadershipCost} player={player} /> / sec) <Money money={leadershipCost} player={player} /> / sec)
</Button> </Button>
</Tooltip> </Tooltip>
</> </Box>
); );
} }

43
src/Programs/ui/ProgramsRoot.tsx
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
import { use } from "../../ui/Context"; import { use } from "../../ui/Context";
import { getAvailableCreatePrograms } from "../ProgramHelpers"; import { getAvailableCreatePrograms } from "../ProgramHelpers";
import { Tooltip, Typography } from "@mui/material"; import { Box, Tooltip, Typography } from "@mui/material";
import Button from "@mui/material/Button"; import Button from "@mui/material/Button";
export const ProgramsSeen: string[] = []; export const ProgramsSeen: string[] = [];
@ -38,27 +38,28 @@ export function ProgramsRoot(): React.ReactElement {
time. Your progress will be saved and you can continue later. time. Your progress will be saved and you can continue later.
</Typography> </Typography>
{programs.map((program) => { <Box sx={{ display: 'grid', width: 'fit-content' }}>
const create = program.create; {programs.map((program) => {
if (create === null) return <></>; const create = program.create;
if (create === null) return <></>;
return ( return (
<React.Fragment key={program.name}> <React.Fragment key={program.name}>
<Tooltip title={create.tooltip}> <Tooltip title={create.tooltip}>
<Button <Button
sx={{ my: 1 }} sx={{ my: 1 }}
onClick={(event) => { onClick={(event) => {
if (!event.isTrusted) return; if (!event.isTrusted) return;
player.startCreateProgramWork(router, program.name, create.time, create.level); player.startCreateProgramWork(router, program.name, create.time, create.level);
}} }}
> >
{program.name} {program.name}
</Button> </Button>
</Tooltip> </Tooltip>
<br /> </React.Fragment>
</React.Fragment> );
); })}
})} </Box>
</> </>
); );
} }

16
src/ui/React/GameOptionsRoot.tsx
View File

@ -529,19 +529,19 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
</> </>
)} )}
</Grid> </Grid>
<Grid item xs={12} sm={6}> <Box sx={{ display: 'grid', width: 'fit-content', height: 'fit-content' }}>
<Box> <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
<Button onClick={() => props.save()}>Save Game</Button> <Button onClick={() => props.save()}>Save Game</Button>
<Button onClick={() => setDeleteOpen(true)}>Delete Game</Button> <Button onClick={() => setDeleteOpen(true)}>Delete Game</Button>
</Box> </Box>
<Box> <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
<Tooltip title={<Typography>Export your game to a text file.</Typography>}> <Tooltip title={<Typography>Export your game to a text file.</Typography>}>
<Button onClick={() => props.export()}> <Button onClick={() => props.export()}>
<DownloadIcon color="primary" /> <DownloadIcon color="primary" />
Export Game Export Game
</Button> </Button>
</Tooltip> </Tooltip>
<Tooltip title={<Typography>Import your game from a text file.<br/>This will <strong>overwrite</strong> your current game. Back it up first!</Typography>}> <Tooltip title={<Typography>Import your game from a text file.<br />This will <strong>overwrite</strong> your current game. Back it up first!</Typography>}>
<Button onClick={startImport}> <Button onClick={startImport}>
<UploadIcon color="primary" /> <UploadIcon color="primary" />
Import Game Import Game
@ -571,7 +571,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
} }
/> />
</Box> </Box>
<Box> <Box sx={{ display: 'grid' }}>
<Tooltip <Tooltip
title={ title={
<Typography> <Typography>
@ -586,7 +586,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<Button onClick={() => props.forceKill()}>Force kill all active scripts</Button> <Button onClick={() => props.forceKill()}>Force kill all active scripts</Button>
</Tooltip> </Tooltip>
</Box> </Box>
<Box> <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
<Tooltip <Tooltip
title={ title={
<Typography> <Typography>
@ -613,7 +613,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button> <Button onClick={() => setDiagnosticOpen(true)}>Diagnose files</Button>
</Tooltip> </Tooltip>
</Box> </Box>
<Box> <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
<Button onClick={() => setThemeEditorOpen(true)}>Theme editor</Button> <Button onClick={() => setThemeEditorOpen(true)}>Theme editor</Button>
<Button onClick={() => setStyleEditorOpen(true)}>Style editor</Button> <Button onClick={() => setStyleEditorOpen(true)}>Style editor</Button>
</Box> </Box>
@ -637,7 +637,7 @@ export function GameOptionsRoot(props: IProps): React.ReactElement {
<Typography>Incremental game plaza</Typography> <Typography>Incremental game plaza</Typography>
</Link> </Link>
</Box> </Box>
</Grid> </Box>
</Grid> </Grid>
<FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} /> <FileDiagnosticModal open={diagnosticOpen} onClose={() => setDiagnosticOpen(false)} />
<ConfirmationModal <ConfirmationModal