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

src/Go/ui/GoGameboard.tsx

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

src/Go/ui/GoGameboardWrapper.tsx

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

src/Go/ui/GoHistoryPage.tsx

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

src/Go/ui/GoInstructionsPage.tsx

@@ -70,7 +70,7 @@ const makeTwoEyesChallenge = (
 );
 
 export const GoInstructionsPage = (): React.ReactElement => {
-  const classes = boardStyles();
+  const { classes } = boardStyles();
   return (
     <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
           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.
+          <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>
         <br />
         <br />

src/Go/ui/GoPoint.tsx

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

src/Go/ui/GoRoot.tsx

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

src/Go/ui/GoScoreModal.tsx

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

src/Go/ui/GoScorePowerSummary.tsx

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

src/Go/ui/GoScoreSummaryTable.tsx

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

src/Go/ui/GoStatusPage.tsx

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

src/Go/ui/GoSubnetSearch.tsx

@@ -21,7 +21,7 @@ interface IProps {
 const boardSizeOptions = boardSizes.filter((size) => size !== 19);
 
 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 preselectedBoardSize =
     opponent === GoOpponent.w0r1d_d43m0n ? 19 : Math.min(Go.currentGame?.board?.[0]?.length ?? 7, 13);

src/Go/ui/GoTutorialChallenge.tsx

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