Make Fish ranking flow leaderboard-first

Author: metyatech

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project are documented here.
 
 ## [Unreleased]
 
+## [0.12.70] - 2026-03-16
+
+### Changed
+
+- **Ranking now behaves like a leaderboard first and a constraint editor second**: the ranking goal reads as "see which slot is strongest", the ranking flow now orders itself as slot selection → ranking → optional condition changes, and the supporting copy stops leading with fixed-slot constraints.
+- **Ranking copy now reads in player terms instead of configuration terms**: the ranking card, helper text, and README consistently describe "show the strongest candidates for this slot" before mentioning what stays fixed, so the mode is easier to understand at a glance.
+
 ## [0.12.69] - 2026-03-16
 
 ### Changed

README.md

@@ -81,14 +81,14 @@ npm run dev
 
 ### 使い始めやすい比較フロー
 
-- **1 ページ内で目的ごとに整理**: `何を見たい？` で `ランキングだけ見る` / `今の装備から次を探す` / `保存した候補の比較` / `今の時給` / `魚ごとの詳細` を切り替えます。
+- **1 ページ内で目的ごとに整理**: `何を見たい？` で `スロット別に強い装備を順位で見る` / `今の装備から次を探す` / `保存した候補の比較` / `今の時給` / `魚ごとの詳細` を切り替えます。
 - **最初に目的を決める**: 先頭の `1. 何をしたいか決める` で用途を選ぶと、その目的に合わせた設定説明に切り替わります。
-- **上から順に使える**: `1. 何をしたいか決める` → `2. 条件と基準装備を決める` を済ませ、ランキング/候補探しでは `3. 対象を決める` → `4. ランキングや候補を見る` の順に読めるようにしています。
+- **ランキングは先に見て、条件はあとで変えられる**: ランキングでは `1. 何をしたいか決める` → `2. 順位を見る欄を選ぶ` → `3. 順位を見る` の順に読み、必要なときだけ `4. 必要なら条件を変える` を開きます。
 - **目的を決めたら左の現在装備表を起点に進む**: Rod / Line / Bobber / Enchant の4行を表で見ながら、変えたい行を押すと右にその欄の候補一覧が開きます。
 - **今の装備を見たまま候補を比べられる**: 候補パネルを開いても左の現在装備表は隠れないので、ほかの装備や合計ステータスを見失わずに選び直せます。
 - **入力が先、結果は後**: 先に場所や装備を決めてから候補や結果を見る流れにしているため、初見でも手順を追いやすくしています。
 - **いまの目的を常に表示**: `基準装備 / 釣り場 / 時間帯 / 天気 / この条件の目安` をコンテキスト欄に固定し、何を見ているかを見失いにくくしています。
-- **ランキングだけ見たい人も迷わない**: デフォルトは `ランキングだけ見る` で、比較に追加する前にまず順位だけを眺められます。Fishing Area を自動のまま使うと、同じ装備でも釣り場ごとに別行で順位が出ます。
+- **ランキングはスロット順位として読める**: 選んだ欄だけを入れ替え、ほかの欄は今の装備のまま固定して順位を出します。Fishing Area を自動のまま使うと、同じ装備でも釣り場ごとに別行で順位が出ます。
 - **次に試す候補をすぐ出す**: `今の装備から次を探す` では、その目的に合わせた最初の候補と期待値/時間の差をすぐ提示します。
 - **細かい設定は後ろへ**: `詳細調整` に推定前提やレア度上書きをまとめ、必要になるまで初期表示から退かせています。
 
@@ -134,7 +134,7 @@ npm run dev
 
 ### 比べ方（推奨フロー）
 
-1. **最初に `何を見たい？` を選ぶ**: まず `ランキングだけ見る` / `今の装備から次を探す` / `保存した候補の比較` / `今の時給` / `魚ごとの詳細` のどれをしたいか決めます。
+1. **最初に `何を見たい？` を選ぶ**: まず `スロット別に強い装備を順位で見る` / `今の装備から次を探す` / `保存した候補の比較` / `今の時給` / `魚ごとの詳細` のどれをしたいか決めます。
 
 2. **左の「今の装備」表で現在の装備をそろえる**: Rod / Line / Bobber / Enchant の4行を見て、変えたい行を押します。右に開く候補一覧で選ぶと、その行だけが更新されます。左の表は閉じずに残るので、ほかの装備やステータスを見たまま比べられます。Fishing Area は最初は自動のままで大丈夫です。
 
@@ -144,9 +144,9 @@ npm run dev
 
 5. **次に、比べる欄を選ぶ**: `Rod / Line / Bobber / Enchant` の4つを押して、1欄だけ見るか、複数スロットを同時に探すかを切り替えます。
 
-6. **ランキングだけ見たいときは、そのまま順位を見る**: `3. ランキング対象を決める` で `Rod / Line / Bobber / Enchant` を1つ選ぶと個別ランキング、複数選ぶと組み合わせランキングになります。Fishing Area が自動なら、同じ装備でも `Coconut Bay` / `Tangleyew Marshes` のように釣り場ごとに別行で並びます。
+6. **ランキングは、見たい欄を先に選ぶ**: `2. 順位を見る欄を選ぶ` で `Rod / Line / Bobber / Enchant` を1つ選ぶと個別順位、複数選ぶと組み合わせ最適化になります。Fishing Area が自動なら、同じ装備でも `Coconut Bay` / `Tangleyew Marshes` のように釣り場ごとに別行で並びます。
 
-7. **`4. ランキングを見る` で順位を追う**: 先に `この条件の目安` を見てから、同じカードの下で上位帯・下位帯・特定順位帯をそのまま追えます。Fishing Area を固定したときはその釣り場だけ、Fishing Area を自動にしたときは釣り場ごとの順位をそのまま確認できます。
+7. **`3. 順位を見る` でそのまま比較する**: 先に順位を見て、必要ならあとで `4. 必要なら条件を変える` を開きます。Fishing Area を固定したときはその釣り場だけ、Fishing Area を自動にしたときは釣り場ごとの順位をそのまま確認できます。
 
 8. **比較したくなったら `今の装備から次を探す` に切り替える**: `まずはこの候補を比較へ追加` または候補一覧の `この候補を追加` を押します。追加すると、自動で `保存した候補を並べて比べる` に切り替わります。
 

e2e/smoke.spec.ts

@@ -43,7 +43,7 @@ test('calculator updates summary cards and fish list when loadout and filters ch
   await expect(page.getByRole('heading', { name: '📊 装備込みの期待値比較' })).toBeVisible();
   await expect(page.getByText('1. 何をしたいか決める')).toBeVisible();
   await expect(page.getByRole('heading', { name: '何を見たい？' })).toBeVisible();
-  await expect(page.getByText('2. ランキングの条件と基準装備を決める')).toBeVisible();
+  await expect(page.getByText('4. 必要なら条件を変える')).toBeVisible();
 
   // Setup section is collapsed by default for ranking goal (result-first UX).
   await expect(page.getByTestId('setup-collapsed-summary')).toBeVisible();
@@ -52,13 +52,11 @@ test('calculator updates summary cards and fish list when loadout and filters ch
   await page.getByTestId('setup-toggle').click();
 
   await expect(page.getByRole('heading', { name: 'いまの装備', exact: true })).toBeVisible();
-  await expect(
-    page.getByRole('heading', { name: '3. どの欄を入れ替えて順位を見るか決める' }),
-  ).toBeVisible();
-  await expect(page.getByText('4. 条件つきの順位を見る')).toBeVisible();
+  await expect(page.getByRole('heading', { name: '2. 順位を見る欄を選ぶ' })).toBeVisible();
+  await expect(page.getByText('3. 順位を見る')).toBeVisible();
   await expect(page.getByRole('heading', { name: 'Rod を入れ替えた順位' })).toBeVisible();
   await expect(page.getByTestId('current-goal-context')).toContainText(
-    'いまは「条件を固定して順位を見る」を表示中',
+    'いまは「スロット別に強い装備を順位で見る」を表示中',
   );
   await expect(page.getByRole('heading', { name: '保存した候補を比べる' })).toHaveCount(0);
   await expect(page.getByTestId('total-stats-section')).toContainText('装備の合計');
@@ -73,20 +71,18 @@ test('calculator updates summary cards and fish list when loadout and filters ch
   await expect(page.getByTestId('compare-slot-button-line')).toHaveAttribute('data-state', 'idle');
   await expect(page.getByRole('button', { name: 'この候補を比較に追加' })).toHaveCount(0);
   const selectionBox = await page
-    .getByRole('heading', { name: '3. どの欄を入れ替えて順位を見るか決める' })
+    .getByRole('heading', { name: '2. 順位を見る欄を選ぶ' })
     .boundingBox();
   const goalBox = await page.getByRole('heading', { name: '何を見たい？' }).boundingBox();
-  const setupBox = await page
-    .getByRole('heading', { name: '条件と基準装備を決める' })
-    .boundingBox();
+  const setupBox = await page.getByRole('heading', { name: '必要なら条件を変える' }).boundingBox();
   const contextBox = await page.getByTestId('current-goal-context').boundingBox();
   const rankingBox = await page
     .getByRole('heading', { name: 'Rod を入れ替えた順位' })
     .boundingBox();
-  expect(goalBox?.y).toBeLessThan(setupBox?.y ?? Number.POSITIVE_INFINITY);
-  expect(setupBox?.y).toBeLessThan(selectionBox?.y ?? Number.POSITIVE_INFINITY);
-  expect(selectionBox?.y).toBeLessThan(contextBox?.y ?? Number.POSITIVE_INFINITY);
-  expect(contextBox?.y).toBeLessThan(rankingBox?.y ?? Number.POSITIVE_INFINITY);
+  expect(goalBox?.y).toBeLessThan(selectionBox?.y ?? Number.POSITIVE_INFINITY);
+  expect(selectionBox?.y).toBeLessThan(rankingBox?.y ?? Number.POSITIVE_INFINITY);
+  expect(rankingBox?.y).toBeLessThan(contextBox?.y ?? Number.POSITIVE_INFINITY);
+  expect(contextBox?.y).toBeLessThan(setupBox?.y ?? Number.POSITIVE_INFINITY);
   const totalStatsSection = page.getByTestId('total-stats-section');
   await expect(
     totalStatsSection.locator('[data-total-stat="luck"] span.rounded-full').first(),

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vrchat-fish-guide",
-  "version": "0.12.69",
+  "version": "0.12.70",
   "private": true,
   "description": "Unofficial community guide and probability calculator for the VRChat world Fish!",
   "homepage": "https://metyatech.github.io/vrchat-fish-guide/",