feat: [0709] ゲージ詳細部分の仕様変更

[cwtickle]

🔨 変更内容 / Details of Changes

1. 設定画面のゲージ詳細部分に必要達成率・正確率（Accuracy）を追加しました。
   gauge calculatorの仕様に準拠しています。
   http://www.omission0.com/other/gauge_calculator/
   なお、クリア不可のゲージ（Accuracyが100%を超える値）を指定した場合、Accuracyの文字をオレンジ色に変えます。
2. 設定画面のゲージ詳細で表示する回復・ダメージ量について、常に実数値を表示するようにしました。
   矢印数依存の場合はその下に回復・ダメージ比率を載せるようにしています。
   矢印数がゼロの場合は、回復・ダメージ比率のみ表記する仕様です。

🔖 関連Issue, 変更理由 / Related Issues, Reason for Changes

1. Resolved [要望] ノルマ制ゲージにおけるクリア必要条件（Accuracy）の表示 #744
   達成率(Accuracy)を表記することでクリア目安がわかりやすくなるため。
   また、制作側視点では設定したゲージのきつさ・緩さがわかるようになり、
   適切なゲージ設定が行われることが見込めるため。
2. 現状、プレイ側でどのくらいの回復量・ダメージ量かがわかりにくいため。
   また、回復・ダメージ比率は制作者側視点では設定が正しく反映されているかどうかを判断するため必要ですが、
   プレイ側視点では参考程度にしかならないため、実数値優先としました。

📷 スクリーンショット / Screenshot

回復・ダメージ量を固定値で指定している場合

矢印数依存の回復・ダメージ比指定の場合

• 矢印数依存の場合、回復・ダメージ量の実数値は小数第2位まで表示します。
• 回復・ダメージ量の実数値が最大ライフ値を超える場合、最大ライフ値を表示します。

矢印数依存の回復・ダメージ比指定で、矢印数がゼロのとき

※ローカルで確認する場合を想定

補足：Accuracyのオンマウスで許容ミス数を表示

補足：Practiceの場合の取り扱い

📝 その他コメント / Other Comments

ゲージ詳細部分の横長変更

• 項目追加に伴い、ゲージ詳細用のテーブル横幅が少し大きくなります。
  共通CSSファイルの入れ替えが発生します。設定項目間の間隔はそのままです。
• テーブル枠：280px ⇒ 305px
• テーブル内の行間隔：(自動)⇒14px　※line-heightにて制御

Accuracyのカスタム取得方法

• ボーダー値、回復・ダメージ量、ライフ初期値、総矢印数を元に計算する関数を追加しました。

// 達成率(Accuracy)・許容ミス数の計算
const [rateText, allowableCntsText] = getAccuracy(borderVal, realRcv, realDmg, initVal, allCnt);

// データ格納
document.getElementId(`dataGaugeRate`).innerHTML = rateText;
document.getElementId(`dataGaugeRate`).title = allowableCntsText;

Accuracyの計算例外

• 回復量、ダメージ量が共にゼロの場合や、いずれかにマイナスがある場合は計算しません。

[codeclimate]

Code Climate has analyzed commit 7d01cb3 and detected 0 issues on this pull request.

View more on Code Climate.