hover counting groups

Author: h908714124

src/main/client/src/Play.jsx

@@ -53,7 +53,7 @@ export const Play = () => {
     initialized.current = true
     let sub1 = stompClient.subscribe("/topic/game/" + gameId, (message) => {
       let game = JSON.parse(message.body)
-      setGameState(game, auth)
+      setGameState(game)
     })
     stompClient.publish({
       destination: "/app/game/hello",
@@ -161,18 +161,22 @@ function Tile({ groupInfo, onClick }) {
 function EmptyTile({ groupInfo, onClick }) {
   let { board, counting, currentPlayer, currentColor } = useGameStore(state => state.gameState)
   let auth = useAuthStore(state => state.auth)
+  let setIsInCountingGroup = useGameStore(state => state.setIsInCountingGroup)
+  let setNoCountingGroup = useCallback(() => {
+    setIsInCountingGroup(undefined)
+  }, [setIsInCountingGroup])
   let { color } = groupInfo
   if ((color & TERRITORY) !== 0) {
     return (
-      <div className={tileClasses}>
+      <div onMouseEnter={setNoCountingGroup} className={tileClasses}>
         <IconContext.Provider value={{ color: getColorClassName(color), size: "1em" }}>
           <FaCircle />
         </IconContext.Provider>
       </div>
     )
   }
   if (counting || currentPlayer !== auth.name || isForbidden(board, groupInfo, currentColor)) {
-      return <div className={tileClasses} />
+      return <div onMouseEnter={setNoCountingGroup} className={tileClasses} />
   }
   let classes = twJoin(
     tileClasses,
@@ -191,15 +195,20 @@ function EmptyTile({ groupInfo, onClick }) {
 }
 
 function CountingTile({ groupInfo, onClick }) {
-  let { color } = groupInfo
+  let { color, has, x, y } = groupInfo
+  let isInCountingGroup = useGameStore(state => state.isInCountingGroup)
+  let setIsInCountingGroup = useGameStore(state => state.setIsInCountingGroup)
+  let setCountingGroup = useCallback(() => {
+    setIsInCountingGroup(has)
+  }, [has, setIsInCountingGroup])
   let classes = twJoin(
     tileClasses,
     "cursor-pointer",
     color === BLACK ? "text-black" : "text-white",
-    "hover:opacity-25",
+    isInCountingGroup && isInCountingGroup(x, y) && "opacity-25",
   )
   return (
-    <div className={classes} onClick={onClick}>
+    <div onMouseEnter={setCountingGroup} className={classes} onClick={onClick}>
       <IconContext.Provider value={{ size: "2.75em" }}>
         <FaCircle />
       </IconContext.Provider>

src/main/client/src/model/PointList.js

@@ -1,3 +1,7 @@
+import {
+  PointSet,
+} from "./PointSet.js"
+
 export class PointList {
 
   static LO = 0xffff
@@ -50,6 +54,12 @@ export class PointList {
     return this.pos
   }
 
+  toSet() {
+    let result = new PointSet(this.dim)
+    this.forEach((x, y) => result.add(x, y))
+    return result
+  }
+
   forEach(consumer) {
     for (let i = 0; i < this.pos; i++) {
       consumer(this.x(i), this.y(i))

src/main/client/src/model/board.js

@@ -11,7 +11,7 @@ import {
   hasStone,
 } from "../util.js"
 
-function getGroup(board, xx, yy) {
+export function getGroup(board, xx, yy) {
   let color = board[yy][xx]
   let dim = board.length
   if (!hasStone(color)) {
@@ -76,14 +76,15 @@ function getGroup(board, xx, yy) {
       }
     }
   }
+  let set = points.toSet()
   return {
     x: xx,
     y: yy,
     ptId: yy * dim + xx,
     color: color,
     hasStone: true,
     liberties: liberties,
-    has: pointsChecked.has,
+    has: (x, y) => set.has(x, y),
     points: points,
   }
 }

src/main/client/src/model/board.test.js

@@ -3,14 +3,14 @@ import {
   test,
 } from "vitest"
 import {
+  getGroup,
   createBoardWithGroups,
 } from "./board.js"
 import {
   BLACK,
   WHITE,
 } from "../util.js"
 
-
 test("liberties", () => {
   let b = BLACK
   let w = WHITE
@@ -23,3 +23,24 @@ test("liberties", () => {
   let result = createBoardWithGroups(board)
   expect(result[0][1].liberties).toBe(1)
 })
+
+test("has", () => {
+  let b = BLACK
+  let w = WHITE
+  let board = [
+    [0, b, w, 0],
+    [b, b, w, 0],
+    [w, w, w, 0],
+    [0, 0, 0, 0],
+  ]
+  let { has } = getGroup(board, 0, 1)
+  expect(has(0, 0)).toBe(false)
+  expect(has(0, 1)).toBe(true)
+  expect(has(1, 0)).toBe(true)
+  expect(has(1, 1)).toBe(true)
+  expect(has(2, 0)).toBe(false)
+  expect(has(2, 1)).toBe(false)
+  expect(has(2, 2)).toBe(false)
+  expect(has(1, 2)).toBe(false)
+  expect(has(0, 2)).toBe(false)
+})

src/main/client/src/store.js

@@ -6,7 +6,6 @@ import {
 } from "immer"
 import {
   BLACK,
-  WHITE,
 } from "./util.js"
 import {
   createBoardWithGroups,
@@ -33,20 +32,25 @@ export const useAuthStore = create((set) => ({
 }))
 
 export const useGameStore = create((set) => ({
-  symbol: 0,
   editMode: false,
   black: {
     name: "",
   },
   white: {
     name: "",
   },
+  isInCountingGroup: undefined,
+  setIsInCountingGroup: (has) => {
+    set(produce(state => {
+      state.isInCountingGroup = has
+    }))
+  },
   gameState: {
     currentPlayer: undefined,
     currentColor: BLACK,
     counting: false,
   },
-  setGameState: (game, auth) => {
+  setGameState: (game) => {
     set(produce(state => {
       state.black = game.black
       state.white = game.white
@@ -55,8 +59,6 @@ export const useGameStore = create((set) => ({
       state.gameState.currentPlayer = game.currentPlayer
       state.gameState.currentColor = game.currentColor
       state.gameState.counting = game.counting
-      let symbol = game.black.name === auth.name? BLACK : WHITE 
-      state.symbol = symbol
     }))
   },
 }))