IPVGO: Add support for highlighting nodes and adding small text (#1996)

This commit is contained in:
Michael Ficocelli
2025-03-31 16:36:30 -04:00
committed by GitHub
parent 5d486e3914
commit f6e7ef082c
17 changed files with 251 additions and 28 deletions
+5
View File
@@ -6,6 +6,7 @@ import { getExpansionMoveArray } from "../boardAnalysis/goAI";
import {
boardFromSimpleBoard,
boardStringFromBoard,
clearAllPointHighlights,
evaluateIfMoveIsValid,
findAllCapturedChains,
findLibertiesForChain,
@@ -36,6 +37,7 @@ export function getNewBoardState(
cheatCount: 0,
cheatCountForWhite: 0,
komiOverride: null,
highlightedPoints: Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => null)),
board: Array.from({ length: boardSize }, (_, x) =>
Array.from({ length: boardSize }, (_, y) =>
!boardToCopy || boardToCopy?.[x]?.[y]
@@ -123,6 +125,7 @@ export function makeMove(boardState: BoardState, x: number, y: number, player: G
// Add move to board history
boardState.previousBoards.unshift(boardStringFromBoard(boardState.board));
clearAllPointHighlights(boardState);
point.color = player;
boardState.previousPlayer = player;
@@ -140,6 +143,8 @@ export function passTurn(boardState: BoardState, player: GoColor, allowEndGame =
if (boardState.previousPlayer === null || boardState.previousPlayer === player) {
return;
}
clearAllPointHighlights(boardState);
boardState.previousPlayer = boardState.previousPlayer === GoColor.black ? GoColor.white : GoColor.black;
boardState.passCount++;
+54 -15
View File
@@ -10,10 +10,18 @@ type Point =
| "filledPoint"
| "emptyPoint"
| "broken"
| "cyberStyle"
| "tradStone"
| "priorStoneTrad";
type Structure = "coordinates" | "liberty" | "northLiberty" | "eastLiberty" | "westLiberty" | "southLiberty";
type Highlight = "hover" | "valid" | "priorPoint";
type Structure =
| "coordinates"
| "highlightText"
| "liberty"
| "northLiberty"
| "eastLiberty"
| "westLiberty"
| "southLiberty";
type Highlight = "hover" | "valid" | "priorPoint" | "hack" | "hp" | "money" | "int" | "cha";
const fadeLoop = keyframes`
0% {
@@ -29,31 +37,56 @@ export const pointStyle = makeStyles<unknown, Size | Point | Structure | Highlig
hover: {},
valid: {},
priorPoint: {},
cyberStyle: {},
highlightText: {},
hack: {},
hp: {},
money: {},
int: {},
cha: {},
point: {
position: "relative",
height: "100%",
width: "100%",
[`&.${classes.hover}.${classes.valid}:hover .${classes.innerPoint}`]: {
[`&.${classes.hover}.${classes.valid}.${classes.cyberStyle}:hover .${classes.innerPoint}`]: {
outlineColor: theme.colors.white,
},
[`&.${classes.hover}.${classes.priorPoint} .${classes.innerPoint}`]: {
[`&.${classes.hover}.${classes.cyberStyle}.${classes.priorPoint} .${classes.innerPoint}`]: {
outlineColor: theme.colors.white,
},
[`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.blackPoint}`]: {
outlineColor: theme.colors.white,
display: "block",
},
[`&.${classes.hover}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.whitePoint}`]: {
outlineColor: theme.colors.black,
display: "block",
},
[`&.${classes.hover}.${classes.cyberStyle}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.blackPoint}`]:
{
outlineColor: theme.colors.white,
display: "block",
},
[`&.${classes.hover}.${classes.cyberStyle}.${classes.priorPoint} .${classes.priorStoneTrad}.${classes.whitePoint}`]:
{
outlineColor: theme.colors.black,
display: "block",
},
[`&.${classes.hover}:hover .${classes.coordinates}`]: {
display: "block",
},
[`&:hover .${classes.broken}`]: {
opacity: "0.4",
},
[`&.${classes.hack} .${classes.innerPoint}`]: {
outlineColor: theme.colors.hack,
},
[`&.${classes.hp} .${classes.innerPoint}`]: {
outlineColor: theme.colors.hp,
},
[`&.${classes.money} .${classes.innerPoint}`]: {
outlineColor: theme.colors.money,
},
[`&.${classes.int} .${classes.innerPoint}`]: {
outlineColor: theme.colors.int,
},
[`&.${classes.cha} .${classes.innerPoint}`]: {
outlineColor: theme.colors.cha,
},
},
broken: {
backgroundImage: `repeating-radial-gradient(circle at 17% 32%, ${theme.colors.white}, black 0.00085px)`,
@@ -82,7 +115,10 @@ export const pointStyle = makeStyles<unknown, Size | Point | Structure | Highlig
},
traditional: {
[`& .${classes.innerPoint}`]: {
display: "none",
outlineColor: "transparent",
[`& .${classes.emptyPoint}`]: {
display: "none",
},
},
[`& .${classes.broken}`]: {
backgroundImage: "none",
@@ -118,7 +154,7 @@ export const pointStyle = makeStyles<unknown, Size | Point | Structure | Highlig
},
},
[`& .${classes.coordinates}`]: {
fontSize: "0.9vw",
fontSize: "0.7vw",
},
},
[`&.${classes.thirteenByThirteen}`]: {
@@ -133,7 +169,7 @@ export const pointStyle = makeStyles<unknown, Size | Point | Structure | Highlig
},
},
[`& .${classes.coordinates}`]: {
fontSize: "0.9vw",
fontSize: "0.7vw",
},
},
[`&.${classes.nineByNine}`]: {
@@ -379,6 +415,9 @@ export const pointStyle = makeStyles<unknown, Size | Point | Structure | Highlig
left: "8%",
zIndex: "10",
userSelect: "none",
[`&.${classes.highlightText}`]: {
display: "block",
},
},
priorStoneTrad: {
display: "none",