自動リバーシ、Vue3 script setup の素振り

先日、SF 作家の柞刈湯葉さんがオセロを作ってたので自分も作ってみようと思った。

GUI 活

フロントエンドのなにかしら複雑そうな UI を「複雑 GUI」、その制作活動を「GUI 活」と界隈で呼んでいたりするのだが、そういうのを久々にやった。

できた

デモ

動画

盤のサイズは可変で、クリックして一手ずつ打つこともできるし、auto にすると候補マスからランダムで選択して進行する。

候補マスの算出については特に工夫無く盤面を全部精査してるので、盤のサイズが大きくなるとかなり重い。Canvas ではなく DOM で描画してるせいもあるが。

サイズを広げると余白が多くなるので、ライフゲームみたいに初期配置をランダムにすると良さそうだなと思ってそういう風にしてみた。

これを試してみてちょっと面白いなと思ったのは、初期の島が偶数個だとそれぞれの島を染め上げてしまってすぐに勝負が終わってしまう場合があるところだった。

シヴィライゼーションという戦略ゲームでは、島国スタートは侵略されることがないので序盤は安全だが、他文明との交流が無いために文明の進歩に出遅れるというデメリットがあるのを思い出した。

Vue3 script setup + TSX

最近 Vue3 が仕上がってきているようなので、vite + Vue3 script setup + TSX + tailwind というスタックを試してみることにした。

特に script setup + TSX 構文は書き方のノリが React に近くなるなと思った。