Skip to content

Commit 82dc712

Browse files
h908714124h908714124
committed
move number hover
1 parent e901491 commit 82dc712

File tree

3 files changed

+61
-48
lines changed

3 files changed

+61
-48
lines changed

‎src/main/client/src/feature/game/Game.jsx

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import {
2424
vw,
2525
base,
2626
StompContext,
27-
BLACK,
2827
tfetch,
2928
doTry,
3029
} from "src/util.js"
@@ -45,6 +44,8 @@ import {
4544
paintBoardDecorations,
4645
paintStones,
4746
paintStonesCounting,
47+
paintLastMove,
48+
paintMoveNumbers,
4849
} from "./paint.js"
4950
import {
5051
GamePanel,
@@ -84,8 +85,12 @@ function Board({gameState, setGameState}) {
8485
let navigate = useNavigate()
8586
let stompClient = useContext(StompContext)
8687
let auth = useAuthStore(state => state.auth)
87-
let showMoveNumbersRef = useRef()
88-
showMoveNumbersRef.current = ctrlKeyDown && isKibitz(gameState, auth)
88+
let ctrlKeyDownRef = useRef()
89+
ctrlKeyDownRef.current = ctrlKeyDown
90+
let cursorXref = useRef()
91+
cursorXref.current = cursor_x
92+
let cursorYref = useRef()
93+
cursorYref.current = cursor_y
8994
let id = gameState.id
9095
let lastMove = gameState.lastMove
9196
let queueStatus = gameState.queueStatus
@@ -182,7 +187,9 @@ function Board({gameState, setGameState}) {
182187
step,
183188
grid,
184189
canvasRef,
185-
showMoveNumbersRef,
190+
ctrlKeyDownRef,
191+
cursorXref,
192+
cursorYref,
186193
isCursorInBounds: function(x, y) {
187194
return x >= 0 && x < dim && y >= 0 && y < dim
188195
},
@@ -194,19 +201,13 @@ function Board({gameState, setGameState}) {
194201
}, [board.length, canvasRef, zoom])
195202

196203
let onMouseMove = useCallback((e) => {
197-
if (gameHasEnded(gameState)) {
198-
return
199-
}
200204
if (dragging) {
201205
return
202206
}
203207
if (!board.length) {
204208
return
205209
}
206210
setCtrlKeyDown(e.ctrlKey)
207-
if (!counting && currentPlayer(gameState) !== auth.name) {
208-
return
209-
}
210211
let cursor_x = Math.round((e.nativeEvent.offsetX - context.margin) / context.step)
211212
let cursor_y = Math.round((e.nativeEvent.offsetY - context.margin) / context.step)
212213
if (context.isCursorInBounds(cursor_x, cursor_y)) {
@@ -216,7 +217,7 @@ function Board({gameState, setGameState}) {
216217
setCursor_x(-1)
217218
setCursor_y(-1)
218219
}
219-
}, [gameState, context, auth, board.length, counting, dragging])
220+
}, [context, board.length, dragging])
220221

221222
let onClick = useCallback((e) => {
222223
if (gameHasEnded(gameState)) {
@@ -272,11 +273,19 @@ function Board({gameState, setGameState}) {
272273
return
273274
}
274275
paintGrid(context)
276+
let showMoveNumbers = ctrlKeyDownRef.current && (isKibitz(gameState, auth) || gameHasEnded(gameState))
275277
if (counting && !isReviewing(gameState)) {
276278
paintStonesCounting(context, board, countingGroup)
279+
if (showMoveNumbers) {
280+
paintMoveNumbers(context, board)
281+
}
277282
return
283+
}
284+
paintStones(context, board, showMoveNumbers)
285+
if (showMoveNumbers) {
286+
paintMoveNumbers(context, board)
278287
} else {
279-
paintStones(context, board, lastMove)
288+
paintLastMove(context, lastMove)
280289
}
281290
if (currentPlayer(gameState) !== auth.name) {
282291
return
@@ -293,10 +302,7 @@ function Board({gameState, setGameState}) {
293302
if (cursor_x == forbidden_x && cursor_y == forbidden_y) {
294303
return
295304
}
296-
let style = currentColor(gameState) === BLACK ?
297-
"rgba(0,0,0,0.25)" :
298-
"rgba(255,255,255,0.25)"
299-
paintShadow(context, cursor_x, cursor_y, style)
305+
paintShadow(context, cursor_x, cursor_y, currentColor(gameState))
300306
}, [gameState, cursor_x, cursor_y, context, ctrlKeyDown, canvasRef, auth, board, counting, countingGroup, forbidden_x, forbidden_y, lastMove])
301307

302308
useEffect(() => {

‎src/main/client/src/feature/game/paint.js

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,10 @@ export function paintBoardDecorations({width, margin, canvasRef, grid}) {
6666
}
6767
}
6868

69-
export function paintShadow({canvasRef, grid, stoneRadius}, grid_x, grid_y, style) {
69+
export function paintShadow({canvasRef, grid, stoneRadius}, grid_x, grid_y, color) {
70+
let style = (color & (BLACK | REMOVED_B)) ?
71+
"rgba(0,0,0,0.25)" :
72+
"rgba(255,255,255,0.25)"
7073
let [x, y] = grid[grid_y][grid_x]
7174
let ctx = canvasRef.current.getContext("2d")
7275
ctx.fillStyle = style
@@ -75,27 +78,33 @@ export function paintShadow({canvasRef, grid, stoneRadius}, grid_x, grid_y, styl
7578
ctx.fill()
7679
}
7780

78-
export function paintStones(context, board, lastMove) {
79-
let showMoveNumbers = context.showMoveNumbersRef.current
81+
export function paintStones(context, board, showMoveNumbers) {
82+
let cursor_x = context.cursorXref.current
83+
let cursor_y = context.cursorYref.current
8084
for (let grid_y = 0; grid_y < board.length; grid_y++) {
8185
for (let grid_x = 0; grid_x < board.length; grid_x++) {
82-
let {hasStone, color, n} = board[grid_y][grid_x]
83-
if (hasStone) {
84-
let style = color === BLACK ?
85-
"rgba(0,0,0)" :
86-
"rgba(255,255,255)"
87-
paintStone(context, grid_x, grid_y, style)
88-
if (showMoveNumbers) {
89-
let antiStyle = color === BLACK ?
90-
"rgba(255,255,255)" :
91-
"rgba(0,0,0)"
92-
paintMoveNumber(context, grid_x, grid_y, antiStyle, n + 1)
93-
}
86+
let {hasStone, color} = board[grid_y][grid_x]
87+
if (!hasStone) {
88+
continue
89+
}
90+
if (showMoveNumbers && grid_x === cursor_x && grid_y === cursor_y) {
91+
paintShadow(context, grid_x, grid_y, color)
92+
} else {
93+
paintStone(context, grid_x, grid_y, color)
9494
}
9595
}
9696
}
97-
if (!showMoveNumbers) {
98-
paintLastMove(context, lastMove)
97+
}
98+
99+
export function paintMoveNumbers(context, board) {
100+
for (let grid_y = 0; grid_y < board.length; grid_y++) {
101+
for (let grid_x = 0; grid_x < board.length; grid_x++) {
102+
let {hasStone, color, n} = board[grid_y][grid_x]
103+
if (!hasStone) {
104+
continue
105+
}
106+
paintMoveNumber(context, grid_x, grid_y, color, n + 1)
107+
}
99108
}
100109
}
101110

@@ -105,22 +114,13 @@ export function paintStonesCounting(context, board, countingGroup) {
105114
let { hasStone, color } = board[grid_y][grid_x]
106115
if (hasStone) {
107116
if (countingGroup && countingGroup(grid_x, grid_y)) {
108-
let style = color & BLACK ?
109-
"rgba(0,0,0,0.25)" :
110-
"rgba(255,255,255,0.25)"
111-
paintShadow(context, grid_x, grid_y, style)
117+
paintShadow(context, grid_x, grid_y, color)
112118
} else {
113-
let style = color & BLACK ?
114-
"rgba(0,0,0)" :
115-
"rgba(255,255,255)"
116-
paintStone(context, grid_x, grid_y, style)
119+
paintStone(context, grid_x, grid_y, color)
117120
}
118121
}
119122
if (color & ANY_REMOVED) {
120-
let style = (color & ANY_REMOVED) === REMOVED_B ?
121-
"rgba(0,0,0,0.25)" :
122-
"rgba(255,255,255,0.25)"
123-
paintShadow(context, grid_x, grid_y, style)
123+
paintShadow(context, grid_x, grid_y, color)
124124
}
125125
if (color & TERRITORY) {
126126
let style = (color & TERRITORY) === TERRITORY_B ?
@@ -141,7 +141,10 @@ function paintTerritory({canvasRef, grid, territoryRadius}, grid_x, grid_y, styl
141141
ctx.fill()
142142
}
143143

144-
function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, style) {
144+
function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, color) {
145+
let style = color === BLACK ?
146+
"rgba(0,0,0)" :
147+
"rgba(255,255,255)"
145148
let [x, y] = grid[grid_y][grid_x]
146149
let ctx = canvasRef.current.getContext("2d")
147150
ctx.fillStyle = style
@@ -150,7 +153,10 @@ function paintStone({canvasRef, grid, stoneRadius}, grid_x, grid_y, style) {
150153
ctx.fill()
151154
}
152155

153-
function paintMoveNumber({stoneRadius, canvasRef, grid}, grid_x, grid_y, style, n) {
156+
function paintMoveNumber({stoneRadius, canvasRef, grid}, grid_x, grid_y, color, n) {
157+
let style = color === BLACK ?
158+
"rgba(255,255,255)" :
159+
"rgba(0,0,0)"
154160
let [x, y] = grid[grid_y][grid_x]
155161
let size = Math.trunc(stoneRadius * 0.75)
156162
let ctx = canvasRef.current.getContext("2d")
@@ -161,7 +167,7 @@ function paintMoveNumber({stoneRadius, canvasRef, grid}, grid_x, grid_y, style,
161167
ctx.fillText(n, x, y)
162168
}
163169

164-
function paintLastMove({isCursorInBounds, canvasRef, grid, stoneRadius}, lastMove) {
170+
export function paintLastMove({isCursorInBounds, canvasRef, grid, stoneRadius}, lastMove) {
165171
if (!lastMove) {
166172
return
167173
}

‎src/main/client/src/feature/game/state.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,7 @@ function cheapRehydrate(board, countBoard) {
327327
y: y,
328328
color: board[y][x],
329329
hasStone: hasStone(board[y][x]),
330+
isForbidden: () => false,
330331
liberties: 0,
331332
has: () => false,
332333
points: PointList.empty(),

0 commit comments

Comments
 (0)