From 666e8bb5d55e6b75a4d4cb73b95347eefdf08586 Mon Sep 17 00:00:00 2001
From: Appbird <project.appbird@gmail.com>
Date: Sat, 4 Sep 2021 23:54:42 +0900
Subject: [PATCH] resolve #25,#26

---
 src/ts/client/view/parts/RuleIndexPart.ts | 28 +++++++++++++----------
 src/ts/client/view/state/gameModeRule.ts  | 16 +++++++++++++
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/src/ts/client/view/parts/RuleIndexPart.ts b/src/ts/client/view/parts/RuleIndexPart.ts
index 31afc69..3926271 100644
--- a/src/ts/client/view/parts/RuleIndexPart.ts
+++ b/src/ts/client/view/parts/RuleIndexPart.ts
@@ -37,7 +37,7 @@ const contents={
         English:    "If the scope of rule classes is duplicated and contradicts each other, the item at the top has priority."
     }
 }
-type HandledType = {ruleInfo:RuleAttributeAndAppliedClassInfo, onClick:()=>void}
+type HandledType = {ruleInfo:RuleAttributeAndAppliedClassInfo, onClick?:()=>void}
 export class RuleIndexPart {
     private rules:HandledType[] = []
     constructor(
@@ -49,7 +49,7 @@ export class RuleIndexPart {
      * ルールの目次のアイテムを追加します
      * これで追加し終えた後に、refrectViewメソッドを実行する必要があります。
      */
-    appendNewRule(ruleInfo:RuleAttributeAndAppliedClassInfo, onClick:()=>void){
+    appendNewRule(ruleInfo:RuleAttributeAndAppliedClassInfo, onClick?:()=>void){
         this.rules.push({ruleInfo,onClick})
     }
     refrectView(){
@@ -70,29 +70,33 @@ export class RuleIndexPart {
                     <div class="__item --top u-smallerChara">
                         <p class=""><i class=""></i> ${choiceString(contents.ruleName,this.language)}</p> <p class="">${choiceString(contents.ruleClass,this.language)}</p>
                     </div>
-                    <hr noshade class="u-thin">
+                    <hr noshade class="u-bold">
                 </div>
             <div>
         `);
         const ruleIndexItemsSegment = findElementByClassNameWithErrorPossibility(ruleIndexSegment,"__list")
-        this.rules.forEach(({ruleInfo,onClick},index) => {
-                ruleIndexItemsSegment.appendChild(elementWithoutEscaping`
+        this.rules.forEach(({ruleInfo,onClick}) => {
+                const segment = ruleIndexItemsSegment.appendChild(elementWithoutEscaping`
                     <div class="__item">
                         <div>
-                        <i class="${ruleInfo.rule.iconCSS}"></i> ${ruleInfo.rule.title}
-                        ${(ruleInfo.rule.note || 0) !== 0 ? ` <i class="u-redChara u-bolderChara">${choiceString(contents.annotated, this.language)}</i>` : ""}</div> <div class="__classItems">${this.generateClassDescriptionInRuleIndex(ruleInfo.appliedClass, this.language)}</div>
+                            <i class="${ruleInfo.rule.iconCSS}"></i> ${ruleInfo.rule.title}
+                            ${(ruleInfo.rule.note || 0) !== 0 ? `<i class="u-redChara u-bolderChara">${choiceString(contents.annotated, this.language)}</i>` : ""}
+                        </div>
+                        <div class="__classItems">${this.generateClassDescriptionInRuleIndex(ruleInfo.appliedClass, this.language)}</div>
                     </div>
-                `).addEventListener(`click`, onClick)
-                if (index !== this.rules.length - 1)appendElement(ruleIndexItemsSegment,"hr","u-thin")
+                `)
+                if (onClick !== undefined) segment.addEventListener("click",onClick)
+                appendElement(ruleIndexItemsSegment,"hr","u-thin")
             }
         )
     }
     private generateClassDescriptionInRuleIndex(appliedClass: AppliedRuleClassResolved[], language: LanguageInApplication) {
         return appliedClass.map(ruleClass => `
             <div>
-                ${this.generateCSSIcons(ruleClass)}
-                <div class="u-bolderChara u-inline">${ruleClass.title}</div>
-                <br>
+                <div class="u-bolderChara u-underline_text">
+                    ${this.generateCSSIcons(ruleClass)}
+                    ${ruleClass.title}
+                </div>
                 <div class="u-charaSpace_1em"></div>[${ruleClass.scope || choiceString(contents.noScope,language)}]`
                     + `${(ruleClass.note?.length || 0) !== 0 ? ` <i class="u-redChara u-bolderChara">${choiceString(contents.annotated, language)}</i>` : ""}
             </div>`
diff --git a/src/ts/client/view/state/gameModeRule.ts b/src/ts/client/view/state/gameModeRule.ts
index c5bd938..04ba54b 100644
--- a/src/ts/client/view/state/gameModeRule.ts
+++ b/src/ts/client/view/state/gameModeRule.ts
@@ -7,10 +7,19 @@ import {PageStateBaseClass} from "./Base/PageStateClass"
 import { RuleIndexPart } from "../parts/RuleIndexPart";
 import { MenuView } from "../parts/MenuView";
 import { RuleAttributeAndAppliedClassInfo } from "../../../type/api/gameRule/RuleAttributeAndAppliedClassInfo";
+import { TitleCupsuled } from "../parts/TitleCupsuled";
 export const contents = {
     title:{
         Japanese:   "ルール",
         English:    "Rule"
+    },
+    ruleIndex:{
+        Japanese:   "目次",
+        English:    "Index"
+    },
+    detail:{
+        Japanese:   "詳細",
+        English:    "Detail"
     }
 }
 export class S_GameModeRule extends PageStateBaseClass<{gameSystemID:string,gameModeID:string},IAppUsedToReadAndChangeOnlyPageState>{
@@ -29,8 +38,15 @@ export class S_GameModeRule extends PageStateBaseClass<{gameSystemID:string,game
             gameSystemEnv:this.requiredObj,
             language: this.app.state.language
         })).result
+
+        const ruleIndexTitlePart = new TitleCupsuled(appendElement(this.articleDOM,"div","u-marginUpDown2em"))
+        ruleIndexTitlePart.refresh(choiceString(contents.ruleIndex,this.app.state.language),undefined,{underline:true})
+        
         if (rules === undefined) throw new Error("rules === undefined")
         const ruleIndexPart = new RuleIndexPart(appendElement(this.articleDOM,"div","u-marginUpDown2em"),this.app.state.language)
+
+        const ruleDetailTitlePart = new TitleCupsuled(appendElement(this.articleDOM,"div","u-marginUpDown2em"))
+        ruleDetailTitlePart.refresh(choiceString(contents.detail,this.app.state.language),undefined,{underline:true})
         rules.sort(sort)
         const ruleSegment = appendElement(this.articleDOM,"div","u-width90per")
         for (const ruleObj of rules) {