From 4965e007e4ac2374c10483ecddcad499053ff4d1 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Wed, 27 Sep 2023 03:36:51 +0900 Subject: [PATCH 01/14] =?UTF-8?q?Add:=20=E3=82=B3=E3=83=94=E3=83=BC?= =?UTF-8?q?=E6=A9=9F=E8=83=BD=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout.scss | 25 ++++++- src/pages/dormitory/call_names/index.tsx | 95 +++++++++++++++++++----- 2 files changed, 99 insertions(+), 21 deletions(-) diff --git a/src/components/layout.scss b/src/components/layout.scss index f9b36fb3..a14762de 100644 --- a/src/components/layout.scss +++ b/src/components/layout.scss @@ -881,6 +881,7 @@ $call-names-cell-width-column: 190px; position: sticky; top: 0; left: 0; + z-index: 1; } th, @@ -921,10 +922,32 @@ $call-names-cell-width-column: 190px; flex-direction: column; justify-content: center; + position: relative; + + // コピーボタン + .icon { + @extend .m-1; + + visibility: hidden; + position: absolute; + height: 1rem; + width: 1rem; + top: 0; + right: 0; + + &.selected { + visibility: visible; + } + } + &:hover { // NOTE: ちらつくので border ではなく outline outline: 2px solid; border-radius: $radius; + + .icon { + visibility: visible; + } } } } @@ -939,7 +962,7 @@ $call-names-cell-width-column: 190px; // 左上のセル &.origin { width: $call-names-cell-width-column; - z-index: 1; + z-index: 2; border-right: $call-names-border; } diff --git a/src/pages/dormitory/call_names/index.tsx b/src/pages/dormitory/call_names/index.tsx index 6d9d5ded..5974f9cb 100644 --- a/src/pages/dormitory/call_names/index.tsx +++ b/src/pages/dormitory/call_names/index.tsx @@ -1,13 +1,21 @@ import { Link } from "gatsby" import { getSrc, getSrcSet } from "gatsby-plugin-image" -import React, { CSSProperties, ReactElement, useContext } from "react" +import React, { + CSSProperties, + ReactElement, + useContext, + MouseEvent, + useState, + useEffect, +} from "react" import { Page } from "../../../components/page" import Seo from "../../../components/seo" import { CharacterContext } from "../../../contexts/context" import { useDetailedCharacterInfo } from "../../../hooks/useDetailedCharacterInfo" import { CharacterKey } from "../../../types/dormitoryCharacter" - import { DormitoryExplainComponent } from "../../dormitory" +import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons" +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" function hex2rgba(hex: string, alpha = 1): [number, number, number, number] { const match = hex.match(/\w\w/g) @@ -32,6 +40,26 @@ export default function CallNamesPage() { const { characterInfos, callNameInfos } = useDetailedCharacterInfo() const { characterKeys } = useContext(CharacterContext) + const [selectedCallName, setSelectedCallName] = useState<{ + characterKey: CharacterKey + callName: string + }>() + + useEffect(() => { + if (selectedCallName == null) return + + navigator.clipboard.writeText(selectedCallName.callName) + + const timer = setTimeout(() => { + setSelectedCallName(undefined) + }, 3000) + + // クリーンアップ; 他のセルのクリックでタイマークリア + return () => { + clearTimeout(timer) + } + }, [selectedCallName]) + function getCharacterImage(characterKey: CharacterKey): ReactElement { const characterInfo = characterInfos[characterKey] return ( @@ -51,6 +79,43 @@ export default function CallNamesPage() { outlineColor: characterInfo.color, } + function copyToClipboard(event: MouseEvent): void { + const callName = event.currentTarget.innerText + console.log(callName) + + setSelectedCallName({ + characterKey, + callName, + }) + } + + function getCell( + characterKey: string, + callName: string, + externalClassName?: string + ): ReactElement { + const isSelected = + selectedCallName?.characterKey === characterKey && + selectedCallName?.callName === callName + + return ( +

+ + + + {callName} +

+ ) + } + return ( <> {characterKeys.map(_characterKey => { @@ -61,39 +126,29 @@ export default function CallNamesPage() {
{(() => { if (characterKey === _characterKey) { - return callNameInfo.me.map(part => ( -

- {part} -

- )) + return callNameInfo.me.map(part => + getCell(characterKey, part, "me") + ) } if (callName == undefined) { return ( -

+

?

) } - return callName.split("/").map(part => ( -

- {part} -

- )) + return callName + .split("/") + .map(part => getCell(characterKey, part)) })()}
) })} -
- {callNameInfo.you.map(part => ( -

- {part} -

- ))} -
+
{callNameInfo.you.map(part => getCell(characterKey, part))}
) From 722071433314b0087727d959e9924dff1d495ae4 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Thu, 28 Sep 2023 22:49:11 +0900 Subject: [PATCH 02/14] =?UTF-8?q?Move:=20index.tsx=20=E2=86=92=20call=5Fna?= =?UTF-8?q?mes.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{call_names/index.tsx => call_names.tsx} | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) rename src/pages/dormitory/{call_names/index.tsx => call_names.tsx} (95%) diff --git a/src/pages/dormitory/call_names/index.tsx b/src/pages/dormitory/call_names.tsx similarity index 95% rename from src/pages/dormitory/call_names/index.tsx rename to src/pages/dormitory/call_names.tsx index 5974f9cb..c1249497 100644 --- a/src/pages/dormitory/call_names/index.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -8,12 +8,12 @@ import React, { useState, useEffect, } from "react" -import { Page } from "../../../components/page" -import Seo from "../../../components/seo" -import { CharacterContext } from "../../../contexts/context" -import { useDetailedCharacterInfo } from "../../../hooks/useDetailedCharacterInfo" -import { CharacterKey } from "../../../types/dormitoryCharacter" -import { DormitoryExplainComponent } from "../../dormitory" +import { Page } from "../../components/page" +import Seo from "../../components/seo" +import { CharacterContext } from "../../contexts/context" +import { useDetailedCharacterInfo } from "../../hooks/useDetailedCharacterInfo" +import { CharacterKey } from "../../types/dormitoryCharacter" +import { DormitoryExplainComponent } from "../dormitory" import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons" import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" From 2ef21878f2239af2fcb8e698f8395c027dc2c340 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Thu, 28 Sep 2023 23:51:22 +0900 Subject: [PATCH 03/14] =?UTF-8?q?Add:=20=E3=82=A2=E3=83=B3=E3=82=AB?= =?UTF-8?q?=E3=83=BC=E3=81=A7=E3=82=AD=E3=83=A3=E3=83=A9=E3=82=AF=E3=82=BF?= =?UTF-8?q?=E3=83=BC=E8=A1=8C=E3=81=8C=E4=B8=AD=E5=BF=83=E3=81=AB=E6=9D=A5?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 33 +++++++++++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index c1249497..bb1de9d8 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -45,6 +45,37 @@ export default function CallNamesPage() { callName: string }>() + const jump2characterColumn = async (): Promise => { + const urlAnchor = window.location.hash + if (!urlAnchor.length) return + + window.scrollTo(0, 0) + + const characterKeyFromAnchor = urlAnchor.slice(1) + const characterIdList = characterKeys.map( + characterKey => characterInfos[characterKey].id + ) + + if (!characterIdList.includes(characterKeyFromAnchor)) { + console.warn(`Unknown anchor: ${urlAnchor}`) + return + } + + const characterElem = document.getElementById(characterKeyFromAnchor) + if (characterElem == null) { + throw new Error("Character element not found") + } + + // 中心にキャラクターが来るようにスクロール + characterElem.scrollIntoView({ block: "center", behavior: "instant" }) + // 微妙に親スクロールが動くので, もとに戻す + window.scrollTo(0, 0) + } + + useEffect(() => { + void jump2characterColumn() + }, []) + useEffect(() => { if (selectedCallName == null) return @@ -81,7 +112,6 @@ export default function CallNamesPage() { function copyToClipboard(event: MouseEvent): void { const callName = event.currentTarget.innerText - console.log(callName) setSelectedCallName({ characterKey, @@ -104,6 +134,7 @@ export default function CallNamesPage() { className={externalClassName} onClick={copyToClipboard} style={outlineStyle} + title={`クリックして呼称をコピー: 「${callName}」`} > Date: Thu, 28 Sep 2023 23:52:08 +0900 Subject: [PATCH 04/14] =?UTF-8?q?Fix:=20=E3=83=9C=E3=82=A4=E3=83=9C?= =?UTF-8?q?=E5=AF=AE=E3=81=A7=E3=81=AE=E3=83=AA=E3=83=B3=E3=82=AF=E5=88=87?= =?UTF-8?q?=E3=82=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dormitory.tsx b/src/pages/dormitory.tsx index 1c5a13b2..872822dc 100644 --- a/src/pages/dormitory.tsx +++ b/src/pages/dormitory.tsx @@ -258,7 +258,7 @@ const Dormitory: React.FC = ({ setShowingHeader }) => {

関連コンテンツ

Date: Fri, 29 Sep 2023 01:03:18 +0900 Subject: [PATCH 05/14] =?UTF-8?q?Add:=20=E3=82=A2=E3=83=B3=E3=82=AB?= =?UTF-8?q?=E3=83=BC=E3=81=A7=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4=E3=83=88?= =?UTF-8?q?=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3?= =?UTF-8?q?=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout.scss | 20 ++++++++++++++++++++ src/pages/dormitory/call_names.tsx | 17 ++++++++--------- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/components/layout.scss b/src/components/layout.scss index a14762de..5fcea5ac 100644 --- a/src/components/layout.scss +++ b/src/components/layout.scss @@ -847,6 +847,18 @@ $call-names-cell-height: 80px; $call-names-cell-width: 150px; $call-names-cell-width-column: 190px; +@keyframes call-names-column-highlight { + 0% { + outline-width: 0px; + } + 99% { + outline-width: 4px; + } + 100% { + outline-width: 0px; + } +} + .call-names-wrapper { // sticky にするために明示的に高さを指定 // → ほかに overflow の指定などでも sticky にできるが、親レイアウトの @@ -953,6 +965,14 @@ $call-names-cell-width-column: 190px; } } + tr { + &.highlight { + animation: call-names-column-highlight 1.25s 3 forwards; + outline-style: solid; + border-radius: $radius; + } + } + thead > tr { // 一番上の行 th { diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index bb1de9d8..b93238ec 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -66,9 +66,12 @@ export default function CallNamesPage() { throw new Error("Character element not found") } - // 中心にキャラクターが来るようにスクロール + // 該当列をハイライトする + characterElem.classList.add("highlight") + + // 画面の中心にキャラクターが来るようにスクロール characterElem.scrollIntoView({ block: "center", behavior: "instant" }) - // 微妙に親スクロールが動くので, もとに戻す + // 微妙に親スクロールの y 軸が動くので, もとに戻す window.scrollTo(0, 0) } @@ -252,19 +255,15 @@ export default function CallNamesPage() { ...hex2rgba(characterInfo.lightColor, 0.4) ) const backgroundColor = `rgb(${red}, ${green}, ${blue})` + const outlineColor = characterInfo.color return ( - // FIXME: #id でキャラクターに直接アクセスするとスクロールがずれるのを直す - + {getCharacterImage(characterKey)}

Date: Fri, 29 Sep 2023 02:52:45 +0900 Subject: [PATCH 06/14] =?UTF-8?q?Revert=20"Add:=20=E3=82=A2=E3=83=B3?= =?UTF-8?q?=E3=82=AB=E3=83=BC=E3=81=A7=E3=83=8F=E3=82=A4=E3=83=A9=E3=82=A4?= =?UTF-8?q?=E3=83=88=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7?= =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This reverts commit 0285fc4bb3cd5d45c0918ce155bb674ac9af1e1c. --- src/components/layout.scss | 20 -------------------- src/pages/dormitory/call_names.tsx | 17 +++++++++-------- 2 files changed, 9 insertions(+), 28 deletions(-) diff --git a/src/components/layout.scss b/src/components/layout.scss index 5fcea5ac..a14762de 100644 --- a/src/components/layout.scss +++ b/src/components/layout.scss @@ -847,18 +847,6 @@ $call-names-cell-height: 80px; $call-names-cell-width: 150px; $call-names-cell-width-column: 190px; -@keyframes call-names-column-highlight { - 0% { - outline-width: 0px; - } - 99% { - outline-width: 4px; - } - 100% { - outline-width: 0px; - } -} - .call-names-wrapper { // sticky にするために明示的に高さを指定 // → ほかに overflow の指定などでも sticky にできるが、親レイアウトの @@ -965,14 +953,6 @@ $call-names-cell-width-column: 190px; } } - tr { - &.highlight { - animation: call-names-column-highlight 1.25s 3 forwards; - outline-style: solid; - border-radius: $radius; - } - } - thead > tr { // 一番上の行 th { diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index b93238ec..bb1de9d8 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -66,12 +66,9 @@ export default function CallNamesPage() { throw new Error("Character element not found") } - // 該当列をハイライトする - characterElem.classList.add("highlight") - - // 画面の中心にキャラクターが来るようにスクロール + // 中心にキャラクターが来るようにスクロール characterElem.scrollIntoView({ block: "center", behavior: "instant" }) - // 微妙に親スクロールの y 軸が動くので, もとに戻す + // 微妙に親スクロールが動くので, もとに戻す window.scrollTo(0, 0) } @@ -255,15 +252,19 @@ export default function CallNamesPage() { ...hex2rgba(characterInfo.lightColor, 0.4) ) const backgroundColor = `rgb(${red}, ${green}, ${blue})` - const outlineColor = characterInfo.color return ( + // FIXME: #id でキャラクターに直接アクセスするとスクロールがずれるのを直す - + {getCharacterImage(characterKey)}

Date: Fri, 29 Sep 2023 02:58:07 +0900 Subject: [PATCH 07/14] =?UTF-8?q?Remove:=20=E3=82=A2=E3=83=B3=E3=82=AB?= =?UTF-8?q?=E3=83=BC=E6=A9=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 38 +----------------------------- 1 file changed, 1 insertion(+), 37 deletions(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index bb1de9d8..fea8f581 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -45,37 +45,6 @@ export default function CallNamesPage() { callName: string }>() - const jump2characterColumn = async (): Promise => { - const urlAnchor = window.location.hash - if (!urlAnchor.length) return - - window.scrollTo(0, 0) - - const characterKeyFromAnchor = urlAnchor.slice(1) - const characterIdList = characterKeys.map( - characterKey => characterInfos[characterKey].id - ) - - if (!characterIdList.includes(characterKeyFromAnchor)) { - console.warn(`Unknown anchor: ${urlAnchor}`) - return - } - - const characterElem = document.getElementById(characterKeyFromAnchor) - if (characterElem == null) { - throw new Error("Character element not found") - } - - // 中心にキャラクターが来るようにスクロール - characterElem.scrollIntoView({ block: "center", behavior: "instant" }) - // 微妙に親スクロールが動くので, もとに戻す - window.scrollTo(0, 0) - } - - useEffect(() => { - void jump2characterColumn() - }, []) - useEffect(() => { if (selectedCallName == null) return @@ -254,12 +223,7 @@ export default function CallNamesPage() { const backgroundColor = `rgb(${red}, ${green}, ${blue})` return ( - // FIXME: #id でキャラクターに直接アクセスするとスクロールがずれるのを直す - + Date: Fri, 29 Sep 2023 02:58:40 +0900 Subject: [PATCH 08/14] =?UTF-8?q?Enh:=20=E3=82=B3=E3=83=94=E3=83=BC?= =?UTF-8?q?=E5=BE=8C=E3=81=AE=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=82=92=E7=9F=AD=E3=81=8F=E3=81=97=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index fea8f581..ecdb5a3c 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -52,7 +52,7 @@ export default function CallNamesPage() { const timer = setTimeout(() => { setSelectedCallName(undefined) - }, 3000) + }, 1500) // クリーンアップ; 他のセルのクリックでタイマークリア return () => { From 458928327f1b0ebc99b01f3bed9b81223c145770 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Mon, 2 Oct 2023 13:01:14 +0900 Subject: [PATCH 09/14] Apply suggestions from code review Co-authored-by: Hiroshiba --- src/pages/dormitory/call_names.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index ecdb5a3c..452a3fa9 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -103,7 +103,7 @@ export default function CallNamesPage() { className={externalClassName} onClick={copyToClipboard} style={outlineStyle} - title={`クリックして呼称をコピー: 「${callName}」`} + title={`クリックして呼称をコピー：「${callName}」`} > - ? + ？

) } From 8414de0b0259646d46cd6b93fda127007f5a3874 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Tue, 3 Oct 2023 12:43:01 +0900 Subject: [PATCH 10/14] =?UTF-8?q?Enh:=20Component=20=E8=A8=98=E6=B3=95?= =?UTF-8?q?=E3=81=AB=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 207 +++++++++++++++++------------ 1 file changed, 122 insertions(+), 85 deletions(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index 452a3fa9..59639450 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -36,7 +36,11 @@ function rgba2rgbOnWhite( return [_red, _green, _blue] } -export default function CallNamesPage() { +function CallNamesColumn({ + characterKey, +}: { + characterKey: CharacterKey +}): ReactElement { const { characterInfos, callNameInfos } = useDetailedCharacterInfo() const { characterKeys } = useContext(CharacterContext) @@ -60,97 +64,130 @@ export default function CallNamesPage() { } }, [selectedCallName]) - function getCharacterImage(characterKey: CharacterKey): ReactElement { - const characterInfo = characterInfos[characterKey] + const callNameInfo = callNameInfos[characterKey] + const characterInfo = characterInfos[characterKey] + + const outlineStyle: CSSProperties = { + outlineColor: characterInfo.color, + } + + function copyToClipboard(event: MouseEvent): void { + const callName = event.currentTarget.innerText + + setSelectedCallName({ + characterKey, + callName, + }) + } + + function Cell({ + characterKey, + callName, + externalClassName, + }: { + characterKey: string + callName: string + externalClassName?: string + }): ReactElement { + const isSelected = + selectedCallName?.characterKey === characterKey && + selectedCallName?.callName === callName + return ( - {characterInfo.name} +

+ + + + {callName} +

) } - function getColumn(characterKey: CharacterKey): ReactElement { - const callNameInfo = callNameInfos[characterKey] - const characterInfo = characterInfos[characterKey] - - const outlineStyle: CSSProperties = { - outlineColor: characterInfo.color, - } + return ( + <> + {characterKeys.map(_characterKey => { + const callName = callNameInfo[_characterKey] - function copyToClipboard(event: MouseEvent): void { - const callName = event.currentTarget.innerText + return ( + +
+ {(() => { + if (_characterKey === characterKey) { + return callNameInfo.me.map(part => ( + + )) + } - setSelectedCallName({ - characterKey, - callName, - }) - } + if (callName == undefined) { + return ( +

+ ？ +

+ ) + } - function getCell( - characterKey: string, - callName: string, - externalClassName?: string - ): ReactElement { - const isSelected = - selectedCallName?.characterKey === characterKey && - selectedCallName?.callName === callName - - return ( -

- - ( + + )) + })()} +

+ + ) + })} + +
+ {callNameInfo.you.map(part => ( + - - {callName} -

- ) - } + ))} +
+ + + ) +} + +export default function CallNamesPage() { + const { characterInfos } = useDetailedCharacterInfo() + const { characterKeys } = useContext(CharacterContext) + function CharacterImage({ + characterKey, + }: { + characterKey: CharacterKey + }): ReactElement { + const characterInfo = characterInfos[characterKey] return ( - <> - {characterKeys.map(_characterKey => { - const callName = callNameInfo[_characterKey] - - return ( - -
- {(() => { - if (characterKey === _characterKey) { - return callNameInfo.me.map(part => - getCell(characterKey, part, "me") - ) - } - - if (callName == undefined) { - return ( -

- ？ -

- ) - } - - return callName - .split("/") - .map(part => getCell(characterKey, part)) - })()} -
- - ) - })} - -
{callNameInfo.you.map(part => getCell(characterKey, part))}
- - + {characterInfo.name} ) } @@ -193,7 +230,7 @@ export default function CallNamesPage() { return ( - {getCharacterImage(characterKey)} +

- {getCharacterImage(characterKey)} +

- {getColumn(characterKey)} + ) })} From 0b7091f49594621ee337e8e66d74a408fba90a76 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Tue, 3 Oct 2023 12:56:42 +0900 Subject: [PATCH 11/14] =?UTF-8?q?Add:=20=E3=82=B3=E3=83=94=E3=83=BC?= =?UTF-8?q?=E5=AE=8C=E4=BA=86=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=82=92?= =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=81=8B=E3=81=A9=E3=81=86?= =?UTF-8?q?=E3=81=8B=E3=81=AE=E7=8A=B6=E6=85=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 34 ++++++++++++++---------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index 59639450..33393727 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -36,7 +36,7 @@ function rgba2rgbOnWhite( return [_red, _green, _blue] } -function CallNamesColumn({ +function Column({ characterKey, }: { characterKey: CharacterKey @@ -48,28 +48,23 @@ function CallNamesColumn({ characterKey: CharacterKey callName: string }>() + const [showCopiedIcon, setShowCopiedIcon] = useState(false) - useEffect(() => { - if (selectedCallName == null) return - - navigator.clipboard.writeText(selectedCallName.callName) + const callNameInfo = callNameInfos[characterKey] + const characterInfo = characterInfos[characterKey] + const outlineStyle: CSSProperties = { + outlineColor: characterInfo.color, + } + useEffect(() => { const timer = setTimeout(() => { - setSelectedCallName(undefined) + setShowCopiedIcon(false) }, 1500) - // クリーンアップ; 他のセルのクリックでタイマークリア return () => { clearTimeout(timer) } - }, [selectedCallName]) - - const callNameInfo = callNameInfos[characterKey] - const characterInfo = characterInfos[characterKey] - - const outlineStyle: CSSProperties = { - outlineColor: characterInfo.color, - } + }, [showCopiedIcon]) function copyToClipboard(event: MouseEvent): void { const callName = event.currentTarget.innerText @@ -78,6 +73,8 @@ function CallNamesColumn({ characterKey, callName, }) + navigator.clipboard.writeText(callName) + setShowCopiedIcon(true) } function Cell({ @@ -91,7 +88,8 @@ function CallNamesColumn({ }): ReactElement { const isSelected = selectedCallName?.characterKey === characterKey && - selectedCallName?.callName === callName + selectedCallName?.callName === callName && + showCopiedIcon return (

@@ -277,7 +275,7 @@ export default function CallNamesPage() {

- + ) })} From 0bef0b036738acaeef030c43d771cd516c3e19c0 Mon Sep 17 00:00:00 2001 From: wappon28dev Date: Tue, 3 Oct 2023 14:55:51 +0900 Subject: [PATCH 12/14] =?UTF-8?q?Enh:=20selectedCallName=20=E3=81=AE?= =?UTF-8?q?=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index 33393727..198ff061 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -44,10 +44,7 @@ function Column({ const { characterInfos, callNameInfos } = useDetailedCharacterInfo() const { characterKeys } = useContext(CharacterContext) - const [selectedCallName, setSelectedCallName] = useState<{ - characterKey: CharacterKey - callName: string - }>() + const [selectedCallName, setSelectedCallName] = useState() const [showCopiedIcon, setShowCopiedIcon] = useState(false) const callNameInfo = callNameInfos[characterKey] @@ -57,6 +54,8 @@ function Column({ } useEffect(() => { + if (selectedCallName == undefined) return + const timer = setTimeout(() => { setShowCopiedIcon(false) }, 1500) @@ -64,15 +63,12 @@ function Column({ return () => { clearTimeout(timer) } - }, [showCopiedIcon]) + }, [showCopiedIcon, selectedCallName]) function copyToClipboard(event: MouseEvent): void { const callName = event.currentTarget.innerText - setSelectedCallName({ - characterKey, - callName, - }) + setSelectedCallName(callName) navigator.clipboard.writeText(callName) setShowCopiedIcon(true) } @@ -86,10 +82,7 @@ function Column({ callName: string externalClassName?: string }): ReactElement { - const isSelected = - selectedCallName?.characterKey === characterKey && - selectedCallName?.callName === callName && - showCopiedIcon + const isSelected = selectedCallName === callName && showCopiedIcon return (

Date: Tue, 3 Oct 2023 15:11:17 +0900 Subject: [PATCH 13/14] =?UTF-8?q?Enh:=20=E4=B8=8D=E8=A6=81=E3=81=AA=20prop?= =?UTF-8?q?s=20=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/dormitory/call_names.tsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index 198ff061..d80f1abd 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -74,11 +74,9 @@ function Column({ } function Cell({ - characterKey, callName, externalClassName, }: { - characterKey: string callName: string externalClassName?: string }): ReactElement { @@ -115,7 +113,6 @@ function Column({ return callNameInfo.me.map(part => ( @@ -137,11 +134,7 @@ function Column({ return callName .split("/") .map(part => ( - + )) })()}

@@ -151,11 +144,7 @@ function Column({
{callNameInfo.you.map(part => ( - + ))}
From 2593100a19e7f2846a01f7b905363bef0a8a5267 Mon Sep 17 00:00:00 2001 From: Hiroshiba Date: Thu, 5 Oct 2023 03:18:05 +0900 Subject: [PATCH 14/14] Update src/pages/dormitory/call_names.tsx --- src/pages/dormitory/call_names.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/dormitory/call_names.tsx b/src/pages/dormitory/call_names.tsx index d80f1abd..472aa91e 100644 --- a/src/pages/dormitory/call_names.tsx +++ b/src/pages/dormitory/call_names.tsx @@ -36,6 +36,7 @@ function rgba2rgbOnWhite( return [_red, _green, _blue] } +// FIXME: Row function Column({ characterKey, }: {