Add: ボイボ寮側のキャラページの呼び方に不明時の表示を追加 (#230)

VOICEVOX · Oct 26, 2024 · b82310e · b82310e
1 parent 462ffef
commit b82310e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/src/components/layout.scss b/src/components/layout.scss
@@ -1254,6 +1254,10 @@ $dropdown-item-active-background-color: $primary;
                   border-style: solid;
                   border-radius: 8px;
                   text-align: center;
+
+                  &.unknown {
+                    color: gray;
+                  }
                 }
               }
             }

diff --git a/src/pages/dormitory/{Character.characterId}.tsx b/src/pages/dormitory/{Character.characterId}.tsx
@@ -78,20 +78,28 @@ export default ({
         <div className="column description-call-line">
           <div className="description-call-one">
             <span
-              className="description-call-text"
+              className={`description-call-text ${
+                callNameInfos[selectedCharacterKey][targetCharacterKey]
+                  ? ""
+                  : "unknown"
+              }`}
               style={{ borderColor: characterInfo.color }}
             >
-              {callNameInfos[selectedCharacterKey][targetCharacterKey]}
+              {callNameInfos[selectedCharacterKey][targetCharacterKey] || "？"}
             </span>
             <Arrow leftOrRight="right" />
           </div>
           <div className="description-call-one">
             <Arrow leftOrRight="left" />
             <span
-              className="description-call-text"
+              className={`description-call-text ${
+                callNameInfos[targetCharacterKey][selectedCharacterKey]
+                  ? ""
+                  : "unknown"
+              }`}
               style={{ borderColor: characterInfos[targetCharacterKey].color }}
             >
-              {callNameInfos[targetCharacterKey][selectedCharacterKey]}
+              {callNameInfos[targetCharacterKey][selectedCharacterKey] || "？"}
             </span>
           </div>
         </div>