機能開発順序
昨夜、スマホでwebアプリ版のゲームブックを試したところ、パフォーマンス的に厳しいのかと思われる状況でした。
それも踏まえて、まず最初にシナリオデータ(かなり大きい)とアプリの分離を優先して取り込もうと思います。
アプリ立ち上げ時には、シナリオがなく、Webからインポートして、それをローカルストレージに保存する方法ですね。
二回目以降は、通信量も減るし理にはかなっている気がします。
外部データの取り込みについては以下の投稿のように2022/07/27に(ドメインをまたいだ形で)成功しているので、そこまでは手こずらない（はず・・・ですよね？）
外部データ取り込み色々テスト中９ 外部データの取得(利用できる形で)成功！
https://ncode.syosetu.com/n5283hn/138/
ただ、一般論としてもこのアプリの実装にしても、パフォーマンス問題は使用メモリーと処理速度のトレードオフ的判断になると思われるので、場合によっては"home.page.html"の[hidden]をngIfに変更する必要もあるかもと思っています。
[hidden]：画面上に見えないけれどたくさんのデータ要素がある
(しかも、ゲームブックアプリでは動的に書き換えが必要)
ngIf：条件が満たされてから画面上に要素を作成(あるいは条件満たさないと削除)
上のような違いがあるのですが、現在は[hidden]のみを使用しているので、正直、一度の表示要素が多すぎることは否めないです。
この部分については最近投稿した紹介サイト情報が役立つかもと思っています。
Angularの便利タグ・・・というサイトで紹介しているタグが本当に便利でした
https://ncode.syosetu.com/n5283hn/171/
さて、どうなることやら
とりあえずはアプリとデータの分離からですね。
追記:
明らかに悪さをしている<html lang="en">を<html>に変更。
翻訳は不要
あれ？パフォーマンス問題、これで解消？
（ありえるか？とりあえず様子見）
※その他気づいた点
スマホの選択肢は、長いと途中省略される
スマホでは戦闘終了などに表示したモーダル画面からの復帰が遅い
エンディング時のフラグ記録が行われていない(思い当たる節がある)
追追記：
上記は可能な限り解決しました。
・選択肢の途中省略はcssのwhite-spaceを使用
.break-word{
white-space: pre-wrap;
}
・モーダル画面からの復帰は、タイミングを変更。
（ただし多少効果があった程度)
・エンディングのフラグは、仕様に問題があったので変更
