;
13 | }> = ({ chatView }) => {
14 | const isDuringGame = useSelector(
15 | (state: RootState) => state.game.isDuringGame,
16 | );
17 | const gameColor = useSelector(
18 | (state: RootState) => state.game.entity?.color ?? 'var(--bg-color)',
19 | );
20 | const messages = useSelector((state: RootState) => state.game.messages);
21 |
22 | const chatContainer = css`
23 | grid-area: chat;
24 | overflow-y: auto;
25 | margin-bottom: 18px;
26 | display: flex;
27 | flex-direction: column;
28 | align-items: flex-end;
29 | flex-flow: column nowrap;
30 | padding-top: 80px;
31 | scrollbar-width: none;
32 |
33 | &::-webkit-scrollbar {
34 | display: none;
35 | }
36 |
37 | &::before {
38 | content: '';
39 | position: absolute;
40 | /* top: 0; */
41 | background: linear-gradient(
42 | 0deg,
43 | transparent,
44 | ${isDuringGame ? gameColor : 'var(--bg-color)'}
45 | );
46 | height: 80px;
47 | display: block;
48 | width: 140px;
49 | transform: translateY(-80px);
50 | transition: 0.2s;
51 | animation: 1s ease 0s 1 normal fadein;
52 | }
53 |
54 | & > :first-of-type {
55 | margin-top: auto !important;
56 | }
57 | `;
58 |
59 | return (
60 |
66 | {messages.map((message: MessageObject) => (
67 |
68 | ))}
69 |
70 | );
71 | };
72 |
73 | export default Chat;
74 |
--------------------------------------------------------------------------------
/src/modules/game/chat/chatcontainer.matchedtext.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { Messages } from 'utils/types';
4 | import { FC } from 'react';
5 |
6 | const MatchedText: FC<{
7 | messages: Messages;
8 | }> = ({ messages }) => {
9 | const matchedName = messages.find(
10 | (msg) => msg.type === 'answer' && msg.matched,
11 | );
12 |
13 | return (
14 |
15 |
21 | {matchedName?.type === 'answer' && matchedName.name}
22 |
23 |
24 | あたり！
25 |
26 | );
27 | };
28 |
29 | export default MatchedText;
30 |
--------------------------------------------------------------------------------
/src/modules/game/chat/chatcontainer.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useEffect } from 'react';
2 |
3 | import { useSelector, useDispatch } from 'react-redux';
4 | import { RootState } from 'ducks/rootReducer';
5 | import { gameSlice } from 'ducks/game';
6 | import { listenMessage } from 'utils/database';
7 |
8 | import useScrollDiv from 'hooks/use-scrolldiv';
9 | import useMatchedAnimation from 'modules/game/chat/use-matchedanimation';
10 |
11 | import MatchedText from 'modules/game/chat/chatcontainer.matchedtext';
12 | import Chat from 'modules/game/chat/chatcontainer.chat';
13 |
14 | const ChatContainer: FC = () => {
15 | const dispatch = useDispatch();
16 | const { pullMessage } = gameSlice.actions;
17 |
18 | const gameKey = useSelector((state: RootState) => state.game.key);
19 | const gameColor = useSelector(
20 | (state: RootState) => state.game.entity?.color ?? 'var(--bg-color)',
21 | );
22 | const isDuringGame = useSelector(
23 | (state: RootState) => state.game.isDuringGame,
24 | );
25 | const messages = useSelector((state: RootState) => state.game.messages);
26 |
27 | const [chatView, scrollChat] = useScrollDiv();
28 | const matchedAnimation = useMatchedAnimation(gameColor, scrollChat);
29 |
30 | useEffect(() => {
31 | listenMessage(gameKey, (message) => {
32 | if (message.type === 'hint') {
33 | setTimeout(() => scrollChat(), 500);
34 | }
35 | if (message.type === 'answer' && message.matched) {
36 | matchedAnimation();
37 | }
38 |
39 | dispatch(pullMessage(message));
40 | setTimeout(() => scrollChat(), 150);
41 | });
42 | }, [gameKey, matchedAnimation, scrollChat, dispatch, pullMessage]);
43 |
44 | useEffect(() => {
45 | if (!isDuringGame) setTimeout(() => scrollChat(), 400);
46 | }, [isDuringGame, scrollChat]);
47 |
48 | return (
49 | <>
50 |
51 |
52 |
53 | );
54 | };
55 |
56 | export default ChatContainer;
57 |
--------------------------------------------------------------------------------
/src/modules/game/chat/message.content.scores.notice.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC, ReactNode } from 'react';
4 |
5 | const MessageNotice: FC<{
6 | animationDelay: number;
7 | background: string;
8 | children: ReactNode;
9 | }> = ({ animationDelay, background, children }) => (
10 |
18 | {children}
19 |
20 | );
21 |
22 | export default MessageNotice;
23 |
--------------------------------------------------------------------------------
/src/modules/game/chat/message.content.scores.tsx:
--------------------------------------------------------------------------------
1 | import MessageNotice from 'modules/game/chat/message.content.scores.notice';
2 | import { MessageNoticeObj } from 'utils/types';
3 | import { FC } from 'react';
4 |
5 | const MessageScores: FC<{
6 | notice: MessageNoticeObj;
7 | }> = ({ notice }) => (
8 | <>
9 | {Object.keys(notice).map((noticeType) => {
10 | switch (noticeType) {
11 | case 'a_score':
12 | return (
13 |
18 | スコア +{notice && notice[noticeType]}
19 |
20 | );
21 | break;
22 |
23 | case 'b_update_fastest':
24 | return (
25 |
30 | {notice && notice[noticeType]}
31 | 秒で回答
32 |
33 | 最速記録更新
34 |
35 | );
36 | break;
37 |
38 | case 'c_update_streak':
39 | return (
40 |
45 | {notice && notice[noticeType]}連勝中
46 |
47 | );
48 | break;
49 |
50 | case 'd_update_max_streak':
51 | return (
52 | notice &&
53 | notice.d_update_max_streak &&
54 | notice.d_update_max_streak !== 1 && (
55 |
60 | 連勝記録更新
61 |
62 | )
63 | );
64 | break;
65 |
66 | default:
67 | return true;
68 | break;
69 | }
70 | })}
71 |
72 | );
73 |
74 | export default MessageScores;
75 |
--------------------------------------------------------------------------------
/src/modules/game/chat/message.content.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 |
4 | import { MessageObject } from 'utils/types';
5 | import { FC, ReactNode } from 'react';
6 |
7 | import { useSelector } from 'react-redux';
8 | import { RootState } from 'ducks/rootReducer';
9 |
10 | import { FaTimes } from 'react-icons/fa';
11 | import MessageScores from 'modules/game/chat/message.content.scores';
12 |
13 | const MessageContent: FC<{
14 | message: MessageObject;
15 | children: ReactNode;
16 | }> = ({ message, children }) => {
17 | const gameColor = useSelector(
18 | (state: RootState) => state.game.entity?.color ?? 'var(--bg-color)',
19 | );
20 |
21 | const messageContent = css`
22 | ${message.type === 'answer' &&
23 | !message.matched &&
24 | 'animation: 0.4s ease 0s 1 normal redblink;'}
25 | color: var(--message-color);
26 | ${message.type !== 'answer' && 'color: var(--black);'}
27 | border-color: var(--message-color) !important;
28 | `;
29 | const hintHeading = css`
30 | color: ${gameColor};
31 | `;
32 | const matchIconStyle = css`
33 | margin-right: 4px;
34 | `;
35 |
36 | return (
37 |
38 | {message.type === 'hint' && (
39 |
40 | ヒント
41 |
42 |
43 | )}
44 |
45 | {message.type === 'answer' &&
46 | (message.matched ? (
47 |
48 | ) : (
49 |
50 | ))}
51 |
52 | {children}
53 |
54 | {message.type === 'score' && message.notice && (
55 |
56 | )}
57 |
58 | );
59 | };
60 |
61 | export default MessageContent;
62 |
--------------------------------------------------------------------------------
/src/modules/game/chat/message.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC, useCallback, useEffect, useState } from 'react';
4 |
5 | import { MessageObject } from 'utils/types';
6 | import MessageContent from 'modules/game/chat/message.content';
7 | import useAudio from 'hooks/use-audio';
8 |
9 | const Message: FC<{
10 | message: MessageObject;
11 | }> = ({ message }) => {
12 | const isDisabled =
13 | (message.type === 'answer' && !message.matched) ||
14 | (message.type !== 'answer' &&
15 | message.type !== 'score' &&
16 | message.type !== 'end');
17 |
18 | const messageContainer = css`
19 | color: var(--message-color);
20 | display: flex;
21 | justify-content: center;
22 | align-items: end;
23 | flex-direction: column;
24 | margin: 8px 0;
25 | transition: 0.2s, visibility 0s;
26 | ${message.type === 'answer' && message.matched
27 | ? 'transform-origin: center right;animation: 0.3s ease 0s 1 normal message-added-matched;'
28 | : 'transform-origin: bottom right;animation: 0.2s ease 0s 1 normal message-added;'}
29 | `;
30 | const messageName = css`
31 | font-size: 13px;
32 | font-weight: 700;
33 | margin-right: 23px;
34 | `;
35 |
36 | const playSE = useAudio();
37 | const [isPlayed, setIsPlayed] = useState(false);
38 |
39 | const playSEOnce = useCallback(
40 | (path: string) => {
41 | if (!isPlayed) {
42 | playSE(path);
43 | setIsPlayed(true);
44 | }
45 | },
46 | [isPlayed, playSE],
47 | );
48 |
49 | useEffect(() => {
50 | switch (message.type) {
51 | case 'start':
52 | playSEOnce('start');
53 | break;
54 |
55 | case 'hint':
56 | setTimeout(() => {
57 | playSEOnce('hint');
58 | }, 400);
59 | break;
60 |
61 | case 'answer':
62 | if (message.matched) {
63 | playSEOnce('correct');
64 | } else {
65 | playSEOnce('incorrect');
66 | }
67 | break;
68 |
69 | case 'end':
70 | if (message.value.indexOf('中止') !== -1) {
71 | playSEOnce('cancel');
72 | } else {
73 | playSEOnce('end');
74 | }
75 | break;
76 |
77 | default:
78 | break;
79 | }
80 | }, [message, playSEOnce]);
81 |
82 | return (
83 |
90 | {message.type === 'answer' && (
91 | {message.name}
92 | )}
93 |
94 | {message.value
95 | .split(/(\n)/g)
96 | // eslint-disable-next-line react/no-array-index-key
97 | .map((t, index) => (t === '\n' ?
: t))}
98 |
99 |
100 | );
101 | };
102 |
103 | export default Message;
104 |
--------------------------------------------------------------------------------
/src/modules/game/chat/use-matchedanimation.ts:
--------------------------------------------------------------------------------
1 | const useMatchedAnimation =
2 | (gameColor: string, scrollChat: () => void) => () => {
3 | document.body.classList.add('matched');
4 |
5 | setTimeout(() => {
6 | document.body.style.backgroundColor = gameColor;
7 | document
8 | .querySelector("meta[name='theme-color']")
9 | ?.setAttribute('content', gameColor);
10 | }, 10);
11 |
12 | setTimeout(() => {
13 | document.body.classList.remove('matched');
14 | document.body.style.backgroundColor = 'var(--bg-color)';
15 | document
16 | .querySelector("meta[name='theme-color']")
17 | ?.setAttribute('content', '#f2efe2');
18 | document
19 | .querySelector("meta[name='theme-color'][media*='dark']")
20 | ?.setAttribute('content', '#0b141c');
21 | }, 800);
22 |
23 | setTimeout(() => scrollChat(), 900);
24 | };
25 |
26 | export default useMatchedAnimation;
27 |
--------------------------------------------------------------------------------
/src/modules/game/game.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC } from 'react';
4 |
5 | import { useSelector } from 'react-redux';
6 | import { RootState } from 'ducks/rootReducer';
7 |
8 | import Questioner from 'modules/game/questioner/questioner';
9 | import Chat from 'modules/game/chat/chatcontainer';
10 | import AnswerInput from 'modules/game/answerinput/answerinput';
11 |
12 | import useFitScreenHeight from 'modules/game/use-fitScreenHeight';
13 | import useGameStarted from 'modules/game/use-gamestarted';
14 |
15 | const Game: FC<{
16 | setHome: () => void;
17 | }> = ({ setHome }) => {
18 | const isDuringGame = useSelector(
19 | (state: RootState) => state.game.isDuringGame,
20 | );
21 |
22 | const finishGame = useGameStarted();
23 |
24 | const gameHeight = useFitScreenHeight();
25 | const gameWrapper = css`
26 | height: ${gameHeight}px;
27 | display: flex;
28 | justify-content: center;
29 | align-items: center;
30 | --message-color: ${isDuringGame ? 'var(--black)' : 'var(--primary-color)'};
31 | `;
32 | const gameContent = css`
33 | height: ${gameHeight - 20}px;
34 | max-height: 600px;
35 | padding: 0 30px;
36 | width: 730px;
37 | max-width: 100vw;
38 | display: grid;
39 | grid-template-columns: 1fr minmax(140px, 40%);
40 | grid-template-rows: 1fr ${isDuringGame ? '49px' : '118px'};
41 | grid-template-areas:
42 | 'questioner chat'
43 | 'answerinput answerinput';
44 |
45 | ${isDuringGame &&
46 | css`
47 | @media (min-width: 768px) {
48 | grid-template-areas:
49 | 'questioner chat'
50 | 'questioner answerinput';
51 | }
52 | `}
53 | `;
54 |
55 | return (
56 |
57 |
58 |
finishGame()} />
59 |
60 |
61 |
62 |
div > span {
21 | animation: 8s linear 0s infinite alternate ${keyframes`
22 | 0% {
23 | transform: rotateY(-50deg);
24 | }
25 | 100% {
26 | transform: rotateY(50deg);
27 | }
28 | `};
29 | }
30 |
31 | & > div > span > span:last-of-type {
32 | filter: drop-shadow(3px 10px 16px rgba(50, 8, 10, 0.1));
33 | }
34 |
35 | & > div > span > span:not(:first-of-type) {
36 | filter: brightness(0.72);
37 | }
38 |
39 | & svg {
40 | max-height: 26vh;
41 | width: 100%;
42 | padding: 10px;
43 |
44 | & > *:not(defs) {
45 | animation: 1s ease 0.7s 1 both ${keyframes`
46 | 0% {
47 | opacity:0;
48 | transform: translateY(220px);
49 | }
50 | 1% {
51 | opacity:1;
52 | }
53 | 45% {
54 | transform: translateY(-70px);
55 | }
56 | 55% {
57 | transform: translateY(0);
58 | }
59 | 75% {
60 | transform: translateY(-25px);
61 | }
62 | 85% {
63 | transform: translateY(0);
64 | }
65 | 93% {
66 | transform: translateY(-10px);
67 | }
68 | 100% {
69 | transform: translateY(0);
70 | }
71 | `};
72 |
73 | &:nth-of-type(2n) {
74 | animation-delay: 0.8s;
75 | transform: translateZ(2000px);
76 | }
77 | &:nth-of-type(5n) {
78 | animation-delay: 0.9s;
79 | }
80 | }
81 | }
82 | `}
83 | >
84 |
94 |
95 |
96 |
41 | {answer}
42 | {prefectureABC[answer]}
43 |
44 |
45 |
46 | );
47 | };
48 |
49 | export default AnswerDisplay;
50 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/bigquestion.circle.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable react-hooks/exhaustive-deps */
2 | /** @jsxImportSource @emotion/react */
3 | import { css, keyframes } from '@emotion/react';
4 | import { FC, useMemo } from 'react';
5 | import { useSelector } from 'react-redux';
6 | import { RootState } from 'ducks/rootReducer';
7 |
8 | const BigQuestionCircle: FC<{
9 | size: number;
10 | }> = ({ size }) => {
11 | const gameColor = useSelector(
12 | (state: RootState) => state.game.entity?.color ?? 'var(--bg-color)',
13 | );
14 | const currentQuesIndex = useSelector(
15 | (state: RootState) => state.game.currentQuesIndex,
16 | );
17 |
18 | const circleBg = currentQuesIndex > 3 ? 'var(--red)' : gameColor;
19 | const circleEngaged = currentQuesIndex > 3 ? 'var(--black)' : 'var(--red)';
20 |
21 | const animation = useMemo(
22 | () => css`
23 | animation: 1.5s linear 0s 1 normal ${keyframes`
24 | 0% {
25 | font-size: ${currentQuesIndex};
26 | background-image: conic-gradient(${circleEngaged} 0deg, ${circleBg} 0deg);
27 | }
28 | 5% {
29 | background-image: conic-gradient(${circleEngaged} 18deg, ${circleBg} 18deg);
30 | }
31 | 10% {
32 | background-image: conic-gradient(${circleEngaged} 36deg, ${circleBg} 36deg);
33 | }
34 | 15% {
35 | background-image: conic-gradient(${circleEngaged} 54deg, ${circleBg} 54deg);
36 | }
37 | 20% {
38 | background-image: conic-gradient(${circleEngaged} 72deg, ${circleBg} 72deg);
39 | }
40 | 25% {
41 | background-image: conic-gradient(${circleEngaged} 90deg, ${circleBg} 90deg);
42 | }
43 | 30% {
44 | background-image: conic-gradient(${circleEngaged} 108deg, ${circleBg} 108deg);
45 | }
46 | 35% {
47 | background-image: conic-gradient(${circleEngaged} 126deg, ${circleBg} 126deg);
48 | }
49 | 40% {
50 | background-image: conic-gradient(${circleEngaged} 144deg, ${circleBg} 144deg);
51 | }
52 | 45% {
53 | background-image: conic-gradient(${circleEngaged} 162deg, ${circleBg} 162deg);
54 | }
55 | 50% {
56 | background-image: conic-gradient(${circleEngaged} 180deg, ${circleBg} 180deg);
57 | }
58 | 55% {
59 | background-image: conic-gradient(${circleEngaged} 198deg, ${circleBg} 198deg);
60 | }
61 | 60% {
62 | background-image: conic-gradient(${circleEngaged} 216deg, ${circleBg} 216deg);
63 | }
64 | 65% {
65 | background-image: conic-gradient(${circleEngaged} 234deg, ${circleBg} 234deg);
66 | }
67 | 70% {
68 | background-image: conic-gradient(${circleEngaged} 252deg, ${circleBg} 252deg);
69 | }
70 | 75% {
71 | background-image: conic-gradient(${circleEngaged} 270deg, ${circleBg} 270deg);
72 | }
73 | 80% {
74 | background-image: conic-gradient(${circleEngaged} 288deg, ${circleBg} 288deg);
75 | }
76 | 85% {
77 | background-image: conic-gradient(${circleEngaged} 306deg, ${circleBg} 306deg);
78 | }
79 | 90% {
80 | background-image: conic-gradient(${circleEngaged} 324deg, ${circleBg} 324deg);
81 | }
82 | 95% {
83 | background-image: conic-gradient(${circleEngaged} 342deg, ${circleBg} 342deg);
84 | }
85 | 100% {
86 | background-image: conic-gradient(${circleEngaged} 360deg, ${circleBg} 360deg);
87 | }
88 | `};
89 | `,
90 | [circleEngaged, circleBg, currentQuesIndex],
91 | );
92 |
93 | return (
94 | <>
95 |
109 |
123 |
124 | );
125 | };
126 |
127 | export default BigQuestionCircle;
128 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/bigquestion.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC, useEffect, useMemo, useRef, useState } from 'react';
4 | import Ztext from 'react-ztext';
5 |
6 | import useFitFontSizeToWidth from 'modules/game/questioner/use-fitfontsizetowidth';
7 |
8 | import BigQuestionCircle from 'modules/game/questioner/bigquestion.circle';
9 | import { Mode } from 'utils/types';
10 | import useCensorship from './use-censorship';
11 |
12 | const BigQuestion: FC<{
13 | displayQuestion: string;
14 | mode: Mode;
15 | }> = ({ displayQuestion = 'Unknown', mode }) => {
16 | const fontSize = useFitFontSizeToWidth();
17 |
18 | const censorship = useCensorship();
19 | const censoredDisplayQuestion = useMemo(
20 | () => censorship(displayQuestion, false),
21 | [displayQuestion, censorship],
22 | );
23 |
24 | const [size, setSize] = useState(118);
25 | useEffect(() => {
26 | if (window.innerWidth > 320) setSize(140);
27 | if (window.innerWidth > 767) setSize(200);
28 | }, []);
29 |
30 | const spanDom = useRef(null);
31 | useEffect(() => {
32 | if (spanDom.current) {
33 | const nodeList = spanDom.current.querySelectorAll('div > span > span');
34 | Object.keys(nodeList).forEach((key) => {
35 | nodeList[Number(key)].innerHTML = censoredDisplayQuestion;
36 | });
37 |
38 | const nodeList2 = spanDom.current.querySelectorAll('div > span');
39 | Object.keys(nodeList2).forEach((key) => {
40 | nodeList2[Number(key)].classList.remove('bigquestion-animation');
41 | setTimeout(() => {
42 | nodeList2[Number(key)].classList.add('bigquestion-animation');
43 | }, 30);
44 | });
45 | }
46 | }, [censoredDisplayQuestion, censorship]);
47 |
48 | const hiderPositions = ['left', 'top', 'bottom', 'right'];
49 | const hiderPos = useMemo(
50 | () => hiderPositions[Math.floor(Math.random() * hiderPositions.length)],
51 | // eslint-disable-next-line react-hooks/exhaustive-deps
52 | [displayQuestion],
53 | );
54 |
55 | const isMosaicEnabled = useMemo(
56 | () =>
57 | mode === 'veryveryveryhell' && !['1', '2', '3'].includes(displayQuestion),
58 | [mode, displayQuestion],
59 | );
60 |
61 | const hider = isMosaicEnabled
62 | ? css`
63 | position: relative;
64 | `
65 | : css``;
66 |
67 | const mosaicWrapper = css`
68 | content: '';
69 | display: flex;
70 | flex-wrap: wrap;
71 | overflow: hidden;
72 | background: rgba(255, 255, 255, 0.025);
73 | inset: 15%;
74 | ${hiderPos}: 42%;
75 | opacity: 1;
76 | position: absolute;
77 | z-index: 4800;
78 | /* transform: translateZ(6px); */
79 | transition: 0.2s;
80 | animation: wiggle 0.8s infinite;
81 |
82 | @keyframes wiggle {
83 | 0% {
84 | transform: translate(0px, 0px) rotateZ(0deg);
85 | }
86 | 25% {
87 | transform: translate(4px, 4px) rotateZ(4deg);
88 | }
89 | 50% {
90 | transform: translate(0px, 4px) rotateZ(0deg);
91 | }
92 | 75% {
93 | transform: translate(4px, 0px) rotateZ(-4deg);
94 | }
95 | 100% {
96 | transform: translate(0px, 0px) rotateZ(0deg);
97 | }
98 | }
99 |
100 | & > span {
101 | display: block;
102 | backdrop-filter: blur(60px);
103 | width: 33.33%;
104 | aspect-ratio: 1 / 1;
105 | }
106 | `;
107 |
108 | const bigQuestionContainer = css`
109 | width: ${size}px;
110 | height: ${size}px;
111 | display: inline-flex;
112 | justify-content: center;
113 | align-items: center;
114 | white-space: nowrap;
115 | word-break: keep-all;
116 | font-weight: 900;
117 | color: var(--white);
118 | margin-top: 17px;
119 | position: relative;
120 | ${hider}
121 | `;
122 |
123 | const layersStyle = css`
124 | /*& div > span {
125 | animation: 1.5s linear 0s infinite normal rotate-horizontal;
126 | }*/
127 |
128 | & div > span > span:not(:first-of-type) {
129 | color: var(--black);
130 | }
131 | `;
132 |
133 | return (
134 |
135 | {isMosaicEnabled && (
136 |
137 | {Array(16)
138 | .fill(null)
139 | .map((_, index) => (
140 | // eslint-disable-next-line react/no-array-index-key
141 |
142 | ))}
143 |
144 | )}
145 |
146 |
147 |
160 | {censoredDisplayQuestion}
161 |
162 |
163 |
30 |
41 |
42 | );
43 | };
44 |
45 | export default GameCancelOnReady;
46 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/gameready.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC } from 'react';
4 | import { modesDisplay, modesCaption, Mode } from 'utils/types';
5 |
6 | const GameReady: FC<{
7 | startBy: string;
8 | mode: Mode;
9 | count: number;
10 | }> = ({ startBy, mode, count }) => {
11 | const gameReadyWrapper = css`
12 | animation: 0.4s ease 0s 1 normal blink;
13 | `;
14 | const startHeading = css`
15 | text-align: center;
16 | margin: 0;
17 | color: var(--white);
18 | font-size: 30px;
19 | font-weight: 900;
20 | `;
21 | const modeHeading = css`
22 | text-align: center;
23 | margin: 10px 0 22px;
24 | color: var(--black);
25 | font-size: 30px;
26 | font-weight: 900;
27 | `;
28 | const modeCaption = css`
29 | font-size: 16px;
30 | display: block;
31 | margin-top: 6px;
32 | `;
33 | const usersWrapper = css`
34 | color: var(--black);
35 | margin-bottom: 22px;
36 | `;
37 |
38 | return (
39 | <>
40 |
41 |
42 | {startBy}が
43 | ゲームを開始!
44 |
45 |
46 | {modesDisplay[mode]}
47 | {modesCaption[mode]}
48 |
49 |
50 |
51 | {count}人の参加者
52 |
53 |
54 | );
55 | };
56 |
57 | export default GameReady;
58 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/questioner.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC } from 'react';
4 | import { useSelector } from 'react-redux';
5 | import { RootState } from 'ducks/rootReducer';
6 | import { FinishGameFunction, modesConvert, modesDetail } from 'utils/types';
7 | import useQuestionTimer from 'modules/game/questioner/use-questiontimer';
8 |
9 | import BigQuestion from 'modules/game/questioner/bigquestion';
10 | import QuestionList from 'modules/game/questioner/questionlistcontainer';
11 | import AnswerDisplay from 'modules/game/questioner/answerdisplay';
12 | import GameReady from 'modules/game/questioner/gameready';
13 | import GameCancelOnReady from 'modules/game/questioner/gamecancelonready';
14 |
15 | const Questioner: FC<{
16 | finishGame: FinishGameFunction;
17 | }> = ({ finishGame }) => {
18 | const gameObj = useSelector((state: RootState) => state.game.entity);
19 | const isDuringGame = useSelector(
20 | (state: RootState) => state.game.isDuringGame,
21 | );
22 | const currentQuesIndex = useSelector(
23 | (state: RootState) => state.game.currentQuesIndex,
24 | );
25 |
26 | useQuestionTimer(finishGame);
27 |
28 | const displayQuestions =
29 | gameObj &&
30 | gameObj.questions.map((question) =>
31 | isDuringGame
32 | ? modesConvert[gameObj.mode](question)
33 | : modesConvert.easy(question),
34 | );
35 |
36 | const questionerContainer = css`
37 | grid-area: questioner;
38 | width: 100%;
39 | padding-right: 10px;
40 | display: flex;
41 | flex-direction: column;
42 | align-items: center;
43 | justify-content: center;
44 | `;
45 | const modeDisp = css`
46 | font-size: 15px;
47 | font-weight: 700;
48 | text-align: center;
49 | color: var(--black);
50 | `;
51 |
52 | return (
53 |
54 | {isDuringGame && (
55 |
56 | {!!gameObj && modesDetail[gameObj.mode]}
57 |
58 | )}
59 |
60 | {!!gameObj && (
61 |
66 | )}
67 |
68 | {isDuringGame && !!displayQuestions && (
69 |
2
73 | ? displayQuestions[currentQuesIndex - 1]
74 | : gameObj.questions[currentQuesIndex - 1]
75 | }
76 | />
77 | )}
78 |
79 | {!!gameObj && }
80 |
81 | {!isDuringGame && !!gameObj?.answer && (
82 |
83 | )}
84 |
85 | {!!displayQuestions &&
86 | gameObj.mode !== 'veryveryhell' &&
87 | gameObj.mode !== 'veryveryveryhell' && (
88 |
92 | )}
93 | {!!displayQuestions &&
94 | !isDuringGame &&
95 | (gameObj.mode === 'veryveryhell' ||
96 | gameObj.mode === 'veryveryveryhell') && (
97 |
101 | )}
102 |
59 |
60 | {/* isDuringGame && (
61 |
67 | ({30 - current})
68 |
69 | ) */}
70 |
71 | );
72 | };
73 |
74 | export default QuestionListContainer;
75 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/use-censorship.ts:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 |
3 | const useCensorship = () =>
4 | useCallback((question: string, show: boolean): string => {
5 | const pattern = /\{\{([^}]+)\}\}/g;
6 |
7 | if (!show)
8 | return question.replace(pattern, (match, p1: string) =>
9 | '█'.repeat(p1.length),
10 | );
11 |
12 | return question.replace(pattern, (match, p1: string) => p1);
13 | }, []);
14 |
15 | export default useCensorship;
16 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/use-fitfontsizetowidth.ts:
--------------------------------------------------------------------------------
1 | type FontSizeVw = `${string}vw`;
2 |
3 | const useFitFontSizeToWidth =
4 | () =>
5 | (width: number, text: string, letterSpacing = 1): FontSizeVw => {
6 | const wrapper = width / window.innerWidth;
7 | const textLength = text.length > 2 ? text.length : 2;
8 | const fontSizeVw = (wrapper / (textLength * letterSpacing)) * 100;
9 |
10 | return `${fontSizeVw.toString()}vw`;
11 | };
12 |
13 | export default useFitFontSizeToWidth;
14 |
--------------------------------------------------------------------------------
/src/modules/game/questioner/use-questiontimer.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useEffect, useRef } from 'react';
2 | import { useDispatch, useSelector } from 'react-redux';
3 | import { RootState } from 'ducks/rootReducer';
4 | import { gameSlice } from 'ducks/game';
5 | import { getSummary, updateSummaryFromKey } from 'utils/summary';
6 | import { pushMessage } from 'utils/database';
7 | import { FinishGameFunction, gameTimerSeconds } from 'utils/types';
8 | import useAudio from 'hooks/use-audio';
9 |
10 | const useQuestionTimer = (finishGame: FinishGameFunction) => {
11 | const dispatch = useDispatch();
12 | const { proceedQuesIndex } = gameSlice.actions;
13 | const gameObj = useSelector((state: RootState) => state.game.entity);
14 | const gameKey = useSelector((state: RootState) => state.game.key);
15 | const messages = useSelector((state: RootState) => state.game.messages);
16 | const isDuringGame = useSelector(
17 | (state: RootState) => state.game.isDuringGame,
18 | );
19 | const currentQuesIndex = useSelector(
20 | (state: RootState) => state.game.currentQuesIndex,
21 | );
22 |
23 | const timerId = useRef();
24 | const clearTimer = useCallback(() => clearInterval(timerId.current), []);
25 |
26 | const playSE = useAudio();
27 |
28 | useEffect(() => {
29 | if (isDuringGame) {
30 | timerId.current = setInterval(() => {
31 | dispatch(proceedQuesIndex());
32 | playSE('question');
33 | }, gameTimerSeconds * 1000);
34 | }
35 |
36 | return clearTimer;
37 | }, [isDuringGame, dispatch, proceedQuesIndex, clearTimer, playSE]);
38 |
39 | useEffect(() => {
40 | if (currentQuesIndex === 2) {
41 | const summary = getSummary();
42 | if (summary && summary.lastPlay !== gameObj?.created) {
43 | updateSummaryFromKey('playCount', (count) => count + 1);
44 | updateSummaryFromKey('lastPlay', gameObj?.created ?? Date.now());
45 | }
46 | }
47 |
48 | if (
49 | gameObj &&
50 | currentQuesIndex === gameObj.questions.length &&
51 | gameObj.questions.length !== 0 &&
52 | messages.find((msg) => msg.type === 'end') === undefined
53 | ) {
54 | pushMessage(gameKey, {
55 | type: 'end',
56 | value: '誰も答えられませんでした',
57 | });
58 | finishGame();
59 | clearTimer();
60 | }
61 | }, [
62 | currentQuesIndex,
63 | gameObj,
64 | gameKey,
65 | messages,
66 | finishGame,
67 | clearTimer,
68 | playSE,
69 | ]);
70 |
71 | return clearTimer;
72 | };
73 |
74 | export default useQuestionTimer;
75 |
--------------------------------------------------------------------------------
/src/modules/game/use-finishgame.ts:
--------------------------------------------------------------------------------
1 | import { useCallback } from 'react';
2 | import { deleteGame } from 'utils/database';
3 |
4 | import { useDispatch, useSelector } from 'react-redux';
5 | import { RootState } from 'ducks/rootReducer';
6 | import { gameSlice } from 'ducks/game';
7 | import { FinishGameFunction } from 'utils/types';
8 |
9 | const useFinishGame = (): FinishGameFunction => {
10 | const gameKey = useSelector((state: RootState) => state.game.key);
11 | const dispatch = useDispatch();
12 | const { stopGame, unsetGame } = gameSlice.actions;
13 |
14 | return useCallback(
15 | (isDeleted = false, isUnset = false) => {
16 | if (!isDeleted) deleteGame(gameKey);
17 |
18 | dispatch(stopGame());
19 |
20 | if (isUnset) dispatch(unsetGame());
21 | document.body.classList.remove('ready');
22 |
23 | document.body.style.backgroundColor = 'var(--bg-color)';
24 | document
25 | .querySelector("meta[name='theme-color']")
26 | ?.setAttribute('content', '#f2efe2');
27 | document
28 | .querySelector("meta[name='theme-color'][media*='dark']")
29 | ?.setAttribute('content', '#0b141c');
30 | },
31 | [gameKey, dispatch, stopGame, unsetGame],
32 | );
33 | };
34 |
35 | export default useFinishGame;
36 |
--------------------------------------------------------------------------------
/src/modules/game/use-fitScreenHeight.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from 'react';
2 |
3 | const useFitScreenHeight = (): number => {
4 | const [gameHeight, setGameHeight] = useState(visualViewport?.height ?? 0);
5 |
6 | const onWindowResize = () => {
7 | window.scrollTo(0, 0);
8 | setGameHeight(visualViewport?.height ?? 0);
9 | };
10 | useEffect(() => {
11 | window.visualViewport?.addEventListener('resize', onWindowResize);
12 |
13 | return () => {
14 | window.visualViewport?.removeEventListener('resize', onWindowResize);
15 | };
16 | }, []);
17 |
18 | return gameHeight;
19 | };
20 |
21 | export default useFitScreenHeight;
22 |
--------------------------------------------------------------------------------
/src/modules/game/use-gamestarted.ts:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'react';
2 | import { listenGameDeleted, logPageView } from 'utils/database';
3 | import { getSummary, updateSummaryFromKey } from 'utils/summary';
4 |
5 | import { useSelector } from 'react-redux';
6 | import { RootState } from 'ducks/rootReducer';
7 | import useFinishGame from 'modules/game/use-finishgame';
8 | import { gameTimerSeconds } from 'utils/types';
9 | import useAudio from 'hooks/use-audio';
10 |
11 | const useGameStarted = () => {
12 | const gameKey = useSelector((state: RootState) => state.game.key);
13 | const gameObj = useSelector((state: RootState) => state.game.entity);
14 |
15 | const isDuringGame = useSelector(
16 | (state: RootState) => state.game.isDuringGame,
17 | );
18 |
19 | const finishGame = useFinishGame();
20 |
21 | const playSE = useAudio();
22 |
23 | useEffect(() => {
24 | listenGameDeleted(gameKey, () => {
25 | const summary = getSummary();
26 | if (summary && summary.lastPlay !== summary.lastWon) {
27 | updateSummaryFromKey('currentStreak', 0);
28 | }
29 | finishGame(true);
30 | });
31 |
32 | if (isDuringGame) {
33 | logPageView('game');
34 | document.body.classList.add('ready');
35 | document.body.style.backgroundColor = gameObj?.color ?? 'var(--bg-color)';
36 | document
37 | .querySelector("meta[name='theme-color']")
38 | ?.setAttribute('content', gameObj?.color ?? '#f2efe2');
39 | setTimeout(() => {
40 | document.body.classList.remove('ready');
41 | }, gameTimerSeconds * 3 * 1000);
42 | } else {
43 | logPageView('game_end');
44 | }
45 |
46 | return () => {
47 | if (!!gameObj?.created && Date.now() - gameObj.created < 1000) {
48 | playSE('cancel');
49 | finishGame(false, true);
50 | alert('エラー：複数のゲームが同時に開始されました。やり直してください');
51 | } else {
52 | finishGame();
53 | }
54 | };
55 | // eslint-disable-next-line react-hooks/exhaustive-deps
56 | }, [gameKey, gameObj, finishGame, isDuringGame]);
57 |
58 | return finishGame;
59 | };
60 |
61 | export default useGameStarted;
62 |
--------------------------------------------------------------------------------
/src/modules/home/gamesetter.modeselector.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
4 | import { Mode, modesCaption, modesDisplay } from 'utils/types';
5 | import { FC, useEffect, useMemo, useRef, useState } from 'react';
6 | import useAudio from 'hooks/use-audio';
7 |
8 | const ModeButton = ({
9 | targetMode,
10 | currentMode,
11 | setMode,
12 | }: {
13 | targetMode: Mode;
14 | currentMode: Mode;
15 | setMode: (mode: Mode) => void;
16 | }) => {
17 | const buttonRef = useRef(null);
18 | useEffect(() => {
19 | if (
20 | buttonRef.current &&
21 | targetMode === currentMode &&
22 | currentMode !== 'easy'
23 | ) {
24 | buttonRef.current.scrollIntoView({
25 | behavior: 'smooth',
26 | block: 'center',
27 | inline: 'center',
28 | });
29 | }
30 | }, [currentMode, targetMode]);
31 |
32 | const playSE = useAudio();
33 |
34 | return (
35 |
47 | );
48 | };
49 |
50 | const ModeSelector: FC<{
51 | mode: Mode;
52 | setMode: (mode: Mode) => void;
53 | }> = ({ mode, setMode }) => {
54 | const modeCaption = useMemo(() => modesCaption[mode], [mode]);
55 |
56 | const [isCollapse, setIsCollapse] = useState(
57 | Object.keys(modesDisplay).indexOf(mode) >= 3,
58 | );
59 |
60 | const moreRef = useRef(null);
61 | useEffect(() => {
62 | const onWheel = (e: WheelEvent) => {
63 | if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
64 | e.preventDefault();
65 | if (moreRef.current) moreRef.current.scrollLeft += e.deltaY;
66 | };
67 |
68 | if (moreRef.current) moreRef.current.addEventListener('wheel', onWheel);
69 |
70 | return () => {
71 | if (moreRef.current)
72 | // eslint-disable-next-line react-hooks/exhaustive-deps
73 | moreRef.current.removeEventListener('wheel', onWheel);
74 | };
75 | }, []);
76 |
77 | const modeCaptionStyle = css`
78 | font-weight: 700;
79 | font-size: 16px;
80 | text-align: center;
81 | color: var(--mode-caption-color);
82 | `;
83 |
84 | const selectorContainer = css`
85 | margin: 0 auto;
86 | width: 340px;
87 | max-width: 95vw;
88 | max-width: calc(100vw - 60px);
89 | position: relative;
90 |
91 | &:after,
92 | &:before {
93 | content: '';
94 | width: 10px;
95 | height: 60px;
96 | background-image: linear-gradient(
97 | 90deg,
98 | transparent 0%,
99 | var(--bg-color) 100%
100 | );
101 | display: block;
102 | position: absolute;
103 | right: 0;
104 | pointer-events: none;
105 | top: 0;
106 | }
107 |
108 | &:before {
109 | background-image: linear-gradient(
110 | -90deg,
111 | transparent 0%,
112 | var(--bg-color) 100%
113 | );
114 | left: 0;
115 | }
116 |
117 | @media (min-width: 768px) {
118 | width: auto;
119 |
120 | &:before,
121 | &:after {
122 | content: none;
123 | }
124 | }
125 | `;
126 | const selectorInner = css`
127 | display: flex;
128 | overflow-y: auto;
129 | padding-left: 10px;
130 | scrollbar-width: none;
131 | align-items: center;
132 |
133 | &::-webkit-scrollbar {
134 | display: none;
135 | }
136 |
137 | &:after {
138 | content: '';
139 | display: block;
140 | min-width: 80px;
141 | }
142 |
143 | @media (min-width: 768px) {
144 | padding-left: 0;
145 | flex-wrap: wrap;
146 | align-items: center;
147 | justify-content: center;
148 | overflow: visible;
149 |
150 | &:after {
151 | content: none;
152 | }
153 | }
154 | `;
155 |
156 | const playSE = useAudio();
157 |
158 | return (
159 | <>
160 |
161 |
162 | {Object.keys(modesDisplay).map((key, index) => {
163 | if (index < 4)
164 | return (
165 |
171 | );
172 | if (index === 4)
173 | return (
174 |
195 | );
196 |
197 | return true;
198 | })}
199 |
200 |
201 |
202 | {Object.keys(modesDisplay).map((key, index) => {
203 | if (index >= 4)
204 | return (
205 |
211 | );
212 |
213 | return true;
214 | })}
215 |
216 |
217 |
218 |
{modeCaption}
220 |
221 | );
222 | };
223 |
224 | export default ModeSelector;
225 |
--------------------------------------------------------------------------------
/src/modules/home/gamesetter.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from 'react';
2 |
3 | import { localUserNameKey, Mode, Users } from 'utils/types';
4 | import { initialUserName } from 'ducks/user';
5 | import usePushGame from 'modules/home/use-pushgame';
6 | import ModeSelector from 'modules/home/gamesetter.modeselector';
7 |
8 | const GameSetter: FC<{
9 | users: Users | undefined;
10 | lastMode: Mode;
11 | }> = ({ users, lastMode }) => {
12 | const userName = localStorage.getItem(localUserNameKey) || initialUserName;
13 |
14 | const [mode, setMode] = useState(lastMode);
15 |
16 | const pushGame = usePushGame();
17 |
18 | return (
19 | <>
20 | {users && (
21 | <>
22 | setMode(newMode)} />
23 |
24 |
31 |
32 | )}
33 |
34 | {!users && }
35 |
36 | );
37 | };
38 |
39 | export default GameSetter;
40 |
--------------------------------------------------------------------------------
/src/modules/home/home.logo.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { FC } from 'react';
4 | import { TbInfoCircle } from 'react-icons/tb';
5 |
6 | const HomeLogo: FC = () => {
7 | const homeLogoContainer = css`
8 | grid-area: logo;
9 | display: flex;
10 | align-items: center;
11 | flex-direction: column;
12 | justify-content: end;
13 | padding: 30px 0;
14 | `;
15 | const homeLogo = css`
16 | width: 90px;
17 | margin: 0;
18 |
19 | @media (min-width: 768px) {
20 | width: 120px;
21 | }
22 | `;
23 | const homeLogoCopy = css`
24 | font-size: 17px;
25 | font-weight: 900;
26 | line-height: 1;
27 | margin: 8px 0 15px;
28 | text-align: center;
29 | line-height: 1.35;
30 | `;
31 |
32 | return (
33 |
34 |
35 |
54 |
55 |
56 | 市町村
57 | ul {
63 | z-index: 5025;
64 | display: inline-block;
65 | }
66 | `}
67 | >
68 |
119 | - 特別区(東京23区)を含む
120 | - 市町村以外のモードも数多く用意しています
121 |
122 |
127 |
128 | から
129 |
130 |
138 | 都道府県を当てる
139 |
140 | だけ！
141 |
142 |
75 |
76 |
77 |
78 | editMode()} />
79 |
80 |
81 |
82 |
83 |
43 | {usersLength === 0 ? (
44 | <>
45 | 接続中…
46 | {showReload && (
47 |
56 | )}
57 |
58 | ) : (
59 | <>
60 |
65 | 現在、
66 |
67 | {usersLength}人
68 |
69 | が接続中
70 |
71 |
81 |
82 | )}
83 |
84 | );
85 | };
86 |
87 | export default OnlineUsersHeader;
88 |
--------------------------------------------------------------------------------
/src/modules/home/onlineusers.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { Users } from 'utils/types';
4 | import { FC, useEffect, useState } from 'react';
5 |
6 | import backgroundImage from 'assets/svg/sp-bg.svg';
7 | import OnlineUsersHeader from 'modules/home/onlineusers.header';
8 | import UserList from 'modules/home/onlineusers.userlist';
9 |
10 | const OnlineUsers: FC<{
11 | users: Users | undefined;
12 | editMode: () => void;
13 | }> = ({ users, editMode }) => {
14 | const pingThreshold = 7700;
15 |
16 | const [usersLength, setUsersLength] = useState(0);
17 | useEffect(() => {
18 | setUsersLength(
19 | users
20 | ? Object.keys(users).filter(
21 | (key) => Date.now() - users[key].pingStamp < pingThreshold,
22 | ).length
23 | : 0,
24 | );
25 | }, [users]);
26 |
27 | const onlineUsersContainer = css`
28 | border: 4px solid var(--primary-color);
29 | border-radius: 20px;
30 | padding: 15px 20px;
31 | backdrop-filter: blur(30px);
32 | width: 340px;
33 | max-width: 95%;
34 | max-width: calc(100vw - 60px);
35 | transition: 0.2s;
36 | background-image: url(${backgroundImage});
37 | background-size: 180%;
38 | background-position: -50px -50px;
39 |
40 | @media (min-width: 768px) {
41 | width: auto;
42 | min-width: 350px;
43 | }
44 | `;
45 |
46 | return (
47 |
48 |
49 |
54 |
55 | );
56 | };
57 |
58 | export default OnlineUsers;
59 |
--------------------------------------------------------------------------------
/src/modules/home/onlineusers.userlist.tsx:
--------------------------------------------------------------------------------
1 | /** @jsxImportSource @emotion/react */
2 | import { css } from '@emotion/react';
3 | import { Users } from 'utils/types';
4 | import { FC } from 'react';
5 |
6 | import { useSelector } from 'react-redux';
7 | import { RootState } from 'ducks/rootReducer';
8 |
9 | import DeviceIcon from 'components/atoms/deviceicon';
10 |
11 | const UserList: FC<{
12 | users: Users | undefined;
13 | usersLength: number;
14 | pingThreshold: number;
15 | }> = ({ users, usersLength, pingThreshold }) => {
16 | const me = useSelector((state: RootState) => state.user.key);
17 |
18 | const userList = css`
19 | margin: 0;
20 | padding: 10px 17px 7px;
21 | min-height: 50px;
22 | max-height: 200px;
23 | list-style-type: none;
24 | overflow-y: auto;
25 | display: flex;
26 | flex-direction: column;
27 | justify-content: center;
28 |
29 | @media (min-width: 768px) {
30 | padding: 25px 23px 21px;
31 | min-height: 110px;
32 | max-height: 270px;
33 | }
34 |
35 | @media (max-width: 400px) {
36 | padding: 10px 8px 7px;
37 | }
38 | `;
39 | const userListItem = (color: string) => css`
40 | margin: 4px 0;
41 | --user-color: ${/^[#A-Za-z0-9]+$/.test(color) ? color : 'var(--red)'};
42 | display: flex;
43 | flex-direction: row;
44 | align-items: center;
45 | font-weight: 700;
46 | line-height: 1;
47 | flex-wrap: wrap;
48 | animation: 0.2s ease 0s 1 normal clicked;
49 |
50 | @media (min-width: 768px) {
51 | margin: 7px 0;
52 | }
53 | `;
54 | const userScore = css`
55 | margin: 0 7px;
56 | font-size: 13px;
57 | font-weight: 600;
58 | opacity: 0.6;
59 |
60 | @media (max-width: 400px) {
61 | margin-right: 0;
62 | }
63 | `;
64 | const myDevice = css`
65 | font-size: 13px;
66 | font-weight: 600;
67 | color: var(--red);
68 | margin: 3px 0;
69 |
70 | @media (max-width: 400px) {
71 | width: 130px;
72 | padding-left: 23px;
73 | margin-top: 3px;
74 | margin-bottom: 4px;
75 | &:before {
76 | content: '(';
77 | }
78 | &:after {
79 | content: ')';
80 | }
81 | }
82 | `;
83 |
84 | const reload = css`
85 | ${userListItem('var(--red)')}
86 | margin-top: 13px !important;
87 | font-size: 14px;
88 |
89 | & button {
90 | font-size: 16px;
91 | text-decoration: underline;
92 | text-underline-offset: 4px;
93 | }
94 | `;
95 |
96 | return (
97 |
98 | {users &&
99 | Object.keys(users).map(
100 | (key) =>
101 | Date.now() - users[key].pingStamp < pingThreshold && (
102 | -
103 |
104 | {users[key].userName}
105 | スコア{users[key].score || '0'}
106 | {key === me && この端末}
107 |
108 | ),
109 | )}
110 | {users && usersLength > 0 && !Object.keys(users).includes(me) && (
111 | -
112 | この端末が表示されていない場合は
113 |
122 |
123 | )}
124 | {usersLength === 0 && }
125 |
126 | );
127 | };
128 |
129 | export default UserList;
130 |
--------------------------------------------------------------------------------
/src/modules/home/use-pushgame.ts:
--------------------------------------------------------------------------------
1 | import shuffle from 'lodash/shuffle';
2 | import { prefecture } from 'assets/data/prefecture';
3 | import { logStartGame, writeNewGame } from 'utils/database';
4 | import {
5 | Mode,
6 | PrefectureStr,
7 | Questions,
8 | modesCaption,
9 | modesConvert,
10 | } from 'utils/types';
11 |
12 | const colors = [
13 | '#51B1C9',
14 | '#6DCE97',
15 | '#76B2B4',
16 | '#8FB505',
17 | '#9F68E8',
18 | '#C9C21E',
19 | '#D6A671',
20 | '#E8A21C',
21 | '#ED9489',
22 | '#F1B8B5',
23 | '#FFB554',
24 | ];
25 |
26 | const randomMode = (): Mode => {
27 | const filteredModes = Object.keys(modesCaption).filter(
28 | (mode) => mode !== 'random',
29 | );
30 | const randomIndex = Math.floor(Math.random() * filteredModes.length);
31 |
32 | return filteredModes[randomIndex] as Mode;
33 | };
34 |
35 | type ImportData = typeof import('assets/data/cities');
36 |
37 | const usePushGame =
38 | () => (mode: Mode, startBy: string, gameUsers: string[]) => {
39 | const randomPref: PrefectureStr =
40 | prefecture[Math.floor(Math.random() * prefecture.length)];
41 |
42 | const modeUltimate = mode === 'random' ? randomMode() : mode;
43 |
44 | const write = (questions: Questions) =>
45 | writeNewGame({
46 | answer: randomPref,
47 | questions,
48 | mode: modeUltimate,
49 | startBy,
50 | messages: [],
51 | color: colors[Math.floor(Math.random() * colors.length)],
52 | users: gameUsers,
53 | created: Date.now(),
54 | });
55 |
56 | const countDown: ('3' | '2' | '1')[] = ['3', '2', '1'];
57 | const mixedCityModes: Mode[] = ['easy', 'normal', 'veryveryhell'];
58 |
59 | const importPaths = [
60 | 'stations',
61 | 'mountains',
62 | 'cities',
63 | 'castles',
64 | 'reststops',
65 | 'goods',
66 | 'specialties',
67 | 'cuisines',
68 | 'attractions',
69 | 'sweets',
70 | 'museums',
71 | 'spas',
72 | 'festivals',
73 | 'powerplants',
74 | 'quiz',
75 | ] as const;
76 | type ImportPath = typeof importPaths[number];
77 | const mappingPaths: { [key in Mode]?: ImportPath } = {
78 | station: 'stations',
79 | mountain: 'mountains',
80 | castle: 'castles',
81 | reststop: 'reststops',
82 | goods: 'goods',
83 | specialty: 'specialties',
84 | cuisine: 'cuisines',
85 | attraction: 'attractions',
86 | sweets: 'sweets',
87 | museum: 'museums',
88 | spa: 'spas',
89 | festival: 'festivals',
90 | powerplant: 'powerplants',
91 | quiz: 'quiz',
92 | };
93 | const importPath: ImportPath = mappingPaths[modeUltimate] || 'cities';
94 |
95 | import(`assets/data/${importPath}`)
96 | .then(async (data: ImportData) => {
97 | if (modeUltimate === 'mixed') {
98 | let importedData: string[] = [];
99 | await Promise.all(
100 | importPaths.map(async (path) => {
101 | importedData = [
102 | ...importedData,
103 | ...(
104 | (await import(`assets/data/${path}`)) as ImportData
105 | ).default()[randomPref],
106 | ];
107 | }),
108 | );
109 | const cities = data
110 | .default()
111 | [randomPref].map((city) =>
112 | modesConvert[
113 | mixedCityModes[
114 | Math.floor(Math.random() * mixedCityModes.length)
115 | ]
116 | ](city),
117 | );
118 | write([
119 | ...countDown,
120 | ...shuffle([...cities, ...importedData]).slice(0, 30),
121 | ]);
122 | } else {
123 | write([
124 | ...countDown,
125 | ...shuffle(data.default()[randomPref]).slice(0, 30),
126 | ]);
127 | }
128 | logStartGame(randomPref, mode, gameUsers.length, startBy);
129 | })
130 | .catch((err) => {
131 | alert('データを読み込めませんでした');
132 | console.error(err);
133 | });
134 | };
135 |
136 | export default usePushGame;
137 |
--------------------------------------------------------------------------------
/src/modules/home/use-usermounted.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from 'react';
2 | import { useSelector } from 'react-redux';
3 | import { RootState } from 'ducks/rootReducer';
4 | import { Users } from 'utils/types';
5 | import { listenUsers, updatePingStamp } from 'utils/database';
6 | import useAudio from 'hooks/use-audio';
7 |
8 | const useUserMounted = () => {
9 | const userKey = useSelector((state: RootState) => state.user.key);
10 |
11 | const [users, setUsers] = useState();
12 |
13 | const timerId = useRef();
14 | const clearTimer = () => clearInterval(timerId.current);
15 |
16 | const playSE = useAudio();
17 |
18 | useEffect(() => {
19 | listenUsers((data) => {
20 | setUsers((prevUsers) => {
21 | const prevKeys = Object.keys(prevUsers ?? {});
22 | const currentKeys = Object.keys(data ?? {}).filter(
23 | (key) => Date.now() - data[key].pingStamp < 7700,
24 | );
25 | if (JSON.stringify(prevKeys) !== JSON.stringify(currentKeys)) {
26 | if (prevKeys < currentKeys) playSE('online');
27 | if (prevKeys > currentKeys) playSE('offline');
28 | }
29 |
30 | return currentKeys.reduce((result: Users, ObjectKey: string) => {
31 | // eslint-disable-next-line no-param-reassign
32 | result[ObjectKey] = data[ObjectKey];
33 |
34 | return result;
35 | }, {});
36 | });
37 | });
38 |
39 | document.body.style.backgroundColor = 'var(--bg-color)';
40 | // eslint-disable-next-line react-hooks/exhaustive-deps
41 | }, [userKey]);
42 |
43 | useEffect(() => {
44 | timerId.current = setInterval(() => {
45 | if (userKey && users && Object.keys(users).includes(userKey)) {
46 | updatePingStamp(userKey);
47 | }
48 | }, 3000);
49 |
50 | return clearTimer;
51 | }, [userKey, users]);
52 |
53 | return users;
54 | };
55 |
56 | export default useUserMounted;
57 |
--------------------------------------------------------------------------------
/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
1 | import { ReportHandler } from 'web-vitals';
2 |
3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
4 | if (onPerfEntry && onPerfEntry instanceof Function) {
5 | import('web-vitals')
6 | .then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
7 | getCLS(onPerfEntry);
8 | getFID(onPerfEntry);
9 | getFCP(onPerfEntry);
10 | getLCP(onPerfEntry);
11 | getTTFB(onPerfEntry);
12 | })
13 | .catch((err) => console.log(err)); // eslint-disable-line no-console
14 | }
15 | };
16 |
17 | export default reportWebVitals;
18 |
--------------------------------------------------------------------------------
/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/utils/database.ts:
--------------------------------------------------------------------------------
1 | import { getAnalytics, logEvent } from 'firebase/analytics';
2 | import { initializeApp } from 'firebase/app';
3 | import {
4 | set,
5 | getDatabase,
6 | ref,
7 | child,
8 | push,
9 | update,
10 | onChildAdded,
11 | onChildRemoved,
12 | DataSnapshot,
13 | onValue,
14 | startAt,
15 | query,
16 | orderByChild,
17 | } from 'firebase/database';
18 |
19 | import {
20 | AnswerMessage,
21 | GameMessage,
22 | GameObj,
23 | isAnswerMessage,
24 | MessageNoticeObj,
25 | MessageObject,
26 | UserObj,
27 | Users,
28 | } from 'utils/types';
29 |
30 | const firebaseConfig = {
31 | apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
32 | authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
33 | projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
34 | storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
35 | messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
36 | appId: process.env.REACT_APP_FIREBASE_APP_ID,
37 | measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
38 | databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
39 | };
40 |
41 | export const app = initializeApp(firebaseConfig);
42 | const database = getDatabase(app);
43 |
44 | const analytics = getAnalytics();
45 |
46 | /* Message */
47 | export const listenMessage = (
48 | gameKey: string,
49 | callback: (data: MessageObject) => any,
50 | ) => {
51 | const gamesRef = ref(database, `Games/${gameKey}/messages`);
52 | const unSubscribe = onChildAdded(gamesRef, (data) => {
53 | let message;
54 | if (isAnswerMessage(data.val())) {
55 | message = data.val() as AnswerMessage;
56 | } else {
57 | message = data.val() as GameMessage;
58 | if (message.type === 'end' && unSubscribe) unSubscribe();
59 | }
60 | callback({
61 | ...message,
62 | key: data.key,
63 | });
64 | });
65 | };
66 |
67 | export const pushMessage = (
68 | gameKey: string,
69 | message: MessageObject,
70 | ): string => {
71 | const newMessageKey =
72 | push(child(ref(database), `Games/${gameKey}/messages`)).key ?? '';
73 | const updates: { [key: string]: any } = {};
74 | updates[`Games/${gameKey}/messages/${newMessageKey}`] = message;
75 |
76 | update(ref(database), updates)
77 | .then(() => {
78 | logEvent(analytics, 'send_message', { type: message.type });
79 | })
80 | .catch((err) => {
81 | alert('エラー：メッセージを書き込みできませんでした');
82 | console.error(err);
83 | });
84 |
85 | return newMessageKey;
86 | };
87 |
88 | /* Game */
89 |
90 | export const writeNewGame = (game: GameObj): void => {
91 | const newGameKey = push(child(ref(database), 'Games')).key ?? '';
92 | const updates: { [key: string]: any } = {};
93 | updates[`Games/${newGameKey}`] = game;
94 |
95 | update(ref(database), updates)
96 | .then(() => {
97 | pushMessage(newGameKey, {
98 | type: 'start',
99 | value: `${game.startBy}が\nゲーム開始\n参加者${game.users.length}人`,
100 | });
101 | })
102 | .catch((err) => {
103 | alert('エラー：ゲームを書き込みできませんでした');
104 | console.error(err);
105 | });
106 | };
107 |
108 | export const listenGame = (
109 | userKey: string,
110 | callback: (data: DataSnapshot) => any,
111 | ) => {
112 | const gamesRef = ref(database, 'Games/');
113 | onChildAdded(gamesRef, (data) => {
114 | const gameData = data.val() as GameObj;
115 | if (gameData.users && gameData.users.includes(userKey)) callback(data);
116 | });
117 | };
118 |
119 | export const listenGameDeleted = (gameKey: string, callback: () => any) => {
120 | const gamesRef = ref(database, `Games/${gameKey}`);
121 | onChildRemoved(gamesRef, () => {
122 | callback();
123 | });
124 | };
125 |
126 | export const deleteGame = (gameKey: string): void => {
127 | set(ref(database, `Games/${gameKey}`), null).catch((err) => {
128 | alert('エラー：ゲームを終了できませんでした');
129 | console.error(err);
130 | });
131 | };
132 |
133 | /* User */
134 |
135 | export const newOnlineUser = (user: UserObj): string => {
136 | let userKey = localStorage.getItem('prizm-userkey');
137 | if (!userKey) {
138 | userKey = push(child(ref(database), 'Users')).key ?? '';
139 | localStorage.setItem('prizm-userkey', userKey);
140 | }
141 | const updates: { [key: string]: any } = {};
142 | updates[`Users/${userKey}`] = user;
143 |
144 | update(ref(database), updates).catch((err) => {
145 | alert('エラー：ユーザーを書き込みできませんでした');
146 | console.error(err);
147 | });
148 |
149 | return userKey;
150 | };
151 |
152 | export const deleteUser = (userKey: string): void => {
153 | set(ref(database, `Users/${userKey}`), null).catch((err) => {
154 | alert('エラー：ユーザーを削除できませんでした');
155 | console.error(err);
156 | });
157 | };
158 |
159 | export const listenUsers = (callback: (users: Users) => any) => {
160 | // const users = ref(database, 'Users/');
161 | const users = query(
162 | ref(database, 'Users/'),
163 | orderByChild('pingStamp'),
164 | startAt(Date.now() - 7700),
165 | );
166 | onValue(users, (data) => {
167 | callback(data.val() as Users);
168 | });
169 | };
170 |
171 | export const updatePingStamp = (userKey: string): void => {
172 | const updates: { [key: string]: any } = {};
173 | updates[`Users/${userKey}/pingStamp`] = Date.now();
174 |
175 | void update(ref(database), updates);
176 | };
177 |
178 | /* log */
179 |
180 | export const logUpdateName = (name: string, color: string) => {
181 | logEvent(analytics, 'update_name', {
182 | name,
183 | color,
184 | });
185 | };
186 |
187 | export const logMatched = (notice: MessageNoticeObj) => {
188 | logEvent(analytics, 'post_score', { score: notice.a_score, ...notice });
189 | };
190 |
191 | export const logStartGame = (
192 | answer: string,
193 | mode: string,
194 | usersLength: number,
195 | startBy: string,
196 | ) => {
197 | logEvent(analytics, 'start_game', {
198 | answer,
199 | mode,
200 | usersLength,
201 | startBy,
202 | });
203 | };
204 |
205 | export const logGameCanceled = () => {
206 | logEvent(analytics, 'game_canceled');
207 | };
208 |
209 | export const logPageView = (title: string) => {
210 | logEvent(analytics, 'page_view', { page_title: title });
211 | };
212 |
--------------------------------------------------------------------------------
/src/utils/gethint.ts:
--------------------------------------------------------------------------------
1 | import { hint, area } from 'assets/data/prefecture';
2 | import { PrefectureStr } from 'utils/types';
3 |
4 | const getHint = (progress: number, pref: PrefectureStr | undefined): string => {
5 | if (!pref) return '';
6 |
7 | if (Math.floor(progress) === 83) return `地方は\n『${area[hint[pref][3]]}』`;
8 | if (Math.floor(progress) === 66)
9 | return `県庁所在地の頭文字は\n『${hint[pref][2]}』`;
10 | // if (Math.floor(progress) === 50) return `総面積は\n『${hint[pref][1]}km2』`;
11 | // if (Math.floor(progress) === 33) return `人口は\n約${hint[pref][0]}万人`;
12 |
13 | return '';
14 | };
15 |
16 | export default getHint;
17 |
--------------------------------------------------------------------------------
/src/utils/summary.ts:
--------------------------------------------------------------------------------
1 | import {
2 | GameObj,
3 | gameTimerSeconds,
4 | isUserSummaryObj,
5 | localUserSummary,
6 | MessageNoticeObj,
7 | modesDisplayWithEmoji,
8 | UserSummaryObj,
9 | UserSummaryObjOnStore,
10 | } from 'utils/types';
11 |
12 | export const getSummary = (): false | UserSummaryObj => {
13 | const summary = JSON.parse(
14 | localStorage.getItem(localUserSummary) ?? '',
15 | ) as unknown;
16 | if (!isUserSummaryObj(summary)) {
17 | alert('エラー: 勝敗を記録できません');
18 |
19 | return false;
20 | }
21 |
22 | return summary;
23 | };
24 |
25 | export const updateSummary = (newSummary: { [key: string]: number }) => {
26 | const summary = getSummary();
27 | if (summary) {
28 | localStorage.setItem(
29 | localUserSummary,
30 | JSON.stringify({ ...summary, ...newSummary }),
31 | );
32 | }
33 | };
34 |
35 | export const updateSummaryFromKey = (
36 | key: keyof UserSummaryObj,
37 | value: number | ((number: number) => number),
38 | ) => {
39 | const summary = getSummary();
40 | if (!summary) return false;
41 |
42 | summary[key] = typeof value === 'number' ? value : value(summary[key] ?? 0);
43 | localStorage.setItem(localUserSummary, JSON.stringify(summary));
44 |
45 | return true;
46 | };
47 |
48 | export const getNoticesWhenMatched = (lastWon: number): MessageNoticeObj => {
49 | const notice: MessageNoticeObj = {};
50 |
51 | const summary = getSummary();
52 | if (summary) {
53 | const currentStreak = summary.currentStreak + 1;
54 | const maxStreak =
55 | currentStreak > summary.maxStreak ? currentStreak : summary.maxStreak;
56 |
57 | if (currentStreak > 1) notice.c_update_streak = currentStreak;
58 | if (currentStreak > summary.maxStreak)
59 | notice.d_update_max_streak = currentStreak;
60 |
61 | const speed =
62 | Math.round(((Date.now() - lastWon) / 1000 - gameTimerSeconds * 3) * 10) /
63 | 10;
64 | const averageSpeed =
65 | summary.averageSpeed === 0
66 | ? speed
67 | : Math.round(
68 | ((summary.averageSpeed * (summary.playCount - 1) + speed) /
69 | summary.playCount) *
70 | 10,
71 | ) / 10;
72 | const fastestSpeed =
73 | speed < summary.fastestSpeed || summary.fastestSpeed === 0
74 | ? speed
75 | : summary.fastestSpeed;
76 |
77 | if (
78 | speed < summary.fastestSpeed ||
79 | (summary.fastestSpeed === 0 && summary.playCount > 1)
80 | )
81 | notice.b_update_fastest = speed;
82 |
83 | updateSummary({
84 | wonCount: summary.wonCount + 1,
85 | lastWon,
86 | currentStreak,
87 | maxStreak,
88 | averageSpeed,
89 | fastestSpeed,
90 | lastSpeed: speed,
91 | });
92 | }
93 |
94 | return notice;
95 | };
96 |
97 | export const generateTweet = (
98 | gameObj: GameObj,
99 | summary: Partial,
100 | ) => {
101 | let tweet = '#prizmgame で勝利!💮\n';
102 |
103 | if (summary && summary.a_score) tweet += `💯 score +${summary.a_score}\n`;
104 | tweet += `🗾 ${gameObj.answer}\n`;
105 | tweet += `⏩ ${modesDisplayWithEmoji[gameObj.mode]}\n`;
106 | tweet += `👥 参加者${gameObj.users.length}人\n`;
107 | if (summary && summary.lastSpeed)
108 | tweet += `⏱️ ${summary.lastSpeed}秒で回答💨\n`;
109 | if (summary && summary.currentStreak && summary.currentStreak > 1)
110 | tweet += `👍 ${summary.currentStreak}連勝中❗️\n\n`;
111 |
112 | if (summary && summary.d_update_max_streak && summary.d_update_max_streak > 1)
113 | tweet += `🎖️ 連勝記録を更新🔺\n`;
114 | if (summary && summary.b_update_fastest) tweet += `🎖️ 最速記録を更新🔺`;
115 |
116 | // tweet += '\nhttps://prizm.pw';
117 |
118 | return tweet;
119 | };
120 |
--------------------------------------------------------------------------------
/src/utils/types.tsx:
--------------------------------------------------------------------------------
1 | import { prefecture } from 'assets/data/prefecture';
2 | import { ReactNode } from 'react';
3 | import { MdOutlineTrain } from 'react-icons/md';
4 | import {
5 | TbMoodHappy,
6 | TbMoodSad,
7 | TbMoodSadDizzy,
8 | TbMoodWrrr,
9 | TbMoodXd,
10 | TbSkull,
11 | TbBolt,
12 | TbMountain,
13 | TbArrowsRandom,
14 | TbBuildingCastle,
15 | TbCar,
16 | TbBulb,
17 | TbBuildingBank,
18 | TbGrill,
19 | TbCookieMan,
20 | TbApple,
21 | TbSchool,
22 | TbConfetti,
23 | TbTrees,
24 | TbCookie,
25 | TbGhost2,
26 | } from 'react-icons/tb';
27 | import IconSpa from 'assets/icon/spa';
28 |
29 | /* GAME mode */
30 | const modes = [
31 | 'easy',
32 | 'normal',
33 | 'hard',
34 | 'random',
35 | 'hell',
36 | 'veryhell',
37 | 'veryveryhell',
38 | 'veryveryveryhell',
39 | 'mixed',
40 | 'station',
41 | 'mountain',
42 | 'castle',
43 | 'reststop',
44 | 'sweets',
45 | 'museum',
46 | 'festival',
47 | 'cuisine',
48 | 'attraction',
49 | 'powerplant',
50 | 'spa',
51 | 'specialty',
52 | 'goods',
53 | 'quiz',
54 | ] as const;
55 | export type Mode = typeof modes[number];
56 |
57 | export const modesDisplay: { [key in Mode]: ReactNode } = {
58 | easy: (
59 |
60 |
61 | 初級
62 |
63 | ),
64 | normal: (
65 |
66 |
67 | 中級
68 |
69 | ),
70 | hard: (
71 |
72 |
73 | 上級
74 |
75 | ),
76 | random: (
77 |
78 |
79 | おまかせ
80 |
81 | ),
82 | hell: (
83 |
84 |
85 | ゲキムズ
86 |
87 | ),
88 | veryhell: (
89 |
90 |
91 | 超ムズ
92 |
93 | ),
94 | veryveryhell: (
95 |
96 |
97 | 超激ムズ
98 |
99 | ),
100 | veryveryveryhell: (
101 |
102 |
103 | 地獄
104 |
105 | ),
106 | mixed: (
107 |
108 |
109 | ごちゃまぜ
110 |
111 | ),
112 | station: (
113 |
114 |
115 | 駅
116 |
117 | ),
118 | mountain: (
119 |
120 |
121 | 山
122 |
123 | ),
124 | castle: (
125 |
126 |
127 | 城
128 |
129 | ),
130 | reststop: (
131 |
132 |
133 | 道の駅
134 |
135 | ),
136 | goods: (
137 |
138 |
139 | 伝統工芸品
140 |
141 | ),
142 | specialty: (
143 |
144 |
145 | 特産品
146 |
147 | ),
148 | quiz: (
149 |
150 |
151 | 雑学
152 |
153 | ),
154 | cuisine: (
155 |
156 |
157 | 郷土料理
158 |
159 | ),
160 | attraction: (
161 |
162 |
163 | 名所
164 |
165 | ),
166 | sweets: (
167 |
168 |
169 | 銘菓
170 |
171 | ),
172 | museum: (
173 |
174 |
175 | 博物館
176 |
177 | ),
178 | spa: (
179 |
180 |
181 | 温泉
182 |
183 | ),
184 | festival: (
185 |
186 |
187 | お祭り
188 |
189 | ),
190 | powerplant: (
191 |
192 |
193 | 発電所
194 |
195 | ),
196 | };
197 | export const modesDisplayWithEmoji: { [key in Mode]: string } = {
198 | easy: '初級🔰',
199 | normal: '中級❤️🔥',
200 | hard: '上級😈',
201 | random: 'おまかせ',
202 | hell: 'ゲキムズ👹',
203 | veryhell: '超ムズ👹👹',
204 | veryveryhell: '超激ムズ☠️☠️',
205 | veryveryveryhell: '地獄👻',
206 | station: '駅モード🚉',
207 | mountain: '山モード⛰',
208 | castle: '城モード🏯',
209 | reststop: '道の駅🚗',
210 | museum: '博物館🖼',
211 | festival: 'お祭り👘',
212 | cuisine: '郷土料理🥘',
213 | attraction: '名所🚠',
214 | powerplant: '発電所🔌💡',
215 | spa: '温泉♨️',
216 | specialty: '特産品🍎',
217 | sweets: '銘菓🍘',
218 | goods: '伝統工芸品🪆',
219 | quiz: '雑学🎓',
220 | mixed: 'ごちゃまぜ🌀',
221 | };
222 | export const modesCaption: { [key in Mode]: string } = {
223 | easy: '市町村が出題されます: ●●●',
224 | normal: '市町村の冒頭2文字が出題されます: ●●○',
225 | hard: '市町村の頭文字が出題されます: ●○○',
226 | hell: '市町村の2文字目が出題されます: ○●○',
227 | veryhell: '市町村の最後の字が出題されます: ○○●',
228 | veryveryhell: '市町村から任意の1文字を出題: ○○○→●',
229 | veryveryveryhell: '市町村から任意の1文字かつ3分の1が隠れた状態',
230 | station: '駅が出題されます',
231 | mountain: '山が出題されます',
232 | castle: '城が出題されます',
233 | reststop: '道の駅(東京,神奈川はPA/SAを含む)',
234 | sweets: '銘菓が出題されます',
235 | museum: '博物館が出題されます',
236 | festival: 'お祭りが出題されます',
237 | cuisine: '郷土料理が出題されます',
238 | attraction: '名所が出題されます',
239 | powerplant: '発電所が出題されます',
240 | spa: '温泉が出題されます',
241 | specialty: '特産品が出題されます',
242 | goods: '伝統工芸品が出題されます',
243 | quiz: '雑学が出題されます',
244 | random: 'モードがランダムで選択されます',
245 | mixed: '1問ごとに違うモードになります',
246 | };
247 | export const modesDetail: { [key in Mode]: string } = {
248 | easy: '初級:市町村',
249 | normal: '中級:市町村の冒頭2文字',
250 | hard: '上級:市町村の頭文字',
251 | hell: 'ゲキムズ:市町村の2文字目',
252 | veryhell: '超ムズ:市町村の最後の字',
253 | veryveryhell: '超激ムズ:市町村の任意の字',
254 | veryveryveryhell: '地獄:市町村の任意の字',
255 | station: '駅モード',
256 | mountain: '山モード',
257 | castle: '城モード',
258 | reststop: '道の駅・PA',
259 | museum: '博物館',
260 | festival: 'お祭り',
261 | cuisine: '郷土料理',
262 | attraction: '名所',
263 | powerplant: '発電所',
264 | sweets: '銘菓モード',
265 | spa: '温泉モード',
266 | specialty: '特産品',
267 | goods: '伝統工芸品',
268 | quiz: '雑学モード',
269 | random: 'おまかせ',
270 | mixed: 'ごちゃまぜ',
271 | };
272 | export const modesConvert: { [key in Mode]: (t: string) => string } = {
273 | easy: (t) => t,
274 | normal: (t) => t.substr(0, 2),
275 | hard: (t) => t.charAt(0),
276 | hell: (t) => t.charAt(1),
277 | veryhell: (t) => {
278 | if (t.length <= 2) return t.charAt(0);
279 |
280 | return t.charAt(t.length - 2);
281 | },
282 | veryveryhell: (t) => {
283 | if (t.length <= 2) return t.charAt(0);
284 |
285 | const slicedString = t.slice(0, -1);
286 | const randomIndex = Math.floor(Math.random() * slicedString.length);
287 |
288 | return slicedString.charAt(randomIndex);
289 | },
290 | veryveryveryhell: (t) => {
291 | if (t.length <= 2) return t.charAt(0);
292 |
293 | const slicedString = t.slice(0, -1);
294 | const randomIndex = Math.floor(Math.random() * slicedString.length);
295 |
296 | return slicedString.charAt(randomIndex);
297 | },
298 | station: (t) => t,
299 | mountain: (t) => t,
300 | castle: (t) => t,
301 | reststop: (t) => t,
302 | museum: (t) => t,
303 | festival: (t) => t,
304 | cuisine: (t) => t,
305 | attraction: (t) => t,
306 | powerplant: (t) => t,
307 | spa: (t) => t,
308 | specialty: (t) => t,
309 | goods: (t) => t,
310 | quiz: (t) => t,
311 | sweets: (t) => t,
312 | random: (t) => t,
313 | mixed: (t) => t,
314 | };
315 | export const modesScore: { [key in Mode]: (score: number) => number } = {
316 | easy: (score) => score * 0.75,
317 | normal: (score) => score,
318 | hard: (score) => score * 1.3,
319 | hell: (score) => score * 1.6,
320 | veryhell: (score) => score * 2,
321 | veryveryhell: (score) => score * 2.5,
322 | veryveryveryhell: (score) => score * 3,
323 | station: (score) => score,
324 | mountain: (score) => score,
325 | castle: (score) => score,
326 | reststop: (score) => score,
327 | museum: (score) => score,
328 | festival: (score) => score,
329 | cuisine: (score) => score,
330 | attraction: (score) => score,
331 | powerplant: (score) => score,
332 | spa: (score) => score,
333 | specialty: (score) => score,
334 | goods: (score) => score,
335 | sweets: (score) => score,
336 | quiz: (score) => score,
337 | random: (score) => score,
338 | mixed: (score) => score * 0.75,
339 | };
340 |
341 | /* Game */
342 | export type Questions = string[];
343 | export type GameStatus = 'active' | 'systemWon' | 'userWon' | 'finished';
344 | export type GameObj = {
345 | answer: PrefectureStr;
346 | questions: Questions;
347 | mode: Mode;
348 | messages: Messages;
349 | users: string[];
350 | startBy: string;
351 | color: string;
352 | created: number;
353 | };
354 | export type FinishGameFunction = (
355 | isDeleted?: boolean,
356 | isUnset?: boolean,
357 | ) => void;
358 | export const gameTimerSeconds = 1.5;
359 |
360 | /* message */
361 | export type MessageTypes = 'answer' | 'hint' | 'start' | 'score';
362 | export type MessageNotice =
363 | | 'a_score'
364 | | 'b_update_fastest'
365 | | 'c_update_streak'
366 | | 'd_update_max_streak';
367 | export type MessageNoticeObj = { [key in MessageNotice]?: number };
368 | export type AnswerMessage = {
369 | key?: string | null;
370 | name: string;
371 | type: 'answer';
372 | value: string;
373 | matched: boolean;
374 | };
375 | export type GameMessage = {
376 | key?: string | null;
377 | type: 'hint' | 'start' | 'score' | 'remain' | 'end';
378 | value: string;
379 | notice?: MessageNoticeObj;
380 | };
381 | export type MessageObject = AnswerMessage | GameMessage;
382 | export type Messages = MessageObject[];
383 |
384 | export const isAnswerMessage = (arg: unknown): arg is AnswerMessage => {
385 | const m = arg as AnswerMessage;
386 |
387 | return (
388 | m?.type === 'answer' &&
389 | typeof m?.name === 'string' &&
390 | typeof m?.matched === 'boolean'
391 | );
392 | };
393 | export const isGameMessage = (arg: unknown): arg is GameMessage => {
394 | const m = arg as GameMessage;
395 |
396 | return typeof m?.value === 'string';
397 | };
398 |
399 | /* prefecture */
400 | export type PrefectureStr = typeof prefecture[number];
401 | export type HintObj = {
402 | [key in PrefectureStr]: string | number;
403 | };
404 | export type DefinedQuestions = {
405 | [prefecture: string]: string[];
406 | };
407 |
408 | /* User */
409 | export type UserDevice = 'mobile' | 'tablet' | 'desktop';
410 | export type UserObj = {
411 | userName: string;
412 | pingStamp: number;
413 | color: string;
414 | device: UserDevice;
415 | score?: number;
416 | remain?: number;
417 | joiningGame?: string;
418 | };
419 | export type Users = {
420 | [key: string]: UserObj;
421 | };
422 | export const localScoreKey = 'prizm-score';
423 | export const localUserNameKey = 'prizm-username';
424 | export const localUserColorKey = 'prizm-usercolor';
425 | export const localUserSummary = 'prizm-summary';
426 | export const initialRemain = 3;
427 |
428 | export type UserSummaryObj = {
429 | playCount: number;
430 | wonCount: number;
431 | lastPlay: number;
432 | lastWon: number;
433 | currentStreak: number;
434 | maxStreak: number;
435 | averageSpeed: number;
436 | fastestSpeed: number;
437 | lastSpeed: number;
438 | };
439 | export type UserSummaryObjOnStore = UserSummaryObj & MessageNoticeObj;
440 | export const isUserSummaryObj = (arg: unknown): arg is UserSummaryObj => {
441 | const m = arg as UserSummaryObj;
442 |
443 | return (
444 | typeof m?.playCount === 'number' &&
445 | typeof m?.wonCount === 'number' &&
446 | typeof m?.lastPlay === 'number' &&
447 | typeof m?.lastWon === 'number' &&
448 | typeof m?.currentStreak === 'number' &&
449 | typeof m?.maxStreak === 'number' &&
450 | typeof m?.averageSpeed === 'number' &&
451 | typeof m?.fastestSpeed === 'number'
452 | );
453 | };
454 |
--------------------------------------------------------------------------------
/tsconfig.eslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "include": [
4 | "src/**/*.js",
5 | "src/**/*.jsx",
6 | "src/**/*.ts",
7 | "src/**/*.tsx"
8 | ],
9 | "exclude": [
10 | "node_modules"
11 | ]
12 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": [
5 | "dom",
6 | "dom.iterable",
7 | "esnext"
8 | ],
9 | "allowJs": true,
10 | "skipLibCheck": true,
11 | "esModuleInterop": true,
12 | "allowSyntheticDefaultImports": true,
13 | "strict": true,
14 | "forceConsistentCasingInFileNames": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "module": "esnext",
17 | "moduleResolution": "node",
18 | "resolveJsonModule": true,
19 | "isolatedModules": true,
20 | "noEmit": true,
21 | "jsx": "react-jsx",
22 | "baseUrl": "src",
23 | "downlevelIteration": true,
24 | "types": ["@emotion/react/types/css-prop"],
25 | },
26 | "include": [
27 | "src"
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------