https://smooth-pudding.hatenablog.com/entry/2025/05/26/195251

前回は “ハリボテ仕様”、つまり最小限のフロント実装を与えるところまで進めました。
smooth-pudding.hatenablog.com
今回はいよいよボード部分に踏み込んでいきたいと思います。

ボード部分の実装の方針

まずはボードにそれっぽい見た目を付与するところまでを目指します。バックエンドとの連携を含めた実装は一旦脇に置いておきます。
第二回の記事で調べたように、ボードの表現はキャンバス上への画像の配置を利用していきます。
ただ、繰り返しになりますが、私自身 React のド初心者なので、いきなりボードの完成形を目指すと辛そうです。その代わりに、キャンバス上に画像を配置する機能に少しずつ理解を深めながら、少しずつそれっぽくしていけたらと思っています。

画像の素材の準備

今回の記事の範囲のために、まず以下を用意します。

コマの画像 (白と黒の各1枚)
ボードの床部分のマーク

手で描くときれいに重なるように描くのが大変なので、Python の matplotlib を使ってプロットするようにしてみました。コードは適当にプロンプトをぶつけまくって Cursor で書かせました。

色は以下を使いました。

線: #3E2723
白: #FFFFFF
黒: #616161
↑線と見分けがつくように少し薄めにしました

まずボードから。

▼ボード描画コードをクリックで表示

import matplotlib.pyplot as plt
import numpy as np
import math


def draw_circles(small_radius, large_radius, scale_factor=1.0, line_width=2, large_circle_color='blue', small_circle_color='red'):
    # 描画エリアの設定
    fig, ax = plt.subplots(figsize=(10, 10))
    ax.set_aspect(scale_factor)  # スケール係数を適用
    
    # 座標範囲の設定
    limit_x = large_radius + small_radius + 1
    limit_y = large_radius + small_radius + 1
    ax.set_xlim(-limit_x, limit_x)
    ax.set_ylim(-limit_y, limit_y)
    
    # 背景の設定
    ax.set_facecolor('none')  # 透明な背景
    fig.patch.set_alpha(0.0)  # 図全体も透明に
    ax.axis('off')  # 軸を非表示
    
    # 大円のプロット
    # 大円の円周上に8つの小円をプロット
    offset_angle = 2 * np.pi / 16  # 360°/16 の回転角度
    for i in range(8):
        # 角度の計算（2πを8等分し、オフセット角度を加える）
        angle = i * 2 * np.pi / 8 + offset_angle
        
        # 小円の中心座標（大円の円周上）
        center_x = large_radius * np.cos(angle)
        center_y = large_radius * np.sin(angle)
        
        # 小円のプロット
        small_circle = plt.Circle((center_x, center_y), small_radius, fill=False, color=small_circle_color, linewidth=line_width)
        ax.add_patch(small_circle)
    
    # 大円の円周上にある小円の内部を横切る部分を計算
    arc_segments = []
    
    for i in range(8):
        angle = i * 2 * np.pi / 8 + offset_angle
        
        # 大円と小円の交点を計算
        distance = large_radius  # 大円の中心から小円の中心までの距離
        
        # 交点が存在する場合のみ（距離がr1+r2より小さく、|r1-r2|より大きい場合）
        if distance < large_radius + small_radius and distance > abs(large_radius - small_radius):
            # 交点の角度を計算
            angle1 = angle - math.asin(small_radius / large_radius)
            angle2 = angle + math.asin(small_radius / large_radius)
            
            # 小円と重なる領域を記録
            arc_segments.append((angle1, angle2))
    
    # 重なりを避けて大円の弧をプロット
    if arc_segments:
        # 0から2πの全周を描く準備
        current_angle = 0
        
        for start, end in sorted(arc_segments):
            # 重なり前の弧をプロット
            if current_angle < start:
                theta = np.linspace(current_angle, start, 100)
                x = large_radius * np.cos(theta)
                y = large_radius * np.sin(theta)
                ax.plot(x, y, color=large_circle_color, linewidth=line_width)
            
            current_angle = max(current_angle, end)
        
        # 最後の重なりから2πまでをプロット
        if current_angle < 2 * np.pi:
            theta = np.linspace(current_angle, 2 * np.pi, 100)
            x = large_radius * np.cos(theta)
            y = large_radius * np.sin(theta)
            ax.plot(x, y, color=large_circle_color, linewidth=line_width)
    else:
        # 重なりがない場合は大円全体をプロット
        large_circle = plt.Circle((0, 0), large_radius, fill=False, color=large_circle_color, linewidth=line_width)
        ax.add_patch(large_circle)
    
    # タイトルや目盛りを表示しない
    plt.tight_layout()
    return fig, ax


def save_figure(fig, filename):
    # 画像を保存する
    fig.savefig(filename, transparent=True, bbox_inches='tight', pad_inches=0)


def display_figure(fig):
    # 画像を表示する
    plt.figure(fig.number)
    plt.show()


def main():
    # パラメータを直接コードで定義
    scale_factor = 0.8
    small_radius = 1
    large_radius = 5
    line_width = 4
    large_circle_color = '#3E2723'
    small_circle_color = '#3E2723'
    output_file = "board.svg"  # 出力ファイル名
    
    # 入力検証
    if small_radius <= 0 or large_radius <= 0:
        print("エラー: 半径は正の値でなければなりません")
        return
    
    # 円を描画
    fig, ax = draw_circles(small_radius, large_radius, scale_factor, line_width, large_circle_color, small_circle_color)
    
    if output_file:
        # SVGとして保存
        save_figure(fig, output_file)
    else:
        # 表示
        display_figure(fig)


if __name__ == "__main__":
    main()

次にコマ。

▼コマ描画コードをクリックで表示

import matplotlib.pyplot as plt
import numpy as np
import matplotlib.patches as patches

def draw_cylinder(radius, height, line_width=2, line_color='blue', fill_color=None, aspect_ratio=1.0):
    # 描画エリアの設定
    fig, ax = plt.subplots(figsize=(10, 10))
    ax.set_aspect(aspect_ratio)  # 縦横比を設定
    
    # 座標範囲の設定（余裕を持たせる）
    margin = max(radius, height) * 0.1  # マージンを追加
    ax.set_xlim(-radius-margin, radius+margin)
    ax.set_ylim(-radius-margin, height+radius+margin)  # 高さと上面の円の半径を考慮
    
    # 背景の設定
    ax.set_facecolor('none')  # 透明な背景
    fig.patch.set_alpha(0.0)  # 図全体も透明に
    ax.axis('off')  # 軸を非表示
    
    # 塗りつぶしの設定
    if fill_color:
        # 側面の塗りつぶし
        side = patches.Rectangle((-radius, 0), 2*radius, height, facecolor=fill_color, edgecolor=None)
        ax.add_patch(side)
        
        # 下面の半円（底面）の塗りつぶし
        bottom_semicircle = patches.Wedge((0, 0), radius, 180, 360, facecolor=fill_color, edgecolor=None)
        ax.add_patch(bottom_semicircle)
        
        # 上面の円の塗りつぶし
        top_circle = patches.Circle((0, height), radius, facecolor=fill_color, edgecolor=None)
        ax.add_patch(top_circle)
    
    # 上面の円（全体）をプロット
    theta = np.linspace(0, 2*np.pi, 100)
    x_top = radius * np.cos(theta)
    y_top = radius * np.sin(theta) + height
    ax.plot(x_top, y_top, color=line_color, linewidth=line_width)
    
    # 下面の円（下半分のみ）をプロット
    theta_bottom = np.linspace(np.pi, 2*np.pi, 50)  # π（180度）から2π（360度）まで
    x_bottom = radius * np.cos(theta_bottom)
    y_bottom = radius * np.sin(theta_bottom)
    ax.plot(x_bottom, y_bottom, color=line_color, linewidth=line_width)
    
    # 右端と左端を結ぶ線分をプロット
    ax.plot([radius, radius], [0, height], color=line_color, linewidth=line_width)  # 右側
    ax.plot([-radius, -radius], [0, height], color=line_color, linewidth=line_width)  # 左側
    
    # レイアウト調整
    plt.tight_layout()
    
    return fig, ax

def save_figure(fig, filename):
    # 画像を保存する
    fig.savefig(filename, transparent=True, bbox_inches='tight', pad_inches=0)

def display_figure(fig):
    # 画像を表示する
    plt.figure(fig.number)
    plt.show()

def main():
    # パラメータ設定
    radius = 1
    height = 0.5
    line_width = 12
    line_color = '#3E2723'
    fill_color = '#FFFFFF'  # 塗りつぶしの色
    aspect_ratio = 0.8
    output_file = "piece_white.svg"  # 出力ファイル名（必要に応じて指定）
    
    # 円柱を描画
    fig, ax = draw_cylinder(radius, height, line_width, line_color, fill_color, aspect_ratio)
    
    if output_file:
        # SVGとして保存
        save_figure(fig, output_file)
    else:
        # 表示
        display_figure(fig)


if __name__ == "__main__":
    main()

作成した board.svg, piece_white.svg, piece_black.svg は Tauri の assets ディレクトリ以下に配置します。

クリックした場所にコマを置くようにする

まずは手始めに、クリックした場所にコマを置く機能を実装してみます。

components/Board.tsx と components/Board.css を開いて、Cursor に以下のように命令します。

@Board.tsx @Board.css に対し、以下の仕組みになるように実装変更して。

最初は白いキャンバスにする

キャンバス上をクリックすると @piece_white.svg を配置する

起動して動作確認すると、問題なく動きました！

コードの内容を確認してみましょう。

▼.tsx と .css をクリックで表示

Board.tsx

import React, { useRef, useEffect, useState } from 'react';
import './Board.css';

interface Piece {
  x: number;
  y: number;
}

const Board: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [pieces, setPieces] = useState<Piece[]>([]);
  const [pieceImage, setPieceImage] = useState<HTMLImageElement | null>(null);

  useEffect(() => {
    // SVG画像を読み込む
    const img = new Image();
    img.onload = () => {
      setPieceImage(img);
    };
    // SVGをData URLに変換して読み込む
    img.src = '/src/assets/piece_white.svg';
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas && pieceImage) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        // キャンバスを白い背景でクリア
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // 配置された駒を描画
        pieces.forEach(piece => {
          const pieceSize = 40; // 駒のサイズ
          ctx.drawImage(
            pieceImage,
            piece.x - pieceSize / 2,
            piece.y - pieceSize / 2,
            pieceSize,
            pieceSize
          );
        });
      }
    }
  }, [pieces, pieceImage]);

  const handleCanvasClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (canvas) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      
      // 新しい駒を追加
      setPieces(prevPieces => [...prevPieces, { x, y }]);
    }
  };

  return (
    <div className="board-container">
      <canvas 
        ref={canvasRef}
        className="board-canvas"
        width={300}
        height={200}
        onClick={handleCanvasClick}
      />
    </div>
  );
};

export default Board;

Board.css

.board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.board-canvas {
  border: 3px solid #3E2723;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(62, 39, 35, 0.2);
  cursor: pointer;
}

順番に読み解いて行きます。まず .tsx の末尾の部分を見てみると、canvas の onClick に対して handleCanvasClick という関数を割り当てていることが分かります。

  return (
    <div className="board-container">
      <canvas 
        ref={canvasRef}
        className="board-canvas"
        width={300}
        height={200}
        onClick={handleCanvasClick}
      />
    </div>
  );

すぐ上で handleCanvasClick が定義されています。MouseEvent から canvas 上の座標を計算して x, y としています。さらに setPieces を呼んで、コマの状態を更新しているようです。

  const handleCanvasClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (canvas) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      
      // 新しい駒を追加
      setPieces(prevPieces => [...prevPieces, { x, y }]);
    }
  };

setPieces は Board の定義の先頭で useState を使って定義されています。

  const [pieces, setPieces] = useState<Piece[]>([]);

Piece はさらに上で interface として定義されています。

interface Piece {
  x: number;
  y: number;
}

handleCnvasClick の最後の部分は、x, y のみを持つ Piece のリストを状態として持つ pieces に対し、その末尾に新しい点を付け加える処理だったということが分かりました。

残りは2つの useEffect です。第二回の記事で勉強したように、1つ目は最初に一回だけ走る処理、2つ目は pieces または pieceImage が変更されるたびに走る処理です。

  useEffect(() => {
    // (中略)
  }, []);

  useEffect(() => {
    // (中略)
  }, [pieces, pieceImage]);

この pieceImage も先頭で useState で定義されています。画像を状態として持つ変数 (ない場合は null) のようです。初期値は null になっていますね。

  const [pieceImage, setPieceImage] = useState<HTMLImageElement | null>(null);

最初に走る方の useEffect の実装を確認してみます。Image 型のオブジェクトを作成し、img.onload に自分自身を setPieceImage に渡す関数を登録しています。その後 img.src に画像の URL を登録しています。onload は img.src に代入するタイミングで発火するのでしょうか？

  useEffect(() => {
    // SVG画像を読み込む
    const img = new Image();
    img.onload = () => {
      setPieceImage(img);
    };
    // SVGをData URLに変換して読み込む
    img.src = '/src/assets/piece_white.svg';
  }, []);

軽く検索したところ、このような記事がヒットしました。この記事の内容が正しければ、onload が呼ばれるのはもう少し先かもしれません。ともかく、どこかのタイミングで画像が読み込まれて、そのタイミングに pieceImage が更新されそうです。
qiita.com
なお、この記事では onload ではなく decode を使うのを推奨しているようですが、初心者の自分にとっては勇み足かもしれないので、一旦そのままにしておきます。

ここまでを踏まえると、画像が読み込まれたときと、クリックされたときに、2つ目の useEffect が走ることが分かりました。では2つ目の useEffect の中身を見てみます。

  const canvasRef = useRef<HTMLCanvasElement>(null);
  // (中略)
  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas && pieceImage) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        // キャンバスを白い背景でクリア
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        // 配置された駒を描画
        pieces.forEach(piece => {
          const pieceSize = 40; // 駒のサイズ
          ctx.drawImage(
            pieceImage,
            piece.x - pieceSize / 2,
            piece.y - pieceSize / 2,
            pieceSize,
            pieceSize
          );
        });
      }
    }
  }, [pieces, pieceImage]);

useRef で取り出した canvasRef に対して canvasRef.current で canvas を取り出します。この部分の理解は難しそうなので、一旦「そういうもの」として飲み込んでおきます。

次に canvas.getContext('2d') が呼ばれています。getContext は以下のページに説明があります。見た目まんまですが、2次元描画のコンテキスト、というものが返ってくるようです。これを ctx に束縛しています。
developer.mozilla.org

次に ctx.fillStyle = (白) および ctx.fillRect(キャンバスのサイズ) を呼んでいます。全体を白い四角で塗りつぶす処理でしょう。

その後、pieces.forEach で、各コマに対する処理が書かれています。コマの画像サイズ pieceSize を用いて ctx.drawImage を呼んでいるようです。まさにコマを描画する処理ですね。drawImage は以下に説明があります。
developer.mozilla.org
今回は引数が5つのケースなので、以下の解釈になるようです。つまり、クリックした位置が中心になるように、縦横それぞれ40の正方形で画像を貼り付けています。

ctx.drawImage(
  pieceImage, // 画像の要素
  piece.x - pieceSize / 2, // 画像の左上のx座標
  piece.y - pieceSize / 2, // 画像の左上のy座標
  pieceSize, // 画像の幅
  pieceSize // 画像の高さ
);

CSS の方も見てみます。board-canvas が canvas 本体で、board-container は board-canvas を含む div 要素です。

.board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.board-canvas {
  border: 3px solid #3E2723;
  border-radius: 8px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 8px rgba(62, 39, 35, 0.2);
  cursor: pointer;
}

各項目の役割を一言でコメントとして追記してもらってみます。CSSのファイル全体を選択し、Ctrl+K で出た窓に以下を命令します。

各行の末尾に、その変数が指すものを表す短いコメントをつけて。

するとこうなりました。もう説明なしでわかりやすいですね。

.board-container {
  display: flex; /* フレックスボックスレイアウトを使用 */
  justify-content: center; /* 水平方向中央揃え */
  align-items: center; /* 垂直方向中央揃え */
  margin: 20px 0; /* 上下のマージン */
}

.board-canvas {
  border: 3px solid #3E2723; /* 茶色の枠線 */
  border-radius: 8px; /* 角を丸くする */
  background-color: #FFFFFF; /* 白い背景 */
  box-shadow: 0 4px 8px rgba(62, 39, 35, 0.2); /* 影の効果 */
  cursor: pointer; /* マウスポインタをポインターに変更 */
}

背景をボードの模様にしてみてもらいましょう。Agent で以下のように命令します。

@Board.tsx や @Board.css を編集して、白背景ではなく、 @board.svg を背景にするようにしてください。

その結果以下のようになりました。

▼編集後のコードをクリックで表示

Board.tsx

import React, { useRef, useEffect, useState } from 'react';
import './Board.css';

interface Piece {
  x: number;
  y: number;
}

const Board: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [pieces, setPieces] = useState<Piece[]>([]);
  const [pieceImage, setPieceImage] = useState<HTMLImageElement | null>(null);
  const [boardImage, setBoardImage] = useState<HTMLImageElement | null>(null);

  useEffect(() => {
    // 駒の画像を読み込む
    const pieceImg = new Image();
    pieceImg.onload = () => {
      setPieceImage(pieceImg);
    };
    pieceImg.src = '/src/assets/piece_white.svg';

    // ボードの背景画像を読み込む
    const boardImg = new Image();
    boardImg.onload = () => {
      setBoardImage(boardImg);
    };
    boardImg.src = '/src/assets/board.svg';
  }, []);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas && pieceImage && boardImage) {
      const ctx = canvas.getContext('2d');
      if (ctx) {
        // キャンバスをクリア
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // ボードの背景画像を描画
        ctx.drawImage(boardImage, 0, 0, canvas.width, canvas.height);
        
        // 配置された駒を描画
        pieces.forEach(piece => {
          const pieceSize = 40; // 駒のサイズ
          ctx.drawImage(
            pieceImage,
            piece.x - pieceSize / 2,
            piece.y - pieceSize / 2,
            pieceSize,
            pieceSize
          );
        });
      }
    }
  }, [pieces, pieceImage, boardImage]);

  const handleCanvasClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
    const canvas = canvasRef.current;
    if (canvas) {
      const rect = canvas.getBoundingClientRect();
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      
      // 新しい駒を追加
      setPieces(prevPieces => [...prevPieces, { x, y }]);
    }
  };

  return (
    <div className="board-container">
      <canvas 
        ref={canvasRef}
        className="board-canvas"
        width={300}
        height={200}
        onClick={handleCanvasClick}
      />
    </div>
  );
};

export default Board;

Board.css

.board-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}

.board-canvas {
  border: 3px solid #3E2723;
  border-radius: 8px;
  background-color: transparent;
  box-shadow: 0 4px 8px rgba(62, 39, 35, 0.2);
  cursor: pointer;
}

変更点は以下のとおりです。

画像の状態が pieceImg と boardImg の2つになった
最初の処理のところで2枚の画像を読み込むようになった
canvas 描画の最初の処理でボードの画像を配置するようになった
board-canvas のCSSの背景色が透明になった

起動時の見た目はこんな感じです。

いい雰囲気ですが、縦横比が歪んでいて、コマの形にピッタリ合わなくなっています。そこで、追加で以下のように命令します。

piece_white.svg および board.svg はいずれも元の画像の縦横比を保存するようにしてください。

するとそれなりにいい感じになりました。

編集されたのは Board.tsx のみで、ボードの描画部分とコマの描画部分が変更されました。まずボードは以下のとおり。

// ボードの背景画像を縦横比を保持して描画
const boardAspectRatio = boardImage.width / boardImage.height;
const canvasAspectRatio = canvas.width / canvas.height;

let drawWidth, drawHeight, offsetX, offsetY;

if (boardAspectRatio > canvasAspectRatio) {
  // 画像の方が横長の場合、幅に合わせる
  drawWidth = canvas.width;
  drawHeight = canvas.width / boardAspectRatio;
  offsetX = 0;
  offsetY = (canvas.height - drawHeight) / 2;
} else {
  // 画像の方が縦長の場合、高さに合わせる
  drawHeight = canvas.height;
  drawWidth = canvas.height * boardAspectRatio;
  offsetX = (canvas.width - drawWidth) / 2;
  offsetY = 0;
}

ctx.drawImage(boardImage, offsetX, offsetY, drawWidth, drawHeight);

そしてコマの方は以下のとおりです。

const pieceSize = 40; // 駒のサイズ
const pieceAspectRatio = pieceImage.width / pieceImage.height;

let pieceWidth, pieceHeight;
if (pieceAspectRatio > 1) {
  // 横長の場合
  pieceWidth = pieceSize;
  pieceHeight = pieceSize / pieceAspectRatio;
} else {
  // 縦長の場合
  pieceHeight = pieceSize;
  pieceWidth = pieceSize * pieceAspectRatio;
}

ctx.drawImage(
  pieceImage,
  piece.x - pieceWidth / 2,
  piece.y - pieceHeight / 2,
  pieceWidth,
  pieceHeight
);

「たしかにうまくいきそうだけど、もうちょいいい書き方あるでしょ」なコードです。話を簡単にするために、幅に合わせてサイズを調整する仕様にします。まず以下の補助関数を定義しておきます。

const adjustSize = (originalWidth: number, originalHeight: number, targetWidth: number) => {
  const aspectRatio = originalHeight / originalWidth;
  return {
    width: targetWidth,
    height: targetWidth * aspectRatio,
  };
}

ボードを描画する箇所を選択して、Ctrl+K から以下のように命令します。

adjustSize 関数を用いてサイズ調整してください。targetWidth はキャンバスの幅にするようにしてください。

するとこうなりました。めちゃくちゃシンプルになりましたね。

// ボードの背景画像を縦横比を保持して描画
const { width: drawWidth, height: drawHeight } = adjustSize(
  boardImage.width,
  boardImage.height,
  canvas.width
);

// キャンバスの中央に配置するためのオフセットを計算
const offsetX = (canvas.width - drawWidth) / 2;
const offsetY = (canvas.height - drawHeight) / 2;

ctx.drawImage(boardImage, offsetX, offsetY, drawWidth, drawHeight);

コマの方も同様に命令します。

adjustSize 関数を用いてサイズ調整してください。const pieceWidth = 40 とし、これを targetWidth として利用してください。

するとこうなりました。こちらもシンプルになりました。

const pieceWidth = 40; // 駒のサイズの幅

// adjustSize関数を使って駒のサイズを調整
const { width: drawPieceWidth, height: drawPieceHeight } = adjustSize(
  pieceImage.width,
  pieceImage.height,
  pieceWidth
);

ctx.drawImage(
  pieceImage,
  piece.x - drawPieceWidth / 2,
  piece.y - drawPieceHeight / 2,
  drawPieceWidth,
  drawPieceHeight
);

実行した様子はこんな感じです。

サイズを微調整するために、以下の3つを Board の定義の関数の先頭に定義し、対応する箇所でこの変数を使うようにしました。

  const canvasWidth = 350;
  const canvasHeight = 350;
  const pieceWidth = 50;

結果はこんな感じです。よくなってきましたね。

最後にセカンドベストボタンとステータス表示の位置を微調整します。pages/BoardPage.tsx を覗いてみると、game-content が3つのコンポーネントをまとめる div 要素であることが分かります。

<div className="game-content">
  <SecondBestButton />
  <Board />
  <StatusDisplay />
</div>

そこで pages/BoardPage.css の .game-content のところを見てみます。

.game-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 20px;
  height: 100vh;
}