some js refactoring

Author: h908714124

src/main/client/src/Lobby.jsx

@@ -73,10 +73,10 @@ export function Lobby() {
     return (
       <div className="m-4">
         <div>
-          <button type="Button"
+          <Button type="Button"
             onClick={() => matchRequest(true)}>
             Create
-          </button>
+          </Button>
         </div>
         <div className="mt-2">
           <button type="button"

src/main/client/src/Play.jsx

@@ -15,8 +15,9 @@ import {
   BLACK,
   TERRITORY,
   REMOVED,
-  hasColor,
   hasBlack,
+  hasStone,
+  getColorClassName,
 } from "./util.js"
 import {
   Button,
@@ -103,7 +104,6 @@ export const Play = () => {
             board.map((row, y) => (
               row.map((check, x) => (
                 <Tile
-                  disabled={!counting && currentPlayer !== auth.name}
                   counting={counting}
                   key={y + "_" + x}
                   onClick={() => onClick(x, y)}
@@ -139,48 +139,46 @@ function GridTile() {
   return <div className={gridTileClasses} />
 }
 
-function Tile({check, onClick, disabled, counting}) {
-  if (counting && hasColor(check) && (check & TERRITORY) === 0) {
-    return (
-      <CountingActive check={check} onClick={onClick} />
-    )
+function Tile({check, onClick, counting}) {
+  if (!hasStone(check)) {
+    return <EmptyTile onClick={onClick} check={check} />
   }
-  if (!hasColor(check) && !counting) {
-    if (disabled) {
-      return <div className={twJoin(tileClasses, "text-transparent")} />
-    }
+  if (counting) {
     return (
-      <EmptyActive onClick={onClick} />
+      <CountingActive check={check} onClick={onClick} />
     )
   }
-  if (!hasColor(check)) {
-    return <div className={twJoin(tileClasses, "text-transparent")} />
-  }
   return (
     <div className={tileClasses}>
-      <IconContext.Provider value={getStyle(check)}>
+      <IconContext.Provider value={{ color: getColorClassName(check), size: "2.75em" }}>
         <FaCircle />
       </IconContext.Provider>
     </div>
   )
 }
 
-function getStyle(check) {
-  let size = (check & TERRITORY) !== 0 ? "1em" : "2.75em"
-  if ((check & BLACK) !== 0) {
-    return { color: "black", size: size }
-  }
-  return { color: "white", size: size }
-}
-
-function EmptyActive({ onClick }) {
+function EmptyTile({ onClick, check }) {
+  let { counting, currentPlayer } = useGameStore(state => state.gameState)
+  let auth = useAuthStore(state => state.auth)
   let currentColor = useGameStore(state => state.gameState.currentColor)
-  let hovercolor = currentColor === BLACK ? "hover:text-black" : "hover:text-white"
+  if ((check & TERRITORY) !== 0) {
+    return (
+      <div className={tileClasses}>
+        <IconContext.Provider value={{ color: getColorClassName(check), size: "1em" }}>
+          <FaCircle />
+        </IconContext.Provider>
+      </div>
+    )
+  }
+  if (counting || currentPlayer !== auth.name) {
+      return <div className={tileClasses} />
+  }
   let classes = twJoin(
     tileClasses,
+    "cursor-pointer",
     "text-transparent",
-    "cursor-pointer opacity-25",
-    hovercolor,
+    "opacity-25",
+    currentColor === BLACK ? "hover:text-black" : "hover:text-white",
   )
   return (
     <div className={classes} onClick={onClick}>

src/main/client/src/util.js

@@ -10,6 +10,9 @@ export const WHITE = 64
 export const TERRITORY = 2
 export const REMOVED = 4
 
+const MARKERS = ~BLACK & ~WHITE;
+const COLORS = BLACK | WHITE;
+
 export async function tfetch(url, options) {
   let response
   try {
@@ -51,8 +54,8 @@ function dec2hex(dec) {
   return dec.toString(16).padStart(2, "0")
 }
 
-export function hasColor(color) {
-  return hasBlack(color) || hasWhite(color)
+export function hasStone(color) {
+  return (color & COLORS) != 0 && (color & MARKERS) == 0;
 }
 
 export function hasBlack(color) {
@@ -62,3 +65,7 @@ export function hasBlack(color) {
 export function hasWhite(color) {
   return (color & WHITE) !== 0
 }
+
+export function getColorClassName(color) {
+  return hasWhite(color) ? "white" : "black"
+}

src/main/java/com/bernd/LobbyController.java

@@ -55,6 +55,7 @@ public void matchAction(MatchRequest request, Principal principal) {
           false,
           createEmptyBoard(request)));
       operations.convertAndSend("/topic/lobby/gamestart", game);
+      return;
     }
     if (lookingForMatch == null) {
       lookingForMatch = user;

src/main/java/com/bernd/game/Count.java

@@ -6,7 +6,7 @@
 import static com.bernd.game.Board.B;
 import static com.bernd.game.Board.TERRITORY;
 import static com.bernd.game.Board.W;
-import static com.bernd.util.Util.isPlainColor;
+import static com.bernd.util.Util.isStone;
 import static com.bernd.util.Util.keepMarkers;
 
 public class Count {
@@ -15,7 +15,7 @@ static int getImpliedColor(
       int[][] board,
       int xx,
       int yy) {
-    if (isPlainColor(board[yy][xx])) {
+    if (isStone(board[yy][xx])) {
       return board[yy][xx];
     }
     int dim = board.length;
@@ -27,7 +27,7 @@ static int getImpliedColor(
       int ptId = pointsToCheck.poll();
       int y = ptId / dim;
       int x = ptId % dim;
-      if (isPlainColor(board[y][x])) {
+      if (isStone(board[y][x])) {
         return board[y][x] | TERRITORY;
       }
       if (y > 0 && !pointsChecked.has(x, y - 1)) {

src/main/java/com/bernd/util/Util.java

@@ -36,7 +36,7 @@ public static int divUp(int i, int div) {
     return i % div == 0 ? i / div : (i / div) + 1;
   }
 
-  public static boolean isPlainColor(int color) {
+  public static boolean isStone(int color) {
     return (color & COLORS) != 0 && (color & MARKERS) == 0;
   }
 }

src/test/java/com/bernd/game/CountTest.java

@@ -231,7 +231,7 @@ static int[][] createEmptyBoard(int dim) {
     return board;
   }
 
-  static int[][] createAccWithoutRemovedStones(int[][] board) {
+  private static int[][] createAccWithoutRemovedStones(int[][] board) {
     int[][] result = new int[board.length][];
     for (int y = 0; y < board.length; y++) {
       result[y] = Arrays.copyOf(board[y], board[y].length);