Salmon Stats Records#

仕様#

次の仕様で実装することにしました。

シェケナダム
  通常編成
    総合記錄
      昼のみ
        赤イクラ
        金イクラ
      夜あり
        赤イクラ
        金イクラ
    WAVE記錄
      干潮
        イベントなし
          赤イクラ
          金イクラ
        霧
        ハコビヤ襲来
        ドスコイ大量発生
      通常
        イベントなし
        ラッシュ
        キンシャケ探し
        グリル発進
        霧
        ハコビヤ襲来
      満潮
        イベントなし
        ラッシュ
        キンシャケ探し
        グリル発進
        霧
        ハコビヤ襲来
  単緑編成
  全緑編成
  黄金編成

レスポンス#

以下のようなレスポンスを返すと想定します。

[
  {
    "stage_id": 5000,
    "shifts": [
      {
        // 編成区分
        "shift_type": "normal",
        // 金イクラ記錄
        "golden_egg": {
          // 総合記錄
          "total": {
            "power_egg": 9999,
            "golden_egg": 999,
            "weapon_list": [0, 5000, 5010, 6000],
            "start_time": 1630800000
          },
          // 昼のみ記錄
          "no_night_event": {},
          // WAVE記錄
          "wave": [
            {
              "power_egg": 9999,
              "golden_egg": 999,
              "weapon_list": [0, 5000, 5010, 6000],
              "start_time": 1630800000,
              "event_type": "-",
              "water_level": "low"
            }
          ]
        },
        // 赤イクラ記錄
        // フォーマットは金イクラ記錄と同一
        "power_egg": {}
      }
    ]
  }
]

と思ったけど、以下のレスポンスのほうがわかりやすかったりするかな。

{
  "5000": {
    // 通常シフト
    "normal": {
      // 金イクラ記錄
      "golden_egg": {
        // 総合記錄
        "total": {
          "power_egg": 9999,
          "golden_egg": 999,
          "weapon_list": [0, 5000, 5010, 6000],
          "start_time": 1630800000
        },
        // 昼のみ記錄
        "no_night_event": {},
        // WAVE記錄
        "wave": [
          {
            "power_egg": 9999,
            "golden_egg": 999,
            "weapon_list": [0, 5000, 5010, 6000],
            "start_time": 1630800000,
            "event_type": "-",
            "water_level": "low"
          }
        ]
      },
      // 赤イクラ記錄
      // フォーマットは金イクラ記錄と同一
      "power_egg": {}
    },
    // ランダムシフト
    "random1": {},
    "random4": {},
    "grizzco": {}
  },
  "5001": {},
  "5002": {},
  "5003": {},
  "5004": {}
}

というわけで下のレスポンスを採用しました。

UI#

表示方法はいろいろあるのですが、以前つくった LanPlay Records の雛形があるのでそれを利用します。

SCSS + Vue をコピペするだけで動くので楽ちんです。LanPlay Records は Vue で動作しているのですが、Salmon Stats Records は Vite を利用しました。

Vite は内部的には Vue3 なのでかなり高速に動作することが期待できます。

ホスティング#

いつもどおり Netlify を利用しました。とても便利です。

注意点#

• Salmon Stats にある記録しか集計していないので、プレイした四人のうち誰も Salmon Stats 未登録の記錄は参照できません。
• Salmon Stats で集計されていないのでPower Egg Recordsのような WAVE の組み合わせ等には未対応です

他のサイトとの差別化について#

つくってみた感想#

思ったより差別化できていないので「Salmon Stats Records である必要があるのか」と言われると微妙という気がする。

とはいうものの、あくまでも Salmon Stats が WAVE 記錄しか保存していないので、これ以上表示させるデータがないというのはある。それぞれの WAVE の編成ランキングくらいなら出せると思うが、現在のページからモーダルやページ遷移で詳細ページを出すのがめんどくさいのでやらないことにする。

Salmon Stats のシフト記錄が若干見づらい（最適化されていない）ので、リストから好きなシフトを選んでその時のシフト記錄を見れるようにするとかならありかも知れない。

まあ気が向いたらやる、おやすみ。