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

IPVGO: Use tss-react makeStyles on the IPvGO board and UI (#1351)

Browse Source
This commit is contained in:
Michael Ficocelli 2024-06-05 21:09:16 -04:00 committed by GitHub
parent fe3e8fb348
commit eeab6df718
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 111 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/Go/boardState/goStyles.ts
View File

@ -1,9 +1,31 @@
import { Theme } from "@mui/material/styles"; import { Theme } from "@mui/material/styles";
import makeStyles from "@mui/styles/makeStyles"; import { makeStyles } from "tss-react/mui";
import createStyles from "@mui/styles/createStyles"; import { keyframes } from "tss-react";
export const pointStyle = makeStyles((theme: Theme) => type Size = "fiveByFive" | "sevenBySeven" | "nineByNine" | "thirteenByThirteen" | "nineteenByNineteen";
createStyles({ type Point =
| "blackPoint"
| "whitePoint"
| "innerPoint"
| "filledPoint"
| "emptyPoint"
| "broken"
| "tradStone"
| "priorStoneTrad";
type Structure = "coordinates" | "liberty" | "northLiberty" | "eastLiberty" | "westLiberty" | "southLiberty";
type Highlight = "hover" | "valid" | "priorPoint";
const fadeLoop = keyframes`
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
`;
export const pointStyle = makeStyles<void, Size | Point | Structure | Highlight>({ uniqId: "pointStyle" })(
(theme: Theme, _, classes) => ({
hover: {}, hover: {},
valid: {}, valid: {},
priorPoint: {}, priorPoint: {},
@ -12,24 +34,24 @@ export const pointStyle = makeStyles((theme: Theme) =>
height: "100%", height: "100%",
width: "100%", width: "100%",
"&$hover$valid:hover $innerPoint": { [`&.${classes.hover}.${classes.valid}:hover .${classes.innerPoint}`]: {
outlineColor: theme.colors.white, outlineColor: theme.colors.white,
}, },
"&$hover$priorPoint $innerPoint": { [`&.${classes.hover}.${classes.priorPoint} .${classes.innerPoint}`]: {
outlineColor: theme.colors.white, outlineColor: theme.colors.white,
}, },
"&$hover$priorPoint $priorStoneTrad$blackPoint": { [`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.blackPoint}`]: {
outlineColor: theme.colors.white, outlineColor: theme.colors.white,
display: "block", display: "block",
}, },
"&$hover$priorPoint $priorStoneTrad$whitePoint": { [`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.whitePoint}`]: {
outlineColor: theme.colors.black, outlineColor: theme.colors.black,
display: "block", display: "block",
}, },
"&$hover:hover $coordinates": { [`&.${classes.hover}:hover .${classes.coordinates}`]: {
display: "block", display: "block",
}, },
"&:hover $broken": { [`&:hover .${classes.broken}`]: {
opacity: "0.4", opacity: "0.4",
}, },
}, },
@ -43,7 +65,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
width: "83%", width: "83%",
height: "83%", height: "83%",
transition: "all 0.3s", transition: "all 0.3s",
"& $coordinates": { [`& .${classes.coordinates}`]: {
fontSize: "10px", fontSize: "10px",
}, },
}, },
@ -59,142 +81,143 @@ export const pointStyle = makeStyles((theme: Theme) =>
overflow: "hidden", overflow: "hidden",
}, },
traditional: { traditional: {
"& $innerPoint": { [`& .${classes.innerPoint}`]: {
display: "none", display: "none",
}, },
"& $broken": { [`& .${classes.broken}`]: {
backgroundImage: "none", backgroundImage: "none",
backgroundColor: theme.colors.black, backgroundColor: theme.colors.black,
}, },
"& $tradStone": { [`& .${classes.tradStone}`]: {
display: "block", display: "block",
}, },
"& $liberty": { [`& .${classes.liberty}`]: {
backgroundColor: theme.colors.black, backgroundColor: theme.colors.black,
transition: "none", transition: "none",
"&:not($northLiberty):not($southLiberty):not($eastLiberty):not($westLiberty)": { [`&:not(.${classes.northLiberty}):not(.${classes.southLiberty}):not(.${classes.eastLiberty}):not(.${classes.westLiberty})`]:
width: 0, {
height: 0, width: 0,
}, height: 0,
},
}, },
"& $northLiberty, & $southLiberty": { [`& .${classes.northLiberty}, & .${classes.southLiberty}`]: {
width: "0.9px", width: "0.9px",
}, },
"& $eastLiberty, & $westLiberty": { [`& .${classes.eastLiberty}, & .${classes.westLiberty}`]: {
height: "0.9px", height: "0.9px",
}, },
"&$nineteenByNineteen": { [`&.${classes.nineteenByNineteen}`]: {
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(30px, 5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(30px, 5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(30px, 5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(30px, 5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
"& $coordinates": { [`& .${classes.coordinates}`]: {
fontSize: "0.9vw", fontSize: "0.9vw",
}, },
}, },
"&$thirteenByThirteen": { [`&.${classes.thirteenByThirteen}`]: {
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(40px, 6vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(40px, 6vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(40px, 6vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(40px, 6vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
"& $coordinates": { [`& .${classes.coordinates}`]: {
fontSize: "0.9vw", fontSize: "0.9vw",
}, },
}, },
"&$nineByNine": { [`&.${classes.nineByNine}`]: {
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(60px, 7vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(60px, 7vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(60px, 7vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(60px, 7vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
}, },
"&$sevenBySeven": { [`&.${classes.sevenBySeven}`]: {
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(80px, 8vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(80px, 8vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
"&:before": { "&:before": {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(80px, 8vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(80px, 8vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
}, },
"& $coordinates": { [`& .${classes.coordinates}`]: {
color: "black", color: "black",
left: "15%", left: "15%",
}, },
"& $blackPoint ~ $coordinates": { [`& .${classes.blackPoint} ~ .${classes.coordinates}`]: {
color: theme.colors.white, color: theme.colors.white,
}, },
}, },
fiveByFive: { fiveByFive: {
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(35px, 4vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(35px, 4vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(35px, 4vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(35px, 4vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
sevenBySeven: { sevenBySeven: {
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(23px, 3vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(23px, 3vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(25px, 3vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(25px, 3vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
nineByNine: { nineByNine: {
"& $filledPoint": { [`& .${classes.filledPoint}`]: {
boxShadow: "0px 0px 30px hsla(0, 100%, 100%, 0.48)", boxShadow: "0px 0px 30px hsla(0, 100%, 100%, 0.48)",
}, },
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(15px, 2vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(15px, 2vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(15px, 2vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(15px, 2vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
thirteenByThirteen: { thirteenByThirteen: {
"& $filledPoint": { [`& .${classes.filledPoint}`]: {
boxShadow: "0px 0px 18px hsla(0, 100%, 100%, 0.48)", boxShadow: "0px 0px 18px hsla(0, 100%, 100%, 0.48)",
}, },
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
nineteenByNineteen: { nineteenByNineteen: {
"& $filledPoint": { [`& .${classes.filledPoint}`]: {
boxShadow: "0px 0px 18px hsla(0, 100%, 100%, 0.48)", boxShadow: "0px 0px 18px hsla(0, 100%, 100%, 0.48)",
}, },
"& $blackPoint": { [`& .${classes.blackPoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
"& $whitePoint": { [`& .${classes.whitePoint}`]: {
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(10px, 1.5vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
"& $innerPoint": { [`& .${classes.innerPoint}`]: {
width: "70%", width: "70%",
height: "70%", height: "70%",
margin: "15%", margin: "15%",
@ -229,7 +252,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
top: 0, top: 0,
}, },
"&$blackPoint": { [`&.${classes.blackPoint}`]: {
position: "static", position: "static",
outlineWidth: 0, outlineWidth: 0,
width: 0, width: 0,
@ -241,7 +264,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(150px, 11vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.black} 65%), radial-gradient(calc(min(150px, 11vw)) at 42% 38%, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 35%, transparent 36%)`,
}, },
}, },
"&$whitePoint": { [`&.${classes.whitePoint}`]: {
backgroundColor: "transparent", backgroundColor: "transparent",
width: 0, width: 0,
height: 0, height: 0,
@ -252,7 +275,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(150px, 11vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`, backgroundImage: `linear-gradient(145deg, transparent, ${theme.colors.white} 65%), radial-gradient(calc(min(150px, 11vw)) at 42% 38%, white 0%, white 35%, transparent 36%)`,
}, },
}, },
"&$emptyPoint": { [`&.${classes.emptyPoint}`]: {
width: 0, width: 0,
height: 0, height: 0,
margin: 0, margin: 0,
@ -305,15 +328,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
outlineColor: theme.colors.white, outlineColor: theme.colors.white,
}, },
fadeLoopAnimation: { fadeLoopAnimation: {
animation: `$fadeLoop 800ms ${theme.transitions.easing.easeInOut} infinite alternate`, animation: `${fadeLoop} 800ms ${theme.transitions.easing.easeInOut} infinite alternate`,
},
"@keyframes fadeLoop": {
"0%": {
opacity: 0.4,
},
"100%": {
opacity: 1,
},
}, },
liberty: { liberty: {
position: "absolute", position: "absolute",
@ -381,8 +396,8 @@ export const pointStyle = makeStyles((theme: Theme) =>
}), }),
); );
export const boardStyles = makeStyles((theme: Theme) => export const boardStyles = makeStyles<void, Size | "background">({ uniqId: "boardStyles" })(
createStyles({ (theme: Theme, _, classes) => ({
tab: { tab: {
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
@ -469,15 +484,7 @@ export const boardStyles = makeStyles((theme: Theme) =>
borderColor: theme.colors.success, borderColor: theme.colors.success,
padding: "0 12px", padding: "0 12px",
width: "200px", width: "200px",
animation: `$fadeLoop 600ms ${theme.transitions.easing.easeInOut} infinite alternate`, animation: `${fadeLoop} 600ms ${theme.transitions.easing.easeInOut} infinite alternate`,
},
"@keyframes fadeLoop": {
"0%": {
opacity: 0.6,
},
"100%": {
opacity: 1,
},
}, },
scoreBox: { scoreBox: {
display: "inline-flex", display: "inline-flex",
@ -491,35 +498,35 @@ export const boardStyles = makeStyles((theme: Theme) =>
}, },
fiveByFive: { fiveByFive: {
height: "20%", height: "20%",
"& $fiveByFive": { [`& .${classes.fiveByFive}`]: {
width: "20%", width: "20%",
height: "100%", height: "100%",
}, },
}, },
sevenBySeven: { sevenBySeven: {
height: "14%", height: "14%",
"& $sevenBySeven": { [`& .${classes.sevenBySeven}`]: {
width: "14%", width: "14%",
height: "100%", height: "100%",
}, },
}, },
nineByNine: { nineByNine: {
height: "11%", height: "11%",
"& $nineByNine": { [`& .${classes.nineByNine}`]: {
width: "11%", width: "11%",
height: "100%", height: "100%",
}, },
}, },
thirteenByThirteen: { thirteenByThirteen: {
height: "7.5%", height: "7.5%",
"& $thirteenByThirteen": { [`& .${classes.thirteenByThirteen}`]: {
width: "7.5%", width: "7.5%",
height: "100%", height: "100%",
}, },
}, },
nineteenByNineteen: { nineteenByNineteen: {
height: "5.2%", height: "5.2%",
"& $nineteenByNineteen": { [`& .${classes.nineteenByNineteen}`]: {
width: "5.2%", width: "5.2%",
height: "100%", height: "100%",
}, },
@ -535,7 +542,7 @@ export const boardStyles = makeStyles((theme: Theme) =>
paddingTop: "15px", paddingTop: "15px",
}, },
bitverseBackground: { bitverseBackground: {
"&$background": { [`&.${classes.background}`]: {
fontSize: "calc(min(.83vh - 1px, 0.72vw, 7.856px))", fontSize: "calc(min(.83vh - 1px, 0.72vw, 7.856px))",
opacity: 0.11, opacity: 0.11,
}, },

2
src/Go/ui/GoGameboard.tsx
View File

@ -27,7 +27,7 @@ export function GoGameboard({ boardState, traditional, clickHandler, hover }: Go
} }
const boardSize = boardState.board[0].length; const boardSize = boardState.board[0].length;
const classes = boardStyles(); const { classes } = boardStyles();
return ( return (
<Grid container id="goGameboard" className={`${classes.board} ${traditional ? classes.traditional : ""}`}> <Grid container id="goGameboard" className={`${classes.board} ${traditional ? classes.traditional : ""}`}>

2
src/Go/ui/GoGameboardWrapper.tsx
View File

@ -46,7 +46,7 @@ export function GoGameboardWrapper({ showInstructions }: GoGameboardWrapperProps
const [scoreOpen, setScoreOpen] = useState(false); const [scoreOpen, setScoreOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false);
const classes = boardStyles(); const { classes } = boardStyles();
const boardSize = boardState.board[0].length; const boardSize = boardState.board[0].length;
const currentPlayer = boardState.previousPlayer === GoColor.white ? GoColor.black : GoColor.white; const currentPlayer = boardState.previousPlayer === GoColor.white ? GoColor.black : GoColor.white;
const waitingOnAI = boardState.previousPlayer === GoColor.black && boardState.ai !== GoOpponent.none; const waitingOnAI = boardState.previousPlayer === GoColor.black && boardState.ai !== GoOpponent.none;

2
src/Go/ui/GoHistoryPage.tsx
View File

@ -16,7 +16,7 @@ import { getRecordKeys } from "../../Types/Record";
export const GoHistoryPage = (): React.ReactElement => { export const GoHistoryPage = (): React.ReactElement => {
useRerender(400); useRerender(400);
const classes = boardStyles(); const { classes } = boardStyles();
const priorBoard = Go.previousGame ?? getNewBoardState(7); const priorBoard = Go.previousGame ?? getNewBoardState(7);
const score = getScore(priorBoard); const score = getScore(priorBoard);
const opponent = priorBoard.ai; const opponent = priorBoard.ai;

12
src/Go/ui/GoInstructionsPage.tsx
View File

@ -70,7 +70,7 @@ const makeTwoEyesChallenge = (
); );
export const GoInstructionsPage = (): React.ReactElement => { export const GoInstructionsPage = (): React.ReactElement => {
const classes = boardStyles(); const { classes } = boardStyles();
return ( return (
<div className={classes.instructionScroller}> <div className={classes.instructionScroller}>
<> <>
@ -80,6 +80,16 @@ export const GoInstructionsPage = (): React.ReactElement => {
In late 2070, the .org bubble burst, and most of the newly-implemented IPvGO 'net collapsed overnight. Since In late 2070, the .org bubble burst, and most of the newly-implemented IPvGO 'net collapsed overnight. Since
then, various factions have been fighting over small subnets to control their computational power. These then, various factions have been fighting over small subnets to control their computational power. These
subnets are very valuable in the right hands, if you can wrest them from their current owners. subnets are very valuable in the right hands, if you can wrest them from their current owners.
<br />
<br />
(For details about how to automate with the API, and for a working starter script, visit the IPvGO section of
the in-game{" "}
<Link
style={{ cursor: "pointer" }}
onClick={() => Router.toPage(Page.Documentation, { docPage: "programming/go_algorithms.md" })}
>
Bitburner Documentation)
</Link>
</Typography> </Typography>
<br /> <br />
<br /> <br />

10
src/Go/ui/GoPoint.tsx
View File

@ -1,12 +1,11 @@
import type { BoardState } from "../Types"; import type { BoardState } from "../Types";
import React from "react"; import React from "react";
import { ClassNameMap } from "@mui/styles";
import { GoColor } from "@enums"; import { GoColor } from "@enums";
import { columnIndexes } from "../Constants"; import { columnIndexes } from "../Constants";
import { findNeighbors } from "../boardState/boardState"; import { findNeighbors } from "../boardState/boardState";
import { pointStyle } from "../boardState/goStyles"; import { boardStyles, pointStyle } from "../boardState/goStyles";
import { findAdjacentLibertiesAndAlliesForPoint, getColorOnBoardString } from "../boardAnalysis/boardAnalysis"; import { findAdjacentLibertiesAndAlliesForPoint, getColorOnBoardString } from "../boardAnalysis/boardAnalysis";
interface GoPointProps { interface GoPointProps {
@ -20,7 +19,7 @@ interface GoPointProps {
} }
export function GoPoint({ state, x, y, traditional, hover, valid, emptyPointOwner }: GoPointProps): React.ReactElement { export function GoPoint({ state, x, y, traditional, hover, valid, emptyPointOwner }: GoPointProps): React.ReactElement {
const classes = pointStyle(); const { classes } = pointStyle();
const currentPoint = state.board[x]?.[y]; const currentPoint = state.board[x]?.[y];
const player = currentPoint?.color; const player = currentPoint?.color;
@ -89,10 +88,7 @@ export function GoPoint({ state, x, y, traditional, hover, valid, emptyPointOwne
); );
} }
export function getSizeClass( export function getSizeClass(size: number, classes: ReturnType<typeof boardStyles | typeof pointStyle>["classes"]) {
size: number,
classes: ClassNameMap<"fiveByFive" | "sevenBySeven" | "nineByNine" | "thirteenByThirteen" | "nineteenByNineteen">,
) {
switch (size) { switch (size) {
case 5: case 5:
return classes.fiveByFive; return classes.fiveByFive;

2
src/Go/ui/GoRoot.tsx
View File

@ -9,7 +9,7 @@ import { GoGameboardWrapper } from "./GoGameboardWrapper";
import { boardStyles } from "../boardState/goStyles"; import { boardStyles } from "../boardState/goStyles";
export function GoRoot(): React.ReactElement { export function GoRoot(): React.ReactElement {
const classes = boardStyles(); const { classes } = boardStyles();
const [value, setValue] = React.useState(0); const [value, setValue] = React.useState(0);
function handleChange(event: React.SyntheticEvent, tab: number): void { function handleChange(event: React.SyntheticEvent, tab: number): void {

2
src/Go/ui/GoScoreModal.tsx
View File

@ -17,7 +17,7 @@ interface Props {
} }
export const GoScoreModal = ({ open, onClose, finalScore, newSubnet, opponent }: Props): React.ReactElement => { export const GoScoreModal = ({ open, onClose, finalScore, newSubnet, opponent }: Props): React.ReactElement => {
const classes = boardStyles(); const { classes } = boardStyles();
const blackScore = finalScore[GoColor.black]; const blackScore = finalScore[GoColor.black];
const whiteScore = finalScore[GoColor.white]; const whiteScore = finalScore[GoColor.white];

2
src/Go/ui/GoScorePowerSummary.tsx
View File

@ -18,7 +18,7 @@ interface Props {
} }
export const GoScorePowerSummary = ({ finalScore, opponent }: Props) => { export const GoScorePowerSummary = ({ finalScore, opponent }: Props) => {
const classes = boardStyles(); const { classes } = boardStyles();
const status = getOpponentStats(opponent); const status = getOpponentStats(opponent);
const winStreak = status.winStreak; const winStreak = status.winStreak;
const oldWinStreak = status.winStreak; const oldWinStreak = status.winStreak;

2
src/Go/ui/GoScoreSummaryTable.tsx
View File

@ -12,7 +12,7 @@ interface GoScoreSummaryTableProps {
} }
export const GoScoreSummaryTable = ({ score, opponent }: GoScoreSummaryTableProps) => { export const GoScoreSummaryTable = ({ score, opponent }: GoScoreSummaryTableProps) => {
const classes = boardStyles(); const { classes } = boardStyles();
const blackScore = score[GoColor.black]; const blackScore = score[GoColor.black];
const whiteScore = score[GoColor.white]; const whiteScore = score[GoColor.white];
const blackPlayerName = opponent === GoOpponent.none ? GoColor.black : "You"; const blackPlayerName = opponent === GoOpponent.none ? GoColor.black : "You";

2
src/Go/ui/GoStatusPage.tsx
View File

@ -13,7 +13,7 @@ import { GoOpponent } from "@enums";
export const GoStatusPage = (): React.ReactElement => { export const GoStatusPage = (): React.ReactElement => {
useRerender(400); useRerender(400);
const classes = boardStyles(); const { classes } = boardStyles();
const score = getScore(Go.currentGame); const score = getScore(Go.currentGame);
const opponent = Go.currentGame.ai; const opponent = Go.currentGame.ai;
const playedOpponentList = getRecordKeys(Go.stats).filter((o) => o !== GoOpponent.none); const playedOpponentList = getRecordKeys(Go.stats).filter((o) => o !== GoOpponent.none);

2
src/Go/ui/GoSubnetSearch.tsx
View File

@ -21,7 +21,7 @@ interface IProps {
const boardSizeOptions = boardSizes.filter((size) => size !== 19); const boardSizeOptions = boardSizes.filter((size) => size !== 19);
export const GoSubnetSearch = ({ open, search, cancel, showInstructions }: IProps): React.ReactElement => { export const GoSubnetSearch = ({ open, search, cancel, showInstructions }: IProps): React.ReactElement => {
const classes = boardStyles(); const { classes } = boardStyles();
const [opponent, setOpponent] = useState<GoOpponent>(Go.currentGame?.ai ?? GoOpponent.SlumSnakes); const [opponent, setOpponent] = useState<GoOpponent>(Go.currentGame?.ai ?? GoOpponent.SlumSnakes);
const preselectedBoardSize = const preselectedBoardSize =
opponent === GoOpponent.w0r1d_d43m0n ? 19 : Math.min(Go.currentGame?.board?.[0]?.length ?? 7, 13); opponent === GoOpponent.w0r1d_d43m0n ? 19 : Math.min(Go.currentGame?.board?.[0]?.length ?? 7, 13);

2
src/Go/ui/GoTutorialChallenge.tsx
View File

@ -33,7 +33,7 @@ export function GoTutorialChallenge({
incorrectText2, incorrectText2,
}: IProps): React.ReactElement { }: IProps): React.ReactElement {
const stateRef = useRef(getStateCopy(state)); const stateRef = useRef(getStateCopy(state));
const classes = boardStyles(); const { classes } = boardStyles();
const [displayText, setDisplayText] = useState(description); const [displayText, setDisplayText] = useState(description);
const [showReset, setShowReset] = useState(false); const [showReset, setShowReset] = useState(false);