Add preset URL parameter

[kei-gbf]

This patch provides another way to load JSON data.

JSONデータを読み込む為の、presetパラメータの実装。
サーバ上に設置した JSON ファイルから読む方法と、
URLフラグメントにエンコードしたJSONデータを渡す方法を提供します。

• preset=HASH load=HASH loads base64 encoded json data
  Data body is read from location.hash (javascript)
  Server access log will not store the long data.
• preset=name loads ./json/preset/name.json file
  "name" is checked \w-_ letters only

EDIT: info updated ./json/ has now sub directory -> ./json/preset

---

Use cases

• Provide common template setting for users.
  I assume a scenario: server owner can provide top-page for motocal
  the top page has change-log, link to open the preset for the template settings.
• Debug / Test use for developers.
  sometime we add new parameter to the JSON save data,
  reviewers must test the old save data is safe to load.
  we can share the test save data in repo then test load by preset.

用途

• ユーザへのプリセット/テンプレートを提供
  例えば、トップページを用意して、ユーザが選択する形式を想定。
  特定の敵相手のテンプレート編成等を提供できると便利。
• デバッグ、テスト等で編成データに項目を追加した際に、
  過去のセーブデータを開けるかどうかのテストが必要になります。
  テスト用データをレポジトリで共有できると、テストがやりやすくなる。

---

Checklist

• ?load=HASH (I will explain this in next post)
  • max length of url fragment is limit by the browser's implementation
    maybe issue for Edge, Safari, they allow only 2k/4k but do not care this here.
    for chrome and debug only use. most browser allow more long data.
• ?preset=name
  • ?preset=test (minimum sample data, just edit rank 20)
  • ?preset=empty ... will show error now. (not much test error cases)
  • ?preset=no-exists-file ... test something if file not exists
• save and load to server (because the code is moved another function)
• the parameter naming ... ?load=HASH, ?load=name is better?
• test HASH fragment contains "/" "+" "="
• location.hash contain the first "#" character, it's ok Base64.decode can parse this.
• initState["dataName"] = "serverData"; in loadDatachar() need to change dataName?

---

Parameter (stage: need test)

I am thinking rename "preset" -> "load"

Implemented preset and load, preset is an alias.

• ?preset=preset-name ... alias for load=FILE&file=
• ?preset#preset-name ... XXX: not this. server log can't record "preset-name"
  • EDIT: it's possible there was a log access to json file.
• ?load=FILE&file=preset-name
• ?load=PATCH#{encoded JSON} ... merge
• ?load=HASH#{encoded JSON} .... replace
• ?load=PART%profile=djeeta-buff&chara=earth-katana&armlist=earth-magna2&summon=earth-magna
  • NOTE: those names can be shorter, by mapping to number. e.g. (element id)-(weapon type id)
• ?load=FILE,PATCH&file=preset-name#{encoded JSON}
• ?test=rank20
• name parameter for data name

Update (2019/06/16): Add test= parameter

実装予定のパラメータ。(名称は preset から loadに変更予定)
2019/05/18 現在試せるのは、?preset=test と ?preset=HASH#... のみ

---

HELP WANTED

• JSON data for test.

テスト用のデータ作成等。

---

TODO

• esdoc: namespace
• esdoc: fix function signature mismatch
• config webpack minify for ./json/*.json files.
• babel polyfill
• Check url injection (validate file name)
• solve Jest config for unit tests

---

This PR will close #177 similar concept feature.

[kei-gbf]

?load=HASH

Sample URL: server url is when the http://localhost:4080, parameter is

http://localhost:4080?load=HASH#ewogICAgImFybU51bSI6IDYsCiAgICAic3VtbW9uTnVtIjogMiwKICAgICJjaGFyYU51bSI6IDQsCiAgICAicHJvZmlsZSI6IHsKICAgICAgInJhbmsiOiAiMTIzIiwKICAgICAgInplbml0aEF0dGFja0JvbnVzIjogMCwKICAgICAgInplbml0aEhQQm9udXMiOiAwLAogICAgICAiemVuaXRoUGFydHlIUEJvbnVzIjogMCwKICAgICAgInplbml0aEJvbnVzMSI6ICLnhKHjgZciLAogICAgICAiemVuaXRoQm9udXMyIjogIueEoeOBlyIsCiAgICAgICJ6ZW5pdGhEQUJvbnVzIjogIueEoeOBlyIsCiAgICAgICJ6ZW5pdGhUQUJvbnVzIjogIueEoeOBlyIsCiAgICAgICJ6ZW5pdGhPdWdpRGFtYWdlQm9udXMiOiAi54Sh44GXIiwKICAgICAgInplbml0aENoYWluRGFtYWdlQm9udXMiOiAi54Sh44GXIiwKICAgICAgInplbml0aENoYWluRGFtYWdlTGltaXRCb251cyI6ICLnhKHjgZciLAogICAgICAiemVuaXRoRWxlbWVudEJvbnVzIjogIueEoeOBlyIsCiAgICAgICJ6ZW5pdGhEYW1hZ2VMaW1pdEJvbnVzIjogIueEoeOBlyIsCiAgICAgICJtYXN0ZXJCb251cyI6IDAsCiAgICAgICJtYXN0ZXJCb251c0hQIjogMCwKICAgICAgIm1hc3RlckJvbnVzREEiOiAwLAogICAgICAibWFzdGVyQm9udXNUQSI6IDAsCiAgICAgICJtYXN0ZXJCb251c0RhbWFnZUxpbWl0IjogMCwKICAgICAgIm5vcm1hbEJ1ZmYiOiAwLAogICAgICAiZWxlbWVudEJ1ZmYiOiAwLAogICAgICAib3RoZXJCdWZmIjogMCwKICAgICAgIm90aGVyQnVmZjIiOiAwLAogICAgICAiYWRkaXRpb25hbERhbWFnZUJ1ZmYiOiAwLAogICAgICAiZGFtYWdlTGltaXRCdWZmIjogMCwKICAgICAgIm91Z2lEYW1hZ2VMaW1pdEJ1ZmYiOiAwLAogICAgICAiaHBCdWZmIjogMCwKICAgICAgImRhQnVmZiI6IDAsCiAgICAgICJ0YUJ1ZmYiOiAwLAogICAgICAiaHAiOiAxMDAsCiAgICAgICJyZW1haW5IUCI6IDEwMCwKICAgICAgImVuZW15RWxlbWVudCI6ICJ3aW5kIiwKICAgICAgImVuZW15RGVmZW5zZSI6IDEwLAogICAgICAiZGVmZW5zZURlYnVmZiI6IDAsCiAgICAgICJqb2IiOiAibm9uZSIsCiAgICAgICJzZXgiOiAiZmVtYWxlIiwKICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICJEQSI6IDYuNSwKICAgICAgIlRBIjogMywKICAgICAgIm91Z2lHYWdlQnVmZiI6IDAsCiAgICAgICJvdWdpUmF0aW8iOiA0LjUsCiAgICAgICJtaW5pbXVtSFAiOiAwLAogICAgICAiY2hhaW5OdW1iZXIiOiAxLAogICAgICAicGVyc29uYWxOb3JtYWxCdWZmIjogMCwKICAgICAgInBlcnNvbmFsRWxlbWVudEJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxPdGhlckJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxPdGhlckJ1ZmYyIjogMCwKICAgICAgInBlcnNvbmFsQWRkaXRpb25hbERhbWFnZUJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxEQUJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxUQUJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxPdWdpR2FnZUJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxEYW1hZ2VMaW1pdEJ1ZmYiOiAwLAogICAgICAicGVyc29uYWxPdWdpRGFtYWdlTGltaXRCdWZmIjogMAogICAgfSwKICAgICJhcm1saXN0IjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJhcm1UeXBlIjogInN3b3JkIiwKICAgICAgICAic2tpbGwxIjogIm5vbiIsCiAgICAgICAgInNraWxsMiI6ICJub24iLAogICAgICAgICJza2lsbDMiOiAibm9uIiwKICAgICAgICAic2x2IjogMSwKICAgICAgICAiY29uc2lkZXJOdW1iZXJNaW4iOiAwLAogICAgICAgICJjb25zaWRlck51bWJlck1heCI6IDEsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImVsZW1lbnQyIjogImZpcmUiLAogICAgICAgICJlbGVtZW50MyI6ICJmaXJlIgogICAgICB9LAogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJhcm1UeXBlIjogInN3b3JkIiwKICAgICAgICAic2tpbGwxIjogIm5vbiIsCiAgICAgICAgInNraWxsMiI6ICJub24iLAogICAgICAgICJza2lsbDMiOiAibm9uIiwKICAgICAgICAic2x2IjogMSwKICAgICAgICAiY29uc2lkZXJOdW1iZXJNaW4iOiAwLAogICAgICAgICJjb25zaWRlck51bWJlck1heCI6IDEsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImVsZW1lbnQyIjogImZpcmUiLAogICAgICAgICJlbGVtZW50MyI6ICJmaXJlIgogICAgICB9LAogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJhcm1UeXBlIjogInN3b3JkIiwKICAgICAgICAic2tpbGwxIjogIm5vbiIsCiAgICAgICAgInNraWxsMiI6ICJub24iLAogICAgICAgICJza2lsbDMiOiAibm9uIiwKICAgICAgICAic2x2IjogMSwKICAgICAgICAiY29uc2lkZXJOdW1iZXJNaW4iOiAwLAogICAgICAgICJjb25zaWRlck51bWJlck1heCI6IDEsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImVsZW1lbnQyIjogImZpcmUiLAogICAgICAgICJlbGVtZW50MyI6ICJmaXJlIgogICAgICB9LAogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJhcm1UeXBlIjogInN3b3JkIiwKICAgICAgICAic2tpbGwxIjogIm5vbiIsCiAgICAgICAgInNraWxsMiI6ICJub24iLAogICAgICAgICJza2lsbDMiOiAibm9uIiwKICAgICAgICAic2x2IjogMSwKICAgICAgICAiY29uc2lkZXJOdW1iZXJNaW4iOiAwLAogICAgICAgICJjb25zaWRlck51bWJlck1heCI6IDEsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImVsZW1lbnQyIjogImZpcmUiLAogICAgICAgICJlbGVtZW50MyI6ICJmaXJlIgogICAgICB9LAogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJhcm1UeXBlIjogInN3b3JkIiwKICAgICAgICAic2tpbGwxIjogIm5vbiIsCiAgICAgICAgInNraWxsMiI6ICJub24iLAogICAgICAgICJza2lsbDMiOiAibm9uIiwKICAgICAgICAic2x2IjogMSwKICAgICAgICAiY29uc2lkZXJOdW1iZXJNaW4iOiAwLAogICAgICAgICJjb25zaWRlck51bWJlck1heCI6IDEsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImVsZW1lbnQyIjogImZpcmUiLAogICAgICAgICJlbGVtZW50MyI6ICJmaXJlIgogICAgICB9LAogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJhcm1UeXBlIjogInN3b3JkIiwKICAgICAgICAic2tpbGwxIjogIm5vbiIsCiAgICAgICAgInNraWxsMiI6ICJub24iLAogICAgICAgICJza2lsbDMiOiAibm9uIiwKICAgICAgICAic2x2IjogMSwKICAgICAgICAiY29uc2lkZXJOdW1iZXJNaW4iOiAwLAogICAgICAgICJjb25zaWRlck51bWJlck1heCI6IDEsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImVsZW1lbnQyIjogImZpcmUiLAogICAgICAgICJlbGVtZW50MyI6ICJmaXJlIgogICAgICB9CiAgICBdLAogICAgImNoYXJhIjogWwogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiZWxlbWVudCI6ICJmaXJlIiwKICAgICAgICAicmFjZSI6ICJodW1hbiIsCiAgICAgICAgInNleCI6ICJmZW1hbGUiLAogICAgICAgICJhdHRhY2siOiAwLAogICAgICAgICJocCI6IDAsCiAgICAgICAgInN1cHBvcnQiOiAibm9uZSIsCiAgICAgICAgInN1cHBvcnQyIjogIm5vbmUiLAogICAgICAgICJzdXBwb3J0MyI6ICJub25lIiwKICAgICAgICAib3VnaVJhdGlvIjogNC41LAogICAgICAgICJ0eXBlIjogImF0dGFjayIsCiAgICAgICAgImZhdkFybSI6ICJkYWdnZXIiLAogICAgICAgICJmYXZBcm0yIjogIm5vbmUiLAogICAgICAgICJyZW1haW5IUCI6IDEwMCwKICAgICAgICAiREEiOiA2LjUsCiAgICAgICAgIlRBIjogMywKICAgICAgICAiaXNDb25zaWRlcmVkSW5BdmVyYWdlIjogdHJ1ZSwKICAgICAgICAib3BlbkJ1ZmZsaXN0IjogZmFsc2UsCiAgICAgICAgIm9wZW5MQmxpc3QiOiBmYWxzZSwKICAgICAgICAibm9ybWFsQnVmZiI6IDAsCiAgICAgICAgImVsZW1lbnRCdWZmIjogMCwKICAgICAgICAib3RoZXJCdWZmIjogMCwKICAgICAgICAib3RoZXJCdWZmMiI6IDAsCiAgICAgICAgImFkZGl0aW9uYWxEYW1hZ2VCdWZmIjogMCwKICAgICAgICAiZGFCdWZmIjogMCwKICAgICAgICAidGFCdWZmIjogMCwKICAgICAgICAib3VnaUdhZ2VCdWZmIjogMCwKICAgICAgICAiZGFtYWdlTGltaXRCdWZmIjogMCwKICAgICAgICAib3VnaURhbWFnZUxpbWl0QnVmZiI6IDAsCiAgICAgICAgIkxCQVRLIjogMCwKICAgICAgICAiTEJIUCI6IDAsCiAgICAgICAgIkxCREEiOiAwLAogICAgICAgICJMQlRBIjogMCwKICAgICAgICAiTEJFbGVtZW50IjogMCwKICAgICAgICAiTEJDcml0aWNhbDEiOiAibm9uZSIsCiAgICAgICAgIkxCQ3JpdGljYWwyIjogIm5vbmUiLAogICAgICAgICJMQkNyaXRpY2FsMyI6ICJub25lIiwKICAgICAgICAiTEJDcml0aWNhbDQiOiAibm9uZSIKICAgICAgfSwKICAgICAgewogICAgICAgICJuYW1lIjogIiIsCiAgICAgICAgImVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgInJhY2UiOiAiaHVtYW4iLAogICAgICAgICJzZXgiOiAiZmVtYWxlIiwKICAgICAgICAiYXR0YWNrIjogMCwKICAgICAgICAiaHAiOiAwLAogICAgICAgICJzdXBwb3J0IjogIm5vbmUiLAogICAgICAgICJzdXBwb3J0MiI6ICJub25lIiwKICAgICAgICAic3VwcG9ydDMiOiAibm9uZSIsCiAgICAgICAgIm91Z2lSYXRpbyI6IDQuNSwKICAgICAgICAidHlwZSI6ICJhdHRhY2siLAogICAgICAgICJmYXZBcm0iOiAiZGFnZ2VyIiwKICAgICAgICAiZmF2QXJtMiI6ICJub25lIiwKICAgICAgICAicmVtYWluSFAiOiAxMDAsCiAgICAgICAgIkRBIjogNi41LAogICAgICAgICJUQSI6IDMsCiAgICAgICAgImlzQ29uc2lkZXJlZEluQXZlcmFnZSI6IHRydWUsCiAgICAgICAgIm9wZW5CdWZmbGlzdCI6IGZhbHNlLAogICAgICAgICJvcGVuTEJsaXN0IjogZmFsc2UsCiAgICAgICAgIm5vcm1hbEJ1ZmYiOiAwLAogICAgICAgICJlbGVtZW50QnVmZiI6IDAsCiAgICAgICAgIm90aGVyQnVmZiI6IDAsCiAgICAgICAgIm90aGVyQnVmZjIiOiAwLAogICAgICAgICJhZGRpdGlvbmFsRGFtYWdlQnVmZiI6IDAsCiAgICAgICAgImRhQnVmZiI6IDAsCiAgICAgICAgInRhQnVmZiI6IDAsCiAgICAgICAgIm91Z2lHYWdlQnVmZiI6IDAsCiAgICAgICAgImRhbWFnZUxpbWl0QnVmZiI6IDAsCiAgICAgICAgIm91Z2lEYW1hZ2VMaW1pdEJ1ZmYiOiAwLAogICAgICAgICJMQkFUSyI6IDAsCiAgICAgICAgIkxCSFAiOiAwLAogICAgICAgICJMQkRBIjogMCwKICAgICAgICAiTEJUQSI6IDAsCiAgICAgICAgIkxCRWxlbWVudCI6IDAsCiAgICAgICAgIkxCQ3JpdGljYWwxIjogIm5vbmUiLAogICAgICAgICJMQkNyaXRpY2FsMiI6ICJub25lIiwKICAgICAgICAiTEJDcml0aWNhbDMiOiAibm9uZSIsCiAgICAgICAgIkxCQ3JpdGljYWw0IjogIm5vbmUiCiAgICAgIH0sCiAgICAgIHsKICAgICAgICAibmFtZSI6ICIiLAogICAgICAgICJlbGVtZW50IjogImZpcmUiLAogICAgICAgICJyYWNlIjogImh1bWFuIiwKICAgICAgICAic2V4IjogImZlbWFsZSIsCiAgICAgICAgImF0dGFjayI6IDAsCiAgICAgICAgImhwIjogMCwKICAgICAgICAic3VwcG9ydCI6ICJub25lIiwKICAgICAgICAic3VwcG9ydDIiOiAibm9uZSIsCiAgICAgICAgInN1cHBvcnQzIjogIm5vbmUiLAogICAgICAgICJvdWdpUmF0aW8iOiA0LjUsCiAgICAgICAgInR5cGUiOiAiYXR0YWNrIiwKICAgICAgICAiZmF2QXJtIjogImRhZ2dlciIsCiAgICAgICAgImZhdkFybTIiOiAibm9uZSIsCiAgICAgICAgInJlbWFpbkhQIjogMTAwLAogICAgICAgICJEQSI6IDYuNSwKICAgICAgICAiVEEiOiAzLAogICAgICAgICJpc0NvbnNpZGVyZWRJbkF2ZXJhZ2UiOiB0cnVlLAogICAgICAgICJvcGVuQnVmZmxpc3QiOiBmYWxzZSwKICAgICAgICAib3BlbkxCbGlzdCI6IGZhbHNlLAogICAgICAgICJub3JtYWxCdWZmIjogMCwKICAgICAgICAiZWxlbWVudEJ1ZmYiOiAwLAogICAgICAgICJvdGhlckJ1ZmYiOiAwLAogICAgICAgICJvdGhlckJ1ZmYyIjogMCwKICAgICAgICAiYWRkaXRpb25hbERhbWFnZUJ1ZmYiOiAwLAogICAgICAgICJkYUJ1ZmYiOiAwLAogICAgICAgICJ0YUJ1ZmYiOiAwLAogICAgICAgICJvdWdpR2FnZUJ1ZmYiOiAwLAogICAgICAgICJkYW1hZ2VMaW1pdEJ1ZmYiOiAwLAogICAgICAgICJvdWdpRGFtYWdlTGltaXRCdWZmIjogMCwKICAgICAgICAiTEJBVEsiOiAwLAogICAgICAgICJMQkhQIjogMCwKICAgICAgICAiTEJEQSI6IDAsCiAgICAgICAgIkxCVEEiOiAwLAogICAgICAgICJMQkVsZW1lbnQiOiAwLAogICAgICAgICJMQkNyaXRpY2FsMSI6ICJub25lIiwKICAgICAgICAiTEJDcml0aWNhbDIiOiAibm9uZSIsCiAgICAgICAgIkxCQ3JpdGljYWwzIjogIm5vbmUiLAogICAgICAgICJMQkNyaXRpY2FsNCI6ICJub25lIgogICAgICB9LAogICAgICB7CiAgICAgICAgIm5hbWUiOiAiIiwKICAgICAgICAiZWxlbWVudCI6ICJmaXJlIiwKICAgICAgICAicmFjZSI6ICJodW1hbiIsCiAgICAgICAgInNleCI6ICJmZW1hbGUiLAogICAgICAgICJhdHRhY2siOiAwLAogICAgICAgICJocCI6IDAsCiAgICAgICAgInN1cHBvcnQiOiAibm9uZSIsCiAgICAgICAgInN1cHBvcnQyIjogIm5vbmUiLAogICAgICAgICJzdXBwb3J0MyI6ICJub25lIiwKICAgICAgICAib3VnaVJhdGlvIjogNC41LAogICAgICAgICJ0eXBlIjogImF0dGFjayIsCiAgICAgICAgImZhdkFybSI6ICJkYWdnZXIiLAogICAgICAgICJmYXZBcm0yIjogIm5vbmUiLAogICAgICAgICJyZW1haW5IUCI6IDEwMCwKICAgICAgICAiREEiOiA2LjUsCiAgICAgICAgIlRBIjogMywKICAgICAgICAiaXNDb25zaWRlcmVkSW5BdmVyYWdlIjogdHJ1ZSwKICAgICAgICAib3BlbkJ1ZmZsaXN0IjogZmFsc2UsCiAgICAgICAgIm9wZW5MQmxpc3QiOiBmYWxzZSwKICAgICAgICAibm9ybWFsQnVmZiI6IDAsCiAgICAgICAgImVsZW1lbnRCdWZmIjogMCwKICAgICAgICAib3RoZXJCdWZmIjogMCwKICAgICAgICAib3RoZXJCdWZmMiI6IDAsCiAgICAgICAgImFkZGl0aW9uYWxEYW1hZ2VCdWZmIjogMCwKICAgICAgICAiZGFCdWZmIjogMCwKICAgICAgICAidGFCdWZmIjogMCwKICAgICAgICAib3VnaUdhZ2VCdWZmIjogMCwKICAgICAgICAiZGFtYWdlTGltaXRCdWZmIjogMCwKICAgICAgICAib3VnaURhbWFnZUxpbWl0QnVmZiI6IDAsCiAgICAgICAgIkxCQVRLIjogMCwKICAgICAgICAiTEJIUCI6IDAsCiAgICAgICAgIkxCREEiOiAwLAogICAgICAgICJMQlRBIjogMCwKICAgICAgICAiTEJFbGVtZW50IjogMCwKICAgICAgICAiTEJDcml0aWNhbDEiOiAibm9uZSIsCiAgICAgICAgIkxCQ3JpdGljYWwyIjogIm5vbmUiLAogICAgICAgICJMQkNyaXRpY2FsMyI6ICJub25lIiwKICAgICAgICAiTEJDcml0aWNhbDQiOiAibm9uZSIKICAgICAgfQogICAgXSwKICAgICJzdW1tb24iOiBbCiAgICAgIHsKICAgICAgICAic2VsZlN1bW1vblR5cGUiOiAibWFnbmEiLAogICAgICAgICJzZWxmU3VtbW9uQW1vdW50IjogMTAwLAogICAgICAgICJzZWxmU3VtbW9uQW1vdW50MiI6IDAsCiAgICAgICAgInNlbGZFbGVtZW50IjogImZpcmUiLAogICAgICAgICJmcmllbmRTdW1tb25UeXBlIjogImVsZW1lbnQiLAogICAgICAgICJmcmllbmRTdW1tb25BbW91bnQiOiA4MCwKICAgICAgICAiZnJpZW5kU3VtbW9uQW1vdW50MiI6IDAsCiAgICAgICAgImZyaWVuZEVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImF0dGFjayI6IDAsCiAgICAgICAgImhwIjogMCwKICAgICAgICAiaHBCb251cyI6IDAsCiAgICAgICAgIkRBIjogMCwKICAgICAgICAiVEEiOiAwLAogICAgICAgICJjcml0aWNhbFJhdGlvIjogMCwKICAgICAgICAib3VnaURhbWFnZSI6IDAsCiAgICAgICAgInRlbnNoaURhbWFnZVVQIjogMCwKICAgICAgICAiZGFtYWdlTGltaXQiOiAwCiAgICAgIH0sCiAgICAgIHsKICAgICAgICAic2VsZlN1bW1vblR5cGUiOiAibWFnbmEiLAogICAgICAgICJzZWxmU3VtbW9uQW1vdW50IjogMTAwLAogICAgICAgICJzZWxmU3VtbW9uQW1vdW50MiI6IDAsCiAgICAgICAgInNlbGZFbGVtZW50IjogImZpcmUiLAogICAgICAgICJmcmllbmRTdW1tb25UeXBlIjogImVsZW1lbnQiLAogICAgICAgICJmcmllbmRTdW1tb25BbW91bnQiOiA4MCwKICAgICAgICAiZnJpZW5kU3VtbW9uQW1vdW50MiI6IDAsCiAgICAgICAgImZyaWVuZEVsZW1lbnQiOiAiZmlyZSIsCiAgICAgICAgImF0dGFjayI6IDAsCiAgICAgICAgImhwIjogMCwKICAgICAgICAiaHBCb251cyI6IDAsCiAgICAgICAgIkRBIjogMCwKICAgICAgICAiVEEiOiAwLAogICAgICAgICJjcml0aWNhbFJhdGlvIjogMCwKICAgICAgICAib3VnaURhbWFnZSI6IDAsCiAgICAgICAgInRlbnNoaURhbWFnZVVQIjogMCwKICAgICAgICAiZGFtYWdlTGltaXQiOiAwCiAgICAgIH0KICAgIF0sCiAgICAic2ltdWxhdG9yIjoge30sCiAgICAiZGF0YU5hbWUiOiAiVEVTVCIsCiAgICAic29ydEtleSI6ICJhdmVyYWdlQ3ljbGVQZXJUdXJuIiwKICAgICJub1Jlc3VsdFVwZGF0ZSI6IHRydWUsCiAgICAicmVzdWx0SGFzQ2hhbmdlQnV0Tm90VXBkYXRlZCI6IGZhbHNlLAogICAgIm9sZFdpZHRoIjogMTE4NCwKICAgICJyb290bGVmdEhlaWdodCI6IDEwMCwKICAgICJyb290bGVmdFdpZHRoIjogMjUsCiAgICAicm9vdHJpZ2h0SGVpZ2h0IjogMTAwLAogICAgInJvb3RyaWdodFdpZHRoIjogNzUsCiAgICAib3Blbkhvd1RvIjogZmFsc2UsCiAgICAib3Blbk5pdGVIb3dUbyI6IGZhbHNlLAogICAgIm9wZW5TaW11bGF0b3JIb3dUbyI6IGZhbHNlLAogICAgImFjdGl2ZUtleSI6ICJzeXN0ZW1UYWIiLAogICAgImxvY2FsZSI6ICJqYSIsCiAgICAiZGF0YUZvckxvYWQiOiB7fQogIH0=

NOTICE: "HASH" is a fixed token for loading from URL fragment.
Request to server does not contain this long text.

※ URLフラグメントはクライアント側で処理されるので、
サーバには、この長いデータは送られません。(サーバのログが巨大になる心配はなし)

EDITED: rename parameter key preset -> load

---

How to generate the parameter

Currently, I do not provide this.
no need the generator in motocal. I explain it in use case.

• Access to Motocal and input your data
• input data name then Save to browser (e.g. data name: "TEST")
• dump the JSON data, and copy it
• go to https://www.base64encode.org/ then paste it
• the dumped json text contains a lot data, you can pick one which you want to load
• If the text is like {"TEST: { .... } } then you need the inside { .... }
• Encode and copy the generated data
• now you can make URL: http://localhost:4080?load=HASH#(Encoded data)
  • Do not mistake reset=(encoded data) it's not URL fragment. the long data is sent to server.
    when the "load" value was HASH then load data from url fragment.

パラメータは、JSON テキストを Base64 エンコードしたものです。

注意1: 元カレで出力したJSONには複数のデータがあるので、必要な部分を抽出してください。
注意2: HASH の部分を置き換えるの ではなく 、
"load" の値がHASHの場合に # 以降の URLフラグメントから読み込む仕様です。

一応、テストの為に手順を書きましたが、
手作業での生成は想定してません。次で説明します。

---

use case

For dynamic parameter generation.
e.g. Users select some common parameters,
JavaScript can generate this encoded data from the parameter
and give the link to open motocal.

スクリプト等で動的にパラメータを生成する為に使います。
例えば、ユーザの選択・入力を元に初期値を作り出す、等。

[OrkunKocyigit]

I think this long of a hash can cause issues with most browsers. Base64 also depends on characters such as '+', '=', '/' which is not url safe and need to be re-encoded in order to be url safe. I recommend switching to Base62 aka what Google uses.

For size concerns I have two recommendations:

• Instead of using usual save format and hash it, use a predefined encoding format.
  For Example:

{"profile":{"rank":"155","zenithAttackBonus":"3000","zenithHPBonus":0,"zenithPartyHPBonus":0,"masterBonus":"18","masterBonusHP":"15","masterBonusDA":"4","masterBonusTA":"2","masterBonusDamageLimit":"1","normalBuff":0,"elementBuff":0,"otherBuff":0,"otherBuff2":0,"additionalDamageBuff":0,"damageLimitBuff":0,"ougiDamageLimitBuff":0,"hpBuff":0,"daBuff":0,"taBuff":0,"hp":100,"remainHP":100,"zenithBonus1":"無し","zenithBonus2":"無し","enemyElement":"water","enemyDefense":"13","defenseDebuff":"50","job":"wrestler","sex":"female","element":"earth","DA":70,"TA":20,"ougiGageBuff":0,"ougiRatio":4.5,"minimumHP":0,"chainNumber":"4","personalNormalBuff":0,"personalElementBuff":0,"personalOtherBuff":0,"personalOtherBuff2":0,"personalAdditionalDamageBuff":0,"personalDABuff":"5","personalTABuff":0,"personalOugiGageBuff":0,"personalDamageLimitBuff":0,"personalOugiDamageLimitBuff":0,"openBufflist":false}}

Length: 903

Base62 Converted Hash:

1PvClArKk6mbBjm9HE28MypTzrjay5cHe6IdBzDieEHkTFDqxAlBXZ6h6x89ngcCq0Z3YmaxdoQmeCeRpdBXcg88xVAlP8vBmScH2G67WkwkeVJmXMQim98ULjHFlj3rtcRDX23QDTpJmWtWqNpsPYnXkPCINQM0osmewhXMYdLDgnmcsBVCXTuXi1yRb5NrdA62MxYPWKABzipYQaqpKPVQCJHsapu98Jve7oNglVnKOtw11NnoDQjzGqOvcqLAAyRw5U5qzqjtSOUO15BMKWPf3lOeFgeasSAZ0rX0jueiShTc2JrCVCjl25QYGtWYQGdwgtIaDN6dTWoB8jVorI48ckPQ2Wwwmvi834C3fMNJu4xlyVyyJMuCFlm42ObPvmnQQxIIyg70fBZgDKnWSi2J6gjAnvAq1vpSJfAxuYeKkLsFZ0Uy9DgkxDyAaBwAXK9c1xErEcbP6XTmjCK3HQDtGU7UVwCMk7FXL9yDf48lIHYZIJnFtXgFGfY0ps36s8RoFHzUfEhigie4xoNp0bcP200wKi50s0TFLQfSD2vsTRzP0xQgr3oxUG7zB2jq9eNGRFelJQRb50HE3LCbkLacif4xgAAUhJdmqqIPOOmnqzvDl1U2hUbVtnbNyk6nNJPUnJ1ipJPK2FjLLXNWmLCkvKNHJPUxeZkRJRGA6JPH5l1KByXqGYVCr478a2iCev3KY7mUJcZqxNqc8mXPAG8eVmtiIVPBf333hTfwyzlOwwkOmK9fUyTKIrO2107aDIOtuDeYWOFWsx2Grjyau7T9yHCIkv923hSDdhjjt9PpF1izidL1xgaVXjtZOjKtwR3Gc6Xmpx0D5mioIysGVusZ7T3K03SlUUl1N7sPrpjvHvS21Sz5bOYdzASKoX1GpLwgWvyaRmhUyEHyII0rj0CQzhY4usDlmf7m2c5WqfRf4EtZSTuljNKN6NXigWqyYit3zZuvXPAQbToeYEFCH7MDjzfh2Z4dwsSTjJPlSsFgk8kABwtNw23rrFg5ACsQ23F3ZXEQFdzenpFzjvPyiHbtC4EU3gewQfjYimY5PpTnxsIhNGHCpqDdN9ZjYYvdxce89CIgspWF3MQjMyxkpJsAkjXfE8vGAQrDgkpRZHw2biGd07E7ZWnDPy0WhOTO6454Ypgtrp7l97Taj2Ht8JPAFccKBnVZcO4uRjoUp0jQ3k0CeN5cjp1uLtLCVZ

Length:1214

Same data can be represented as following encoding:

rank/zenithAttackBonus/zenithHPBonus/zenithPartyHPBonus/masterBonus/masterBonusHP/masterBonusDA/masterBonusTA/masterBonusDamageLimit/normalBuff/elementBuff/otherBuff/otherBuff2/additionalDamageBuff/damageLimitBuff/ougiDamageLimitBuff/hpBuff/daBuff/taBuff/hp/remainHP/zenithBonus1/zenithBonus2/enemyElement/enemyDefense/defenseDebuff/job/sex/element/DA/TA/ougiGageBuff/ougiRatio/minimumHP/chainNumber/personalNormalBuff/personalElementBuff/personalOtherBuff/personalOtherBuff2/personalAdditionalDamageBuff/personalDABuff/personalTABuff/personalOugiGageBuff/personalDamageLimitBuff/personalOugiDamageLimitBuff/openBufflist

So data becomes this:

155/3000/0/0/18/15/4/2/1/0/0/0/0/0/0/0/0/0/0/100/100/無し/無し/water/13/50/wrestler/female/earth/70/20/0/4.5/0/4/0/0/0/0/0/5/0/0/0/0/false

Length: 142

With Base62 Encoding:

50LBSCEwj3rmZH72qEyCDGCGTtuQ3AJvgPWytV6KVeBtq8yMI4BymCuB7k3yudNPrQT3h68bqhQcwRnq8qANXLlJb4H9f4UTgV4pkLAuM4IDyGiHs9Zyo8L410Bo0fdJVOxPJsO14ugcGx17dPF2I42tOqxUUZ5sGAtiG6o76yM9r0c4YORxm2bdHBn7zkL

Length: 192

• Compressing text before converting to Base encoding. For example with my encoding and deflate compression:

eJxtTDkOgCAQ/JGzC2z0OxRLLLABEmoT/2Dt2yz8hhKjsTCTuYoZFoElIjTwABY4GDDoB0w3j2Xb5/Wx6osmsIUQatJc4lWDTj4q1KcyoieYtnedNP08ypuCj1lPpYYnPg==

Original size: 142 bytes Result size: 97 bytes

With Base62:

1hhIlPJsMmMZPbQw6JjkWTOgDRQGOwWZjncoiWAoMEmXukCEeXHRPycWd4vyMhqV2w5jtvOgClRhSkhTnumppDsC2jKyfvF0zuNDVKJ3S6yberr8rMuE1aoId5OAAiJShtX0wl1Kqyzbd8lMhr5H0IGoJ3pPcbR1ElwECQMaO0P7XP9dgD

Length: 178

[kei-gbf]

@OrkunKocyigit

thx information. it's good point, base64 is not url safe. I did not think that.
This parameter has two cases:

• preset=name ... name is checked preset.match(/^[\w\-\_/]+$/)
• preset=HASH#... that's Fragment. It's allowed to use them. I show the spec below.
  HTTP request does not contain this hash text.

The Base 62 encoding is used for URL short service ? (need to be in http request path)
I think use in the fragment is ok for this case. However, need more tests here.
I will make test case.

Known issue is:
Edge(2k) and Safari(4k) has too short limitation fragment length. no support those browsers.

---

RFC3986 Uniform Resource Identifier (URI): Generic Syntax

sub-delims  = "!" / "$" / "&" / "'" / "(" / ")"
                  / "*" / "+" / "," / ";" / "="
unreserved    = ALPHA / DIGIT / "-" / "." / "_" / "~"
pchar         = unreserved / pct-encoded / sub-delims / ":" / "@"
fragment    = *( pchar / "/" / "?" )

[OrkunKocyigit]

Base62 is url safe. Google uses it in Youtube and Gmail in order to pass item id. You can check following website to try it:
https://base62.io

[kei-gbf]

Compressing text before converting to Base encoding

👍

• minify
• compress

Some browser has issue on copy such too long text on location field.
but in JavaScript even 1000000 length works.
in use case, I don't assume copy the long url manually, it generate in JavaScript internally.

• TODO: show the demo.

---

         foo://example.com:8042/over/there?name=ferret#nose
         \_/   \______________/\_________/ \_________/ \__/
          |           |            |            |        |
       scheme     authority       path        query   fragment

base62 is used in path , they could not use those letters.
here I use the hash fragment

• http request has only the path+query "/?preset=HASH" (need test this)
  server log does not store that long text data.
• base64 does not require other library.

[kei-gbf]

I do not plan the fixed column format, that lose flexibility.
it break when new fields is added. hard to keep compatibility.

A compression is a good optimization point.
the JSON data had a lot indent spaces etc. can be more small.

[kei-gbf]

another idea: (I am thinking rename "preset" -> "load")

• load=FILE&name=preset-name
• load=HASH#{...long data...}
• load=PATCH#{rank:123} ... give only override data (as initial template)
• load=FILE,PATCH&name=preset-name#{rank:123} ... load preset and merge the patch data

[OrkunKocyigit]

another idea: (I am thinking rename "preset" -> "load")

load=FILE&name=preset-name
load=HASH#{...long data...}
load=PATCH#{rank:123} ... give only override data (as initial template)
load=FILE,PATCH&name=preset-name#{rank:123} ... load preset and merge the patch data

Yep that makes more sense if you want to support files.

I do not plan the fixed column format, that lose flexibility.
it break when new fields is added. hard to keep compatibility.

I also wouldn't support encoding based on string replacement. I would assume if that choice is made, there would be middleware class/function to convert our json save data to that encoding as well as convert that encoded data to our java. So updating it becomes non-issue as it will be "auto updated" once someone edits our save.json

[kei-gbf]

middle ware concept sound nice. is it like python's WSGI middle ware?
I can't image how to manage the update yet, though.

I may assume the hash is use only internal.
not for users copy the url directly for share. (there is short url for sharing)
perhaps, no need to think outdated format, data size issue.

I have related topic #177 the goal will be

?load=PART&profile=djeeta-buff&summon=earth-magna&chara=earth-katana&armlist=earth-magna2

I do no plan user-interface, this just provide the lower layer.
this will make it possible build the UI, users can just click each presets to generate the initial data.

I'll continue this next next week.

[kei-gbf]

The entry point is ./src/content.js

    componentDidMount: async function () {
        /**
         * URL parameter handling, now implement preset loading feature.
         *
         * 1. get_url_parameter       url_param.js
         * 2. represent_load_command  preset_param.js
         * 3. promise_download        preset_download.js
         * 4. apply_patch_processor   preset_patch.js
         * 5. make_state              preset_state.js
         *
         * @see PR #201 for details. (@kei-gbf)
         */

---

Checklist for review

• those 5 function naming, if there are idea for readable code.
• ?load=FILE,PART&file=test&summon=test now works.

---

I add many files, they could be single file but
separated for unit test, to remove jquery, browser's location object dependency.

mixing es2015 style, import/require because jest did not transform,
need extra configuration of jest or babel.
preset_ code use import style, other files use node style for unit tests.

[kei-gbf]

Encoding

const DESERIALIZE_METHOD = JSON.parse;

const DECODE_METHOD = Base64.decode;

Now preset_download.js file has the configuration,
instead of hard-coded in source logic.

I choose base64 for now, two reasons:

• it's url fragment field, valid in RFC3986, http request does not contain the fragment.
• no need to import other library.

However, browser implementation may not obey the spec.
If there was issue, decode method changes to base62

---

TODO: need test base62 library at least
NOTE: won't support Edge, Safari limit fragment length. it's not the encoding topics.

[OrkunKocyigit]

The entry point is ./src/content.js

    componentDidMount: async function () {
        /**
         * URL parameter handling, now implement preset loading feature.
         *
         * 1. get_url_parameter       url_param.js
         * 2. represent_load_command  preset_param.js
         * 3. promise_download        preset_download.js
         * 4. apply_patch_processor   preset_patch.js
         * 5. make_state              preset_state.js
         *
         * @see PR #201 for details. (@kei-gbf)
         */

Checklist for review

• those 5 function naming, if there are idea for readable code.
• ?load=FILE,PART&file=test&summon=test now works.

I add many files, they could be single file but
separated for unit test, to remove jquery, browser's location object dependency.

mixing es2015 style, import/require because jest did not transform,
need extra configuration of jest or babel.
preset_ code use import style, other files use node style for unit tests.

Can you add @babel/polyfill dependencies to package.json and webpack entry point. Without it async commands sometimes don't play well with babel-loader.

[kei-gbf]

Can you add @babel/polyfill dependencies to package.json and webpack entry point. Without it async commands sometimes don't play well with babel-loader.

Tthx for the information, I will try it later.

There are two ways to run the code:

• webpack ... work on browser is ok.
  babel-preset-react contains transforms plugins
• Jest (unit test) ... Syntax Error at the "import"
  I hope polyfill can fix this, tests is now pending

---

TODO: research those libraries

• @babel/polyfill
• @babel/plugin-transform-async-to-generator

[OrkunKocyigit]

What type of test data you need? Save data?

[kei-gbf]

@OrkunKocyigit

Yes, it's JSON file under ./json/preset in this PR repo.
I assume two types of use cases.

• Save data for test, to check the backward compatibility
  • with PR number suffix name, when new field added to save data. <-- Need this
    • any data which use the added new field.
    • for example, Add supplemental damage buff + Add Covenant skills + Limit Hollowsky ( 1 per grid) #233 the test data will be Hollowsky weapons + Hallesena
• sample for Users preset (Site admin, Community for this case)
  • various data, it's a free. users can use with their own idea. few samples is ok for now.

[OrkunKocyigit]

@OrkunKocyigit

Yes, it's JSON file under ./json/preset in this PR repo.
I assume two types of use cases.

* Save data for test, to check the backward compatibility
  
  * with PR number suffix name, when new field added to save data. <-- Need this
    
    * any data which use the added new field.
    * for example, #233 the test data will be Hollowsky weapons + Hallesena

* sample for Users preset (Site admin, Community for this case)
  
  * various data, it's a free. users can use with their own idea. few samples is ok for now.

I think some data can be generated using a python script. I'll check what I can do.
I change my mind that doesn't seem smart.

[kei-gbf]

in the test case, I assume it's actual data that Motocal generated.
Because it's used for the proof of tests.

Second case, anyways ok
One of scenario, Implement in JavaScript/Browser. (assume the HASH loading)
Easy way is load a base JSON data then modify it in JavaScript.

---

current status of this PR, I already implemented main features.

• more demonstration and sample.
• minify json file (webpack)

I will give up esdoc, that pending task
so the api document is uncompleted.

[OrkunKocyigit]

@kei-gbf Here is 4 different save files I could find that I used in different times of the application. Saves.zip

[kei-gbf]

@OrkunKocyigit

thx, personally I had not use motocal save data so deep.
I did not know the real data size was so big. (than I thought)
too large to be HASH (base encoding gain the size more)

seem that can be use for stress-test (loading big data)
do you have suggested file name? I will add under ./json/preset (or ./json/test)
(will be name access parameter via ?preset=filename)

for preset use (two use cases)

• (for tests) minimum data that will check only new added fields
  • compact data size make easy to debug
  • I think now, production build should not deploy test data
    so maybe they will have "test-" prefix.
  • or just separate directory ./json/test (thinking now)
• (for users) minimum data for that start up.

[OrkunKocyigit]

I don't think most site admins will create complicated save files like this. These are mostly end user save files.
I think another directory would be best way to go. Someone of those saves are very very old.

[happypurpleduck]

you can see some examples here. these are rather old. and uses different variable names to most this repo for a good amount of stuff.
https://yasha-motocal-data-holder.firebaseio.com/id/.json
starts from 0, goes up to.
you can also interact with it through this. note: it is severely outdated (or has different stuff)/uses much different [less optimized] code here (have yet to update it since the very first PR i did)

---

I have not dive deep into how motocal data saving.
dataForLoad can increases file sizes rather significantly, while also not serving a "good" purpose? (when saving/loading.) can introduce weird behavior, like Weapon List is not showing all the weapons are actually considered (clicking add "fixes" it)

[kei-gbf]

thx, in test case any file can be used, it test outdated, illegal format etc

@OrkunKocyigit

I think another directory would be best way to go. Someone of those saves are very very old.

currently category names are used as directory "profile", "chara", "summon", "armlist" except "preset"

• TODO: Add "test=" parameter to read from ./json/test/*.json for test use case.

@h-yasha

dataForLoad can increases file sizes rather significantly, while also not serving a "good" purpose? (when saving/loading.) can introduce weird behavior, like Weapon List is not showing all the weapons are actually considered (clicking add "fixes" it)

is it same issue #226 ?

re-produce the error

1. Load party data
2. change parameters
3. read same party data
4. Internally, the figures of party data are read, but the display is not updated.

the loading part is re-using current data save/load, via dataForLoad.
what this PR do is just re-compose/re-arrange the loading data for dataForLoad.
I did not look the internal detail yet, I will try change dataName field
that may solve the display-not-updated issue (not testing now)

[kei-gbf]

NOTE: now unit test failed in TravisCI, because Jest config changed.
It passed local test before, but now broken after merge current master
I may revert 2492295 Add Jest config for es2015 … or update the config for fix.

[OrkunKocyigit]

You can replicate it by loading 20 weapons. Issue is it only renders first 16 weapons before you go to weapon tab, go to another tab and go back

[kei-gbf]

I found the unit tests problem was difference of Jasmin(CodePen.IO) and Jest(Motocal)
it's not this PR topic, I will fix the issue in another PR then merge here.

[kei-gbf]

@OrkunKocyigit

thx info. I did not try load those files yet, added test= parameter

• ddd8627 Add test= parameter to load test json data …
• Add Storybook page to quick access to load those test data (for Demo)
• Add test json files (just thinking file name rules)
  • @OrkunKocyigit 4 files
  • @h-yasha 17? files
  • af4c0c1 Add default ./json directory …
    NOTE: Those .json files are temporary test file during this PR.
    When it's ready to merge, I may tidy or remove them.

[OrkunKocyigit]

@kei-gbf

Add test json files (just thinking file name rules)

My advice on that would be keep them as a test but add CRC hash of the to end of the it. That way you can make sure all files are unique.

[kei-gbf]

👍 CRC for freeze the file contents. (for test use case)
and other files which may want to edit flexible, will not have this checksum.
if it's too long as file name, then I will make list file for check.

Other info I want them to include is Date or PR number
the scenario is save initial data file when new field added then
file diff will show what fields are added.

[OrkunKocyigit]

@kei-gbf
Are we still working on it? If not I'll recommend to close it as we have too many PRs.

[kei-gbf]

@OrkunKocyigit

features are almost done.
but I agree too many PRs.

one of motivate of this PR was for help the review tasks, though.
we can close this and freeze this topics until it's required in future.

This patch was implemented as ./preset module, less hard code patch as possible,
so the code would be still re-usable.

---

I will just note my view point and use scenario for share info:
one of another points this PR can improve, is separate view/logic

Input -> Calc Logic ->Output report (result.js)

currently Motocal contains all in one. (strong module dependency)
I aimed to improve the input layer, merit are:

• update framework/library version (we use old bootstrap version now)
• or another UI framework (for allow manual input combobox)

This was for Input/import, the same to Output/export layer

• 3rd party Input -(JSON)-> Calc Logic -(export JSON)-> 3rd party Output

I do not assume who make those 3rd party implementation,
site owner also can provide the custom input view by provide preset JSONs.

It's not require full set of web app. for example
Provides templete grid for Magna by simple HTML select form and JSON files.
(I feel lack of demo at this point)

---

second use scenario is for improve Review/Test costs

If PR author of update patch provides the JSON file of new chara/weapon
Reviewers/Testers can just load the JSON (no need to search new data always)