- {children}
-
- {isSelectShown && (
-
- {options.map((item, index) => (
-
onItemClick(item)}
- onKeyDown={(e) => onItemKeyDown(e, item)}
- className={cn("select-item", {
- "select-item--selected": item === current,
- })}
- >
- {item}
-
- ))}
+ return (
+
+ {children}
+
+ {isSelectShown && (
+
+ {options.map((item, index) => (
+
onItemClick(item)}
+ onKeyDown={(e) => onItemKeyDown(e, item)}
+ className={cn('select-item', {
+ 'select-item--selected': item === current,
+ })}
+ >
+ {item}
+
+ ))}
+
+ )}
- )}
-
- );
+ );
};
-SelectComponent.displayName = "SelectComponent";
+SelectComponent.displayName = 'SelectComponent';
diff --git a/src/components/settings-component/index.ts b/src/components/settings-component/index.ts
new file mode 100644
index 0000000..6eda67e
--- /dev/null
+++ b/src/components/settings-component/index.ts
@@ -0,0 +1 @@
+export { SettingsComponent } from './settings-component';
diff --git a/src/components/settings-component/settings-component.scss b/src/components/settings-component/settings-component.scss
index 8c9da50..b9469c6 100644
--- a/src/components/settings-component/settings-component.scss
+++ b/src/components/settings-component/settings-component.scss
@@ -1,4 +1,4 @@
-@import "../../app/style";
+@import "../../pages/app/style";
$settingsWidth: 182px;
$settingsHeight: 315px;
diff --git a/src/components/settings-component/settings-component.tsx b/src/components/settings-component/settings-component.tsx
index 799eee5..4844dea 100644
--- a/src/components/settings-component/settings-component.tsx
+++ b/src/components/settings-component/settings-component.tsx
@@ -1,132 +1,127 @@
-import * as React from "react";
+import * as React from 'react';
-import ru from "../../locales/ru.json";
-import en from "../../locales/en.json";
-import { useSettings } from "../../hooks";
-import { Settings } from "../../settings-context";
-import {
- BorderedHeader,
- CheckBoxComponent,
- RangeComponent,
- SelectComponent,
-} from "..";
+import ru from '../../locales/ru.json';
+import en from '../../locales/en.json';
+import { useSettings } from '../../hooks';
+import { Settings } from '../../settings-context';
+import { BorderedHeader, CheckboxComponent, RangeComponent, SelectComponent } from '..';
-import "./settings-component.scss";
+import './settings-component.scss';
interface Props {
- closeSettings: () => void;
- checkboxOnSoundPlay: (volume?: number) => void;
- checkboxOffSoundPlay: (volume?: number) => void;
+ closeSettings: () => void;
+ checkboxOnSoundPlay: (volume?: number) => void;
+ checkboxOffSoundPlay: (volume?: number) => void;
}
/* eslint-disable no-unused-expressions */
export const SettingsComponent: React.FC
= ({
- closeSettings,
- checkboxOnSoundPlay,
- checkboxOffSoundPlay,
+ closeSettings,
+ checkboxOnSoundPlay,
+ checkboxOffSoundPlay,
}: Props) => {
- const { settings, saveSettings } = useSettings();
+ const { settings, saveSettings } = useSettings();
- const handleCheckboxClick = (option: keyof Settings) => {
- saveSettings?.({ ...settings, [option]: !settings[option] });
- if (!settings.uiSound) {
- return;
- }
- if (settings[option]) {
- checkboxOffSoundPlay();
- } else {
- checkboxOnSoundPlay();
- }
- };
+ const handleCheckboxClick = (option: keyof Settings) => () => {
+ saveSettings?.({ ...settings, [option]: !settings[option] });
+ if (!settings.uiSound) {
+ return;
+ }
+ if (settings[option]) {
+ checkboxOffSoundPlay();
+ } else {
+ checkboxOnSoundPlay();
+ }
+ };
- const handleChangeLanguage = (nextLanguage: string) => {
- if (settings.currentLanguage === nextLanguage) {
- return;
- }
- if (nextLanguage === ru["ui.language"]) {
- saveSettings?.({
- ...settings,
- language: ru,
- currentLanguage: nextLanguage,
- });
- } else {
- saveSettings?.({
- ...settings,
- language: en,
- currentLanguage: nextLanguage,
- });
- }
- if (!settings.uiSound) {
- return;
- }
- checkboxOnSoundPlay();
- };
+ const handleChangeLanguage = (nextLanguage: string) => {
+ if (settings.currentLanguage === nextLanguage) {
+ return;
+ }
+ if (nextLanguage === ru['ui.language']) {
+ saveSettings?.({
+ ...settings,
+ language: ru,
+ currentLanguage: nextLanguage,
+ });
+ } else {
+ saveSettings?.({
+ ...settings,
+ language: en,
+ currentLanguage: nextLanguage,
+ });
+ }
+ if (!settings.uiSound) {
+ return;
+ }
+ checkboxOnSoundPlay();
+ };
- const handleChangeRange = (value: number) => {
- checkboxOnSoundPlay();
- saveSettings?.({ ...settings, musicVolume: value });
- };
+ const handleChangeRange = (value: number) => {
+ checkboxOnSoundPlay();
+ saveSettings?.({ ...settings, musicVolume: value });
+ };
- const chooseOption = (option: keyof Settings): React.ReactNode => {
- const { language } = settings;
- switch (typeof settings[option]) {
- case "boolean":
+ const chooseOption = (option: keyof Settings): React.ReactNode => {
+ const { language } = settings;
+ switch (typeof settings[option]) {
+ case 'boolean':
+ return (
+
+ );
+ case 'object':
+ return (
+
+ {language['ui.language']}
+
+ );
+ case 'number':
+ return (
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+ const renderOption = (option: keyof Settings) => {
+ const { language } = settings;
+ const valueName = `ui.${option}` as keyof typeof language;
return (
-
- );
- case "object":
- return (
-
- {language["ui.language"]}
-
- );
- case "number":
- return (
-
+
+
{language[valueName]}
+ {chooseOption(option)}
+
-
{language[valueName]}
- {chooseOption(option)}
-
+
+ {settings.language['ui.main-menu']}
+
+
+ {renderOption('uiLanguage')}
+ {renderOption('musicVolume')}
+ {renderOption('uiSound')}
+
+
+
-
- {settings.language["ui.main-menu"]}
-
-
- {renderOption("uiLanguage")}
- {renderOption("musicVolume")}
- {renderOption("uiSound")}
-
-
-
+
+
+
+
{author}
+
{`v${process.env.REACT_APP_VERSION}`}
+
+
+ {places.map((place, index) => (
+
+ ))}
+
+
+ {places[activePlace].preview.map((preview, index) => (
+
+ ))}
+
+ {isSettingsShown && (
+
+ )}
+
+ {isDialogMounted && (
+
+ )}
+
+
+
+
+ {language['error.404']}
+
+ );
+};
+
+NotFound.displayName = 'NotFound';
diff --git a/src/pages/not-found/style.scss b/src/pages/not-found/style.scss
new file mode 100644
index 0000000..c0450c9
--- /dev/null
+++ b/src/pages/not-found/style.scss
@@ -0,0 +1,25 @@
+$black: #000;
+
+.container {
+ z-index: 8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100vw;
+ height: 100vh;
+ background-color: $black;
+
+ &-video {
+ z-index: 9;
+ width: auto;
+ height: 100%;
+
+ &-fallback {
+ position: absolute;
+ z-index: 8;
+ width: 100vw;
+ height: auto;
+ opacity: .3;
+ }
+ }
+}
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
index 32d064d..a2b005a 100644
--- a/src/react-app-env.d.ts
+++ b/src/react-app-env.d.ts
@@ -1,3 +1,4 @@
///
-declare module "*.ogg";
-declare module "*.mp3";
+declare module '*.ogg';
+declare module '*.mp3';
+declare module '*.mp4';
diff --git a/src/settings-context.tsx b/src/settings-context.tsx
index 7223658..956895a 100644
--- a/src/settings-context.tsx
+++ b/src/settings-context.tsx
@@ -1,57 +1,50 @@
-import * as React from "react";
-import { createContext, useState } from "react";
+import * as React from 'react';
+import { createContext, useState } from 'react';
-import ru from "./locales/ru.json";
-import en from "./locales/en.json";
+import ru from './locales/ru.json';
+import en from './locales/en.json';
export interface Settings {
- language: typeof ru | typeof en;
- musicVolume: number;
- currentLanguage: string;
- uiLanguage: string[];
- uiSound: boolean;
+ language: typeof ru | typeof en;
+ musicVolume: number;
+ currentLanguage: string;
+ uiLanguage: string[];
+ uiSound: boolean;
}
export interface SettingsContextType {
- settings: Settings;
- saveSettings?: (value: Settings) => void;
+ settings: Settings;
+ saveSettings?: (value: Settings) => void;
}
interface Props {
- children: React.ReactNode;
- settings: Settings;
+ children: React.ReactNode;
+ settings: Settings;
}
const defaultSettings: SettingsContextType = {
- settings: {
- language: ru,
- musicVolume: 1.0,
- currentLanguage: ru["ui.language"],
- uiLanguage: [ru["ui.language"], en["ui.language"]],
- uiSound: true,
- },
+ settings: {
+ language: ru,
+ musicVolume: 1.0,
+ currentLanguage: ru['ui.language'],
+ uiLanguage: [ru['ui.language'], en['ui.language']],
+ uiSound: true,
+ },
};
const SettingsContext = createContext(defaultSettings);
-export const SettingsProvider: React.FC = ({
- children,
- settings,
-}: Props) => {
- const [currentSettings, setCurrentSettings] = useState(
- settings || defaultSettings
- );
+export const SettingsProvider: React.FC = ({ children, settings }: Props) => {
+ const [currentSettings, setCurrentSettings] = useState(settings || defaultSettings);
- const saveSettings = (value: Settings) => {
- setCurrentSettings(value);
- };
+ const saveSettings = (value: Settings) => {
+ setCurrentSettings(value);
+ };
- return (
-
- {children}
-
- );
+ return (
+
+ {children}
+
+ );
};
export default SettingsContext;
diff --git a/src/utils/bootstrap-settings.ts b/src/utils/bootstrap-settings.ts
new file mode 100644
index 0000000..700f898
--- /dev/null
+++ b/src/utils/bootstrap-settings.ts
@@ -0,0 +1,41 @@
+import { Settings } from '../settings-context';
+import en from '../locales/en.json';
+import ru from '../locales/ru.json';
+
+export function bootstrapSettings(): Settings {
+ const initialSettings: Settings = {
+ language: en,
+ musicVolume: 1.0,
+ currentLanguage: en['ui.language'],
+ uiLanguage: [en['ui.language'], ru['ui.language']],
+ uiSound: true,
+ };
+ const languageString =
+ (navigator.languages && navigator.languages[0]) ||
+ navigator.language ||
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ navigator.userLanguage;
+
+ const language = languageString.match(/\w*/i);
+ if (!language || !language.length) {
+ return initialSettings;
+ }
+
+ switch (language[0]) {
+ case 'ru':
+ return {
+ ...initialSettings,
+ language: ru,
+ currentLanguage: ru['ui.language'],
+ };
+ case 'en':
+ return {
+ ...initialSettings,
+ language: en,
+ currentLanguage: en['ui.language'],
+ };
+ default:
+ return initialSettings;
+ }
+}
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 477169e..f5124e8 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,3 +1,5 @@
+import defaultPlace from '../assets/stormwind-park';
+
export const ANIMATION_DURATION = 500;
export const LOADING_DURATION = 800;
export const PREVIEW_WIDTH = 320;
@@ -7,3 +9,11 @@ export const UI_MUSIC_VOLUME = 1;
export const SPACE = 200;
export const DEFAULT_WIDTH = 1920;
export const DEFAULT_HEIGHT = 1080;
+
+export const DIALOG_STEP_DURATION = 7000;
+
+export const DEFAULT_PLACE = `${defaultPlace.name}/0`;
+export const PATH_PLACES = '/:placeName/:viewNumber';
+
+export const author = 'obergodmar';
+export const authorUrl = 'https://github.com/obergodmar';
diff --git a/src/utils/index.ts b/src/utils/index.ts
index eda5447..b38f675 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,34 +1,27 @@
-import { LOADING_DURATION } from "./constants";
-import Sound from "../modules/sound";
+import { LOADING_DURATION } from './constants';
+import Sound from '../modules/sound';
-export {
- PREVIEW_WIDTH,
- PREVIEW_HEIGHT,
- UI_MUSIC_VOLUME,
- UI_SOUND_VOLUME,
- LOADING_DURATION,
- ANIMATION_DURATION,
- DEFAULT_HEIGHT,
- DEFAULT_WIDTH,
- SPACE,
-} from "./constants";
+export * from './constants';
+export * from './types';
+
+export { bootstrapSettings } from './bootstrap-settings';
export const delay = (): Promise =>
- new Promise((resolve) => setTimeout(resolve, LOADING_DURATION));
+ new Promise((resolve) => setTimeout(resolve, LOADING_DURATION));
export const soundLoad = (soundFile: string, soundVolume: number): Sound =>
- new Sound(soundFile, soundVolume);
+ new Sound(soundFile, soundVolume);
export const randomNumber = (min: number, max: number): number =>
- Math.floor(Math.random() * (max - min)) + min;
+ Math.floor(Math.random() * (max - min)) + min;
// eslint-disable-next-line
export function debounce(fn: (args: any) => unknown, ms: number): any {
- let timer: NodeJS.Timeout;
- return (...args: [unknown]) => {
- if (timer) {
- clearTimeout(timer);
- }
- timer = setTimeout(() => fn.apply(this, args), ms);
- };
+ let timer: NodeJS.Timeout;
+ return (...args: [unknown]) => {
+ if (timer) {
+ clearTimeout(timer);
+ }
+ timer = setTimeout(() => fn.apply(this, args), ms);
+ };
}
diff --git a/src/utils/types.ts b/src/utils/types.ts
new file mode 100644
index 0000000..718c64c
--- /dev/null
+++ b/src/utils/types.ts
@@ -0,0 +1,4 @@
+export enum Orientation {
+ bottom = 'bottom',
+ left = 'left',
+}