ゲームブックアプリを作ってみよう （Windows＋ionic＋TypeScript＋AndroidStudio？）

src\app\home\home.page.html の中身

Angularの機能を使うと便利なのですが

---

<ion-content [fullscreen]="true">

　<div id="container">

　　<!--待機中タイプ-->

　　<div id="Wait" *ngIf="TruePageType=='Wait'">

　　　<p>しばらくお待ちください・・・</p>

　　　<!-- Other types -->

　　　<ion-progress-bar type="indeterminate"></ion-progress-bar>

　　　<ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>

　　</div>

　　<!--選択肢タイプ-->

　　<div id="Select" *ngIf="TruePageType=='Select'">

　　　<p><strong>{{PageText1}}</strong></p>

　　　<p>{{PageText2}}</p>

　　　<p>{{PageText3}}</p>

　　　<p>{{PageText4}}</p>

　　　<p>{{PageText5}}</p>

　　　<ion-list>

　　　　<ion-radio-group [(ngModel)] = "SelectPage">

　　　　　<ion-item *ngIf="PageSelectNum>'0'">

　　　　　　<ion-label>{{PageSelectText1}}</ion-label>

　　　　　　<ion-radio slot="start" value={{PageSelectPage1}}></ion-radio>

　　　　　</ion-item>

　　　　　<ion-item *ngIf="PageSelectNum>'1'">

　　　　　　<ion-label>{{PageSelectText2}}</ion-label>

　　　　　　<ion-radio slot="start" value={{PageSelectPage2}}></ion-radio>

　　　　　</ion-item>

　　　　　<ion-item *ngIf="PageSelectNum>'2'">

　　　　　　<ion-label>{{PageSelectText3}}</ion-label>

　　　　　　<ion-radio slot="start" value={{PageSelectPage3}}></ion-radio>

　　　　　</ion-item>

　　　　</ion-radio-group>

　　　</ion-list>

　　　<ion-button (click)="fnOnClickNextPage()">次へ</ion-button>

　　　<p *ngIf=dispMessageErrorText><strong>選択肢を選んでください。</strong></p>　

　　</div>

　　<!--サイコロ判定タイプ-->

　　<div id="Judgement" *ngIf="TruePageType=='Judgement'">

　　　<p><strong>{{PageText1}}</strong></p>

　　　<p>{{PageText2}}</p>

　　　<p>{{PageText3}}</p>

　　　<p>{{PageText4}}</p>

　　　<p>{{PageText5}}</p>

　　　<p>

　　　　<!--サイコロ1-->

　　　　<img src="../../assets/cube1.gif" class="imgDice" *ngIf="Dice1Value=='1'">

　　　　<img src="../../assets/cube2.gif" class="imgDice" *ngIf="Dice1Value=='2'">

　　　　<img src="../../assets/cube3.gif" class="imgDice" *ngIf="Dice1Value=='3'">

　　　　<img src="../../assets/cube4.gif" class="imgDice" *ngIf="Dice1Value=='4'">

　　　　<img src="../../assets/cube5.gif" class="imgDice" *ngIf="Dice1Value=='5'">

　　　　<img src="../../assets/cube6.gif" class="imgDice" *ngIf="Dice1Value=='6'">

　　　　<!--サイコロ2-->

　　　　<img src="../../assets/cube1.gif" class="imgDice" *ngIf="Dice2Value=='1'">

　　　　<img src="../../assets/cube2.gif" class="imgDice" *ngIf="Dice2Value=='2'">

　　　　<img src="../../assets/cube3.gif" class="imgDice" *ngIf="Dice2Value=='3'">

　　　　<img src="../../assets/cube4.gif" class="imgDice" *ngIf="Dice2Value=='4'">

　　　　<img src="../../assets/cube5.gif" class="imgDice" *ngIf="Dice2Value=='5'">

　　　　<img src="../../assets/cube6.gif" class="imgDice" *ngIf="Dice2Value=='6'">

　　　</p>

　　　<ion-button (click)="fnOnClickJudgement()" [hidden]="!BeforeJudgement">サイコロを振れ</ion-button>

　　　<ion-button (click)="fnOnClickNextPage()" [hidden]="BeforeJudgement">次へ</ion-button>

　　</div>

　　<!--エンディングタイプ-->

　　<div id="Select" *ngIf="TruePageType=='Ending'">

　　　<p><strong>{{PageText1}}</strong></p>

　　　<p>{{PageText2}}</p>

　　　<p>{{PageText3}}</p>

　　　<p>{{PageText4}}</p>

　　　<p>{{PageText5}}</p>

　　　<ion-button (click)="fnOnClickNextPage()">最初から始める</ion-button>

　　</div>

　</div>

</ion-content>