Personal_mirrors/bitburner-src
1
0
Fork 0
mirror of https://github.com/bitburner-official/bitburner-src.git synced 2024-12-19 20:55:44 +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 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,
},

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 classes = boardStyles();
const { classes } = boardStyles();
return (
<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 [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;

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

@ -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;

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

@ -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 />

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

@ -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;

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

@ -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 {

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 => {
const classes = boardStyles();
const { classes } = boardStyles();
const blackScore = finalScore[GoColor.black];
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) => {
const classes = boardStyles();
const { classes } = boardStyles();
const status = getOpponentStats(opponent);
const winStreak = 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) => {
const classes = boardStyles();
const { classes } = boardStyles();
const blackScore = score[GoColor.black];
const whiteScore = score[GoColor.white];
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 => {
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);

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

@ -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);

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

@ -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);