@@ -40,6 +40,8 @@ const TAU = 2 * Math.PI
40
40
export const Game = ( ) => {
41
41
let [ cursor_x , setCursor_x ] = useState ( - 1 )
42
42
let [ cursor_y , setCursor_y ] = useState ( - 1 )
43
+ let lastStoneXref = useRef ( - 1 )
44
+ let lastStoneYref = useRef ( - 1 )
43
45
let [ zoom , setZoom ] = useState ( 0 )
44
46
let { gameId } = useParams ( )
45
47
let stompClient = useContext ( StompContext )
@@ -73,11 +75,7 @@ export const Game = () => {
73
75
}
74
76
let hoshis = new PointList ( dim )
75
77
if ( dim === 9 ) {
76
- hoshis . add ( 2 , 2 )
77
- hoshis . add ( 2 , 6 )
78
78
hoshis . add ( 4 , 4 )
79
- hoshis . add ( 6 , 2 )
80
- hoshis . add ( 6 , 6 )
81
79
} else if ( dim === 13 ) {
82
80
hoshis . add ( 3 , 3 )
83
81
hoshis . add ( 3 , 9 )
@@ -109,6 +107,8 @@ export const Game = () => {
109
107
stoneRadius : getRadius ( step * 0.475 ) ,
110
108
territoryRadius : getRadius ( step * 0.125 ) ,
111
109
hoshiRadius : getRadius ( step * 0.0625 ) ,
110
+ lastStoneXref : lastStoneXref ,
111
+ lastStoneYref : lastStoneYref ,
112
112
}
113
113
} , [ board . length , canvasRef , zoom ] )
114
114
let onMouseMove = useCallback ( ( e ) => {
@@ -148,6 +148,8 @@ export const Game = () => {
148
148
return
149
149
}
150
150
}
151
+ lastStoneXref . current = cursor_x
152
+ lastStoneYref . current = cursor_y
151
153
stompClient . publish ( {
152
154
destination : "/app/game/move" ,
153
155
body : JSON . stringify ( {
@@ -247,6 +249,26 @@ function showStone({ canvasRef, grid, stoneRadius }, grid_x, grid_y, style) {
247
249
ctx . fill ( )
248
250
}
249
251
252
+ function showTriangle ( { isCursorInBounds, canvasRef, grid, stoneRadius, lastStoneXref, lastStoneYref } , board ) {
253
+ let grid_x = lastStoneXref . current
254
+ let grid_y = lastStoneYref . current
255
+ if ( ! isCursorInBounds ( grid_x , grid_y ) ) {
256
+ return
257
+ }
258
+ let { color } = board [ grid_y ] [ grid_x ]
259
+ let style = color === BLACK ?
260
+ "rgba(255,255,255)" :
261
+ "rgba(0,0,0)"
262
+ let [ x , y ] = grid [ grid_y ] [ grid_x ]
263
+ let ctx = canvasRef . current . getContext ( "2d" )
264
+ ctx . fillStyle = style
265
+ ctx . beginPath ( )
266
+ ctx . moveTo ( x , y )
267
+ ctx . lineTo ( x + stoneRadius , y )
268
+ ctx . lineTo ( x , y + stoneRadius )
269
+ ctx . fill ( )
270
+ }
271
+
250
272
function showShadow ( { canvasRef, grid, stoneRadius } , grid_x , grid_y , style ) {
251
273
let [ x , y ] = grid [ grid_y ] [ grid_x ]
252
274
let ctx = canvasRef . current . getContext ( "2d" )
@@ -306,6 +328,7 @@ function paintStones(context, board) {
306
328
}
307
329
}
308
330
}
331
+ showTriangle ( context , board )
309
332
}
310
333
311
334
function paintStonesCounting ( context , board , countingGroup ) {
0 commit comments