Add: ボイボ寮キャラクターの呼称表 (#163)

Co-authored-by: Hiroshiba <[email protected]>
VOICEVOX · Sep 24, 2023 · 121869d · 121869d
1 parent 81b6020
commit 121869d
Show file tree

Hide file tree

Showing 3 changed files with 424 additions and 0 deletions.
diff --git a/src/components/layout.scss b/src/components/layout.scss
@@ -841,3 +841,224 @@ $dropdown-item-active-background-color: $primary;
     opacity: 1;
   }
 }
+
+$call-names-border: 1px solid gray;
+$call-names-cell-height: 80px;
+$call-names-cell-width: 150px;
+$call-names-cell-width-column: 190px;
+
+.call-names-wrapper {
+  // sticky にするために明示的に高さを指定
+  //  → ほかに overflow の指定などでも sticky にできるが, 親レイアウトの
+  //    Page コンポーネントのフッターやスタイルを変更すると他ページに影響が
+  //    出る可能性があるので, 画面が埋まるように高さを指定した.
+  height: calc(100vh - 52px /* navbar の高さ */);
+  overflow: auto;
+
+  section {
+    z-index: -1; // スクロール時にタイトルと説明が隠れるように
+    position: sticky;
+    top: 0;
+    left: 0;
+    height: max-content;
+    padding: 20px;
+  }
+
+  // キャラの呼称表
+  .call-names {
+    width: auto;
+
+    table {
+      width: 100%;
+      padding: 0;
+      margin: 0 auto;
+      border-collapse: separate;
+      table-layout: fixed;
+      border: none;
+    }
+
+    th {
+      position: sticky;
+      top: 0;
+      left: 0;
+    }
+
+    th,
+    td {
+      height: $call-names-cell-height;
+      width: $call-names-cell-width;
+      padding: 5px;
+
+      // FIXME:
+      // `table td:not([align]), table th:not([align])`セレクター によって
+      // text-align: inherit になっている
+      text-align: center !important;
+
+      vertical-align: middle;
+      border: none;
+
+      &.you {
+        border-left: $call-names-border;
+      }
+    }
+
+    td {
+      cursor: pointer;
+
+      div {
+        height: 100%;
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+
+        p {
+          height: 100%;
+          width: 100%;
+
+          // 当たり判定を大きくしつつ中央寄せ
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+
+          &:hover {
+            // NOTE: ちらつくので border ではなく outline
+            outline: 2px solid;
+            border-radius: 5px;
+          }
+        }
+      }
+    }
+
+    thead > tr {
+      th {
+        background: white;
+        border-bottom: $call-names-border;
+
+        &.origin {
+          width: $call-names-cell-width-column;
+          z-index: 1;
+          border-right: $call-names-border;
+        }
+
+        a {
+          display: flex;
+          flex-direction: column;
+          gap: 5px;
+          text-align: center;
+          justify-content: center;
+          align-items: center;
+
+          &:hover {
+            p {
+              text-decoration: underline;
+            }
+          }
+        }
+
+        @include mobile {
+          &.origin {
+            width: 100px;
+          }
+        }
+      }
+    }
+
+    tbody > tr {
+      th {
+        border-right: $call-names-border;
+        width: $call-names-cell-width-column;
+        padding: 0 10px;
+
+        a {
+          display: flex;
+          gap: 10px;
+          text-align: center;
+          justify-content: flex-start;
+          align-items: center;
+
+          // キャラクター名
+          p {
+            white-space: normal;
+            text-align: left;
+            justify-content: flex-end;
+          }
+        }
+
+        &:hover {
+          a p {
+            text-decoration: underline;
+          }
+        }
+
+        @include mobile {
+          width: 100px;
+          a {
+            justify-content: center;
+            p {
+              display: none;
+            }
+          }
+        }
+      }
+
+      td {
+        p {
+          user-select: all;
+
+          &.me,
+          &.unknown {
+            color: gray;
+          }
+        }
+
+        &:has(.unknown) {
+          cursor: default;
+
+          p {
+            outline: none;
+            user-select: none;
+          }
+        }
+
+        &:has(.me) {
+          background: white;
+        }
+      }
+    }
+
+    .origin {
+      padding: 0;
+
+      p {
+        font-weight: normal;
+
+        &:nth-child(1) {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          padding: 10px;
+        }
+        &:nth-child(2) {
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 10px;
+        }
+      }
+
+      div {
+        height: 100%;
+        width: 100%;
+        // workaround: 斜線の描画
+        background: linear-gradient(
+          to right top,
+          transparent calc(50% - 0.5px),
+          gray 50%,
+          gray calc(50% + 0.5px),
+          transparent calc(50% + 1px)
+        );
+      }
+    }
+  }
+}
diff --git a/src/pages/dormitory.tsx b/src/pages/dormitory.tsx
@@ -265,6 +265,13 @@ const Dormitory: React.FC<DormitoryProps> = ({ setShowingHeader }) => {
             <p className="is-size-6">
               必ずしも遵守する必要はなく、自由に改変して頂いても問題ありません。
             </p>
+            <div style={{ padding: "20px" }}>
+              <Link to="/dormitory/call-names">
+                <button className="button is-normal is-rounded" type="button">
+                  <span>キャラクターの呼称表</span>
+                </button>
+              </Link>
+            </div>
           </div>
 
           <div className="container has-text-centered py-5 is-flex is-flex-direction-column">