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

2026-04-17 06:48:42 +02:00 · 2024-06-05 21:09:16 -04:00
parent fe3e8fb348
commit eeab6df718
13 changed files with 111 additions and 98 deletions
--- a/src/Go/boardState/goStyles.ts
+++ b/src/Go/boardState/goStyles.ts
@@ -1,9 +1,31 @@
 import { Theme } from "@mui/material/styles";
-import makeStyles from "@mui/styles/makeStyles";
-import createStyles from "@mui/styles/createStyles";
+import { makeStyles } from "tss-react/mui";
+import { keyframes } from "tss-react";

-export const pointStyle = makeStyles((theme: Theme) =>
-  createStyles({
+type Size = "fiveByFive" | "sevenBySeven" | "nineByNine" | "thirteenByThirteen" | "nineteenByNineteen";
+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: {},
    valid: {},
    priorPoint: {},
@@ -12,24 +34,24 @@ export const pointStyle = makeStyles((theme: Theme) =>
      height: "100%",
      width: "100%",

-      "&$hover$valid:hover $innerPoint": {
+      [`&.${classes.hover}.${classes.valid}:hover .${classes.innerPoint}`]: {
        outlineColor: theme.colors.white,
      },
-      "&$hover$priorPoint $innerPoint": {
+      [`&.${classes.hover}.${classes.priorPoint} .${classes.innerPoint}`]: {
        outlineColor: theme.colors.white,
      },
-      "&$hover$priorPoint $priorStoneTrad$blackPoint": {
+      [`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.blackPoint}`]: {
        outlineColor: theme.colors.white,
        display: "block",
      },
-      "&$hover$priorPoint $priorStoneTrad$whitePoint": {
+      [`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.whitePoint}`]: {
        outlineColor: theme.colors.black,
        display: "block",
      },
-      "&$hover:hover $coordinates": {
+      [`&.${classes.hover}:hover .${classes.coordinates}`]: {
        display: "block",
      },
-      "&:hover $broken": {
+      [`&:hover .${classes.broken}`]: {
        opacity: "0.4",
      },
    },
@@ -43,7 +65,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
      width: "83%",
      height: "83%",
      transition: "all 0.3s",
-      "& $coordinates": {
+      [`& .${classes.coordinates}`]: {
        fontSize: "10px",
      },
    },
@@ -59,142 +81,143 @@ export const pointStyle = makeStyles((theme: Theme) =>
      overflow: "hidden",
    },
    traditional: {
-      "& $innerPoint": {
+      [`& .${classes.innerPoint}`]: {
        display: "none",
      },
-      "& $broken": {
+      [`& .${classes.broken}`]: {
        backgroundImage: "none",
        backgroundColor: theme.colors.black,
      },
-      "& $tradStone": {
+      [`& .${classes.tradStone}`]: {
        display: "block",
      },
-      "& $liberty": {
+      [`& .${classes.liberty}`]: {
        backgroundColor: theme.colors.black,
        transition: "none",
-        "&:not($northLiberty):not($southLiberty):not($eastLiberty):not($westLiberty)": {
-          width: 0,
-          height: 0,
-        },
+        [`&:not(.${classes.northLiberty}):not(.${classes.southLiberty}):not(.${classes.eastLiberty}):not(.${classes.westLiberty})`]:
+          {
+            width: 0,
+            height: 0,
+          },
      },
-      "& $northLiberty, & $southLiberty": {
+      [`& .${classes.northLiberty}, & .${classes.southLiberty}`]: {
        width: "0.9px",
      },
-      "& $eastLiberty, & $westLiberty": {
+      [`& .${classes.eastLiberty}, & .${classes.westLiberty}`]: {
        height: "0.9px",
      },
-      "&$nineteenByNineteen": {
-        "& $blackPoint": {
+      [`&.${classes.nineteenByNineteen}`]: {
+        [`& .${classes.blackPoint}`]: {
          "&: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%)`,
          },
        },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
          "&: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%)`,
          },
        },
-        "& $coordinates": {
+        [`& .${classes.coordinates}`]: {
          fontSize: "0.9vw",
        },
      },
-      "&$thirteenByThirteen": {
-        "& $blackPoint": {
+      [`&.${classes.thirteenByThirteen}`]: {
+        [`& .${classes.blackPoint}`]: {
          "&: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%)`,
          },
        },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
          "&: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%)`,
          },
        },
-        "& $coordinates": {
+        [`& .${classes.coordinates}`]: {
          fontSize: "0.9vw",
        },
      },
-      "&$nineByNine": {
-        "& $blackPoint": {
+      [`&.${classes.nineByNine}`]: {
+        [`& .${classes.blackPoint}`]: {
          "&: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%)`,
          },
        },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
          "&: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%)`,
          },
        },
      },
-      "&$sevenBySeven": {
-        "& $blackPoint": {
+      [`&.${classes.sevenBySeven}`]: {
+        [`& .${classes.blackPoint}`]: {
          "&: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%)`,
          },
        },
-        "& $whitePoint": {
+        [`& .${classes.whitePoint}`]: {
          "&: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%)`,
          },
        },
      },
-      "& $coordinates": {
+      [`& .${classes.coordinates}`]: {
        color: "black",
        left: "15%",
      },
-      "& $blackPoint ~ $coordinates": {
+      [`& .${classes.blackPoint} ~ .${classes.coordinates}`]: {
        color: theme.colors.white,
      },
    },
    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%)`,
      },
-      "& $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%)`,
      },
    },
    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%)`,
      },
-      "& $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%)`,
      },
    },
    nineByNine: {
-      "& $filledPoint": {
+      [`& .${classes.filledPoint}`]: {
        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%)`,
      },
-      "& $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%)`,
      },
    },
    thirteenByThirteen: {
-      "& $filledPoint": {
+      [`& .${classes.filledPoint}`]: {
        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%)`,
      },
-      "& $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%)`,
      },
    },
    nineteenByNineteen: {
-      "& $filledPoint": {
+      [`& .${classes.filledPoint}`]: {
        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%)`,
      },
-      "& $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%)`,
      },

-      "& $innerPoint": {
+      [`& .${classes.innerPoint}`]: {
        width: "70%",
        height: "70%",
        margin: "15%",
@@ -229,7 +252,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
        top: 0,
      },

-      "&$blackPoint": {
+      [`&.${classes.blackPoint}`]: {
        position: "static",
        outlineWidth: 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%)`,
        },
      },
-      "&$whitePoint": {
+      [`&.${classes.whitePoint}`]: {
        backgroundColor: "transparent",
        width: 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%)`,
        },
      },
-      "&$emptyPoint": {
+      [`&.${classes.emptyPoint}`]: {
        width: 0,
        height: 0,
        margin: 0,
@@ -305,15 +328,7 @@ export const pointStyle = makeStyles((theme: Theme) =>
      outlineColor: theme.colors.white,
    },
    fadeLoopAnimation: {
-      animation: `$fadeLoop 800ms ${theme.transitions.easing.easeInOut} infinite alternate`,
-    },
-    "@keyframes fadeLoop": {
-      "0%": {
-        opacity: 0.4,
-      },
-      "100%": {
-        opacity: 1,
-      },
+      animation: `${fadeLoop} 800ms ${theme.transitions.easing.easeInOut} infinite alternate`,
    },
    liberty: {
      position: "absolute",
@@ -381,8 +396,8 @@ export const pointStyle = makeStyles((theme: Theme) =>
  }),
 );

-export const boardStyles = makeStyles((theme: Theme) =>
-  createStyles({
+export const boardStyles = makeStyles<void, Size | "background">({ uniqId: "boardStyles" })(
+  (theme: Theme, _, classes) => ({
    tab: {
      paddingTop: 0,
      paddingBottom: 0,
@@ -469,15 +484,7 @@ export const boardStyles = makeStyles((theme: Theme) =>
      borderColor: theme.colors.success,
      padding: "0 12px",
      width: "200px",
-      animation: `$fadeLoop 600ms ${theme.transitions.easing.easeInOut} infinite alternate`,
-    },
-    "@keyframes fadeLoop": {
-      "0%": {
-        opacity: 0.6,
-      },
-      "100%": {
-        opacity: 1,
-      },
+      animation: `${fadeLoop} 600ms ${theme.transitions.easing.easeInOut} infinite alternate`,
    },
    scoreBox: {
      display: "inline-flex",
@@ -491,35 +498,35 @@ export const boardStyles = makeStyles((theme: Theme) =>
    },
    fiveByFive: {
      height: "20%",
-      "& $fiveByFive": {
+      [`& .${classes.fiveByFive}`]: {
        width: "20%",
        height: "100%",
      },
    },
    sevenBySeven: {
      height: "14%",
-      "& $sevenBySeven": {
+      [`& .${classes.sevenBySeven}`]: {
        width: "14%",
        height: "100%",
      },
    },
    nineByNine: {
      height: "11%",
-      "& $nineByNine": {
+      [`& .${classes.nineByNine}`]: {
        width: "11%",
        height: "100%",
      },
    },
    thirteenByThirteen: {
      height: "7.5%",
-      "& $thirteenByThirteen": {
+      [`& .${classes.thirteenByThirteen}`]: {
        width: "7.5%",
        height: "100%",
      },
    },
    nineteenByNineteen: {
      height: "5.2%",
-      "& $nineteenByNineteen": {
+      [`& .${classes.nineteenByNineteen}`]: {
        width: "5.2%",
        height: "100%",
      },
@@ -535,7 +542,7 @@ export const boardStyles = makeStyles((theme: Theme) =>
      paddingTop: "15px",
    },
    bitverseBackground: {
-      "&$background": {
+      [`&.${classes.background}`]: {
        fontSize: "calc(min(.83vh - 1px, 0.72vw, 7.856px))",
        opacity: 0.11,
      },
--- a/src/Go/ui/GoGameboard.tsx
+++ b/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 : ""}`}>
--- a/src/Go/ui/GoGameboardWrapper.tsx
+++ b/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;
--- a/src/Go/ui/GoHistoryPage.tsx
+++ b/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;
--- a/src/Go/ui/GoInstructionsPage.tsx
+++ b/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 />
--- a/src/Go/ui/GoPoint.tsx
+++ b/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;
--- a/src/Go/ui/GoRoot.tsx
+++ b/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 {
--- a/src/Go/ui/GoScoreModal.tsx
+++ b/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];
--- a/src/Go/ui/GoScorePowerSummary.tsx
+++ b/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;
--- a/src/Go/ui/GoScoreSummaryTable.tsx
+++ b/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";
--- a/src/Go/ui/GoStatusPage.tsx
+++ b/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);
--- a/src/Go/ui/GoSubnetSearch.tsx
+++ b/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);
--- a/src/Go/ui/GoTutorialChallenge.tsx
+++ b/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);