Chore/improve database UI

[Haruto-Imai]

1. 盤面ロード時に、盤面サイズを変更する機能を削除

• 変更前：盤面ロード時、新しい盤面のサイズを取得して iframe の盤面サイズを変更していましたが、コード編集欄のboardSizeの値は変わらないままでした。
• 変更後：盤面ロード時に盤面サイズを変更する機能を削除し、デフォルトの20×20のサイズでない盤面はコードの編集が行われたものとして扱う予定です。

2. テンプレートクリック時、sizeValueの更新が完了する前に判定が行われていたバグを修正

• 変更前：盤面テンプレートをクリックしたとき、request_sync によって iframe から現在の盤面サイズを取得して、更新された sizeValue と盤面テンプレートの minBoardSize を比較していました。ただ、sizeValue の更新が完了する前に minBoardSize との比較が行われており、サイズを変更した後の最初の一回は盤面テンプレートの配置の挙動がおかしくなっていました。
• 変更後：waitForSync 関数を追加することで、sizeValue が更新された後に minBoardSize との比較が行われるようにしました。

3. sizeValueの更新をコード適用時に行うよう変更し、無効なテンプレートボタンを半透明にした

• 1で盤面ロード時の盤面サイズ変更機能を削除したため、盤面サイズが変更されるのは、ユーザーが編集されたコードを適用する時のみになりました。そこで、sizeValue の更新をコード適用時に行うよう変更し、minBoardSize が sizeValue より大きい盤面テンプレートは半透明にして、クリックできないことを視覚的に分かりやすくしました。

4. alert()で表示していたメッセージをトーストとして表示するよう変更
5. テンプレートボタンについてもトーストを使うよう修正

• alert()により画面上部に表示していたメッセージをトーストとして表示するよう変更しました。

6. コード適用ボタンをハイライトする機能を追加、ボタンの色を変更

• 編集中のコードと、適用されているコードが一致しないとき、「適用」ボタンがハイライトされるよう変更しました。
• ボタンの色を btn-primary から btn-success に変更しました。

7. 不要なボタンを削除、世代数の変化によりボタンが横に振動する問題を解決

• 第○○世代の値が変わるごとに、ページ下部のボタンが左右に揺れていたので、世代数の表示欄を固定幅にすることでボタンが揺れないようにしました。
• 不要になった<>のボタンを削除しました

[cloudflare-workers-and-pages]

Deploying life-code with    Cloudflare Pages

Latest commit:	0a52774
Status:	✅  Deploy successful!
Preview URL:	https://c34d0c08.life-code.pages.dev
Branch Preview URL:	https://chore-improve-database-ui.life-code.pages.dev

View logs