98 |
154 | );
155 | };
156 |
157 | export default AnswerInput;
158 |
--------------------------------------------------------------------------------
/src/components/AudioPlayer.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from 'preact/hooks';
2 |
3 | import { DIFFICULTY } from '../constants';
4 | import { useAppDispatch } from '../store';
5 | import { setPokemonLoaded } from '../store/gameSlice';
6 | import { useCurrentPokemonNumber, useGameState, useLang, useSettings } from '../util/hooks';
7 | import { getPokemonSoundUrl } from '../util/pokemon';
8 |
9 | const AudioPlayer = () => {
10 | const dispatch = useAppDispatch();
11 |
12 | const ref = useRef
99 |
118 |
119 | {gameState.answered &&
125 |
126 | {gameState.answered ? (
127 |
128 |
140 | ) : (
141 |
148 | )}
149 |
150 | {!!settings.pendingSettings && (
151 | {lang['settingsEffect']}
152 | )}
153 | {lang.alsoknownas}
129 |-
130 | {Object.values(LANGUAGES)
131 | .filter((lang) => lang.code !== settings.language)
132 | .map((lang) => (
133 |
-
134 |
135 | {pokemonNames[lang.code]} 136 |
137 | ))}
138 |
{lang.eliteNeedsAudio}
; 37 | } 38 | 39 | return null; 40 | } 41 | 42 | return ( 43 | 53 | ); 54 | }; 55 | 56 | export default AudioPlayer; -------------------------------------------------------------------------------- /src/components/CountdownLoader.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useRef, useState } from 'preact/hooks'; 2 | 3 | import { MILLISECONDS_BETWEEN_POKEMON } from '../constants'; 4 | import styles from './css/CountdownLoader.module.css'; 5 | 6 | type CountdownLoaderProps = { 7 | target?: number; 8 | size?: number; 9 | lineWidth?: number; 10 | }; 11 | 12 | const degreesToRadians = (degrees: number) => { 13 | return (Math.PI / 180) * degrees - (Math.PI / 180) * 90; 14 | }; 15 | 16 | /** Shows a loading arc, with the number of seconds remaining in the middle */ 17 | const CountdownLoader = ({ 18 | target = MILLISECONDS_BETWEEN_POKEMON, size = 24, lineWidth = 2, 19 | }: CountdownLoaderProps) => { 20 | const ref = useRef
65 |
71 | {count}
72 |
73 | );
74 | };
75 |
76 | export default CountdownLoader;
77 |
--------------------------------------------------------------------------------
/src/components/GameArea.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'preact/hooks';
2 |
3 | import { DIFFICULTY } from '../constants';
4 | import { useLang, useGameState, useSettings } from '../util/hooks';
5 | import { preloadPokemonMedia } from '../util/pokemon';
6 | import AnswerInput from './AnswerInput';
7 | import AudioPlayer from './AudioPlayer';
8 | import GenerationFinished from './GenerationFinished';
9 | import PokemonSilhouette from './PokemonSilhouette';
10 |
11 | type GameAreaProps = {
12 | onMenuOpen: (menu: 'settings' | 'stats') => void;
13 | };
14 |
15 | const GameArea = ({ onMenuOpen }: GameAreaProps) => {
16 | const lang = useLang();
17 | const settings = useSettings();
18 |
19 | const gameState = useGameState();
20 |
21 | // Handle when the Pokémon is revealed, whether with a correct answer, or by the "I don't know" button
22 | useEffect(() => {
23 | if (gameState.answered) {
24 | if (gameState.pokemon.currentIndex + 1 < gameState.pokemon.numbers.length - 1) {
25 | preloadPokemonMedia(
26 | gameState.pokemon.numbers[gameState.pokemon.currentIndex + 1],
27 | settings.difficulty,
28 | settings.soundEnabled,
29 | );
30 | }
31 | }
32 | }, [gameState.answered]);
33 |
34 | return (
35 |
36 |
37 |
40 |
41 |
47 |
48 | {gameState.pokemon.currentIndex > gameState.pokemon.numbers.length - 1 ? (
49 |
60 | );
61 | };
62 |
63 | export default GameArea;
64 |
--------------------------------------------------------------------------------
/src/components/GenerationFinished.tsx:
--------------------------------------------------------------------------------
1 | import { useAppDispatch } from '../store';
2 | import { resetPokemon } from '../store/actions';
3 | import { useLang, useSettings } from '../util/hooks';
4 |
5 | const GenerationFinished = () => {
6 | const dispatch = useAppDispatch();
7 | const lang = useLang();
8 |
9 | const startAgain = () => {
10 | dispatch(resetPokemon());
11 | };
12 |
13 | return (
14 | {lang.title}
42 | 43 | 46 |
15 |
21 | );
22 | };
23 |
24 | export default GenerationFinished;
--------------------------------------------------------------------------------
/src/components/LanguageSelectorFlags.tsx:
--------------------------------------------------------------------------------
1 | import { LANGUAGES } from '../constants/lang';
2 | import { useAppDispatch } from '../store';
3 | import { setLanguage } from '../store/settingsSlice';
4 | import { useSettings } from '../util/hooks';
5 |
6 | const LanguageSelectorFlags = () => {
7 | const dispatch = useAppDispatch();
8 | const settings = useSettings();
9 |
10 | return (
11 | {lang.genfinished}
16 | 17 | 20 |-
12 | {Object.values(LANGUAGES).map((lang) => (
13 |
- 14 | 21 | 22 | ))} 23 |
37 | {isCounting ? (
38 |
58 | );
59 | };
60 |
61 | export default NextPokemonTimer;
62 |
--------------------------------------------------------------------------------
/src/components/PokemonSilhouette.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 | import { useEffect, useRef } from 'preact/hooks';
3 |
4 | import { DIFFICULTY, Difficulty } from '../constants';
5 | import { useAppDispatch } from '../store';
6 | import { setPokemonLoaded } from '../store/gameSlice';
7 | import { useCurrentPokemonNumber, useGameState, useSettings } from '../util/hooks';
8 | import { getPokemonImageUrl } from '../util/pokemon';
9 |
10 | const IMAGE_DIRECTORIES = {
11 | [DIFFICULTY.EASY]: 'images/artwork/',
12 | [DIFFICULTY.NORMAL]: 'images/artwork/',
13 | [DIFFICULTY.ULTRA]: 'images/sprites/front/',
14 | [DIFFICULTY.MASTER]: 'images/sprites/back/',
15 | [DIFFICULTY.ELITE]: null,
16 | } as const satisfies {
17 | [key in Difficulty]: string | null;
18 | };
19 |
20 | /** Sprites get scaled up, but shouldn't be bigger than this size */
21 | const MAX_SPRITE_SIZE = 400;
22 |
23 | const PokemonSilhouette = () => {
24 | const dispatch = useAppDispatch();
25 |
26 | const canvasRef = useRef setIsCounting(false)}
42 | >
43 |
49 | ) : (
50 |
56 | )}
57 |
46 | 
47 |
48 |
47 |
96 |
97 |
98 | );
99 | };
100 |
101 | export default PokemonSilhouette;
102 |
--------------------------------------------------------------------------------
/src/components/SettingsMenu.tsx:
--------------------------------------------------------------------------------
1 | import classNames from 'classnames';
2 |
3 | import { DIFFICULTY, GENERATIONS } from '../constants';
4 | import { useAppDispatch } from '../store';
5 | import { setDifficulty, setForgivingSpellingEnabled, setSound, toggleGeneration } from '../store/settingsSlice';
6 | import { useLang, useSettings } from '../util/hooks';
7 | import LanguageSelectorFlags from './LanguageSelectorFlags';
8 |
9 | /** These props are only used in the mobile view. The settings menu is always visible on desktop. */
10 | type SettingsMenuProps = {
11 | isOpen: boolean;
12 | onClose: () => void;
13 | };
14 |
15 | const SettingsMenu = ({ isOpen, onClose }: SettingsMenuProps) => {
16 | const dispatch = useAppDispatch();
17 | const lang = useLang();
18 |
19 | const settings = useSettings();
20 |
21 | return (
22 | <>
23 | {isOpen && (
24 |
25 | )}
26 |
27 |
127 |
128 | );
129 | };
130 |
131 | export default SettingsMenu;
132 |
--------------------------------------------------------------------------------
/src/components/StatsListener.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from 'preact/hooks';
2 |
3 | import { useAppDispatch } from '../store';
4 | import { setAnswered } from '../store/statsSlice';
5 | import { useCurrentPokemonNumber, useGameState, useSettings } from '../util/hooks';
6 |
7 | /** This component doesn't render anything, but instead listen's to the game's state via Redux,
8 | * and stores stat data when a Pokémon has been revealed. Having this listener means we can
9 | * track stats easily, regardless of why the Pokémon was revealed. */
10 | const StatsListener = () => {
11 | const dispatch = useAppDispatch();
12 |
13 | const gameState = useGameState();
14 | const settings = useSettings();
15 | const pokemonNumber = useCurrentPokemonNumber();
16 |
17 | useEffect(() => {
18 | if (gameState.answered) {
19 | dispatch(setAnswered({
20 | difficulty: settings.difficulty,
21 | isCorrect: gameState.answered === 'correct',
22 | pokemonNumber: pokemonNumber,
23 | timeStarted: gameState.lastLoadedTime,
24 | }));
25 | }
26 | }, [gameState.answered]);
27 |
28 | return null;
29 | };
30 |
31 | export default StatsListener;
32 |
--------------------------------------------------------------------------------
/src/components/StatsMenu.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo, useState } from 'preact/hooks';
2 |
3 | import { POKEMON_NAMES } from '../constants/pokemon';
4 | import { useGameState, useLang, useSettings, useStats } from '../util/hooks';
5 | import { formatStatTime } from '../util/stats';
6 | import StatsModal from './StatsModal';
7 |
8 | /** These props are only used in the mobile view. The stats menu is always visible on desktop. */
9 | type StatsMenuProps = {
10 | isOpen: boolean;
11 | onClose: () => void;
12 | };
13 |
14 | const StatsMenu = ({ isOpen, onClose }: StatsMenuProps) => {
15 | const lang = useLang();
16 | const stats = useStats();
17 | const settings = useSettings();
18 |
19 | const [isModalOpen, setIsModalOpen] = useState(false);
20 |
21 | const previousPokemonStats = useMemo(() => {
22 | if (stats.lastSeen.length === 0) return null;
23 |
24 | const number = stats.lastSeen[0].pokemon;
25 | if (number === 0) return null;
26 |
27 | const pokemonStats = stats.pokemon[number];
28 | if (!pokemonStats) return null;
29 |
30 | return {
31 | name: POKEMON_NAMES.find((pkmn) => pkmn.number === number)!.names[settings.language],
32 | timesSeen: pokemonStats.timesSeen,
33 | percentage: Math.ceil((pokemonStats.timesCorrect / pokemonStats.timesSeen) * 100),
34 | timeTaken: stats.lastSeen[0].time,
35 | averageTime: pokemonStats.timesCorrect > 0 ? pokemonStats.totalTime / pokemonStats.timesCorrect : null,
36 | };
37 | }, [stats, settings.language]);
38 |
39 | return (
40 | <>
41 | {isOpen && (
42 |
43 | )}
44 | {lang.settings}
28 | 29 |
30 |
56 |
57 | {lang.generation}
31 | 32 |
33 | {Object.values(GENERATIONS).map((generation) => {
34 | const isActive = settings.generations.includes(generation.id);
35 | const willBeActiveNextRound = !!(
36 | (!settings.pendingSettings?.generations && isActive)
37 | || settings.pendingSettings?.generations?.includes(generation.id)
38 | );
39 |
40 | return (
41 |
52 | );
53 | })}
54 |
55 |
58 |
79 |
80 | {settings.language === 'en' && (
81 | {lang.difficulty}
59 | 60 |
61 | {Object.values(DIFFICULTY).map((difficulty) => {
62 | const isActive = difficulty === settings.difficulty;
63 | const willBecomeActiveNextRound = difficulty === settings.pendingSettings?.difficulty;
64 |
65 | return (
66 |
75 | );
76 | })}
77 |
78 |
82 |
99 | )}
100 |
101 | {lang.spelling}
83 | 84 |
85 |
91 |
97 |
98 |
102 |
119 |
120 | {lang.sound}
103 | 104 |
105 |
111 |
117 |
118 |
121 |
124 |
125 |
126 | {lang.language}
122 |
45 |
111 |
112 | {isModalOpen && (
113 | {lang.stats}
46 | 47 |
48 |
66 |
67 | {previousPokemonStats !== null && (
68 | {lang.streak}
49 | 50 |
51 |
65 |
52 |
57 |
58 | {lang.current}
53 | 54 | {stats.streaks.current[settings.difficulty]} 55 | 56 |
59 |
64 | {lang.best}
60 | 61 | {stats.streaks.best[settings.difficulty]} 62 | 63 |
69 |
101 | )}
102 |
103 | {!!settings.pendingSettings && (
104 | {previousPokemonStats.name}
70 | 71 |
72 |
93 |
94 |
100 |
73 |
78 |
79 | {lang.statsTimesCorrect}
74 | 75 | {`${previousPokemonStats.percentage}%`} 76 | 77 |
80 |
85 |
86 | {lang.statsTime}
81 | 82 | {formatStatTime(previousPokemonStats.timeTaken)} 83 | 84 |
87 |
92 | {lang.statsAverageTime}
88 | 89 | {formatStatTime(previousPokemonStats.averageTime)} 90 | 91 |
105 |
109 | )}
110 |
106 | {lang['streakInfo']}
107 |
108 |
71 |
72 |
73 |
134 | );
135 | };
136 |
137 | export default StatsModal;
138 |
--------------------------------------------------------------------------------
/src/components/css/CountdownLoader.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: flex;
3 | align-items: center;
4 | justify-content: center;
5 | position: relative;
6 | }
7 |
8 | .countdownText {
9 | position: absolute;
10 | color: var(--color-text-contrast);
11 | font-size: 80%;
12 | line-height: 1;
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/css/NextPokemonTimer.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | position: absolute;
3 | top: 50%;
4 | transform: translateY(-50%);
5 | right: 8px;
6 |
7 | button {
8 | display: flex;
9 | }
10 | }
11 |
12 | .countdownContainer {
13 | position: relative;
14 | display: flex;
15 | justify-content: center;
16 | align-items: center;
17 | cursor: pointer;
18 | animation: slideInRight .2s ease;
19 |
20 | &:hover {
21 | .iconPauseContainer {
22 | opacity: 1;
23 | }
24 | }
25 | }
26 |
27 | .iconPauseContainer {
28 | position: absolute;
29 | inset: 2px;
30 | display: flex;
31 | justify-content: center;
32 | align-items: center;
33 | background-color: var(--color-positive);
34 | border-radius: 100px;
35 | opacity: 0;
36 | transition: opacity .2s ease;
37 |
38 | img {
39 | width: 16px;
40 | height: 16px;
41 | }
42 | }
43 |
44 | .nextButton {
45 | animation: slideInRight .2s ease;
46 | }
47 |
48 | @keyframes slideInRight {
49 | 0% { transform: translateX(4px) }
50 | 100% { transform: translateX(0px) }
51 | }
52 |
--------------------------------------------------------------------------------
/src/components/css/StatsModal.module.css:
--------------------------------------------------------------------------------
1 | .container {
2 | z-index: 100;
3 | position: fixed;
4 | top: 0;
5 | right: 0;
6 | bottom: 0;
7 | left: 0;
8 | display: flex;
9 | justify-content: center;
10 | align-items: center;
11 | }
12 |
13 | .backdrop {
14 | z-index: 101;
15 | position: absolute;
16 | top: 0;
17 | right: 0;
18 | bottom: 0;
19 | left: 0;
20 | background-color: rgba(0,0,0,0.6);
21 | }
22 |
23 | .content {
24 | z-index: 102;
25 | position: relative;
26 | background-color: var(--color-modal-content);
27 | margin: 32px 12px;
28 | border-radius: 8px;
29 | max-width: 100%;
30 | max-height: calc(100% - 64px);
31 | overflow-y: auto;
32 | }
33 |
34 | .table {
35 | text-transform: capitalize;
36 | width: 100%;
37 | background-color: #fafafa;
38 | overflow: hidden;
39 | text-align: left;
40 |
41 | thead tr {
42 | th {
43 | padding: 8px 10px;
44 | background-color: var(--color-primary);
45 | color: var(--color-text-contrast);
46 | cursor: pointer;
47 |
48 | &[data-active=true] {
49 | position: relative;
50 |
51 | &::after {
52 | position: absolute;
53 | right: 0;
54 | top: 50%;
55 | transform: translateY(-50%);
56 | font-size: 60%;
57 | content: '▲';
58 | }
59 | }
60 | }
61 |
62 | &[data-sort-ascending=false] th[data-active=true]::after {
63 | content: '▼';
64 | }
65 | }
66 |
67 | tr:nth-child(2n + 1) {
68 | background-color: #eee;
69 | }
70 |
71 | td {
72 | padding: 8px;
73 |
74 | &:first-child {
75 | font-family: monospace;
76 | margin: 0;
77 | background-color: var(--color-primary);
78 | color: var(--color-text-contrast);
79 | }
80 | }
81 | }
82 |
83 | .closeButton {
84 | position: absolute;
85 | top: 0;
86 | right: 0;
87 | width: 20px;
88 | height: 20px;
89 | border-bottom-left-radius: 4px;
90 | display: flex;
91 | align-items: center;
92 | justify-content: center;
93 | background-color: var(--color-side-box);
94 | }
95 |
96 | @media (min-width: 460px) {
97 | .closeButton {
98 | display: none; /* hide the close button since the backdrop is big enough to click */
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | import type { PokemonNumber } from './pokemon';
2 |
3 | export const DIFFICULTY = {
4 | EASY: 4,
5 | NORMAL: 0,
6 | ULTRA: 1,
7 | MASTER: 2,
8 | ELITE: 3,
9 | } as const;
10 |
11 | export type DifficultyKey = keyof typeof DIFFICULTY;
12 | export type Difficulty = typeof DIFFICULTY[DifficultyKey];
13 |
14 | export type GenerationId = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
15 |
16 | export type Generation = {
17 | id: GenerationId;
18 | start: PokemonNumber;
19 | end: PokemonNumber;
20 | supportedDifficulties: readonly Difficulty[];
21 | games: string;
22 | };
23 |
24 | export const GENERATIONS: { [key in GenerationId]: Generation } = {
25 | 1: {
26 | id: 1,
27 | start: 1,
28 | end: 151,
29 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
30 | games: 'Red, Blue, & Yellow',
31 | },
32 | 2: {
33 | id: 2,
34 | start: 152,
35 | end: 251,
36 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
37 | games: 'Gold, Silver, & Crystal',
38 | },
39 | 3: {
40 | id: 3,
41 | start: 252,
42 | end: 386,
43 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
44 | games: 'Ruby, Sapphire, & Emerald',
45 | },
46 | 4: {
47 | id: 4,
48 | start: 387,
49 | end: 493,
50 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
51 | games: 'Diamond, Pearl, & Platinum',
52 | },
53 | 5: {
54 | id: 5,
55 | start: 494,
56 | end: 649,
57 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
58 | games: 'Black & White',
59 | },
60 | 6: {
61 | id: 6,
62 | start: 650,
63 | end: 721,
64 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
65 | games: 'X & Y',
66 | },
67 | 7: {
68 | id: 7,
69 | start: 722,
70 | end: 807,
71 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ULTRA, DIFFICULTY.MASTER, DIFFICULTY.ELITE, DIFFICULTY.EASY],
72 | games: 'Sun, Moon, Ultra Sun, & Ultra Moon',
73 | },
74 | 8: {
75 | id: 8,
76 | // Technically gen 8 starts at 810, but 808 and 809 don't have sprites, and so are closer to being gen 8
77 | // than gen 7 (they were introduced in Let's Go)
78 | start: 808,
79 | end: 905,
80 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ELITE, DIFFICULTY.EASY],
81 | games: 'Let\'s Go, Sword, Shield, & Legends: Arceus',
82 | },
83 | 9: {
84 | id: 9,
85 | start: 906,
86 | end: 1025,
87 | supportedDifficulties: [DIFFICULTY.NORMAL, DIFFICULTY.ELITE, DIFFICULTY.EASY],
88 | games: 'Scarlet & Violet',
89 | },
90 | } as const;
91 |
92 | export const MILLISECONDS_BETWEEN_POKEMON = 3000;
93 |
--------------------------------------------------------------------------------
/src/constants/lang.ts:
--------------------------------------------------------------------------------
1 | export type LanguageId = 'en' | 'de' | 'fr' | 'ja' | 'zh';
2 |
3 | export const LANGUAGES = {
4 | en: {
5 | flagUrl: 'images/flags/gb.svg',
6 | code: 'en',
7 | },
8 | de: {
9 | flagUrl: 'images/flags/de.svg',
10 | code: 'de',
11 | },
12 | fr: {
13 | flagUrl: 'images/flags/fr.svg',
14 | code: 'fr',
15 | },
16 | ja: {
17 | flagUrl: 'images/flags/jp.svg',
18 | code: 'ja',
19 | },
20 | zh: {
21 | flagUrl: 'images/flags/cn.svg',
22 | code: 'zh',
23 | },
24 | } as const satisfies {
25 | [langId in LanguageId]: {
26 | flagUrl: string;
27 | code: LanguageId;
28 | }
29 | };
30 |
31 | const LANG_EN = {
32 | title: "Who's That Pokémon?",
33 | dontknow: "I don't know!",
34 | generation: 'Generation',
35 | difficulty: 'Difficulty',
36 | 'difficulty-0': 'Normal',
37 | 'difficulty-1': 'Ultra',
38 | 'difficulty-2': 'Master',
39 | 'difficulty-3': 'Elite',
40 | 'difficulty-4': 'Easy',
41 | spelling: 'Spelling',
42 | 'spelling-exact': 'Exact',
43 | 'spelling-forgiving': 'Forgiving',
44 | sound: 'Sound',
45 | on: 'On',
46 | off: 'Off',
47 | streak: 'Streak',
48 | best: 'Best',
49 | current: 'Current',
50 | previous: 'Previous',
51 | alsoknownas: 'Also Known As',
52 | nextpokemon: 'Next Pokémon in _TIME_ seconds (press Enter to skip)',
53 | loadfail: 'This is taking a while to load. Do you want to try loading another one? It won\'t affect your streak. Load a new Pokémon?',
54 | slowconn: 'Is your connection slow or down? Maybe try a harder difficulty, they load faster.',
55 | loadnew: 'Load a new Pokémon?',
56 | streakInfo: 'Note: Your streaks and times are separate for each difficulty',
57 | settingsEffect: 'Your new settings will take effect for the next Pokémon',
58 | genfinished: "There are no Pokémon left! Why not try a different generation or difficulty? Or you can start again with the same settings. Note that Gen 8 and 9 don't support Ultra and Master difficulties as these games don't have sprites.",
59 | startAgain: 'Start again',
60 | infobox: 'NEW: Indigo Disk support added! Since Gen 8, Pokémon do not have sprites available, so only Easy, Normal and Elite modes are supported. If you find any issues, let me know on GitHub!',
61 | footer: 'Send feedback or contribute at GitHub. Images and sounds contributed by sora10pls.
74 |
75 |
76 |
128 |
129 |
132 |
133 | | 82 | {lang.statsNumber} 83 | | 84 |89 | {lang.statsName} 90 | | 91 |96 | {lang.statsTimesCorrect} 97 | | 98 |103 | {lang.statsAverageTime} 104 | | 105 |110 | {lang.statsTimesSeen} 111 | | 112 |
|---|---|---|---|---|
| {`${data.number.toString().padStart(3, '0')}`} | 119 |{data.name} | 120 |{data.correct > -1 ? `${data.correct}%` : '-'} | 121 |{data.time > - 1 ? formatStatTime(data.time) : '-'} | 122 |{data.seen} | 123 |
Japanese data via Tabikana Travel Japanese. Images and sounds © Nintendo.', 62 | language: 'Language', 63 | settings: 'Settings', 64 | eliteNeedsAudio: 'You must set Sound to On to play in Elite mode', 65 | stats: 'Stats', 66 | seeAllStats: 'See all stats', 67 | statsNumber: 'No.', 68 | statsName: 'Name', 69 | statsTime: 'Time Taken', 70 | statsAverageTime: 'Avg Time', 71 | statsTimesSeen: 'Times Seen', 72 | statsTimesCorrect: 'Correct %', 73 | }; 74 | 75 | export type TranslationKey = keyof typeof LANG_EN; 76 | 77 | type TranslationObject = { 78 | [key in TranslationKey]?: string; 79 | }; 80 | 81 | const LANG_FR: TranslationObject = { 82 | title: 'Quel est ce Pokémon ?', 83 | dontknow: 'Je ne sais pas !', 84 | generation: 'Génération', 85 | difficulty: 'Difficulté', 86 | 'difficulty-0': 'Normale', 87 | 'difficulty-1': 'Hyper', 88 | 'difficulty-2': 'Master', 89 | 'difficulty-3': 'Élite', 90 | 'difficulty-4': 'Facile', 91 | spelling: 'Orthographe', 92 | 'spelling-exact': 'Exacte', 93 | 'spelling-forgiving': 'Tolérant', 94 | sound: 'Son', 95 | on: 'Oui', 96 | off: 'Non', 97 | streak: 'Consécutif', 98 | best: 'Meilleur', 99 | current: 'Actuel', 100 | previous: 'Précédent', 101 | alsoknownas: 'Aussi connu sous le nom de', 102 | nextpokemon: 'Pokémon suivante dans _TIME_ secondes (ou Entrée pour sauter)', 103 | loadfail: 'C\'est lent à charger. Essayez un autre ?', 104 | slowconn: 'Connexion lente ?', 105 | loadnew: 'Charger un nouveau Pokémon ?', 106 | streakInfo: 'Vos records sont distincts pour chaque difficulté', 107 | settingsEffect: 'Vos nouveaux paramètres prendront effet pour la prochaine Pokémon', 108 | genfinished: "Il n'y a plus de Pokémon ! Essayez une génération ou une difficulté différente. Les Gen 8 et 9 ne prennent pas en charge les difficultés Hyper et Master car ces jeux n'ont pas de sprites.", 109 | startAgain: 'Start again', 110 | footer: 'Contribuez à Github. Les images et les sons contribué par sora10pls.
Infos japonaises de Tabikana Travel Japanese. Les images et les sons © Nintendo.', 111 | language: 'Langue', 112 | settings: 'Options', 113 | stats: 'Stats', 114 | }; 115 | 116 | const LANG_DE: TranslationObject = { 117 | title: 'Wer ist das Pokémon?', 118 | dontknow: 'Ich weiß nicht', 119 | generation: 'Generation', 120 | difficulty: 'Schwierigkeit', 121 | 'difficulty-0': 'Normale', 122 | 'difficulty-1': 'Hyper', 123 | 'difficulty-2': 'Meister', 124 | 'difficulty-3': 'Elite', 125 | 'difficulty-4': 'Einfach', 126 | spelling: 'Rechtschreibung', 127 | 'spelling-exact': 'Exakt', 128 | 'spelling-forgiving': 'Tolerant', 129 | sound: 'Ton', 130 | on: 'Ja', 131 | off: 'Nein', 132 | streak: 'Konsekutiv', 133 | best: 'Beste', 134 | current: 'Aktuell', 135 | previous: 'Früher', 136 | alsoknownas: 'Also Known As', 137 | nextpokemon: 'Weiter Pokémon in _TIME_ Sekunden (oder Enter zum Überspringen)', 138 | loadfail: 'Dies ist nur langsam geladen. Versuchen Sie ein anderes?', 139 | slowconn: 'Langsame Verbindung?', 140 | loadnew: 'Legen Sie eine neue Pokémon?', 141 | streakInfo: 'Ihre Aufzeichnungen sind für jeden Schwierigkeitsgrad separaten', 142 | settingsEffect: 'Ihre neuen Einstellungen werden für die nächste Pokémon nehmen', 143 | genfinished: 'Es gibt keine Pokémon mehr! Versuchen Sie es mit einer anderen Generation oder Schwierigkeit. Gen 8 und 9 unterstützen keine Hyper- und Meister-Schwierigkeiten, da diese Spiele keine Sprites haben.', 144 | footer: 'Beitragen bei Github. Bilder und Töne beigetragen von sora10pls.
Japanische Infos von Tabikana Travel Japanese. Bilder und Töne © Nintendo.', 145 | language: 'Sprache', 146 | settings: 'Options', 147 | stats: 'Statistik', 148 | }; 149 | 150 | const LANG_JA: TranslationObject = { 151 | title: 'だれだ？', 152 | dontknow: 'わかりません', 153 | generation: '世代', 154 | difficulty: '難度', 155 | 'difficulty-0': '普通', 156 | 'difficulty-1': 'ハイパー', 157 | 'difficulty-2': 'マスター', 158 | 'difficulty-3': '天王', 159 | 'difficulty-4': '簡単', 160 | spelling: 'スペリング', 161 | 'spelling-exact': '正確', 162 | 'spelling-forgiving': '甘い', 163 | sound: 'サウンド', 164 | on: 'オン', 165 | off: 'オフ', 166 | streak: '連勝', 167 | best: 'ベスト', 168 | current: '現在', 169 | previous: '前回', 170 | alsoknownas: '他の言語での名前', 171 | nextpokemon: '_TIME_秒で次のポケモンが登場します(リターンキーを押してスキップします)', 172 | loadfail: '通信エラーが発生したため、新しいポケモンをロードするために、ここにクリックしてください。連勝が影響を受けません。', 173 | slowconn: '接続が遅い可能性があります。ロード時間を改善するために、他の難度をご選択ください。', 174 | loadnew: '新たなポケモンをロードしますか？', 175 | streakInfo: '各難度で連勝や時間が違います。', 176 | settingsEffect: 'この後で新しい設定が有効になります。', 177 | genfinished: 'ポケモンが残っていません！ 別の世代または難易度を試してください。 第8世代か第9世代は、これらのゲームにはスプライトがないため、ハイパー および マスター の難易度をサポートしていません。', 178 | footer: 'フィードバック：GitHub。sora10plsが収集した画像と音声。
Tabikana Travel Japaneseはカタカナチェックをした。画像と音声 © Nintendo.', 179 | language: 'ランゲージ', 180 | settings: 'オプション', 181 | stats: 'レコード', 182 | }; 183 | 184 | const LANG_ZH: TranslationObject = { 185 | title: '我是谁？', 186 | dontknow: '我不知道！', 187 | generation: '世代', 188 | difficulty: '难度', 189 | 'difficulty-0': '普通', 190 | 'difficulty-1': '超级', 191 | 'difficulty-2': '大师', 192 | 'difficulty-3': '精英', 193 | 'difficulty-4': '简单', 194 | spelling: '拼写', 195 | 'spelling-exact': '准确', 196 | 'spelling-forgiving': '模糊', 197 | sound: '声音', 198 | on: '开', 199 | off: '关', 200 | streak: '连胜', 201 | best: '最佳', 202 | current: '当前', 203 | previous: '之前', 204 | alsoknownas: '也被称作', 205 | nextpokemon: '下一只宝可梦将在 _TIME_ 秒后出现 (按回车键跳过)', 206 | loadfail: '加载时间较长。是否要加载其他的宝可梦？这将不会影响连胜数。加载一个新的宝可梦！', 207 | slowconn: '网络连接似乎有些慢。你可以尝试更高的难度，可以提高加载速度。', 208 | loadnew: '加载一个新的宝可梦！', 209 | streakInfo: '每个难度的连胜次数和时间都是分开的', 210 | settingsEffect: '新设置将对下一只宝可梦生效', 211 | genfinished: '没有宝可梦了！ 尝试不同的世代或难度。 第八世代 和 第九世代 不支持 超级 和 大师 难度，因为这些游戏没有精灵。', 212 | footer: '请在 GitHub 上提交反馈或贡献。图像和音频由 sora10pls 提供。
来自Tabikana Travel Japanese的日文信息。图像和音频 © Nintendo。', 213 | language: '语言', 214 | settings: '设置', 215 | stats: '状态', 216 | }; 217 | 218 | export const TRANSLATIONS = { 219 | en: LANG_EN, 220 | fr: LANG_FR, 221 | de: LANG_DE, 222 | ja: LANG_JA, 223 | zh: LANG_ZH, 224 | } as const; 225 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --color-background: #d7dbdd; 3 | --color-box-background: rgba(255, 255, 255, 0.25); 4 | --color-side-box: #34495e; 5 | --color-side-box-selected: #fff; 6 | --color-side-box-faded: #9dbbd9; 7 | --color-primary: #3498db; 8 | --color-text: #333; 9 | --color-text-contrast: #fff; 10 | --color-text-muted: #666; 11 | --color-text-muted-shadow: #e1e1e1; 12 | --color-positive: #27ae60; 13 | --color-negative: #c0392b; 14 | --color-modal-content: #fff; 15 | --font-family: 'Cantora One', sans-serif; 16 | } 17 | 18 | * { 19 | box-sizing: border-box; 20 | } 21 | 22 | @font-face { 23 | font-family: 'Cantora One'; 24 | font-style: normal; 25 | font-weight: 400; 26 | /* This edited version of Cantora One fixes an issue where "Stufful" appeared as "Stuffhl" */ 27 | src: url(../fonts/cantora-one-fixed.woff); 28 | } 29 | 30 | html, body, #stage, .app { 31 | margin: 0; 32 | padding: 0; 33 | height: 100%; 34 | width: 100%; 35 | } 36 | 37 | body { 38 | background: var(--color-background); 39 | text-align: center; 40 | font-family: var(--font-family); 41 | max-height: 100%; 42 | font-size: 16px; 43 | } 44 | 45 | a { 46 | text-decoration: none; 47 | font-weight: bold; 48 | color: var(--color-text); 49 | cursor: pointer; 50 | } 51 | 52 | button { 53 | border: 0; 54 | padding: 0; 55 | background-color: transparent; 56 | font-family: var(--font-family); 57 | color: var(--color-text-contrast); 58 | cursor: pointer; 59 | } 60 | 61 | h1, h2, h3 { 62 | color: var(--color-text-contrast); 63 | text-shadow: 1px 1px rgba(0,0,0,0.5); 64 | margin: 0; 65 | } 66 | 67 | ul { 68 | list-style: none; 69 | margin: 0; 70 | padding: 0; 71 | } 72 | 73 | .app { 74 | display: flex; 75 | flex-direction: column; 76 | justify-content: center; 77 | align-items: center; 78 | margin: auto; 79 | width: 760px; 80 | } 81 | 82 | .app-inner { 83 | display: flex; 84 | align-self: stretch; 85 | } 86 | 87 | .app-inner-main { 88 | display: flex; 89 | flex-direction: column; 90 | flex: 1; 91 | } 92 | 93 | /* Language selector */ 94 | 95 | .language-selector-flags { 96 | display: flex; 97 | gap: 4px; 98 | align-self: flex-end; 99 | margin-bottom: 10px; 100 | } 101 | 102 | .language-selector-flags button { 103 | display: flex; 104 | justify-content: center; 105 | border-radius: 2px; 106 | overflow: hidden; 107 | } 108 | 109 | .language-selector-flags button.selected { 110 | box-shadow: 0 0 0 2px var(--color-primary); 111 | } 112 | 113 | .language-selector-flags img { 114 | display: block; 115 | width: 20px; 116 | height: 15px; 117 | object-fit: cover; 118 | } 119 | 120 | /* Settings and Stats */ 121 | 122 | .menu { 123 | display: flex; 124 | flex-direction: column; 125 | min-width: 120px; 126 | max-width: 120px; 127 | padding-top: 40px; 128 | } 129 | 130 | .menu h1 { 131 | display: none; 132 | } 133 | 134 | .menu h2 { 135 | font-size: 100%; 136 | margin-bottom: 2px; 137 | color: var(--color-side-box); 138 | text-shadow: 1px 1px var(--color-text-contrast); 139 | text-transform: capitalize; 140 | } 141 | 142 | .menu h3 { 143 | font-size: 90%; 144 | color: var(--color-side-box-faded); 145 | } 146 | 147 | .menu-section-mobile-only { 148 | display: none; 149 | } 150 | 151 | .menu-section button { 152 | padding: 5px; 153 | font-size: 100%; 154 | background-color: var(--color-side-box); 155 | color: var(--color-side-box-faded); 156 | } 157 | 158 | .menu-section button.selected { 159 | background-color: var(--color-side-box-selected); 160 | color: var(--color-side-box); 161 | } 162 | 163 | .menu-section button.pending { 164 | background-color: var(--color-side-box-faded); 165 | color: var(--color-side-box); 166 | } 167 | 168 | .menu-section-inner { 169 | display: flex; 170 | flex-direction: column; 171 | overflow: hidden; 172 | background-color: var(--color-side-box); 173 | color: var(--color-text-contrast); 174 | margin-bottom: 10px; 175 | } 176 | 177 | .settings .menu-section-inner { 178 | border-top-left-radius: 10px; 179 | border-bottom-left-radius: 10px; 180 | } 181 | 182 | .stats .menu-section-inner { 183 | border-top-right-radius: 10px; 184 | border-bottom-right-radius: 10px; 185 | padding: 5px; 186 | gap: 10px; 187 | } 188 | 189 | .menu-credits { 190 | display: none; 191 | padding: 8px; 192 | margin: 16px -4px 0; 193 | background-color: var(--color-box-background); 194 | border-radius: 8px; 195 | color: var(--color-text-contrast); 196 | font-size: 80%; 197 | align-self: flex-end; 198 | justify-self: flex-end; 199 | } 200 | 201 | .menu-credits a { 202 | font-weight: 700; 203 | color: var(--color-text-contrast); 204 | text-decoration: underline; 205 | } 206 | 207 | .stats .streak-note { 208 | font-size: 80%; 209 | } 210 | 211 | .settings-generations-grid { 212 | display: grid; 213 | grid-template-columns: repeat(3, 1fr); 214 | } 215 | 216 | .settings-list-sound { 217 | display: grid; 218 | grid-template-columns: repeat(2, 1fr); 219 | } 220 | 221 | .stats-number { 222 | font-size: 200%; 223 | line-height: 1; 224 | } 225 | 226 | button.see-all-stats-button { 227 | background-color: transparent; 228 | font-size: 80%; 229 | color: var(--color-side-box); 230 | } 231 | 232 | /* Game Area */ 233 | 234 | .game-area { 235 | flex: 1; 236 | display: flex; 237 | flex-direction: column; 238 | gap: 20px; 239 | padding: 15px; 240 | background-color: var(--color-primary); 241 | color: var(--color-text-contrast); 242 | min-height: 640px; 243 | width: 100%; 244 | border-radius: 10px; 245 | } 246 | 247 | header h1 { 248 | margin: 10px 0; 249 | } 250 | 251 | header button { 252 | display: none; 253 | } 254 | 255 | .canvas-container { 256 | display: flex; 257 | flex-direction: column; 258 | justify-content: center; 259 | align-items: center; 260 | min-height: 350px; 261 | } 262 | 263 | .canvas-container-sprite-mode { 264 | image-rendering: pixelated; 265 | } 266 | 267 | @keyframes canvasAnimation { 268 | 0% { 269 | opacity: 0.2; 270 | } 271 | 100% { 272 | opacity: 1; 273 | } 274 | } 275 | 276 | .canvas-container-animated { 277 | animation: canvasAnimation .3s ease; 278 | } 279 | 280 | @media (prefers-reduced-motion) { 281 | .canvas-container-animated { 282 | animation: none; 283 | } 284 | } 285 | 286 | .sound-off-warning { 287 | background-color: var(--color-negative); 288 | align-self: center; 289 | padding: 10px; 290 | border-radius: 4px; 291 | } 292 | 293 | .audio-player { 294 | align-self: center; 295 | } 296 | 297 | .answer-area { 298 | display: flex; 299 | flex-direction: column; 300 | align-items: center; 301 | gap: 7px; 302 | } 303 | 304 | .answer-input-container { 305 | position: relative; 306 | } 307 | 308 | .progress-counter { 309 | position: absolute; 310 | top: 100%; 311 | right: 0; 312 | padding: 2px; 313 | font-size: 80%; 314 | } 315 | 316 | .answer-input { 317 | height: 50px; 318 | font-size: 175%; 319 | min-width: 200px; 320 | border: 0; 321 | border-radius: 10px; 322 | text-align: center; 323 | text-transform: capitalize; 324 | font-family: 'Cantora One', sans-serif; 325 | outline: none; 326 | } 327 | 328 | .answer-input-correct { 329 | transition: background-color .1s; 330 | background-color: var(--color-positive); 331 | color: var(--color-text-contrast); 332 | } 333 | 334 | @media (prefers-reduced-motion) { 335 | .answer-input-correct { 336 | transition: none; 337 | } 338 | } 339 | 340 | .dont-know-button { 341 | text-shadow: 1px 1px var(--color-negative); 342 | font-size: 120%; 343 | padding: 1px 8px; 344 | } 345 | 346 | .also-known-as h2 { 347 | font-size: 100%; 348 | } 349 | 350 | .also-known-as ul { 351 | display: flex; 352 | align-items: center; 353 | justify-content: center; 354 | flex-wrap: wrap; 355 | gap: 4px; 356 | list-style: none; 357 | padding: 0; 358 | margin: 4px 0 0 0; 359 | } 360 | 361 | .also-known-as ul li { 362 | display: flex; 363 | align-items: center; 364 | gap: 4px; 365 | color: var(--color-text-contrast); 366 | background-color: var(--color-box-background); 367 | padding: 4px 8px; 368 | border-radius: 4px; 369 | text-transform: capitalize; 370 | } 371 | 372 | .also-known-as img { 373 | width: 18px; 374 | height: 13px; 375 | border-radius: 2px; 376 | object-fit: cover; 377 | } 378 | 379 | .new-settings-effect { 380 | background-color: var(--color-side-box); 381 | padding: 4px 12px; 382 | border-radius: 8px; 383 | } 384 | 385 | .generation-finished p { 386 | margin: 0; 387 | } 388 | 389 | .generation-finished button { 390 | font-size: 150%; 391 | padding: 5px 10px; 392 | margin-top: 10px; 393 | background-color: var(--color-side-box); 394 | border-radius: 4px; 395 | } 396 | 397 | footer { 398 | color: var(--color-text-muted); 399 | font-size: 75%; 400 | margin: 1em; 401 | text-align: center; 402 | text-shadow: 1px 1px var(--color-text-muted-shadow); 403 | } 404 | 405 | footer a { 406 | color: var(--color-text-muted); 407 | text-decoration: underline; 408 | } 409 | 410 | @media (max-width: 460px) { 411 | body { 412 | background-color: var(--color-primary); 413 | } 414 | 415 | .app, .app-inner, .app-inner-main, .game-area { 416 | width: 100%; 417 | height: 100%; 418 | } 419 | 420 | .game-area { 421 | border-radius: 0; 422 | min-height: 0; 423 | padding: 0; 424 | } 425 | 426 | header { 427 | position: absolute; 428 | top: 0; 429 | right: 0; 430 | left: 0; 431 | display: flex; 432 | align-items: center; 433 | justify-content: space-between; 434 | gap: 4px; 435 | height: 48px; 436 | line-height: 48px; 437 | } 438 | 439 | header h1 { 440 | margin: 0; 441 | font-size: 125%; 442 | } 443 | 444 | header button { 445 | display: block; 446 | height: 36px; 447 | width: 36px; 448 | padding: 6px; 449 | margin: 6px 0; 450 | background-color: rgba(255, 255, 255, 0.25); 451 | box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.2); 452 | } 453 | 454 | header button:first-child { 455 | border-top-right-radius: 4px; 456 | border-bottom-right-radius: 4px; 457 | } 458 | 459 | header button:last-child { 460 | border-top-left-radius: 4px; 461 | border-bottom-left-radius: 4px; 462 | } 463 | 464 | header button img { 465 | width: 100%; 466 | height: 100%; 467 | display: block; 468 | } 469 | 470 | .canvas-container { 471 | min-height: 0; 472 | flex: 1; 473 | padding: 10px; 474 | padding-top: 50px; /* Push canvas below the header text */ 475 | } 476 | 477 | .canvas-container canvas { 478 | height: auto; 479 | max-height: 100%; 480 | max-width: 90%; 481 | min-height: 0; 482 | object-fit: contain; 483 | } 484 | 485 | .generation-finished { 486 | padding: 10px; 487 | padding-top: 50px; 488 | } 489 | 490 | .app-inner-main .language-selector-flags, 491 | footer { 492 | display: none; 493 | } 494 | 495 | .menu { 496 | position: fixed; 497 | top: 0; 498 | height: 100%; 499 | width: 50%; 500 | max-width: none; 501 | padding: 10px; 502 | background-color: rgba(0,0,0,0.8); 503 | box-shadow: 0 0 2px 2px rgba(0,0,0,0.5); 504 | transition: all 0.2s; 505 | overflow-y: auto; 506 | overflow-x: hidden; 507 | z-index: 100; 508 | } 509 | 510 | .menu .language-selector-flags li { 511 | flex: 1; 512 | } 513 | 514 | .menu .language-selector-flags li button { 515 | width: 100%; 516 | } 517 | 518 | .open-menu-overlay { 519 | position: fixed; 520 | top: 0; 521 | right: 0; 522 | bottom: 0; 523 | left: 0; 524 | z-index: 100; 525 | background-color: rgba(0,0,0,0.5); 526 | } 527 | 528 | .menu h1 { 529 | display: block; 530 | margin-bottom: 10px; 531 | } 532 | 533 | .menu h2 { 534 | color: var(--color-text-contrast); 535 | text-shadow: none; 536 | } 537 | 538 | .menu-section-mobile-only { 539 | display: block; 540 | } 541 | 542 | .menu-section-inner { 543 | border-radius: 10px; 544 | } 545 | 546 | .menu.settings { left: -60%; } 547 | .menu.settings.shown { 548 | left: 0; 549 | } 550 | 551 | .menu-credits { 552 | display: block; 553 | } 554 | 555 | .menu.stats { right: -60%; } 556 | .menu.stats.shown { right: 0; } 557 | 558 | .answer-area { 559 | z-index: 10; 560 | width: 100%; 561 | padding: 10px; 562 | background-color: rgba(0, 0, 0, 0.1); 563 | gap: 0; 564 | } 565 | 566 | .answer-input-container { 567 | width: 100%; 568 | } 569 | 570 | .answer-input { 571 | margin: 0 0 5px 0; 572 | width: 100%; 573 | } 574 | 575 | .dont-know-button { 576 | font-size: 100%; 577 | -webkit-user-select: none; 578 | } 579 | 580 | .also-known-as { 581 | width: 100%; 582 | padding-right: 60px; /* try to avoid overlaying the count text */ 583 | } 584 | 585 | .also-known-as h2 { 586 | display: none; 587 | } 588 | 589 | .also-known-as ul { 590 | flex-wrap: nowrap; 591 | overflow-x: auto; 592 | max-width: 100%; 593 | justify-content: flex-start; 594 | gap: 2px; 595 | margin: 0; 596 | } 597 | 598 | .also-known-as ul li { 599 | font-size: 80%; 600 | line-height: 1; 601 | padding: 2px 4px; 602 | border-radius: 2px; 603 | word-break: keep-all; /* don't break the Japanese or Chinese names */ 604 | white-space: nowrap; 605 | } 606 | 607 | .also-known-as img { 608 | width: 12px; 609 | height: 9px; 610 | } 611 | 612 | .new-settings-effect { 613 | margin: 8px 0 0 0; 614 | font-size: 90%; 615 | width: 100%; 616 | } 617 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import { render } from 'preact'; 2 | import { Provider } from 'react-redux'; 3 | import { PersistGate } from 'redux-persist/integration/react'; 4 | 5 | import App from './App'; 6 | import { persistor, store } from './store'; 7 | 8 | document.addEventListener('DOMContentLoaded', () => { 9 | render(( 10 |