From eb75d0bfb59371272a78d1f4dd074df8f59780b0 Mon Sep 17 00:00:00 2001 From: k-chop Date: Sun, 23 Oct 2022 09:54:51 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E4=B8=80=E8=A6=A7=E3=81=A8=E5=80=8B?= =?UTF-8?q?=E5=88=A5=E3=83=9A=E3=83=BC=E3=82=B8=E4=B8=A1=E6=96=B9=E3=81=A7?= =?UTF-8?q?=E4=BD=BF=E3=81=86=E3=81=AE=E3=81=A7=E3=82=AD=E3=83=A3=E3=83=A9?= =?UTF-8?q?=E3=82=AF=E3=82=BF=E3=83=BC=E6=83=85=E5=A0=B1=E3=82=92=E3=82=AB?= =?UTF-8?q?=E3=82=B9=E3=82=BF=E3=83=A0=E3=83=95=E3=83=83=E3=82=AF=E3=81=AB?= =?UTF-8?q?=E5=88=87=E3=82=8A=E5=87=BA=E3=81=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDetailedCharacterInfo.ts | 824 +++++++++++++++++++++++++ src/pages/dormitory.tsx | 830 +------------------------- 2 files changed, 831 insertions(+), 823 deletions(-) create mode 100644 src/hooks/useDetailedCharacterInfo.ts diff --git a/src/hooks/useDetailedCharacterInfo.ts b/src/hooks/useDetailedCharacterInfo.ts new file mode 100644 index 000000000..d7b837d6e --- /dev/null +++ b/src/hooks/useDetailedCharacterInfo.ts @@ -0,0 +1,824 @@ +import { useStaticQuery, graphql } from "gatsby" +import { IGatsbyImageData } from "gatsby-plugin-image" +import { useCharacterInfo } from "./useCharacterInfo" +import goki01 from "../audios/dormitory/goki-01.wav" +import goki02 from "../audios/dormitory/goki-02.wav" +import goki03 from "../audios/dormitory/goki-03.wav" +import goki04 from "../audios/dormitory/goki-04.wav" +import goki05 from "../audios/dormitory/goki-05.wav" +import hau01 from "../audios/dormitory/hau-01.wav" +import hau02 from "../audios/dormitory/hau-02.wav" +import hau03 from "../audios/dormitory/hau-03.wav" +import hau04 from "../audios/dormitory/hau-04.wav" +import himari01 from "../audios/dormitory/himari-01.wav" +import himari02 from "../audios/dormitory/himari-02.wav" +import himari03 from "../audios/dormitory/himari-03.wav" +import himari04 from "../audios/dormitory/himari-04.wav" +import himari05 from "../audios/dormitory/himari-05.wav" +import kotarou01 from "../audios/dormitory/kotarou-01.wav" +import kotarou02 from "../audios/dormitory/kotarou-02.wav" +import kotarou03 from "../audios/dormitory/kotarou-03.wav" +import kyoko01 from "../audios/dormitory/kyoko-01.mp3" +import kyoko02 from "../audios/dormitory/kyoko-02.wav" +import kyoko03 from "../audios/dormitory/kyoko-03.wav" +import kyoko04 from "../audios/dormitory/kyoko-04.wav" +import kyoko05 from "../audios/dormitory/kyoko-05.wav" +import mesuo01 from "../audios/dormitory/mesuo-01.wav" +import metan01 from "../audios/dormitory/metan-01.wav" +import metan02 from "../audios/dormitory/metan-02.wav" +import metan03 from "../audios/dormitory/metan-03.wav" +import metan04 from "../audios/dormitory/metan-04.wav" +import ritsu01 from "../audios/dormitory/ritsu-01.wav" +import ritsu02 from "../audios/dormitory/ritsu-02.wav" +import ritsu03 from "../audios/dormitory/ritsu-03.wav" +import ritsu04 from "../audios/dormitory/ritsu-04.wav" +import ritsu05 from "../audios/dormitory/ritsu-05.wav" +import ryusei01 from "../audios/dormitory/ryusei-01.wav" +import ryusei02 from "../audios/dormitory/ryusei-02.wav" +import ryusei03 from "../audios/dormitory/ryusei-03.wav" +import seven01 from "../audios/dormitory/seven-01.wav" +import seven02 from "../audios/dormitory/seven-02.wav" +import seven03 from "../audios/dormitory/seven-03.wav" +import seven04 from "../audios/dormitory/seven-04.wav" +import sora01 from "../audios/dormitory/sora-01.wav" +import sora02 from "../audios/dormitory/sora-02.wav" +import sora03 from "../audios/dormitory/sora-03.wav" +import sora04 from "../audios/dormitory/sora-04.wav" +import takehiro01 from "../audios/dormitory/takehiro-01.wav" +import takehiro02 from "../audios/dormitory/takehiro-02.wav" +import takehiro03 from "../audios/dormitory/takehiro-03.wav" +import tsumugi01 from "../audios/dormitory/tsumugi-01.wav" +import tsumugi02 from "../audios/dormitory/tsumugi-02.wav" +import tsumugi03 from "../audios/dormitory/tsumugi-03.wav" +import tsumugi04 from "../audios/dormitory/tsumugi-04.wav" +import white01 from "../audios/dormitory/white-01.wav" +import white02 from "../audios/dormitory/white-02.wav" +import white03 from "../audios/dormitory/white-03.wav" +import white04 from "../audios/dormitory/white-04.wav" +import zundamon01 from "../audios/dormitory/zundamon-01.wav" +import zundamon02 from "../audios/dormitory/zundamon-02.wav" +import zundamon03 from "../audios/dormitory/zundamon-03.wav" +import zundamon04 from "../audios/dormitory/zundamon-04.wav" +import zundamon05 from "../audios/dormitory/zundamon-05.wav" +import { + CharacterKey, + CharacterInfo, + Generation, +} from "../types/dormitoryCharacter" + +export const useDetailedCharacterInfo = () => { + const query: { + [key: string]: { + nodes: { + name: string + childImageSharp: { + gatsbyImageData: IGatsbyImageData + } + }[] + } + } = useStaticQuery(graphql` + { + portrait: allFile(filter: { absolutePath: { regex: "/portrait/" } }) { + nodes { + name + childImageSharp { + gatsbyImageData(height: 640) + } + } + } + bustup: allFile(filter: { absolutePath: { regex: "/bustup/" } }) { + nodes { + name + childImageSharp { + gatsbyImageData(height: 320) + } + } + } + dormitory: allFile(filter: { absolutePath: { regex: "/dormitory/" } }) { + nodes { + name + childImageSharp { + gatsbyImageData(height: 320) + } + } + } + } + `) + + const { getCharacterInfo } = useCharacterInfo() + + const characterInfos: { + [key in CharacterKey]: CharacterInfo | undefined + } = { + 四国めたん: { + name: getCharacterInfo("四国めたん").name, + id: getCharacterInfo("四国めたん").characterId, + rubyName: "四国(しこく)めたん", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-metan" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-metan" + )!.childImageSharp.gatsbyImageData, + color: "#DF4C94", + lightColor: "#E3ADD5", + description: + "高等部二年生。常に金欠。趣味は中二病妄想。
誰にでも遠慮しないので、基本的にタメ口。", + labelInfos: [ + { label: "年齢", value: "17 歳", size: 1 }, + { label: "身長", value: "150 cm", size: 1 }, + { label: "性格", value: "若干ツンデレ気味", size: 2 }, + ], + voiceUrls: [metan01, metan02, metan03, metan04], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("metan")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + ずんだもん: "ずんだもん", + 春日部つむぎ: "つむぎさん", + 雨晴はう: "はうさん", + 波音リツ: "リツさん", + 玄野武宏: "玄野さん", + 白上虎太郎: "白上さん", + 青山龍星: "青山さん", + 冥鳴ひまり: "ひまりさん", + 九州そら: "そら", + モチノキョウコ: "もち子さん", + 剣崎雌雄: "剣崎さん", + WhiteCUL: "雪さん", + 後鬼: "後鬼さん", + No7: "セブンさん", + me: ["わたくし"], + you: ["貴女(たち)", "アンタ(ら)"], + }, + detailUrl: + "https://zunko.jp/con_voice.html#:~:text=%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%5Bsm31250786%5D-,%E5%9B%9B%E5%9B%BD%E3%82%81%E3%81%9F%E3%82%93%EF%BC%88%E6%BC%86%E9%BB%92%E3%81%AE%E3%82%81%E3%81%9F%E3%82%93%EF%BC%89,-CV%3A%E7%94%B0%E4%B8%AD%E5%B0%8F%E9%9B%AA", + }, + + ずんだもん: { + name: getCharacterInfo("ずんだもん").name, + id: getCharacterInfo("ずんだもん").characterId, + rubyName: "ずんだもん", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-zundamon" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-zundamon" + )!.childImageSharp.gatsbyImageData, + color: "#33A65E", + lightColor: "#CCEBC5", + description: + "ずんだ餅の精。やや不幸属性が備わっており、
ないがしろにされることもしばしば。", + labelInfos: [ + { + label: "趣味", + value: "ずんだ餅にかかわることはだいたい好き", + size: 2, + }, + { label: "将来の夢", value: "ずんだ餅のさらなる普及", size: 2 }, + ], + voiceUrls: [zundamon01, zundamon02, zundamon03, zundamon04, zundamon05], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("zundamon")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + 四国めたん: "めたん", + 春日部つむぎ: "つむぎ", + 雨晴はう: "はう", + 波音リツ: "リツ", + 玄野武宏: "たけひろ", + 白上虎太郎: "こたろう", + 青山龍星: "りゅうせい", + 冥鳴ひまり: "ひまり", + 九州そら: "そら", + モチノキョウコ: "もち子", + 剣崎雌雄: "めすお", + WhiteCUL: "雪", + 後鬼: "後鬼", + No7: "セブン", + me: ["ずんだもん", "僕"], + you: ["オマエ", "みんな"], + }, + detailUrl: + "https://zunko.jp/con_voice.html#:~:text=%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%5Bsm31259177%5D-,%E3%81%9A%E3%82%93%E3%81%A0%E3%82%82%E3%82%93,-CV%3A%E4%BC%8A%E8%97%A4%E3%82%86", + }, + + 春日部つむぎ: { + name: getCharacterInfo("春日部つむぎ").name, + id: getCharacterInfo("春日部つむぎ").characterId, + rubyName: + "春日部(かすかべ)つむぎ", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-tsumugi" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-tsumugi" + )!.childImageSharp.gatsbyImageData, + color: "#FF9914", + lightColor: "#FEE6AA", + description: + "埼玉県内の高校に通うギャルの女の子。
やんちゃに見えて実は真面目な一面もある。", + labelInfos: [ + { label: "年齢", value: "18 歳", size: 1 }, + { label: "身長", value: "155 cm", size: 1 }, + { label: "出身", value: "埼玉", size: 1 }, + { label: "好きなもの", value: "カレー", size: 1 }, + { label: "ﾁｬｰﾑﾎﾟｲﾝﾄ", value: "目元のほくろ", size: 2 }, + { label: "趣味", value: "動画配信サイトの巡回", size: 2 }, + ], + voiceUrls: [tsumugi01, tsumugi02, tsumugi03, tsumugi04], + callNames: { + 四国めたん: "めたん先輩", + ずんだもん: "ずんだもん先輩", + 雨晴はう: "はうちゃん", + 波音リツ: "りっちゃん", + 玄野武宏: "武宏くん", + 白上虎太郎: "虎太郎くん", + 青山龍星: "龍星くん", + 冥鳴ひまり: "ひまっち", + 九州そら: "そらさん", + モチノキョウコ: "もち子ちゃん", + 剣崎雌雄: "めすおちゃん", + WhiteCUL: "ゆきちゃん", + 後鬼: "後鬼せんせー", + No7: "ななっち", + me: ["あーし"], + you: ["きみ", "きみたち"], + }, + detailUrl: "https://tsumugi-official.studio.site/top", + }, + + 雨晴はう: { + name: getCharacterInfo("雨晴はう").name, + id: getCharacterInfo("雨晴はう").characterId, + rubyName: "雨晴(あめはれ)はう", + bustupImage: query.bustup.nodes.find(node => node.name === "bustup-hau")! + .childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-hau" + )!.childImageSharp.gatsbyImageData, + color: "#1D86AE", + lightColor: "#B3D7DD", + description: "現役看護師です！
看護師のあれこれお伝えします！", + labelInfos: [ + { label: "誕生日", value: "10月30日", size: 1 }, + { label: "身長", value: "152 cm", size: 1 }, + { label: "色", value: "#28c4ec", size: 1 }, + { label: "CV", value: "結崎このみ", size: 1 }, + { label: "好きなもの", value: "ラーメン", size: 2 }, + { label: "趣味", value: "食べ歩き", size: 2 }, + ], + voiceUrls: [hau01, hau02, hau03, hau04], + callNames: { + 四国めたん: "めたんさん", + ずんだもん: "ずんだもん", + 春日部つむぎ: "つむぎさん", + 波音リツ: "リツさん", + 玄野武宏: "玄野さん", + 白上虎太郎: "白上さん", + 青山龍星: "青山さん", + 冥鳴ひまり: "ひまりさん", + 九州そら: "そらさん", + モチノキョウコ: "もち子さん", + 剣崎雌雄: "剣崎さん", + WhiteCUL: "ゆきさん", + 後鬼: "ごきさん", + No7: "ななさん", + me: ["僕"], + you: ["あなた", "あなた達"], + }, + detailUrl: "https://amehau.com/", + }, + + 波音リツ: { + name: getCharacterInfo("波音リツ").name, + id: getCharacterInfo("波音リツ").characterId, + rubyName: "波音(なみね)リツ", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-ritsu" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-ritsu" + )!.childImageSharp.gatsbyImageData, + color: "#FC4E32", + lightColor: "#FDCDB7", + description: + "地獄のような安価を踏み抜いて生まれた、
2ch・VIP発のキャラクター。", + labelInfos: [ + { label: "年齢", value: "6 歳", size: 2 }, + { label: "身長", value: "156 cm", size: 2 }, + { label: "体重", value: "25 トン", size: 2 }, + { label: "好きなもの", value: "チョコクリスピー", size: 2 }, + ], + voiceUrls: [ritsu01, ritsu02, ritsu03, ritsu04, ritsu05], + callNames: { + 四国めたん: "めたん", + ずんだもん: "ずんだもん", + 春日部つむぎ: "つむぎ", + 雨晴はう: "はう", + 玄野武宏: "くろの", + 白上虎太郎: "こたろう", + 青山龍星: "りゅうせい", + 冥鳴ひまり: "ひまり", + 九州そら: "そら", + モチノキョウコ: "もち子", + 剣崎雌雄: "めすお", + WhiteCUL: "ゆき", + 後鬼: "ごき", + No7: "なな", + me: ["あたし"], + you: ["アンタ", "アンタら"], + }, + detailUrl: "http://www.canon-voice.com/ritsu.html", + }, + + 玄野武宏: { + name: getCharacterInfo("玄野武宏").name, + id: getCharacterInfo("玄野武宏").characterId, + rubyName: + "玄野(くろの)武宏(たけひろ)", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-takehiro" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-takehiro" + )!.childImageSharp.gatsbyImageData, + color: "#1AA18E", + lightColor: "#B3E2D8", + description: "サッパリした青年。
やや短気だが面倒見は良い。", + labelInfos: [ + { label: "身長", value: "177 cm", size: 2 }, + { label: "体重", value: "66 Kg", size: 2 }, + { label: "年齢", value: "20代前後", size: 2 }, + { label: "誕生日", value: "12月24日", size: 2 }, + ], + voiceUrls: [takehiro01, takehiro02, takehiro03], + callNames: { + 四国めたん: "めたん", + ずんだもん: "ずんだもん", + 春日部つむぎ: "つむぎ", + 雨晴はう: "はう", + 波音リツ: "リツ", + 白上虎太郎: "虎太郎", + 青山龍星: "龍星", + 冥鳴ひまり: "ひまり", + 九州そら: "そら", + モチノキョウコ: "もち子", + 剣崎雌雄: "雌雄", + WhiteCUL: "雪", + 後鬼: "後鬼", + No7: "なな", + me: ["俺"], + you: ["お前", "お前ら"], + }, + detailUrl: "https://virvoxproject.wixsite.com/official", + }, + + 白上虎太郎: { + name: getCharacterInfo("白上虎太郎").name, + id: getCharacterInfo("白上虎太郎").characterId, + rubyName: + "白上(しらかみ)虎太郎(こたろう)", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-kotarou" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-kotarou" + )!.childImageSharp.gatsbyImageData, + color: "#99D02B", + lightColor: "#E6F5B0", + description: + "まっすぐで人懐っこい青年。
愛嬌はあるものの少しおばか。", + labelInfos: [ + { label: "身長", value: "146 cm", size: 2 }, + { label: "体重", value: "42 Kg", size: 2 }, + { label: "年齢", value: "18 歳", size: 2 }, + { label: "誕生日", value: "秋生まれ", size: 2 }, + ], + voiceUrls: [kotarou01, kotarou02, kotarou03], + callNames: { + 四国めたん: "めたんちゃん", + ずんだもん: "ずんずん", + 春日部つむぎ: "つむぎちゃん", + 雨晴はう: "はうさん", + 波音リツ: "リツさん", + 玄野武宏: "タケヒロ", + 青山龍星: "リューセー", + 冥鳴ひまり: "ひまりちゃん", + 九州そら: "そらさん", + モチノキョウコ: "もち子さん", + 剣崎雌雄: "シユー", + WhiteCUL: "ユキさん", + 後鬼: "ゴキさん", + No7: "ナナちゃんさん", + me: ["おれ"], + you: ["きみ", "きみ達"], + }, + detailUrl: "https://virvoxproject.wixsite.com/official", + }, + + 青山龍星: { + name: getCharacterInfo("青山龍星").name, + id: getCharacterInfo("青山龍星").characterId, + rubyName: + "青山(あおやま)龍星(りゅうせい)", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-ryusei" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-ryusei" + )!.childImageSharp.gatsbyImageData, + color: "#386CB0", + lightColor: "#B3CDE3", + description: "とにかく大柄で無骨な青年。
寡黙で冷静なストッパー枠。", + labelInfos: [ + { label: "身長", value: "194 cm", size: 2 }, + { label: "体重", value: "94 Kg", size: 2 }, + { label: "年齢", value: "24 歳", size: 2 }, + { label: "誕生日", value: "春生まれ", size: 2 }, + ], + voiceUrls: [ryusei01, ryusei02, ryusei03], + callNames: { + 四国めたん: "めたん", + ずんだもん: "ずんだもん", + 春日部つむぎ: "つむぎ", + 雨晴はう: "はう", + 波音リツ: "リツ", + 玄野武宏: "武宏", + 白上虎太郎: "虎太郎", + 冥鳴ひまり: "ひまり", + 九州そら: "そら", + モチノキョウコ: "もち子", + 剣崎雌雄: "雌雄", + WhiteCUL: "雪", + 後鬼: "後鬼", + No7: "セブン", + me: ["オレ"], + you: ["アンタ", "アンタ達", "お前達"], + }, + detailUrl: "https://virvoxproject.wixsite.com/official", + }, + + 冥鳴ひまり: { + name: getCharacterInfo("冥鳴ひまり").name, + id: getCharacterInfo("冥鳴ひまり").characterId, + rubyName: "冥鳴(めいめい)ひまり", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-himari" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-himari" + )!.childImageSharp.gatsbyImageData, + color: "#A45AAA", + lightColor: "#CAB2D6", + description: "冥界から来た死神。
可愛いものに目がない。", + labelInfos: [ + { label: "年齢", value: "18 歳", size: 1 }, + { label: "種族", value: "死神", size: 1 }, + { label: "誕生日", value: "9月1日", size: 1 }, + { label: "好きな日本語", value: "不渡り", size: 1 }, + { label: "好きなもの", value: "可愛い女の子", size: 2 }, + { label: "性格", value: "優しくて清楚（自称）", size: 2 }, + ], + voiceUrls: [himari01, himari02, himari03, himari04, himari05], + callNames: { + 四国めたん: "めたん先輩", + ずんだもん: "ずんだもん先輩", + 春日部つむぎ: "つむぎ先輩", + 雨晴はう: "はう先輩", + 波音リツ: "リツ先輩", + 玄野武宏: "武宏くん", + 白上虎太郎: "虎太郎くん", + 青山龍星: "龍星くん", + 九州そら: "そらちゃん", + モチノキョウコ: "もち子ちゃん", + 剣崎雌雄: "メスオジ", + WhiteCUL: "ゆきちゃん", + 後鬼: "後鬼ちゃん", + No7: "ななちゃん", + me: ["私"], + you: ["君たち"], + }, + detailUrl: "https://meimeihimari.wixsite.com/himari/複製-vtuber", + }, + + 九州そら: { + name: getCharacterInfo("九州そら").name, + id: getCharacterInfo("九州そら").characterId, + rubyName: + "九州(きゅうしゅう)そら", + bustupImage: query.bustup.nodes.find(node => node.name === "bustup-sora")! + .childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-sora" + )!.childImageSharp.gatsbyImageData, + color: "#6964AD", + lightColor: "#B2B6D8", + description: + "宇宙開拓用に開発されたアンドロイド。
正式名称は「九州そらmk=II」（まーくつー）。", + labelInfos: [ + { + label: "年齢", + value: "0 歳（外見年齢は17歳）", + size: 2, + }, + { + label: "身長", + value: "173 cm（ヒールなしだと160cm）", + size: 2, + }, + ], + voiceUrls: [sora01, sora02, sora03, sora04], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("sora")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + ずんだもん: "ずんだもん", + 四国めたん: "めたんさま", + 春日部つむぎ: "つむぎさま", + 雨晴はう: "はうさま", + 波音リツ: "リツさま", + 玄野武宏: "武宏さま", + 白上虎太郎: "虎太郎さま", + 青山龍星: "龍星さま", + 冥鳴ひまり: "ひまりさま", + モチノキョウコ: "もち子さま", + 剣崎雌雄: "雌雄さま", + WhiteCUL: "雪さま", + 後鬼: "後鬼さま", + No7: "セブンさま", + me: ["まーくつー"], + you: ["あなたさま", "みなさま"], + }, + detailUrl: + "https://zunko.jp/con_voice.html#:~:text=%E3%81%8D%E3%81%BF%E3%81%8C%E3%81%9F%E3%82%81-,%E4%B9%9D%E5%B7%9E%E3%81%9D%E3%82%89mk%3DII,-CV%3A%E8%A5%BF%E7%94%B0%E6%9C%9B%E8%A6%8B", + }, + + モチノキョウコ: { + name: getCharacterInfo("モチノキョウコ").name, + id: getCharacterInfo("モチノキョウコ").characterId, + rubyName: + "もち子(こ)さん", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-kyoko" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-kyoko" + )!.childImageSharp.gatsbyImageData, + color: "#1D86AE", + lightColor: "#B3D7DD", + description: + "小さい背丈で頑張る君を応援！
福島県生まれのプラモ好き犬系ヲタ娘です", + labelInfos: [ + { label: "本名", value: "ﾓﾁﾉ･ｷｮｳｺ", size: 1 }, + { label: "CV", value: "明日葉よもぎ", size: 1 }, + { label: "相棒（？）", value: "あん子ちゃん", size: 1 }, + { label: "身長", value: "142 cm", size: 1 }, + ], + voiceUrls: [kyoko01, kyoko02, kyoko03, kyoko04, kyoko05], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("kyoko")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + ずんだもん: "ずんだもんちゃん", + 四国めたん: "めたんさん", + 春日部つむぎ: "つむぎさん", + 雨晴はう: "はうちゃん", + 波音リツ: "リッちゃん先輩", + 玄野武宏: "玄野くん", + 白上虎太郎: "白上くん", + 青山龍星: "青山くん", + 冥鳴ひまり: "ひまりさん", + 九州そら: "そらさん", + 剣崎雌雄: "剣崎さん", + WhiteCUL: "ユキさん", + 後鬼: "後鬼お姉さん", + No7: "セブンちゃん", + me: ["私", "もち子"], + you: ["あなた", "あなた達"], + }, + detailUrl: + "https://vtubermochio.wixsite.com/mochizora/もち子さんとは-設定資料", + }, + + 剣崎雌雄: { + name: getCharacterInfo("剣崎雌雄").name, + id: getCharacterInfo("剣崎雌雄").characterId, + rubyName: + "剣崎(けんざき)雌雄(めすお)", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-mesuo" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-mesuo" + )!.childImageSharp.gatsbyImageData, + color: "#33A65E", + lightColor: "#CCEBC5", + description: + "メスお兄さんじゃねえ！メスのお兄さんだ！
（人類滅亡を目論む医療用メスの付喪神）", + labelInfos: [ + { label: "種族", value: "医療用メス（付喪神）", size: 2 }, + { label: "好物", value: "人間のクソデカ感情・砥石", size: 2 }, + { label: "身長", value: "175 cm", size: 1 }, + { label: "誕生日", value: "7月7日", size: 1 }, + { label: "目的", value: "人類滅亡", size: 1 }, + { label: "年齢", value: "3600 歳", size: 1 }, + ], + voiceUrls: [mesuo01], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("mesuo")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + 四国めたん: "くにさん", + ずんだもん: "だーもん", + 春日部つむぎ: "べっつー", + 雨晴はう: "はーさん", + 波音リツ: "ねりさん", + 玄野武宏: "くーろん", + 白上虎太郎: "こっちゃん", + 青山龍星: "りゅうさん", + 冥鳴ひまり: "めまりちゃん", + 九州そら: "らーさん", + モチノキョウコ: "もっちー", + WhiteCUL: "とかっち", + 後鬼: "ごっさん", + No7: "ぶんぶん丸", + me: ["僕"], + you: ["君等"], + }, + detailUrl: "https://frontier.creatia.cc/fanclubs/413/posts/4507", + }, + + WhiteCUL: { + name: getCharacterInfo("WhiteCUL").name, + id: getCharacterInfo("WhiteCUL").characterId, + rubyName: + "WhiteCUL(ほわいとかる)", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-white" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-white" + )!.childImageSharp.gatsbyImageData, + color: "#1D86AE", + lightColor: "#B3D7DD", + description: + "CULの姉。風雪月花四姉妹の雪。冷静に見えるが、
実は小心者のクールビューティー。", + labelInfos: [ + { label: "年齢", value: "20 歳", size: 1 }, + { label: "身長", value: "165 cm", size: 1 }, + { label: "体重", value: "内緒", size: 1 }, + { label: "誕生日", value: "9月30日", size: 1 }, + { label: "愛称", value: "雪さん", size: 1 }, + { label: "相棒", value: "雪おこじょ", size: 1 }, + { label: "好物", value: "バニラソフトクリーム", size: 2 }, + ], + voiceUrls: [white01, white02, white03, white04], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("white")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + 四国めたん: "めたんちゃん", + ずんだもん: "ずんだもん", + 春日部つむぎ: "つむぎ", + 雨晴はう: "はうちゃん", + 波音リツ: "リツちゃん", + 玄野武宏: "武弘さん", + 白上虎太郎: "虎太郎くん", + 青山龍星: "りゅうちゃん", + 冥鳴ひまり: "ひまりん", + 九州そら: "そらさん", + モチノキョウコ: "もちこさん", + 剣崎雌雄: "剣崎さん", + 後鬼: "後鬼さん", + No7: "ななさん", + me: ["わたし"], + you: ["あなた", "あなたたち"], + }, + detailUrl: "https://www.whitecul.com/", + }, + + 後鬼: { + name: getCharacterInfo("後鬼").name, + id: getCharacterInfo("後鬼").characterId, + rubyName: "後鬼(ごき)", + bustupImage: query.bustup.nodes.find(node => node.name === "bustup-goki")! + .childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-goki" + )!.childImageSharp.gatsbyImageData, + color: "#386CB0", + lightColor: "#B3CDE3", + description: + "鬼っ子ハンターついなちゃんの式神。
人間態では色っぽい大人の女性の話し方になる。", + labelInfos: [ + { label: "CV", value: "七海映子", size: 1 }, + { label: "年齢", value: "少なくとも1300歳以上", size: 2 }, + { label: "身長", value: "ヒール込みで170cm", size: 2 }, + { label: "体重", value: "スイカ2つ分（某部分が）", size: 2 }, + ], + voiceUrls: [goki01, goki02, goki03, goki04, goki05], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("goki")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + 四国めたん: "四国さん/めたんはん", + ずんだもん: "ずんだもん", + 春日部つむぎ: "春日部さん/つむぎはん", + 雨晴はう: "雨晴さん/はうはん", + 波音リツ: "波音さん/リツはん", + 玄野武宏: "玄野くん/玄野はん", + 白上虎太郎: "白上くん/白上はん", + 青山龍星: "青山くん/龍星はん", + 冥鳴ひまり: "冥鳴さん/ひまりはん", + 九州そら: "九州さん/九州はん", + モチノキョウコ: "もち子さん/もち子はん", + 剣崎雌雄: "剣崎くん/剣崎はん", + WhiteCUL: "雪さん/雪はん", + No7: "セブンさん/セブンはん", + me: ["私/ワテ"], + you: ["あなたorキミ", "/あんたはん"], + }, + detailUrl: "https://ついなちゃん.com/character/?goki", + }, + + No7: { + name: getCharacterInfo("No7").name, + id: getCharacterInfo("No7").characterId, + rubyName: "No.7(なんばーせぶん)", + bustupImage: query.bustup.nodes.find( + node => node.name === "bustup-seven" + )!.childImageSharp.gatsbyImageData, + portraitImage: query.portrait.nodes.find( + node => node.name === "portrait-seven" + )!.childImageSharp.gatsbyImageData, + color: "#A45AAA", + lightColor: "#CAB2D6", + description: + "正体がつかめない不思議な女性。
得意のメイクで複数の「顔」を持つ。", + labelInfos: [ + { label: "年齢", value: "23 歳", size: 1 }, + { label: "身長", value: "165 cm", size: 1 }, + { label: "CV", value: "小岩井ことり", size: 1 }, + { label: "好きなもの", value: "子供", size: 1 }, + { + label: "性格", + value: "ミニマリストで部屋の明かりは蝋燭のみ", + size: 2, + }, + { label: "趣味", value: "かいわれ大根の栽培", size: 2 }, + ], + voiceUrls: [seven01, seven02, seven03, seven04], + infoImages: query.dormitory.nodes + .filter(node => node.name.includes("seven")) + .sort((a, b) => a.name.localeCompare(b.name)) + .map(node => node.childImageSharp.gatsbyImageData), + callNames: { + 四国めたん: "四国さん", + ずんだもん: "ずんだもん様", + 春日部つむぎ: "春日部さん", + 雨晴はう: "雨晴さん", + 波音リツ: "波音さん", + 玄野武宏: "玄野さん", + 白上虎太郎: "白上さん", + 青山龍星: "青山さん", + 冥鳴ひまり: "冥鳴さん", + 九州そら: "九州さん", + モチノキョウコ: "モチノさん", + 剣崎雌雄: "剣崎さん", + 後鬼: "後鬼さん", + WhiteCUL: "雪さん", + me: ["私", "僕"], + you: ["そちら様", "皆様"], + }, + detailUrl: "https://voiceseven.com/", + }, + } + + const generationInfos: { + [key in Generation]: { characterKeys: CharacterKey[] } + } = { + 一期生: { characterKeys: ["四国めたん", "ずんだもん"] }, + 二期生: { + characterKeys: ["春日部つむぎ", "雨晴はう", "波音リツ"], + }, + 三期生: { + characterKeys: [ + "玄野武宏", + "白上虎太郎", + "青山龍星", + "冥鳴ひまり", + "九州そら", + ], + }, + } + + return { characterInfos, generationInfos } +} diff --git a/src/pages/dormitory.tsx b/src/pages/dormitory.tsx index f032ed612..290ce1fa0 100644 --- a/src/pages/dormitory.tsx +++ b/src/pages/dormitory.tsx @@ -1,79 +1,16 @@ -import { graphql, Link, useStaticQuery } from "gatsby" -import { IGatsbyImageData, StaticImage } from "gatsby-plugin-image" -import React, { useContext, useEffect, useRef, useState } from "react" -import goki01 from "../audios/dormitory/goki-01.wav" -import goki02 from "../audios/dormitory/goki-02.wav" -import goki03 from "../audios/dormitory/goki-03.wav" -import goki04 from "../audios/dormitory/goki-04.wav" -import goki05 from "../audios/dormitory/goki-05.wav" -import hau01 from "../audios/dormitory/hau-01.wav" -import hau02 from "../audios/dormitory/hau-02.wav" -import hau03 from "../audios/dormitory/hau-03.wav" -import hau04 from "../audios/dormitory/hau-04.wav" -import himari01 from "../audios/dormitory/himari-01.wav" -import himari02 from "../audios/dormitory/himari-02.wav" -import himari03 from "../audios/dormitory/himari-03.wav" -import himari04 from "../audios/dormitory/himari-04.wav" -import himari05 from "../audios/dormitory/himari-05.wav" -import kotarou01 from "../audios/dormitory/kotarou-01.wav" -import kotarou02 from "../audios/dormitory/kotarou-02.wav" -import kotarou03 from "../audios/dormitory/kotarou-03.wav" -import kyoko01 from "../audios/dormitory/kyoko-01.mp3" -import kyoko02 from "../audios/dormitory/kyoko-02.wav" -import kyoko03 from "../audios/dormitory/kyoko-03.wav" -import kyoko04 from "../audios/dormitory/kyoko-04.wav" -import kyoko05 from "../audios/dormitory/kyoko-05.wav" -import mesuo01 from "../audios/dormitory/mesuo-01.wav" -import metan01 from "../audios/dormitory/metan-01.wav" -import metan02 from "../audios/dormitory/metan-02.wav" -import metan03 from "../audios/dormitory/metan-03.wav" -import metan04 from "../audios/dormitory/metan-04.wav" -import ritsu01 from "../audios/dormitory/ritsu-01.wav" -import ritsu02 from "../audios/dormitory/ritsu-02.wav" -import ritsu03 from "../audios/dormitory/ritsu-03.wav" -import ritsu04 from "../audios/dormitory/ritsu-04.wav" -import ritsu05 from "../audios/dormitory/ritsu-05.wav" -import ryusei01 from "../audios/dormitory/ryusei-01.wav" -import ryusei02 from "../audios/dormitory/ryusei-02.wav" -import ryusei03 from "../audios/dormitory/ryusei-03.wav" -import seven01 from "../audios/dormitory/seven-01.wav" -import seven02 from "../audios/dormitory/seven-02.wav" -import seven03 from "../audios/dormitory/seven-03.wav" -import seven04 from "../audios/dormitory/seven-04.wav" -import sora01 from "../audios/dormitory/sora-01.wav" -import sora02 from "../audios/dormitory/sora-02.wav" -import sora03 from "../audios/dormitory/sora-03.wav" -import sora04 from "../audios/dormitory/sora-04.wav" -import takehiro01 from "../audios/dormitory/takehiro-01.wav" -import takehiro02 from "../audios/dormitory/takehiro-02.wav" -import takehiro03 from "../audios/dormitory/takehiro-03.wav" -import tsumugi01 from "../audios/dormitory/tsumugi-01.wav" -import tsumugi02 from "../audios/dormitory/tsumugi-02.wav" -import tsumugi03 from "../audios/dormitory/tsumugi-03.wav" -import tsumugi04 from "../audios/dormitory/tsumugi-04.wav" -import white01 from "../audios/dormitory/white-01.wav" -import white02 from "../audios/dormitory/white-02.wav" -import white03 from "../audios/dormitory/white-03.wav" -import white04 from "../audios/dormitory/white-04.wav" -import zundamon01 from "../audios/dormitory/zundamon-01.wav" -import zundamon02 from "../audios/dormitory/zundamon-02.wav" -import zundamon03 from "../audios/dormitory/zundamon-03.wav" -import zundamon04 from "../audios/dormitory/zundamon-04.wav" -import zundamon05 from "../audios/dormitory/zundamon-05.wav" +import { Link } from "gatsby" +import { StaticImage } from "gatsby-plugin-image" +import React, { useEffect, useRef, useState } from "react" import DormitoryCharacterCard from "../components/dormitoryCharacterCard" import DormitoryCharacterModal from "../components/dormitoryCharacterModal" import DormitoryTopIllustContainer from "../components/dormitoryTopIllustContainer" import "../components/layout.scss" import { Page } from "../components/page" import Seo from "../components/seo" -import { CharacterContext } from "../contexts/context" -import { useCharacterInfo } from "../hooks/useCharacterInfo" +import { characterKeys } from "../constants" +import { useDetailedCharacterInfo } from "../hooks/useDetailedCharacterInfo" import shareThumb from "../images/dormitory/top-illusts/top-illust-002.png" -import { - CharacterInfo, - CharacterKey, - Generation, -} from "../types/dormitoryCharacter" +import { CharacterKey } from "../types/dormitoryCharacter" type DormitoryProps = { setShowingHeader: (show: boolean) => void @@ -84,760 +21,7 @@ const Dormitory: React.FC = ({ setShowingHeader, initialSelectedCharacterKey, }) => { - const query: { - [key: string]: { - nodes: { - name: string - childImageSharp: { - gatsbyImageData: IGatsbyImageData - } - }[] - } - } = useStaticQuery(graphql` - { - portrait: allFile(filter: { absolutePath: { regex: "/portrait/" } }) { - nodes { - name - childImageSharp { - gatsbyImageData(height: 640) - } - } - } - bustup: allFile(filter: { absolutePath: { regex: "/bustup/" } }) { - nodes { - name - childImageSharp { - gatsbyImageData(height: 320) - } - } - } - dormitory: allFile(filter: { absolutePath: { regex: "/dormitory/" } }) { - nodes { - name - childImageSharp { - gatsbyImageData(height: 320) - } - } - } - } - `) - - const { getCharacterInfo } = useCharacterInfo() - - const { characterKeys } = useContext(CharacterContext) - - const characterInfos: { - [key in CharacterKey]: CharacterInfo | undefined - } = { - 四国めたん: { - name: getCharacterInfo("四国めたん").name, - id: getCharacterInfo("四国めたん").characterId, - rubyName: "四国(しこく)めたん", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-metan" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-metan" - )!.childImageSharp.gatsbyImageData, - color: "#DF4C94", - lightColor: "#E3ADD5", - description: - "高等部二年生。常に金欠。趣味は中二病妄想。
誰にでも遠慮しないので、基本的にタメ口。", - labelInfos: [ - { label: "年齢", value: "17 歳", size: 1 }, - { label: "身長", value: "150 cm", size: 1 }, - { label: "性格", value: "若干ツンデレ気味", size: 2 }, - ], - voiceUrls: [metan01, metan02, metan03, metan04], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("metan")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - ずんだもん: "ずんだもん", - 春日部つむぎ: "つむぎさん", - 雨晴はう: "はうさん", - 波音リツ: "リツさん", - 玄野武宏: "玄野さん", - 白上虎太郎: "白上さん", - 青山龍星: "青山さん", - 冥鳴ひまり: "ひまりさん", - 九州そら: "そら", - モチノキョウコ: "もち子さん", - 剣崎雌雄: "剣崎さん", - WhiteCUL: "雪さん", - 後鬼: "後鬼さん", - No7: "セブンさん", - me: ["わたくし"], - you: ["貴女(たち)", "アンタ(ら)"], - }, - detailUrl: - "https://zunko.jp/con_voice.html#:~:text=%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%5Bsm31250786%5D-,%E5%9B%9B%E5%9B%BD%E3%82%81%E3%81%9F%E3%82%93%EF%BC%88%E6%BC%86%E9%BB%92%E3%81%AE%E3%82%81%E3%81%9F%E3%82%93%EF%BC%89,-CV%3A%E7%94%B0%E4%B8%AD%E5%B0%8F%E9%9B%AA", - }, - - ずんだもん: { - name: getCharacterInfo("ずんだもん").name, - id: getCharacterInfo("ずんだもん").characterId, - rubyName: "ずんだもん", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-zundamon" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-zundamon" - )!.childImageSharp.gatsbyImageData, - color: "#33A65E", - lightColor: "#CCEBC5", - description: - "ずんだ餅の精。やや不幸属性が備わっており、
ないがしろにされることもしばしば。", - labelInfos: [ - { - label: "趣味", - value: "ずんだ餅にかかわることはだいたい好き", - size: 2, - }, - { label: "将来の夢", value: "ずんだ餅のさらなる普及", size: 2 }, - ], - voiceUrls: [zundamon01, zundamon02, zundamon03, zundamon04, zundamon05], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("zundamon")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - 四国めたん: "めたん", - 春日部つむぎ: "つむぎ", - 雨晴はう: "はう", - 波音リツ: "リツ", - 玄野武宏: "たけひろ", - 白上虎太郎: "こたろう", - 青山龍星: "りゅうせい", - 冥鳴ひまり: "ひまり", - 九州そら: "そら", - モチノキョウコ: "もち子", - 剣崎雌雄: "めすお", - WhiteCUL: "雪", - 後鬼: "後鬼", - No7: "セブン", - me: ["ずんだもん", "僕"], - you: ["オマエ", "みんな"], - }, - detailUrl: - "https://zunko.jp/con_voice.html#:~:text=%E3%81%AF%E3%81%93%E3%81%A1%E3%82%89%5Bsm31259177%5D-,%E3%81%9A%E3%82%93%E3%81%A0%E3%82%82%E3%82%93,-CV%3A%E4%BC%8A%E8%97%A4%E3%82%86", - }, - - 春日部つむぎ: { - name: getCharacterInfo("春日部つむぎ").name, - id: getCharacterInfo("春日部つむぎ").characterId, - rubyName: - "春日部(かすかべ)つむぎ", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-tsumugi" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-tsumugi" - )!.childImageSharp.gatsbyImageData, - color: "#FF9914", - lightColor: "#FEE6AA", - description: - "埼玉県内の高校に通うギャルの女の子。
やんちゃに見えて実は真面目な一面もある。", - labelInfos: [ - { label: "年齢", value: "18 歳", size: 1 }, - { label: "身長", value: "155 cm", size: 1 }, - { label: "出身", value: "埼玉", size: 1 }, - { label: "好きなもの", value: "カレー", size: 1 }, - { label: "ﾁｬｰﾑﾎﾟｲﾝﾄ", value: "目元のほくろ", size: 2 }, - { label: "趣味", value: "動画配信サイトの巡回", size: 2 }, - ], - voiceUrls: [tsumugi01, tsumugi02, tsumugi03, tsumugi04], - callNames: { - 四国めたん: "めたん先輩", - ずんだもん: "ずんだもん先輩", - 雨晴はう: "はうちゃん", - 波音リツ: "りっちゃん", - 玄野武宏: "武宏くん", - 白上虎太郎: "虎太郎くん", - 青山龍星: "龍星くん", - 冥鳴ひまり: "ひまっち", - 九州そら: "そらさん", - モチノキョウコ: "もち子ちゃん", - 剣崎雌雄: "めすおちゃん", - WhiteCUL: "ゆきちゃん", - 後鬼: "後鬼せんせー", - No7: "ななっち", - me: ["あーし"], - you: ["きみ", "きみたち"], - }, - detailUrl: "https://tsumugi-official.studio.site/top", - }, - - 雨晴はう: { - name: getCharacterInfo("雨晴はう").name, - id: getCharacterInfo("雨晴はう").characterId, - rubyName: "雨晴(あめはれ)はう", - bustupImage: query.bustup.nodes.find(node => node.name === "bustup-hau")! - .childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-hau" - )!.childImageSharp.gatsbyImageData, - color: "#1D86AE", - lightColor: "#B3D7DD", - description: "現役看護師です！
看護師のあれこれお伝えします！", - labelInfos: [ - { label: "誕生日", value: "10月30日", size: 1 }, - { label: "身長", value: "152 cm", size: 1 }, - { label: "色", value: "#28c4ec", size: 1 }, - { label: "CV", value: "結崎このみ", size: 1 }, - { label: "好きなもの", value: "ラーメン", size: 2 }, - { label: "趣味", value: "食べ歩き", size: 2 }, - ], - voiceUrls: [hau01, hau02, hau03, hau04], - callNames: { - 四国めたん: "めたんさん", - ずんだもん: "ずんだもん", - 春日部つむぎ: "つむぎさん", - 波音リツ: "リツさん", - 玄野武宏: "玄野さん", - 白上虎太郎: "白上さん", - 青山龍星: "青山さん", - 冥鳴ひまり: "ひまりさん", - 九州そら: "そらさん", - モチノキョウコ: "もち子さん", - 剣崎雌雄: "剣崎さん", - WhiteCUL: "ゆきさん", - 後鬼: "ごきさん", - No7: "ななさん", - me: ["僕"], - you: ["あなた", "あなた達"], - }, - detailUrl: "https://amehau.com/", - }, - - 波音リツ: { - name: getCharacterInfo("波音リツ").name, - id: getCharacterInfo("波音リツ").characterId, - rubyName: "波音(なみね)リツ", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-ritsu" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-ritsu" - )!.childImageSharp.gatsbyImageData, - color: "#FC4E32", - lightColor: "#FDCDB7", - description: - "地獄のような安価を踏み抜いて生まれた、
2ch・VIP発のキャラクター。", - labelInfos: [ - { label: "年齢", value: "6 歳", size: 2 }, - { label: "身長", value: "156 cm", size: 2 }, - { label: "体重", value: "25 トン", size: 2 }, - { label: "好きなもの", value: "チョコクリスピー", size: 2 }, - ], - voiceUrls: [ritsu01, ritsu02, ritsu03, ritsu04, ritsu05], - callNames: { - 四国めたん: "めたん", - ずんだもん: "ずんだもん", - 春日部つむぎ: "つむぎ", - 雨晴はう: "はう", - 玄野武宏: "くろの", - 白上虎太郎: "こたろう", - 青山龍星: "りゅうせい", - 冥鳴ひまり: "ひまり", - 九州そら: "そら", - モチノキョウコ: "もち子", - 剣崎雌雄: "めすお", - WhiteCUL: "ゆき", - 後鬼: "ごき", - No7: "なな", - me: ["あたし"], - you: ["アンタ", "アンタら"], - }, - detailUrl: "http://www.canon-voice.com/ritsu.html", - }, - - 玄野武宏: { - name: getCharacterInfo("玄野武宏").name, - id: getCharacterInfo("玄野武宏").characterId, - rubyName: - "玄野(くろの)武宏(たけひろ)", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-takehiro" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-takehiro" - )!.childImageSharp.gatsbyImageData, - color: "#1AA18E", - lightColor: "#B3E2D8", - description: "サッパリした青年。
やや短気だが面倒見は良い。", - labelInfos: [ - { label: "身長", value: "177 cm", size: 2 }, - { label: "体重", value: "66 Kg", size: 2 }, - { label: "年齢", value: "20代前後", size: 2 }, - { label: "誕生日", value: "12月24日", size: 2 }, - ], - voiceUrls: [takehiro01, takehiro02, takehiro03], - callNames: { - 四国めたん: "めたん", - ずんだもん: "ずんだもん", - 春日部つむぎ: "つむぎ", - 雨晴はう: "はう", - 波音リツ: "リツ", - 白上虎太郎: "虎太郎", - 青山龍星: "龍星", - 冥鳴ひまり: "ひまり", - 九州そら: "そら", - モチノキョウコ: "もち子", - 剣崎雌雄: "雌雄", - WhiteCUL: "雪", - 後鬼: "後鬼", - No7: "なな", - me: ["俺"], - you: ["お前", "お前ら"], - }, - detailUrl: "https://virvoxproject.wixsite.com/official", - }, - - 白上虎太郎: { - name: getCharacterInfo("白上虎太郎").name, - id: getCharacterInfo("白上虎太郎").characterId, - rubyName: - "白上(しらかみ)虎太郎(こたろう)", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-kotarou" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-kotarou" - )!.childImageSharp.gatsbyImageData, - color: "#99D02B", - lightColor: "#E6F5B0", - description: - "まっすぐで人懐っこい青年。
愛嬌はあるものの少しおばか。", - labelInfos: [ - { label: "身長", value: "146 cm", size: 2 }, - { label: "体重", value: "42 Kg", size: 2 }, - { label: "年齢", value: "18 歳", size: 2 }, - { label: "誕生日", value: "秋生まれ", size: 2 }, - ], - voiceUrls: [kotarou01, kotarou02, kotarou03], - callNames: { - 四国めたん: "めたんちゃん", - ずんだもん: "ずんずん", - 春日部つむぎ: "つむぎちゃん", - 雨晴はう: "はうさん", - 波音リツ: "リツさん", - 玄野武宏: "タケヒロ", - 青山龍星: "リューセー", - 冥鳴ひまり: "ひまりちゃん", - 九州そら: "そらさん", - モチノキョウコ: "もち子さん", - 剣崎雌雄: "シユー", - WhiteCUL: "ユキさん", - 後鬼: "ゴキさん", - No7: "ナナちゃんさん", - me: ["おれ"], - you: ["きみ", "きみ達"], - }, - detailUrl: "https://virvoxproject.wixsite.com/official", - }, - - 青山龍星: { - name: getCharacterInfo("青山龍星").name, - id: getCharacterInfo("青山龍星").characterId, - rubyName: - "青山(あおやま)龍星(りゅうせい)", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-ryusei" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-ryusei" - )!.childImageSharp.gatsbyImageData, - color: "#386CB0", - lightColor: "#B3CDE3", - description: "とにかく大柄で無骨な青年。
寡黙で冷静なストッパー枠。", - labelInfos: [ - { label: "身長", value: "194 cm", size: 2 }, - { label: "体重", value: "94 Kg", size: 2 }, - { label: "年齢", value: "24 歳", size: 2 }, - { label: "誕生日", value: "春生まれ", size: 2 }, - ], - voiceUrls: [ryusei01, ryusei02, ryusei03], - callNames: { - 四国めたん: "めたん", - ずんだもん: "ずんだもん", - 春日部つむぎ: "つむぎ", - 雨晴はう: "はう", - 波音リツ: "リツ", - 玄野武宏: "武宏", - 白上虎太郎: "虎太郎", - 冥鳴ひまり: "ひまり", - 九州そら: "そら", - モチノキョウコ: "もち子", - 剣崎雌雄: "雌雄", - WhiteCUL: "雪", - 後鬼: "後鬼", - No7: "セブン", - me: ["オレ"], - you: ["アンタ", "アンタ達", "お前達"], - }, - detailUrl: "https://virvoxproject.wixsite.com/official", - }, - - 冥鳴ひまり: { - name: getCharacterInfo("冥鳴ひまり").name, - id: getCharacterInfo("冥鳴ひまり").characterId, - rubyName: "冥鳴(めいめい)ひまり", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-himari" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-himari" - )!.childImageSharp.gatsbyImageData, - color: "#A45AAA", - lightColor: "#CAB2D6", - description: "冥界から来た死神。
可愛いものに目がない。", - labelInfos: [ - { label: "年齢", value: "18 歳", size: 1 }, - { label: "種族", value: "死神", size: 1 }, - { label: "誕生日", value: "9月1日", size: 1 }, - { label: "好きな日本語", value: "不渡り", size: 1 }, - { label: "好きなもの", value: "可愛い女の子", size: 2 }, - { label: "性格", value: "優しくて清楚（自称）", size: 2 }, - ], - voiceUrls: [himari01, himari02, himari03, himari04, himari05], - callNames: { - 四国めたん: "めたん先輩", - ずんだもん: "ずんだもん先輩", - 春日部つむぎ: "つむぎ先輩", - 雨晴はう: "はう先輩", - 波音リツ: "リツ先輩", - 玄野武宏: "武宏くん", - 白上虎太郎: "虎太郎くん", - 青山龍星: "龍星くん", - 九州そら: "そらちゃん", - モチノキョウコ: "もち子ちゃん", - 剣崎雌雄: "メスオジ", - WhiteCUL: "ゆきちゃん", - 後鬼: "後鬼ちゃん", - No7: "ななちゃん", - me: ["私"], - you: ["君たち"], - }, - detailUrl: "https://meimeihimari.wixsite.com/himari/複製-vtuber", - }, - - 九州そら: { - name: getCharacterInfo("九州そら").name, - id: getCharacterInfo("九州そら").characterId, - rubyName: - "九州(きゅうしゅう)そら", - bustupImage: query.bustup.nodes.find(node => node.name === "bustup-sora")! - .childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-sora" - )!.childImageSharp.gatsbyImageData, - color: "#6964AD", - lightColor: "#B2B6D8", - description: - "宇宙開拓用に開発されたアンドロイド。
正式名称は「九州そらmk=II」（まーくつー）。", - labelInfos: [ - { - label: "年齢", - value: "0 歳（外見年齢は17歳）", - size: 2, - }, - { - label: "身長", - value: "173 cm（ヒールなしだと160cm）", - size: 2, - }, - ], - voiceUrls: [sora01, sora02, sora03, sora04], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("sora")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - ずんだもん: "ずんだもん", - 四国めたん: "めたんさま", - 春日部つむぎ: "つむぎさま", - 雨晴はう: "はうさま", - 波音リツ: "リツさま", - 玄野武宏: "武宏さま", - 白上虎太郎: "虎太郎さま", - 青山龍星: "龍星さま", - 冥鳴ひまり: "ひまりさま", - モチノキョウコ: "もち子さま", - 剣崎雌雄: "雌雄さま", - WhiteCUL: "雪さま", - 後鬼: "後鬼さま", - No7: "セブンさま", - me: ["まーくつー"], - you: ["あなたさま", "みなさま"], - }, - detailUrl: - "https://zunko.jp/con_voice.html#:~:text=%E3%81%8D%E3%81%BF%E3%81%8C%E3%81%9F%E3%82%81-,%E4%B9%9D%E5%B7%9E%E3%81%9D%E3%82%89mk%3DII,-CV%3A%E8%A5%BF%E7%94%B0%E6%9C%9B%E8%A6%8B", - }, - - モチノキョウコ: { - name: getCharacterInfo("モチノキョウコ").name, - id: getCharacterInfo("モチノキョウコ").characterId, - rubyName: - "もち子(こ)さん", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-kyoko" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-kyoko" - )!.childImageSharp.gatsbyImageData, - color: "#1D86AE", - lightColor: "#B3D7DD", - description: - "小さい背丈で頑張る君を応援！
福島県生まれのプラモ好き犬系ヲタ娘です", - labelInfos: [ - { label: "本名", value: "ﾓﾁﾉ･ｷｮｳｺ", size: 1 }, - { label: "CV", value: "明日葉よもぎ", size: 1 }, - { label: "相棒（？）", value: "あん子ちゃん", size: 1 }, - { label: "身長", value: "142 cm", size: 1 }, - ], - voiceUrls: [kyoko01, kyoko02, kyoko03, kyoko04, kyoko05], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("kyoko")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - ずんだもん: "ずんだもんちゃん", - 四国めたん: "めたんさん", - 春日部つむぎ: "つむぎさん", - 雨晴はう: "はうちゃん", - 波音リツ: "リッちゃん先輩", - 玄野武宏: "玄野くん", - 白上虎太郎: "白上くん", - 青山龍星: "青山くん", - 冥鳴ひまり: "ひまりさん", - 九州そら: "そらさん", - 剣崎雌雄: "剣崎さん", - WhiteCUL: "ユキさん", - 後鬼: "後鬼お姉さん", - No7: "セブンちゃん", - me: ["私", "もち子"], - you: ["あなた", "あなた達"], - }, - detailUrl: - "https://vtubermochio.wixsite.com/mochizora/もち子さんとは-設定資料", - }, - - 剣崎雌雄: { - name: getCharacterInfo("剣崎雌雄").name, - id: getCharacterInfo("剣崎雌雄").characterId, - rubyName: - "剣崎(けんざき)雌雄(めすお)", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-mesuo" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-mesuo" - )!.childImageSharp.gatsbyImageData, - color: "#33A65E", - lightColor: "#CCEBC5", - description: - "メスお兄さんじゃねえ！メスのお兄さんだ！
（人類滅亡を目論む医療用メスの付喪神）", - labelInfos: [ - { label: "種族", value: "医療用メス（付喪神）", size: 2 }, - { label: "好物", value: "人間のクソデカ感情・砥石", size: 2 }, - { label: "身長", value: "175 cm", size: 1 }, - { label: "誕生日", value: "7月7日", size: 1 }, - { label: "目的", value: "人類滅亡", size: 1 }, - { label: "年齢", value: "3600 歳", size: 1 }, - ], - voiceUrls: [mesuo01], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("mesuo")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - 四国めたん: "くにさん", - ずんだもん: "だーもん", - 春日部つむぎ: "べっつー", - 雨晴はう: "はーさん", - 波音リツ: "ねりさん", - 玄野武宏: "くーろん", - 白上虎太郎: "こっちゃん", - 青山龍星: "りゅうさん", - 冥鳴ひまり: "めまりちゃん", - 九州そら: "らーさん", - モチノキョウコ: "もっちー", - WhiteCUL: "とかっち", - 後鬼: "ごっさん", - No7: "ぶんぶん丸", - me: ["僕"], - you: ["君等"], - }, - detailUrl: "https://frontier.creatia.cc/fanclubs/413/posts/4507", - }, - - WhiteCUL: { - name: getCharacterInfo("WhiteCUL").name, - id: getCharacterInfo("WhiteCUL").characterId, - rubyName: - "WhiteCUL(ほわいとかる)", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-white" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-white" - )!.childImageSharp.gatsbyImageData, - color: "#1D86AE", - lightColor: "#B3D7DD", - description: - "CULの姉。風雪月花四姉妹の雪。冷静に見えるが、
実は小心者のクールビューティー。", - labelInfos: [ - { label: "年齢", value: "20 歳", size: 1 }, - { label: "身長", value: "165 cm", size: 1 }, - { label: "体重", value: "内緒", size: 1 }, - { label: "誕生日", value: "9月30日", size: 1 }, - { label: "愛称", value: "雪さん", size: 1 }, - { label: "相棒", value: "雪おこじょ", size: 1 }, - { label: "好物", value: "バニラソフトクリーム", size: 2 }, - ], - voiceUrls: [white01, white02, white03, white04], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("white")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - 四国めたん: "めたんちゃん", - ずんだもん: "ずんだもん", - 春日部つむぎ: "つむぎ", - 雨晴はう: "はうちゃん", - 波音リツ: "リツちゃん", - 玄野武宏: "武弘さん", - 白上虎太郎: "虎太郎くん", - 青山龍星: "りゅうちゃん", - 冥鳴ひまり: "ひまりん", - 九州そら: "そらさん", - モチノキョウコ: "もちこさん", - 剣崎雌雄: "剣崎さん", - 後鬼: "後鬼さん", - No7: "ななさん", - me: ["わたし"], - you: ["あなた", "あなたたち"], - }, - detailUrl: "https://www.whitecul.com/", - }, - - 後鬼: { - name: getCharacterInfo("後鬼").name, - id: getCharacterInfo("後鬼").characterId, - rubyName: "後鬼(ごき)", - bustupImage: query.bustup.nodes.find(node => node.name === "bustup-goki")! - .childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-goki" - )!.childImageSharp.gatsbyImageData, - color: "#386CB0", - lightColor: "#B3CDE3", - description: - "鬼っ子ハンターついなちゃんの式神。
人間態では色っぽい大人の女性の話し方になる。", - labelInfos: [ - { label: "CV", value: "七海映子", size: 1 }, - { label: "年齢", value: "少なくとも1300歳以上", size: 2 }, - { label: "身長", value: "ヒール込みで170cm", size: 2 }, - { label: "体重", value: "スイカ2つ分（某部分が）", size: 2 }, - ], - voiceUrls: [goki01, goki02, goki03, goki04, goki05], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("goki")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - 四国めたん: "四国さん/めたんはん", - ずんだもん: "ずんだもん", - 春日部つむぎ: "春日部さん/つむぎはん", - 雨晴はう: "雨晴さん/はうはん", - 波音リツ: "波音さん/リツはん", - 玄野武宏: "玄野くん/玄野はん", - 白上虎太郎: "白上くん/白上はん", - 青山龍星: "青山くん/龍星はん", - 冥鳴ひまり: "冥鳴さん/ひまりはん", - 九州そら: "九州さん/九州はん", - モチノキョウコ: "もち子さん/もち子はん", - 剣崎雌雄: "剣崎くん/剣崎はん", - WhiteCUL: "雪さん/雪はん", - No7: "セブンさん/セブンはん", - me: ["私/ワテ"], - you: ["あなたorキミ", "/あんたはん"], - }, - detailUrl: "https://ついなちゃん.com/character/?goki", - }, - - No7: { - name: getCharacterInfo("No7").name, - id: getCharacterInfo("No7").characterId, - rubyName: "No.7(なんばーせぶん)", - bustupImage: query.bustup.nodes.find( - node => node.name === "bustup-seven" - )!.childImageSharp.gatsbyImageData, - portraitImage: query.portrait.nodes.find( - node => node.name === "portrait-seven" - )!.childImageSharp.gatsbyImageData, - color: "#A45AAA", - lightColor: "#CAB2D6", - description: - "正体がつかめない不思議な女性。
得意のメイクで複数の「顔」を持つ。", - labelInfos: [ - { label: "年齢", value: "23 歳", size: 1 }, - { label: "身長", value: "165 cm", size: 1 }, - { label: "CV", value: "小岩井ことり", size: 1 }, - { label: "好きなもの", value: "子供", size: 1 }, - { - label: "性格", - value: "ミニマリストで部屋の明かりは蝋燭のみ", - size: 2, - }, - { label: "趣味", value: "かいわれ大根の栽培", size: 2 }, - ], - voiceUrls: [seven01, seven02, seven03, seven04], - infoImages: query.dormitory.nodes - .filter(node => node.name.includes("seven")) - .sort((a, b) => a.name.localeCompare(b.name)) - .map(node => node.childImageSharp.gatsbyImageData), - callNames: { - 四国めたん: "四国さん", - ずんだもん: "ずんだもん様", - 春日部つむぎ: "春日部さん", - 雨晴はう: "雨晴さん", - 波音リツ: "波音さん", - 玄野武宏: "玄野さん", - 白上虎太郎: "白上さん", - 青山龍星: "青山さん", - 冥鳴ひまり: "冥鳴さん", - 九州そら: "九州さん", - モチノキョウコ: "モチノさん", - 剣崎雌雄: "剣崎さん", - 後鬼: "後鬼さん", - WhiteCUL: "雪さん", - me: ["私", "僕"], - you: ["そちら様", "皆様"], - }, - detailUrl: "https://voiceseven.com/", - }, - } - - const generationInfos: { - [key in Generation]: { characterKeys: CharacterKey[] } - } = { - 一期生: { characterKeys: ["四国めたん", "ずんだもん"] }, - 二期生: { - characterKeys: ["春日部つむぎ", "雨晴はう", "波音リツ"], - }, - 三期生: { - characterKeys: [ - "玄野武宏", - "白上虎太郎", - "青山龍星", - "冥鳴ひまり", - "九州そら", - ], - }, - } + const { characterInfos, generationInfos } = useDetailedCharacterInfo() // ボイボ寮デザイン用のヘッダーを超えたらホムペ用のヘッダーを表示する const headerRef = useRef(null) From 4f1438dcf5577f6b53a7c8273eb57ca1182bd70f Mon Sep 17 00:00:00 2001 From: k-chop Date: Sun, 23 Oct 2022 10:07:25 +0900 Subject: [PATCH 2/6] =?UTF-8?q?=E5=80=8B=E5=88=A5=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=E3=82=92=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB=E3=81=AE?= =?UTF-8?q?=E3=81=BF=E3=81=AE=E8=A1=A8=E7=A4=BA=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dormitory/{Character.characterId}.tsx | 46 +++++++++++++++---- 1 file changed, 37 insertions(+), 9 deletions(-) diff --git a/src/pages/dormitory/{Character.characterId}.tsx b/src/pages/dormitory/{Character.characterId}.tsx index 19d6b2f3a..c1e88db31 100644 --- a/src/pages/dormitory/{Character.characterId}.tsx +++ b/src/pages/dormitory/{Character.characterId}.tsx @@ -1,17 +1,45 @@ -import React from "react" -import { characterInfos } from "../../constants" -import Dormitory from "../dormitory" +import React, { useLayoutEffect } from "react" +import DormitoryCharacterModal from "../../components/dormitoryCharacterModal" +import Seo from "../../components/seo" +import { characterKeys } from "../../constants" +import { useDetailedCharacterInfo } from "../../hooks/useDetailedCharacterInfo" +import { CharacterKey } from "../../types/dormitoryCharacter" export default (props: { params: { characterId: string } }) => { const characterId: string = props.params.characterId - const selectedCharacterInfo = Object.entries(characterInfos).find( - ([, characterInfo]) => characterInfo.id === characterId + + const { characterInfos, generationInfos } = useDetailedCharacterInfo() + + const selectedCharacterInfoEntry = Object.entries(characterInfos).find( + ([, characterInfo]) => characterInfo?.id === characterId ) - const selectedCharacterKey = selectedCharacterInfo?.[0] + const selectedCharacterKey = selectedCharacterInfoEntry![0] as CharacterKey + const selectedCharacterInfo = characterInfos[selectedCharacterKey] + + const hideCharacterModal = () => { + // 仮 + history.back() + } + + useLayoutEffect(() => { + document.documentElement.classList.add("is-clipped") + }, []) return ( - + <> + + + ) } From 662ea5bfbcd32583978fb3bb25cfecb4df7ad1a9 Mon Sep 17 00:00:00 2001 From: k-chop Date: Sun, 23 Oct 2022 10:31:39 +0900 Subject: [PATCH 3/6] =?UTF-8?q?=E5=AF=AE=E7=94=9F=E5=80=8B=E5=88=A5?= =?UTF-8?q?=E3=83=9A=E3=83=BC=E3=82=B8=E3=82=92=E3=83=A2=E3=83=BC=E3=83=80?= =?UTF-8?q?=E3=83=AB=E3=81=A7=E3=81=AF=E3=81=AA=E3=81=8F=E3=83=AA=E3=83=B3?= =?UTF-8?q?=E3=82=AF=E3=81=AB=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dormitoryCharacterCard.tsx | 8 +- src/pages/dormitory.tsx | 144 +++--------------- .../dormitory/{Character.characterId}.tsx | 3 +- 3 files changed, 22 insertions(+), 133 deletions(-) diff --git a/src/components/dormitoryCharacterCard.tsx b/src/components/dormitoryCharacterCard.tsx index d25825461..cb4627c9a 100644 --- a/src/components/dormitoryCharacterCard.tsx +++ b/src/components/dormitoryCharacterCard.tsx @@ -4,14 +4,13 @@ import { CharacterInfo } from "../types/dormitoryCharacter" export default ({ characterInfo, - onClick, className = "", }: { characterInfo: CharacterInfo | undefined - onClick?: () => void className?: string }) => { const color = characterInfo?.color || "black" + const href = characterInfo?.id ? `/dormitory/${characterInfo.id}` : "#" return ( <> @@ -19,10 +18,9 @@ export default ({
{characterInfo ? ( - <> +

{characterInfo.name}

- + ) : (
Coming Soon...
)} diff --git a/src/pages/dormitory.tsx b/src/pages/dormitory.tsx index 290ce1fa0..018c796e3 100644 --- a/src/pages/dormitory.tsx +++ b/src/pages/dormitory.tsx @@ -2,26 +2,19 @@ import { Link } from "gatsby" import { StaticImage } from "gatsby-plugin-image" import React, { useEffect, useRef, useState } from "react" import DormitoryCharacterCard from "../components/dormitoryCharacterCard" -import DormitoryCharacterModal from "../components/dormitoryCharacterModal" import DormitoryTopIllustContainer from "../components/dormitoryTopIllustContainer" import "../components/layout.scss" import { Page } from "../components/page" import Seo from "../components/seo" -import { characterKeys } from "../constants" import { useDetailedCharacterInfo } from "../hooks/useDetailedCharacterInfo" import shareThumb from "../images/dormitory/top-illusts/top-illust-002.png" -import { CharacterKey } from "../types/dormitoryCharacter" type DormitoryProps = { setShowingHeader: (show: boolean) => void - initialSelectedCharacterKey?: CharacterKey } -const Dormitory: React.FC = ({ - setShowingHeader, - initialSelectedCharacterKey, -}) => { - const { characterInfos, generationInfos } = useDetailedCharacterInfo() +const Dormitory: React.FC = ({ setShowingHeader }) => { + const { characterInfos } = useDetailedCharacterInfo() // ボイボ寮デザイン用のヘッダーを超えたらホムペ用のヘッダーを表示する const headerRef = useRef(null) @@ -35,68 +28,13 @@ const Dormitory: React.FC = ({ observer.observe(headerRef.current) }, [headerRef]) - // キャラクターモーダル - // 寮生個別ページを開いていたら初期値はtrue - const [showingCharacterModal, setShowingCharacterModal] = useState( - initialSelectedCharacterKey !== undefined - ) - const [selectedCharacterKey, setSelectedCharacterKey] = useState< - CharacterKey | undefined - >(initialSelectedCharacterKey) - - useEffect(() => { - if (showingCharacterModal) { - document.documentElement.classList.add("is-clipped") - } else { - document.documentElement.classList.remove("is-clipped") - } - }, [showingCharacterModal]) - - const showCharacterModal = (characterKey: CharacterKey) => { - const characterId = characterInfos[characterKey]?.id - window.history.replaceState({}, "", `/dormitory/${characterId}`) - setSelectedCharacterKey(characterKey) - setShowingCharacterModal(true) - } - const hideCharacterModal = () => { - window.history.replaceState({}, "", `/dormitory`) - setShowingCharacterModal(false) - - // モーダルを閉じたら該当キャラクターの位置までスクロールする - if (selectedCharacterKey) { - const dom = document.querySelector( - `img[alt='${characterInfos[selectedCharacterKey]?.name}']` - ) - if (dom) { - // キャラクターカードが既に画面内に表示されていた場合はスクロールしない - const { top, bottom } = dom.getBoundingClientRect() - const htmlHeight = document.documentElement.clientHeight - const inView = 0 < bottom && top < htmlHeight - - if (!inView) dom.scrollIntoView({ block: "center" }) - } - } - } - - const selectedCharacterInfo = selectedCharacterKey - ? characterInfos[selectedCharacterKey] - : undefined - return ( <> - {showingCharacterModal && selectedCharacterKey ? ( - - ) : ( - - )} +
@@ -127,18 +65,9 @@ const Dormitory: React.FC = ({

5 期 生

- showCharacterModal("WhiteCUL")} - /> - showCharacterModal("後鬼")} - /> - showCharacterModal("No7")} - /> + + +
@@ -150,12 +79,8 @@ const Dormitory: React.FC = ({ showCharacterModal("モチノキョウコ")} - /> - showCharacterModal("剣崎雌雄")} /> +
@@ -165,27 +90,16 @@ const Dormitory: React.FC = ({

3 期 生

- showCharacterModal("玄野武宏")} - /> + showCharacterModal("白上虎太郎")} - /> - showCharacterModal("青山龍星")} /> + showCharacterModal("冥鳴ひまり")} className="is-offset-2" /> - showCharacterModal("九州そら")} - /> +
@@ -197,16 +111,9 @@ const Dormitory: React.FC = ({ showCharacterModal("春日部つむぎ")} - /> - showCharacterModal("雨晴はう")} - /> - showCharacterModal("波音リツ")} /> + +
@@ -218,11 +125,9 @@ const Dormitory: React.FC = ({ showCharacterModal("四国めたん")} /> showCharacterModal("ずんだもん")} />
@@ -291,28 +196,15 @@ const Dormitory: React.FC = ({
- {selectedCharacterKey && ( - - )} ) } -export default ({ pageContext: { initialSelectedCharacterKey } }) => { +export default () => { const [showingHeader, setShowingHeader] = useState(false) return ( - + ) } diff --git a/src/pages/dormitory/{Character.characterId}.tsx b/src/pages/dormitory/{Character.characterId}.tsx index c1e88db31..bc06a4aeb 100644 --- a/src/pages/dormitory/{Character.characterId}.tsx +++ b/src/pages/dormitory/{Character.characterId}.tsx @@ -17,8 +17,7 @@ export default (props: { params: { characterId: string } }) => { const selectedCharacterInfo = characterInfos[selectedCharacterKey] const hideCharacterModal = () => { - // 仮 - history.back() + location.assign("/dormitory") } useLayoutEffect(() => { From 3267bd219fabeb528211a1ba1fa89d0ac728bb83 Mon Sep 17 00:00:00 2001 From: k-chop Date: Sun, 23 Oct 2022 13:32:19 +0900 Subject: [PATCH 4/6] =?UTF-8?q?a=E3=82=BF=E3=82=B0=E3=81=A7=E3=81=AF?= =?UTF-8?q?=E3=81=AA=E3=81=8FLink=E3=81=A8navigate=E3=82=92=E4=BD=BF?= =?UTF-8?q?=E3=81=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dormitoryCharacterCard.tsx | 5 +++-- src/pages/dormitory/{Character.characterId}.tsx | 5 ++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/dormitoryCharacterCard.tsx b/src/components/dormitoryCharacterCard.tsx index cb4627c9a..7205fea83 100644 --- a/src/components/dormitoryCharacterCard.tsx +++ b/src/components/dormitoryCharacterCard.tsx @@ -1,3 +1,4 @@ +import { Link } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" import React from "react" import { CharacterInfo } from "../types/dormitoryCharacter" @@ -20,7 +21,7 @@ export default ({ style={{ borderColor: color, height: "100%" }} > {characterInfo ? ( - +

{characterInfo.name}

- + ) : (
Coming Soon...
)} diff --git a/src/pages/dormitory/{Character.characterId}.tsx b/src/pages/dormitory/{Character.characterId}.tsx index bc06a4aeb..44dd34ff8 100644 --- a/src/pages/dormitory/{Character.characterId}.tsx +++ b/src/pages/dormitory/{Character.characterId}.tsx @@ -4,6 +4,7 @@ import Seo from "../../components/seo" import { characterKeys } from "../../constants" import { useDetailedCharacterInfo } from "../../hooks/useDetailedCharacterInfo" import { CharacterKey } from "../../types/dormitoryCharacter" +import { navigate } from "gatsby" export default (props: { params: { characterId: string } }) => { const characterId: string = props.params.characterId @@ -17,11 +18,13 @@ export default (props: { params: { characterId: string } }) => { const selectedCharacterInfo = characterInfos[selectedCharacterKey] const hideCharacterModal = () => { - location.assign("/dormitory") + navigate("/dormitory") } useLayoutEffect(() => { document.documentElement.classList.add("is-clipped") + + return () => document.documentElement.classList.remove("is-clipped") }, []) return ( From c71c438b21b41621c26647818c6e4b3a7e5c31ca Mon Sep 17 00:00:00 2001 From: k-chop Date: Sun, 23 Oct 2022 14:30:29 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E3=83=9C=E3=82=A4=E3=83=9C=E5=AF=AE?= =?UTF-8?q?=E3=81=8B=E3=82=89=E5=80=8B=E5=88=A5=E3=83=9A=E3=83=BC=E3=82=B8?= =?UTF-8?q?=E3=81=B8=E9=81=B7=E7=A7=BB=E6=99=82=E3=80=81=E3=82=B9=E3=82=AF?= =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E4=BD=8D=E7=BD=AE=E3=81=8C=E4=BF=9D?= =?UTF-8?q?=E6=8C=81=E3=81=95=E3=82=8C=E3=81=A6=E3=81=84=E3=81=AA=E3=81=8B?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/dormitoryCharacterCard.tsx | 2 +- src/pages/dormitory/{Character.characterId}.tsx | 17 +++++++++++++---- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/components/dormitoryCharacterCard.tsx b/src/components/dormitoryCharacterCard.tsx index 7205fea83..aff7b7d27 100644 --- a/src/components/dormitoryCharacterCard.tsx +++ b/src/components/dormitoryCharacterCard.tsx @@ -21,7 +21,7 @@ export default ({ style={{ borderColor: color, height: "100%" }} > {characterInfo ? ( - + { - const characterId: string = props.params.characterId +export default ({ + location, + params, +}: PageProps) => { + const characterId: string = params.characterId const { characterInfos, generationInfos } = useDetailedCharacterInfo() @@ -18,7 +21,13 @@ export default (props: { params: { characterId: string } }) => { const selectedCharacterInfo = characterInfos[selectedCharacterKey] const hideCharacterModal = () => { - navigate("/dormitory") + if (location.state?.fromDormitory) { + // ボイボ寮ページから遷移した場合はスクロール位置保持のため戻るを使う + navigate(-1) + } else { + // 検索流入や共有されたページから直接飛んだ場合は戻れないのでボイボ寮ページのurlを指定 + navigate("/dormitory") + } } useLayoutEffect(() => { From fe1f302add0454ca8c6e2b674a708625cadc70d2 Mon Sep 17 00:00:00 2001 From: k-chop Date: Sun, 23 Oct 2022 14:43:21 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=89=E6=99=82?= =?UTF-8?q?=E3=81=AB=E3=81=A1=E3=82=89=E3=81=A4=E3=81=8F=E3=81=AE=E3=81=A7?= =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=83=90=E3=83=BC?= =?UTF-8?q?=E3=82=92=E6=B6=88=E3=81=95=E3=81=AA=E3=81=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/{Character.characterId}.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/pages/dormitory/{Character.characterId}.tsx b/src/pages/dormitory/{Character.characterId}.tsx index e10efd881..eb94c6733 100644 --- a/src/pages/dormitory/{Character.characterId}.tsx +++ b/src/pages/dormitory/{Character.characterId}.tsx @@ -1,4 +1,4 @@ -import React, { useLayoutEffect } from "react" +import React from "react" import DormitoryCharacterModal from "../../components/dormitoryCharacterModal" import Seo from "../../components/seo" import { characterKeys } from "../../constants" @@ -30,12 +30,6 @@ export default ({ } } - useLayoutEffect(() => { - document.documentElement.classList.add("is-clipped") - - return () => document.documentElement.classList.remove("is-clipped") - }, []) - return ( <>