From 792afba19da6338e6b9442bd882d9b26177240e3 Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:07:30 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[fix]=E3=83=98=E3=83=AB=E3=83=97=E3=82=AB?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=82=BB=E3=83=AB=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HelpCarousel/HelpCarousel.module.css | 34 ------ .../common/HelpCarousel/HelpCarousel.tsx | 105 ------------------ .../components/common/HelpCarousel/index.ts | 1 - 3 files changed, 140 deletions(-) delete mode 100644 view-user/src/components/common/HelpCarousel/HelpCarousel.module.css delete mode 100644 view-user/src/components/common/HelpCarousel/HelpCarousel.tsx delete mode 100644 view-user/src/components/common/HelpCarousel/index.ts diff --git a/view-user/src/components/common/HelpCarousel/HelpCarousel.module.css b/view-user/src/components/common/HelpCarousel/HelpCarousel.module.css deleted file mode 100644 index 252be6f..0000000 --- a/view-user/src/components/common/HelpCarousel/HelpCarousel.module.css +++ /dev/null @@ -1,34 +0,0 @@ -.container { - width: 65vw; -} - -.embla { - display: flex; - flex-flow: column; - overflow: hidden; - gap: 1vh; -} - -.embla__container { - display: flex; -} - -.embla__slide { - flex: 0 0 100%; - min-width: 0; -} - -.screenTransition { - display: flex; - justify-content: space-around; -} - -.carousel__dots { - display: flex; - justify-content: center; - margin-top: 10px; -} - -.buttonText { - font-size: 2.5vw; -} diff --git a/view-user/src/components/common/HelpCarousel/HelpCarousel.tsx b/view-user/src/components/common/HelpCarousel/HelpCarousel.tsx deleted file mode 100644 index e224b89..0000000 --- a/view-user/src/components/common/HelpCarousel/HelpCarousel.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { useCallback, useState, useEffect } from "react"; -import styles from "./HelpCarousel.module.css"; -import { Button, Modal, DotButton } from "@/components"; -import useEmblaCarousel from "embla-carousel-react"; -import Image from "next/image"; -import { useRouter } from "next/router"; -import { ja, en } from "@/locales"; - -interface HelpCarouselProps { - isOpened: boolean; - setIsOpened: (isOpened: boolean) => void; -} - -const HelpCarousel = ({ isOpened, setIsOpened }: HelpCarouselProps) => { - const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }); - const [selectedIndex, setSelectedIndex] = useState(0); - const [slidesCount, setSlidesCount] = useState(0); - const { locale } = useRouter(); - const [] = useState(locale || "ja"); - const t = locale === "ja" ? ja : en; - - const onSelect = useCallback(() => { - if (!emblaApi) return; - setSelectedIndex(emblaApi.selectedScrollSnap()); - }, [emblaApi]); - useEffect(() => { - if (!emblaApi) return; - onSelect(); - setSlidesCount(emblaApi.slideNodes().length); - emblaApi.on("select", onSelect); - }, [emblaApi, onSelect]); - const scrollTo = useCallback( - (index: number) => { - if (emblaApi) emblaApi.scrollTo(index); - }, - [emblaApi], - ); - - const scrollPrev = useCallback(() => { - if (emblaApi) emblaApi.scrollPrev(); - }, [emblaApi]); - const scrollNext = useCallback(() => { - if (emblaApi) emblaApi.scrollNext(); - }, [emblaApi]); - - const images = [ - { src: "/Help_slide1.png", alt: "Help_slide1" }, - { src: "/Help_slide2.png", alt: "Help_slide2" }, - { src: "/Help_slide3.png", alt: "Help_slide3" }, - { src: "/Help_slide4.png", alt: "Help_slide4" }, - { src: "/Help_slide5.png", alt: "Help_slide5" }, - ]; - - return ( - -
-
-
- {images.map((image, index) => ( - {image.alt} - ))} -
-
- {Array.from({ length: slidesCount }).map((_, index) => ( - scrollTo(index)} - /> - ))} -
-
- {selectedIndex === 0 ? ( - - ) : ( - - )} - {selectedIndex === slidesCount - 1 ? ( - - ) : ( - - )} -
-
-
- - ); -}; - -export default HelpCarousel; diff --git a/view-user/src/components/common/HelpCarousel/index.ts b/view-user/src/components/common/HelpCarousel/index.ts deleted file mode 100644 index 282dfd0..0000000 --- a/view-user/src/components/common/HelpCarousel/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./HelpCarousel"; From 0b6b4c33b67e61264b32d480a83416193719977d Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:08:04 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[fix]=E3=83=98=E3=83=AB=E3=83=97=E3=82=AB?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=82=BB=E3=83=AB=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view-user/src/components/common/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/view-user/src/components/common/index.ts b/view-user/src/components/common/index.ts index 70540f6..48b6a68 100644 --- a/view-user/src/components/common/index.ts +++ b/view-user/src/components/common/index.ts @@ -8,7 +8,6 @@ export { default as Modal } from "./Modal"; export { default as Loading } from "./Loading"; export { default as NavigationBar } from "./NavigationBar"; export { default as ReactionStampModal } from "./ReactionStampModal"; -export { default as HelpCarousel } from "./HelpCarousel"; export { default as ReachCount } from "./ReachCount"; // Buttons From 3bb9012ac26994f85de336a9c4871df0b9c1ef52 Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:09:08 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[feat]intro.js=E3=81=AE=E5=AE=9F=E8=A3=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view-user/package-lock.json | 6 ++ view-user/package.json | 1 + .../common/Header/Header.module.css | 13 +++ .../src/components/common/Header/Header.tsx | 87 +++++++++++++++---- 4 files changed, 90 insertions(+), 17 deletions(-) diff --git a/view-user/package-lock.json b/view-user/package-lock.json index b2b8960..74902d2 100755 --- a/view-user/package-lock.json +++ b/view-user/package-lock.json @@ -24,6 +24,7 @@ "fs": "^0.0.1-security", "graphql": "^16.7.1", "graphql-codegen": "^0.4.0", + "intro.js": "^7.2.0", "matter-js": "^0.19.0", "minio": "^7.1.1", "next": "^14.2.3", @@ -8069,6 +8070,11 @@ "node": ">= 0.4" } }, + "node_modules/intro.js": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/intro.js/-/intro.js-7.2.0.tgz", + "integrity": "sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==" + }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", diff --git a/view-user/package.json b/view-user/package.json index 0a5dd1a..5c455b3 100755 --- a/view-user/package.json +++ b/view-user/package.json @@ -27,6 +27,7 @@ "fs": "^0.0.1-security", "graphql": "^16.7.1", "graphql-codegen": "^0.4.0", + "intro.js": "^7.2.0", "matter-js": "^0.19.0", "minio": "^7.1.1", "next": "^14.2.3", diff --git a/view-user/src/components/common/Header/Header.module.css b/view-user/src/components/common/Header/Header.module.css index 3195963..e483859 100644 --- a/view-user/src/components/common/Header/Header.module.css +++ b/view-user/src/components/common/Header/Header.module.css @@ -31,3 +31,16 @@ .logo path:nth-child(2) { fill: var(--main-color); } + +.customTooltip { + border: 2vw solid var(--main-color) !important; + min-width: 50vw !important; + max-width: 100vw !important; +} + +.customTooltip *{ + border-color: var(--main-color) !important; + text-shadow: none !important; + color: var(--main-color) !important; + background-color: var(--sub-color) !important; +} \ No newline at end of file diff --git a/view-user/src/components/common/Header/Header.tsx b/view-user/src/components/common/Header/Header.tsx index 79e5960..da6331a 100644 --- a/view-user/src/components/common/Header/Header.tsx +++ b/view-user/src/components/common/Header/Header.tsx @@ -1,41 +1,94 @@ +import introJs from "intro.js"; import styles from "./Header.module.css"; import { useRouter } from "next/router"; import { IoHelpCircleOutline } from "react-icons/io5"; -import { HelpCarousel } from "@/components"; -import { useState, useEffect } from "react"; +import { useState, useEffect} from "react"; import BingoLogo from "public/logo_bingo.svg"; +import { ja, en } from "@/locales"; const Header = () => { const router = useRouter(); - const [isOpenHelpCarousel, setIsOpenHelpCarousel] = useState(false); + const { locale } = useRouter(); + const [] = useState(locale || "ja"); + const t = locale === "ja" ? ja : en; + const [isStartIntrojs, setIsStartIntrojs] = useState(false); useEffect(() => { - const isHelpShown = localStorage.getItem("isOpenHelpCarousel"); - + const isHelpShown = localStorage.getItem("isStartIntrojs"); if (isHelpShown === null) { - setIsOpenHelpCarousel(true); - localStorage.setItem("isOpenHelpCarousel", JSON.stringify(true)); + setIsStartIntrojs(true); + localStorage.setItem("isStartIntrojs", JSON.stringify(true)); + startTour(); } }, []); - const handleClick = () => { - setIsOpenHelpCarousel(true); + const startTour = () => { + const intro = introJs(); + intro.onbeforechange(() => { + document.body.style.overflow = "hidden"; + return true; + }); + intro.oncomplete(() => { + document.body.style.overflow = ""; + }); + + intro.setOptions({ + steps: [ + { + title: t.helpDescription.page1_title, + intro: t.helpDescription.page1_txt, + position: "floating", + }, + { + title: t.helpDescription.page2_title, + intro: t.helpDescription.page2_txt, + element: "#PrizesIcon", + position: "bottom-middle-aligned", + }, + { + title:t.helpDescription.page3_title, + intro: t.helpDescription.page3_txt, + element: "#ReactionsIcon", + position: "bottom-middle-aligned", + }, + { + title:t.helpDescription.page4_title, + intro: t.helpDescription.page4_txt, + element: "#ReachIcon", + position: "bottom-middle-aligned", + }, + { + title:t.helpDescription.page5_title, + intro: t.helpDescription.page5_txt, + element: "#SettingsIcon", + position: "bottom-middle-aligned", + }, + ], + tooltipClass: styles.customTooltip, + scrollToElement: false, + hidePrev: true, + showBullets: true, + nextLabel: t.helpDescription.next, + prevLabel: t.helpDescription.back, + doneLabel: t.helpDescription.close, + }); + intro.start(); }; return (
- router.push("/")} /> -
- {isOpenHelpCarousel && ( - - )}
); }; From ca7dd873b8c1aca383a43f930941a6804b607ca6 Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:09:49 +0900 Subject: [PATCH 4/7] =?UTF-8?q?[fix]=E5=90=84=E3=83=9C=E3=82=BF=E3=83=B3?= =?UTF-8?q?=E3=81=ABid=E3=83=97=E3=83=AD=E3=83=83=E3=83=97=E3=82=B9?= =?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 --- .../common/icons/IconFramework/IconFramework.tsx | 2 ++ .../src/components/common/icons/PrizesIcon/PrizesIcon.tsx | 7 ++++++- .../src/components/common/icons/ReachIcon/ReachIcon.tsx | 2 ++ .../common/icons/ReactionsIcon/ReactionsIcon.tsx | 2 ++ .../components/common/icons/SettingsIcon/SettingsIcon.tsx | 2 ++ 5 files changed, 14 insertions(+), 1 deletion(-) diff --git a/view-user/src/components/common/icons/IconFramework/IconFramework.tsx b/view-user/src/components/common/icons/IconFramework/IconFramework.tsx index 9953a22..236d854 100644 --- a/view-user/src/components/common/icons/IconFramework/IconFramework.tsx +++ b/view-user/src/components/common/icons/IconFramework/IconFramework.tsx @@ -7,6 +7,7 @@ interface IconFrameworkProps { text: string; outline?: boolean; inversion?: boolean; + id?: string; onClick?: () => void; } @@ -33,6 +34,7 @@ const IconFramework = (props: IconFrameworkProps) => { [styles.color_inversion]: colorInversion, })} onClick={handleClick} + id={props.id} >
{props.icon}
{props.text} diff --git a/view-user/src/components/common/icons/PrizesIcon/PrizesIcon.tsx b/view-user/src/components/common/icons/PrizesIcon/PrizesIcon.tsx index ff85cbb..6d49975 100644 --- a/view-user/src/components/common/icons/PrizesIcon/PrizesIcon.tsx +++ b/view-user/src/components/common/icons/PrizesIcon/PrizesIcon.tsx @@ -3,7 +3,11 @@ import { IconFramework } from "@/components/common"; import { BiGift } from "react-icons/bi"; import { useRouter } from "next/router"; -const PrizesIcon = () => { +interface PrizesIconProps { + id?: string; +} + +const PrizesIcon = (props: PrizesIconProps) => { const router = useRouter(); const handleClick = () => { @@ -18,6 +22,7 @@ const PrizesIcon = () => { text="Prizes" outline onClick={() => handleClick()} + id={props.id ? props.id : ""} /> ); }; diff --git a/view-user/src/components/common/icons/ReachIcon/ReachIcon.tsx b/view-user/src/components/common/icons/ReachIcon/ReachIcon.tsx index e76ec97..5a4e6ab 100644 --- a/view-user/src/components/common/icons/ReachIcon/ReachIcon.tsx +++ b/view-user/src/components/common/icons/ReachIcon/ReachIcon.tsx @@ -6,6 +6,7 @@ import Icon from "public/icon_reach.svg"; interface ReachIconProps { onClick: () => void; isOpen: boolean; + id?: string; setIsReachModalOpen: React.Dispatch>; } @@ -34,6 +35,7 @@ const ReachIcon = (props: ReachIconProps) => { [styles.color_inversion]: colorInversion, })} onClick={handleClick} + id={props.id} >
diff --git a/view-user/src/components/common/icons/ReactionsIcon/ReactionsIcon.tsx b/view-user/src/components/common/icons/ReactionsIcon/ReactionsIcon.tsx index b474de9..deee0ec 100644 --- a/view-user/src/components/common/icons/ReactionsIcon/ReactionsIcon.tsx +++ b/view-user/src/components/common/icons/ReactionsIcon/ReactionsIcon.tsx @@ -4,6 +4,7 @@ import { FaRegFaceSmile } from "react-icons/fa6"; interface ReactionsIconProps { isOpen: boolean; + id?: string; setIsReactionModalOpen: React.Dispatch>; } const ReactionsIcon = (props: ReactionsIconProps) => { @@ -17,6 +18,7 @@ const ReactionsIcon = (props: ReactionsIconProps) => { text="Reactions" inversion onClick={() => handleClick()} + id={props.id ? props.id : ""} /> ); }; diff --git a/view-user/src/components/common/icons/SettingsIcon/SettingsIcon.tsx b/view-user/src/components/common/icons/SettingsIcon/SettingsIcon.tsx index 064f038..3b93ef1 100644 --- a/view-user/src/components/common/icons/SettingsIcon/SettingsIcon.tsx +++ b/view-user/src/components/common/icons/SettingsIcon/SettingsIcon.tsx @@ -6,6 +6,7 @@ interface SettingsIconProps { onClick?: () => void; isOpen: boolean; setIsSettingsModalOpen?: React.Dispatch>; + id?: string; } const SettingsIcon = (props: SettingsIconProps) => { const [colorInversion, setColorInversion] = useState(false); @@ -33,6 +34,7 @@ const SettingsIcon = (props: SettingsIconProps) => { outline inversion={colorInversion} onClick={() => handleClick()} + id={props.id ? props.id : ""} /> ); }; From e5799720d786d3d81025c71818f8be92786add26 Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:10:40 +0900 Subject: [PATCH 5/7] =?UTF-8?q?[feat]tooltip=E3=81=AB=E8=A1=A8=E7=A4=BA?= =?UTF-8?q?=E3=81=99=E3=82=8B=E8=AA=AC=E6=98=8E=E6=96=87=E3=81=AE=E8=BF=BD?= =?UTF-8?q?=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view-user/src/locales/en.ts | 20 ++++++++++++++++++++ view-user/src/locales/ja.ts | 19 +++++++++++++++++++ 2 files changed, 39 insertions(+) diff --git a/view-user/src/locales/en.ts b/view-user/src/locales/en.ts index bf8fc16..9af9502 100644 --- a/view-user/src/locales/en.ts +++ b/view-user/src/locales/en.ts @@ -17,4 +17,24 @@ export const en = { back: "back", next: "next", }, + helpDescription: { + page1_title:"Wellcome!!", + page1_txt: + "I will explain how to use this app! !
You can check the winning numbers in the bingo tournament.", + page2_title:"Prizes Button", + page2_txt: + "Click this button to check your prize!
The winning status will be updated from time to time, so please check the prizes you want!", + page3_title:"Reactions Button", + page3_txt: + "When you press this button, a reaction stamp will be displayed on the screen on stage! !
Share the fun in real time!", + page4_title:"Reach Button", + page4_txt: + "Please press this button when you reach it!
Everyone's reach number will be displayed on the screen!", + page5_title:"Settings Button", + page5_txt: + "Press this button to change the number display order and language!", + next: "Next", + back: "Back", + close: "Close", + }, }; diff --git a/view-user/src/locales/ja.ts b/view-user/src/locales/ja.ts index 60dd8b5..ce758e7 100644 --- a/view-user/src/locales/ja.ts +++ b/view-user/src/locales/ja.ts @@ -17,4 +17,23 @@ export const ja = { back: "戻る", next: "次へ", }, + helpDescription: { + page1_title:"ようこそ！！", + page1_txt: + "このアプリの使い方を説明します！！
ビンゴ大会で当選した番号を確認できます。", + page2_title:"景品ボタン", + page2_txt: + "このボタンを押すと景品が確認できます！
当選状況が随時更新されるのでほしい景品を確認してみてください！", + page3_title:"リアクションボタン", + page3_txt: + "このボタンを押すとリアクションスタンプがステージ上のスクリーンに表示されます！!
リアルタイムで楽しいを共有しましょう！", + page4_title:"リーチボタン", + page4_txt: + "リーチしたらこのボタンを押してください！
みんなのリーチ数がスクリーン上に表示されます！", + page5_title:"設定ボタン", + page5_txt: "このボタンを押すと番号の表示順や言語を変更できます！", + next: "次へ", + back: "戻る", + close: "閉じる", + }, }; From b232e0aaf3c08ab8cdc91d26560f733b199c1876 Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:12:39 +0900 Subject: [PATCH 6/7] =?UTF-8?q?[feat]introjs=E3=81=AE=E5=B0=8E=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view-user/src/components/Layout/Layout.tsx | 179 +++++---------------- 1 file changed, 41 insertions(+), 138 deletions(-) diff --git a/view-user/src/components/Layout/Layout.tsx b/view-user/src/components/Layout/Layout.tsx index c22a7c5..2cfac5a 100644 --- a/view-user/src/components/Layout/Layout.tsx +++ b/view-user/src/components/Layout/Layout.tsx @@ -1,7 +1,8 @@ import { useLazyQuery, useMutation } from "@apollo/client"; -import { useState, useRef, useLayoutEffect, useEffect } from "react"; +import { useState, useEffect, useRef, useLayoutEffect } from "react"; import { useRouter } from "next/router"; import styles from "./Layout.module.css"; +import "intro.js/minified/introjs.min.css"; import { ReachIcon, PrizesIcon, @@ -28,7 +29,6 @@ import type { GetOneLatestReachLogQuery, } from "@/types/graphql"; import { ja, en } from "@/locales"; -import { TwitterPicker } from "react-color"; const images = [ { name: "crap", src: "/ReactionIcon/crap.png", alt: "crap icon" }, @@ -41,35 +41,6 @@ const images = [ { name: "sad", src: "/ReactionIcon/sad.png", alt: "sad icon" }, ]; -const COLOR_PRESETS = { - MAIN_COLORS: [ - "#FF6900", - "#FCB900", - "#7BDCB5", - "#00D084", - "#8ED1FC", - "#0693E3", - "#333333", - "#EB144C", - "#F78DA7", - "#9900EF", - ], - SUB_COLORS: [ - "#FFD9BE", - "#FDECBD", - "#C2EFDD", - "#C3F5E3", - "#DBF0FE", - "#C0E4F8", - "#B1B1B1", - "#FDECF0", - "#FCDBE3", - "#E4BBFA", - ], - DEFAULT_MAIN_COLOR: "#20A0D8", - DEFAULT_SUB_COLOR: "#C4DEED", -}; - interface LayoutProps { children: React.ReactNode; pageName: string; @@ -82,28 +53,20 @@ interface LayoutProps { const Layout = (props: LayoutProps) => { const router = useRouter(); const t = props.language === "ja" ? ja : en; - - const [isReactionModalOpen, setIsReactionModalOpen] = useState(false); - const [isSettingsModalOpen, setIsSettingsModalOpen] = useState(false); - - const [isSortOrderActive, setIsSortOrderActive] = useState(false); - const { setIsSortedAscending } = props; - - const [isReachModalOpen, setIsReachModalOpen] = useState(false); - const [isReachIconVisible, setReachIconVisible] = useState(true); - - const [mainColor, setMainColor] = useState(COLOR_PRESETS.DEFAULT_MAIN_COLOR); - const [subColor, setSubColor] = useState(COLOR_PRESETS.DEFAULT_SUB_COLOR); - + const [isReactionModalOpen, setIsReactionModalOpen] = + useState(false); + const [isSettingsModalOpen, setIsSettingsModalOpen] = + useState(false); + const [isSortOrderActive, setIsSortOrderActive] = useState(false); + const [isReachModalOpen, setIsReachModalOpen] = useState(false); + const [isReachIconVisible, setReachIconVisible] = useState(true); const [navBarHeight, setNavBarHeight] = useState(); const navRef = useRef(null); - const position = isReachIconVisible ? "29%" : "50%"; - + const position: string = isReachIconVisible ? "29%" : "50%"; const [createStampRecord] = useMutation< CreateOneStampTriggerMutation, CreateOneStampTriggerMutationVariables >(CreateOneStampTriggerDocument); - const [getLatestReachLog] = useLazyQuery( GetOneLatestReachLogDocument, ); @@ -112,8 +75,8 @@ const Layout = (props: LayoutProps) => { CreateOneReachRecordMutation, CreateOneReachRecordMutationVariables >(CreateOneReachRecordDocument); - - // ナビゲーションバーの高さを設定 + 5; + // navBarの高さをstring型で渡す useLayoutEffect(() => { if (navRef.current) { const navHeight = navRef.current.getBoundingClientRect().height; @@ -121,39 +84,27 @@ const Layout = (props: LayoutProps) => { } }, []); - // ローカルストレージから設定を読み込む + // localStorageから状態を読み込む useEffect(() => { - const storedSortOrder = localStorage.getItem("isSortedAscending"); const storedVisibility = localStorage.getItem("isReachIconVisible"); - const storedMainColor = localStorage.getItem("mainColor"); - const storedSubColor = localStorage.getItem("subColor"); + if (storedVisibility !== null) { + setReachIconVisible(storedVisibility === "true"); + } - setIsSortOrderActive( - storedSortOrder !== null ? storedSortOrder === "true" : false, - ); - setReachIconVisible( - storedVisibility !== null ? storedVisibility === "true" : true, - ); - setMainColor(storedMainColor || COLOR_PRESETS.DEFAULT_MAIN_COLOR); - setSubColor(storedSubColor || COLOR_PRESETS.DEFAULT_SUB_COLOR); + const storedSortOrder = localStorage.getItem("isSortedAscending"); + if (storedSortOrder !== null) { + const isSortedAscending = storedSortOrder === "true"; + props.setIsSortedAscending?.(isSortedAscending); + setIsSortOrderActive(isSortedAscending); + } else { + localStorage.setItem("isSortedAscending", "false"); + } }, []); - // 初期設定を適用 - useEffect(() => { - // ソート順を親コンポーネントに伝える - setIsSortedAscending?.(isSortOrderActive); - - // カラーを適用 - document.documentElement.style.setProperty("--main-color", mainColor); - document.documentElement.style.setProperty("--sub-color", subColor); - }, [isSortOrderActive, mainColor, subColor, setIsSortedAscending]); - - // リアクションアイコンがクリックされたときの処理 const handleReactionClick = (name: string) => { createStampRecord({ variables: { name } }); }; - // リーチアイコンがクリックされたときの処理 const handleReachIconClick = async () => { try { const { data } = await getLatestReachLog(); @@ -173,59 +124,28 @@ const Layout = (props: LayoutProps) => { } }; - // ソート順を切り替える const toggleSortOrder = () => { - const newSortOrder = !isSortOrderActive; - localStorage.setItem("isSortedAscending", newSortOrder.toString()); - setIsSortedAscending?.(newSortOrder); - setIsSortOrderActive(newSortOrder); + if (props.setIsSortedAscending) { + const newSortOrder = !props.isSortedAscending; + localStorage.setItem("isSortedAscending", newSortOrder.toString()); + props.setIsSortedAscending(newSortOrder); + setIsSortOrderActive(newSortOrder); + } }; - // 言語を切り替える const toggleLanguage = () => { const newLocale = props.language === "ja" ? "en" : "ja"; router.push(router.pathname, router.asPath, { locale: newLocale }); }; - // メインカラーを変更する - const handleMainColorChange = (color: { hex: string }) => { - const newColor = color.hex; - setMainColor(newColor); - localStorage.setItem("mainColor", newColor); - document.documentElement.style.setProperty("--main-color", newColor); - }; - - // サブカラーを変更する - const handleSubColorChange = (color: { hex: string }) => { - const newColor = color.hex; - setSubColor(newColor); - localStorage.setItem("subColor", newColor); - document.documentElement.style.setProperty("--sub-color", newColor); - }; - - // カラーをリセットする - const resetColors = () => { - setMainColor(COLOR_PRESETS.DEFAULT_MAIN_COLOR); - setSubColor(COLOR_PRESETS.DEFAULT_SUB_COLOR); - localStorage.removeItem("mainColor"); - localStorage.removeItem("subColor"); - document.documentElement.style.setProperty( - "--main-color", - COLOR_PRESETS.DEFAULT_MAIN_COLOR, - ); - document.documentElement.style.setProperty( - "--sub-color", - COLOR_PRESETS.DEFAULT_SUB_COLOR, - ); - }; - - // ページごとのアイコンを設定する const icons = (pageName: string) => { + let icons = []; const commonIcons = [ , isReachIconVisible && ( { isOpen={isReachModalOpen} setIsReachModalOpen={setIsReachModalOpen} onClick={handleReachIconClick} + id="ReachIcon" /> ), , ]; - switch (pageName) { case "/": - return [, ...commonIcons]; + icons = [, commonIcons]; + break; case "/prizes": - return [, ...commonIcons]; + icons = [, commonIcons]; + break; default: - return [, ...commonIcons]; + icons = [, commonIcons]; } + return icons.filter(Boolean); }; - const iconElements = icons(props.pageName).filter(Boolean); + const iconElements = icons(props.pageName); return (
@@ -300,27 +224,6 @@ const Layout = (props: LayoutProps) => { {t.settingsModal.ascending}
-
-

メインカラー

- -
-
-

サブカラー

- -
-
- -
From a22417e120b90a94a46bb0b80226fd6d1c5a47ab Mon Sep 17 00:00:00 2001 From: Hayate Akiyama <24.h.akiyama.nutfes@gmail.com> Date: Wed, 4 Dec 2024 18:26:52 +0900 Subject: [PATCH 7/7] =?UTF-8?q?[fix]=E3=82=B3=E3=83=BC=E3=83=89=E3=82=92?= =?UTF-8?q?=E6=95=B4=E3=81=88=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- view-user/src/components/Layout/Layout.tsx | 2 +- .../components/common/Header/Header.module.css | 4 ++-- .../src/components/common/Header/Header.tsx | 18 ++++++------------ view-user/src/locales/en.ts | 10 +++++----- view-user/src/locales/ja.ts | 10 +++++----- 5 files changed, 19 insertions(+), 25 deletions(-) diff --git a/view-user/src/components/Layout/Layout.tsx b/view-user/src/components/Layout/Layout.tsx index 2cfac5a..493b10a 100644 --- a/view-user/src/components/Layout/Layout.tsx +++ b/view-user/src/components/Layout/Layout.tsx @@ -165,7 +165,7 @@ const Layout = (props: LayoutProps) => { ]; switch (pageName) { case "/": - icons = [, commonIcons]; + icons = [, commonIcons]; break; case "/prizes": icons = [, commonIcons]; diff --git a/view-user/src/components/common/Header/Header.module.css b/view-user/src/components/common/Header/Header.module.css index e483859..205dc2b 100644 --- a/view-user/src/components/common/Header/Header.module.css +++ b/view-user/src/components/common/Header/Header.module.css @@ -38,9 +38,9 @@ max-width: 100vw !important; } -.customTooltip *{ +.customTooltip * { border-color: var(--main-color) !important; text-shadow: none !important; color: var(--main-color) !important; background-color: var(--sub-color) !important; -} \ No newline at end of file +} diff --git a/view-user/src/components/common/Header/Header.tsx b/view-user/src/components/common/Header/Header.tsx index da6331a..a21b502 100644 --- a/view-user/src/components/common/Header/Header.tsx +++ b/view-user/src/components/common/Header/Header.tsx @@ -2,7 +2,7 @@ import introJs from "intro.js"; import styles from "./Header.module.css"; import { useRouter } from "next/router"; import { IoHelpCircleOutline } from "react-icons/io5"; -import { useState, useEffect} from "react"; +import { useState, useEffect } from "react"; import BingoLogo from "public/logo_bingo.svg"; import { ja, en } from "@/locales"; @@ -46,19 +46,19 @@ const Header = () => { position: "bottom-middle-aligned", }, { - title:t.helpDescription.page3_title, + title: t.helpDescription.page3_title, intro: t.helpDescription.page3_txt, element: "#ReactionsIcon", position: "bottom-middle-aligned", }, { - title:t.helpDescription.page4_title, + title: t.helpDescription.page4_title, intro: t.helpDescription.page4_txt, element: "#ReachIcon", position: "bottom-middle-aligned", }, { - title:t.helpDescription.page5_title, + title: t.helpDescription.page5_title, intro: t.helpDescription.page5_txt, element: "#SettingsIcon", position: "bottom-middle-aligned", @@ -78,14 +78,8 @@ const Header = () => { return (
- router.push("/")} - /> -
diff --git a/view-user/src/locales/en.ts b/view-user/src/locales/en.ts index 9af9502..d798687 100644 --- a/view-user/src/locales/en.ts +++ b/view-user/src/locales/en.ts @@ -18,19 +18,19 @@ export const en = { next: "next", }, helpDescription: { - page1_title:"Wellcome!!", + page1_title: "Wellcome!!", page1_txt: "I will explain how to use this app! !
You can check the winning numbers in the bingo tournament.", - page2_title:"Prizes Button", + page2_title: "Prizes Button", page2_txt: "Click this button to check your prize!
The winning status will be updated from time to time, so please check the prizes you want!", - page3_title:"Reactions Button", + page3_title: "Reactions Button", page3_txt: "When you press this button, a reaction stamp will be displayed on the screen on stage! !
Share the fun in real time!", - page4_title:"Reach Button", + page4_title: "Reach Button", page4_txt: "Please press this button when you reach it!
Everyone's reach number will be displayed on the screen!", - page5_title:"Settings Button", + page5_title: "Settings Button", page5_txt: "Press this button to change the number display order and language!", next: "Next", diff --git a/view-user/src/locales/ja.ts b/view-user/src/locales/ja.ts index ce758e7..454a534 100644 --- a/view-user/src/locales/ja.ts +++ b/view-user/src/locales/ja.ts @@ -18,19 +18,19 @@ export const ja = { next: "次へ", }, helpDescription: { - page1_title:"ようこそ！！", + page1_title: "ようこそ！！", page1_txt: "このアプリの使い方を説明します！！
ビンゴ大会で当選した番号を確認できます。", - page2_title:"景品ボタン", + page2_title: "景品ボタン", page2_txt: "このボタンを押すと景品が確認できます！
当選状況が随時更新されるのでほしい景品を確認してみてください！", - page3_title:"リアクションボタン", + page3_title: "リアクションボタン", page3_txt: "このボタンを押すとリアクションスタンプがステージ上のスクリーンに表示されます！!
リアルタイムで楽しいを共有しましょう！", - page4_title:"リーチボタン", + page4_title: "リーチボタン", page4_txt: "リーチしたらこのボタンを押してください！
みんなのリーチ数がスクリーン上に表示されます！", - page5_title:"設定ボタン", + page5_title: "設定ボタン", page5_txt: "このボタンを押すと番号の表示順や言語を変更できます！", next: "次へ", back: "戻る",