• https://taea.github.io/f1-tyre-gazer/
• F1のレース観戦時にタイヤ交換があった時にそれを記録しておくためのサイトです。
• F1レースの観戦中にその時の各ドライバーのタイヤ交換状況を自分が覚えていられないので作りました。
• レース観戦中にピットイン→タイヤ交換があった時に、ユーザーが各ドライバーをクリックすると 'BOX' モーダルが表示されるので、実際交換されたタイヤを選択して 'PITOUT' すると、現在のタイヤが記録されます。
• 各タイヤはクリックすると削除が可能です。
• スタート時のタイヤ選択状況に応じて全員のタイヤをユーザーがセットする必要があります（スタート前が多分一番いそがしいですｗ）
  • おそらくスタート時はミディアムタイヤの選択が多いケースが多そうということから、初期状態は全員 M を選択した状態になっています。リセットしてもこの状態に戻ります。
  • ミディアムスタートを選択しなかったドライバーだけ、スタート時のタイヤを変更してください。
• ドライバーの表示順は、とりあえず2024年のコンストラクターズ順位で並べてあります。
• タイヤ交換の記録はローカルストレージに保存されるので、同じブラウザであればページ更新してもそのまま見れると思います。違うデバイス間での同期はできません。
• ページ末尾のリセットボタンで初期状態（全員ミディアム1個選択した状態）に戻せます。

今回も Claude Code に Vibe Coding で作ってもらいました。今回はちょっとこだわってしまって1時間くらいかかったｗ こんな感じの初期プロンプト (prompt.md に載せてます)。まずはミニマムで欲しい機能だけ作ってもらいました。 将来的には自動化できるといいと思いますが、観戦しながら手動で記録するのも結構楽しそうな気がしていますｗ

• F1のレース観戦中に現在誰がどのタイヤに交換したのか覚えていられなくなるので、それを解決するサイトが欲しいです
• 私一人の個人利用を想定しています
• iPhone のブラウザでの利用を中心に想定していますが、PCでも問題なく見れるようにしたいです
• デザインはなるべくF1公式に近い雰囲気で作りたいです。雰囲気の近いフォントで黒背景で白い文字が中心になる構成が良いです
• プレーンな html, css, js のみで作ってください
• DBは使わず必要であれば Local Storage を使ってください

• /sketch.png にラフイメージを描いておきました
• まず sketch の左側の①のように、2025年8月末現在にレースエントリーしているF1ドライバーのリストを並べます
• 前年2024年のコンストラクターズチャンピオンシップの順に並んでいます
• 各ドライバーには、カーナンバー、名前を表す3レター、動的に変わるタイヤ交換履歴を表すアイコンが並んでいます
• 各ドライバーのカーナンバー表示は、チームに合わせた色にしてもらえるとうれしいです
• 各タイヤは S (Soft) / M (Medium) / H (Hard) / I (Intermediate) / W (Wet) の5種類があります
• タイヤアイコンは公式に合わせて文字かアイコンの色を変えたいです
• レース観戦中にドライバーがピットインした際、ユーザーが該当ドライバーの行をクリックすると、sketch 右の②のようなモーダルが表示されます
• モーダルのタイトルは 'BOX' で ドライバーのカーナンバーと3レター、そしてタイヤを選択するセレクトボックスが表示されます
• ユーザーは観戦中にどのタイヤを選んだか確認して、タイヤを選択し「PITOUT」ボタンを Submit します
• そうするとモーダルが表示が消え、ドライバーのリストに選択したタイヤが追加されます
• 過去に選択したタイヤも表示されており、そこに追加して表示されます
• タイヤのアイコンはクリックすると削除することもできます。削除の際には confirm で確認してください

• 以下は今回とりあえず作らなくても大丈夫です。これを実現するためには何らかのAPI通信が必要
• 世に出ている適切なAPI選択して作って欲しいです
• ドライバーの表示順は、現在のレースポジションに合わせて変化します
• ピットインがありタイヤ交換があった場合は、自動的にタイヤ表示が切り替わります
• 理想的には、そのタイヤが現在何周使ったものなのかわかるようになっていると良いです
• ユーザーの操作は必要なくなり、現在のレース順位に応じて、タイヤ交換状況がわかるようになっています
• ドライバーごとのGPの残り持ちタイヤ状況もわかるとさらによさそう