Merge pull request #28 from Appbird/topic/resolve#25-#27

Topic/resolve#25 #27

src/scss/foundation/hr.scss

@@ -6,7 +6,7 @@ hr{
     background-color: #bbb;
 }
 hr.u-bold{
-    height: 5px;
+    height: 3px;
 }
 hr.u-thin{
     height: 1px;

src/scss/object/component/ruleDescription.scss

@@ -74,6 +74,7 @@
                 display:flex;
                 flex-direction: column;
                 align-items: flex-start;
+
             }
         }
 

src/scss/object/utility/flex.scss

@@ -14,4 +14,8 @@
 .u-flex-center{
     display: flex;
     justify-content: center;
+}
+.u-flex-nowrap{
+    display: flex;
+    flex-wrap: nowrap;
 }

src/scss/object/utility/underline.scss

@@ -2,6 +2,9 @@
     border-bottom: 2px solid rgb(19, 19, 19) 
 
 }
+.u-underline_text{
+    text-decoration: underline;
+}
 .u-inline{
     display: inline-block;
 }

src/ts/client/view/parts/RuleIndexPart.ts

@@ -2,7 +2,7 @@ import { choiceString } from "../../../utility/aboutLang";
 import { elementWithoutEscaping } from "../../../utility/ViewUtility";
 import { AppliedRuleClassResolved, RuleAttributeAndAppliedClassInfo } from "../../../type/api/gameRule/RuleAttributeAndAppliedClassInfo";
 import { LanguageInApplication } from "../../../type/LanguageInApplication";
-import { findElementByClassNameWithErrorPossibility } from "../../utility/aboutElement";
+import { appendElement, findElementByClassNameWithErrorPossibility } from "../../utility/aboutElement";
 const contents={
     ruleName:{
         Japanese: "ルールの属性",
@@ -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,27 +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")
-        for (const {ruleInfo,onClick} of this.rules){
-            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>
-                </div>
-            `).addEventListener(`click`, onClick)
-        }
+        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>
+                    </div>
+                `)
+                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 u-underline">${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>`

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) {